From 2d0ba0cc0e513b2a2b864688f07a981dc4952ffb Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Fri, 2 Feb 2018 23:42:12 +0000
Subject: [PATCH] Add file setting

---
 .../partials/bdsettings/plugincard.scss       |  1 +
 client/src/styles/partials/generic/forms.scss | 90 ++++++++++++++-----
 .../ui/components/bd/pluginsetting/File.vue   | 59 ++++++++++++
 .../bd/pluginsetting/PluginSetting.vue        | 11 ++-
 core/src/main.js                              | 10 ++-
 tests/plugins/Example/config.json             | 24 ++++-
 6 files changed, 170 insertions(+), 25 deletions(-)
 create mode 100644 client/src/ui/components/bd/pluginsetting/File.vue

diff --git a/client/src/styles/partials/bdsettings/plugincard.scss b/client/src/styles/partials/bdsettings/plugincard.scss
index 02578185..40f26646 100644
--- a/client/src/styles/partials/bdsettings/plugincard.scss
+++ b/client/src/styles/partials/bdsettings/plugincard.scss
@@ -112,6 +112,7 @@
 }
 
 .bd-plugin-settings-body {
+    margin-bottom: 80px;
 
     .bd-setting-switch {
         .bd-switch-wrapper {
diff --git a/client/src/styles/partials/generic/forms.scss b/client/src/styles/partials/generic/forms.scss
index ff75926e..a5ad77c2 100644
--- a/client/src/styles/partials/generic/forms.scss
+++ b/client/src/styles/partials/generic/forms.scss
@@ -10,6 +10,12 @@
     margin-top: 8px;
     margin-bottom: 40px;
     background: hsla(218,5%,47%,.3);
+
+    .bd-form-textinput + &,
+    .bd-form-fileinput + &,
+    .bd-setting-switch + & {
+        margin: 0 0 15px 0;
+    }
 }
 
 .bd-form-warning {
@@ -52,8 +58,8 @@
     user-select: none;
 }
 
-.bd-form-textinput {
-
+.bd-form-textinput,
+.bd-form-fileinput {
     .bd-title {
         display: flex;
 
@@ -65,22 +71,6 @@
             margin-bottom: 0;
             margin-top: 0;
         }
-
-        input[type="text"] {
-            background: transparent;
-            border: none;
-            color: #b9bbbe;
-            border-bottom: 2px solid rgba(114, 118, 126, 0.3);
-            outline: none;
-            line-height: 24px;
-            font-size: 100%;
-            font-weight: 500;
-
-            &:focus {
-                color: #FFF;
-                border-color: $colbdblue;
-            }
-        }
     }
 
     .bd-hint {
@@ -88,8 +78,68 @@
         color: #72767d;
         font-size: 14px;
         font-weight: 500;
+        margin-top: 5px;
         margin-bottom: 15px;
-        line-height: 30px;
+        line-height: 20px;
         border-bottom: 0px solid rgba(114, 118, 126, 0.1);
     }
-}
\ No newline at end of file
+}
+
+.bd-form-textinput {
+    input[type="text"] {
+        background: transparent;
+        border: none;
+        color: #b9bbbe;
+        border-bottom: 2px solid rgba(114, 118, 126, 0.3);
+        outline: none;
+        line-height: 24px;
+        font-size: 100%;
+        font-weight: 500;
+
+        &:focus {
+            color: #FFF;
+            border-color: $colbdblue;
+        }
+    }
+}
+
+.bd-form-fileinput {
+    .bd-button.bd-button-primary {
+        padding: 3px 8px;
+        border-radius: 3px;
+        font-size: 12px;
+        font-weight: 400;
+    }
+
+    .bd-selected-files {
+        margin: 15px 0;
+
+        .bd-selected-file {
+            margin: 10px 0;
+            color: #aaa;
+            font-size: 15px;
+            display: flex;
+
+            .bd-file-path {
+                flex: 1 1;
+            }
+
+            .bd-file-open,
+            .bd-file-remove {
+                flex: 0 0;
+                margin-left: 5px;
+
+                svg {
+                    width: 16px;
+                    height: 16px;
+                    cursor: pointer;
+                    fill: #ccc;
+
+                    &:hover {
+                        fill: #fff;
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/client/src/ui/components/bd/pluginsetting/File.vue b/client/src/ui/components/bd/pluginsetting/File.vue
new file mode 100644
index 00000000..fe961574
--- /dev/null
+++ b/client/src/ui/components/bd/pluginsetting/File.vue
@@ -0,0 +1,59 @@
+/**
+ * BetterDiscord Plugin Setting File Component
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
+
+<template>
+    <div class="bd-form-fileinput">
+        <div class="bd-title">
+            <h3>{{ setting.text }}</h3>
+            <button class="bd-button bd-button-primary" @click="openDialog">Select</button>
+        </div>
+        <div class="bd-hint">{{ setting.hint }}</div>
+        <div class="bd-selected-files">
+            <div class="bd-selected-file" v-for="file_path in this.setting.value">
+                <!-- Maybe add a preview here later? -->
+                <!-- For now just show the selected file path -->
+                <span class="bd-file-path">{{ file_path }}</span>
+                <span class="bd-file-open" @click="() => openItem(file_path)"><MiOpen /></span>
+                <span class="bd-file-remove" @click="() => removeItem(file_path)"><MiMinus /></span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { shell } from 'electron';
+    import { ClientIPC } from 'common';
+    import MiOpen from 'vue-material-design-icons/open-in-new.vue';
+    import MiMinus from 'vue-material-design-icons/minus.vue';
+
+    export default {
+        props: [
+            'setting',
+            'change'
+        ],
+        components: {
+            MiOpen,
+            MiMinus
+        },
+        methods: {
+            async openDialog(e) {
+                const filenames = await ClientIPC.send('bd-native-open', this.setting.dialogOptions);
+                if (filenames)
+                    this.change(this.setting.id, filenames);
+            },
+            openItem(file_path) {
+                shell.openItem(file_path);
+            },
+            removeItem(file_path) {
+                this.change(this.setting.id, this.setting.value.filter(f => f !== file_path));
+            }
+        }
+    }
+</script>
diff --git a/client/src/ui/components/bd/pluginsetting/PluginSetting.vue b/client/src/ui/components/bd/pluginsetting/PluginSetting.vue
index 39644a85..cecd8de3 100644
--- a/client/src/ui/components/bd/pluginsetting/PluginSetting.vue
+++ b/client/src/ui/components/bd/pluginsetting/PluginSetting.vue
@@ -12,6 +12,7 @@
     <div class="bd-form-item">
         <BoolSetting v-if="setting.type === 'bool'" :setting="setting" :change="change"/>
         <StringSetting v-if="setting.type === 'text'" :setting="setting" :change="change"/>
+        <FileSetting v-if="setting.type === 'file'" :setting="setting" :change="change"/>
         <div class="bd-form-divider"></div>
     </div>
 </template>
@@ -19,11 +20,17 @@
     // Imports
     import BoolSetting from './Bool.vue';
     import StringSetting from './String.vue';
+    import FileSetting from './File.vue';
 
     export default {
-        props: ['setting', 'change'],
+        props: [
+            'setting',
+            'change'
+        ],
         components: {
-            BoolSetting, StringSetting
+            BoolSetting,
+            StringSetting,
+            FileSetting
         }
     }
 </script>
diff --git a/core/src/main.js b/core/src/main.js
index 81ea7a52..05b1b78a 100644
--- a/core/src/main.js
+++ b/core/src/main.js
@@ -5,7 +5,7 @@
  * https://github.com/JsSucks - https://betterdiscord.net
  *
  * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree. 
+ * LICENSE file in the root directory of this source tree.
 */
 
 const path = require('path');
@@ -24,7 +24,7 @@ const __pluginPath = path.resolve(__dirname, '..', '..', 'tests', 'plugins');
 const __themePath = path.resolve(__dirname, '..', '..', 'tests', 'themes');
 
 const { Utils, FileUtils, BDIpc, Config, WindowUtils, CSSEditor } = require('./modules');
-const { BrowserWindow } = require('electron');
+const { BrowserWindow, dialog } = require('electron');
 
 const Common = {};
 
@@ -56,6 +56,12 @@ class Comms {
 
         BDIpc.on('bd-readFile', this.readFile);
         BDIpc.on('bd-readJson', o => this.readFile(o, true));
+
+        BDIpc.on('bd-native-open', o => {
+            dialog.showOpenDialog(BrowserWindow.fromWebContents(o.ipcEvent.sender), o.args, filenames => {
+                o.reply(filenames);
+            });
+        });
     }
 
     async readFile(o, json) {
diff --git a/tests/plugins/Example/config.json b/tests/plugins/Example/config.json
index 491f8eb7..a4c99513 100644
--- a/tests/plugins/Example/config.json
+++ b/tests/plugins/Example/config.json
@@ -76,6 +76,28 @@
             "value": false,
             "text": "Bool Test Setting 9",
             "hint": "Bool Test Setting Hint 9"
+        },
+        {
+            "id": "test-setting-file-1",
+            "type": "file",
+            "value": null,
+            "text": "Test File Setting 1",
+            "hint": "File selector with the default options."
+        },
+        {
+            "id": "test-setting-file-2",
+            "type": "file",
+            "value": null,
+            "text": "Test File Setting 2",
+            "hint": "File selector with custom button text and the ability to open directories and multiple items.",
+            "dialogOptions": {
+                "buttonLabel": "Select",
+                "properties": [
+                    "openFile",
+                    "openDirectory",
+                    "multiSelections"
+                ]
+            }
         }
     ]
-}
\ No newline at end of file
+}