Add file setting
This commit is contained in:
parent
5fe333c3d3
commit
2d0ba0cc0e
|
@ -112,6 +112,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-plugin-settings-body {
|
.bd-plugin-settings-body {
|
||||||
|
margin-bottom: 80px;
|
||||||
|
|
||||||
.bd-setting-switch {
|
.bd-setting-switch {
|
||||||
.bd-switch-wrapper {
|
.bd-switch-wrapper {
|
||||||
|
|
|
@ -10,6 +10,12 @@
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
margin-bottom: 40px;
|
margin-bottom: 40px;
|
||||||
background: hsla(218,5%,47%,.3);
|
background: hsla(218,5%,47%,.3);
|
||||||
|
|
||||||
|
.bd-form-textinput + &,
|
||||||
|
.bd-form-fileinput + &,
|
||||||
|
.bd-setting-switch + & {
|
||||||
|
margin: 0 0 15px 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-form-warning {
|
.bd-form-warning {
|
||||||
|
@ -52,8 +58,8 @@
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-form-textinput {
|
.bd-form-textinput,
|
||||||
|
.bd-form-fileinput {
|
||||||
.bd-title {
|
.bd-title {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
|
@ -65,22 +71,6 @@
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
margin-top: 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 {
|
.bd-hint {
|
||||||
|
@ -88,8 +78,68 @@
|
||||||
color: #72767d;
|
color: #72767d;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
margin-top: 5px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
line-height: 30px;
|
line-height: 20px;
|
||||||
border-bottom: 0px solid rgba(114, 118, 126, 0.1);
|
border-bottom: 0px solid rgba(114, 118, 126, 0.1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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>
|
|
@ -12,6 +12,7 @@
|
||||||
<div class="bd-form-item">
|
<div class="bd-form-item">
|
||||||
<BoolSetting v-if="setting.type === 'bool'" :setting="setting" :change="change"/>
|
<BoolSetting v-if="setting.type === 'bool'" :setting="setting" :change="change"/>
|
||||||
<StringSetting v-if="setting.type === 'text'" :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 class="bd-form-divider"></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -19,11 +20,17 @@
|
||||||
// Imports
|
// Imports
|
||||||
import BoolSetting from './Bool.vue';
|
import BoolSetting from './Bool.vue';
|
||||||
import StringSetting from './String.vue';
|
import StringSetting from './String.vue';
|
||||||
|
import FileSetting from './File.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: ['setting', 'change'],
|
props: [
|
||||||
|
'setting',
|
||||||
|
'change'
|
||||||
|
],
|
||||||
components: {
|
components: {
|
||||||
BoolSetting, StringSetting
|
BoolSetting,
|
||||||
|
StringSetting,
|
||||||
|
FileSetting
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
* https://github.com/JsSucks - https://betterdiscord.net
|
* https://github.com/JsSucks - https://betterdiscord.net
|
||||||
*
|
*
|
||||||
* This source code is licensed under the MIT license found in the
|
* 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');
|
const path = require('path');
|
||||||
|
@ -24,7 +24,7 @@ const __pluginPath = path.resolve(__dirname, '..', '..', 'tests', 'plugins');
|
||||||
const __themePath = path.resolve(__dirname, '..', '..', 'tests', 'themes');
|
const __themePath = path.resolve(__dirname, '..', '..', 'tests', 'themes');
|
||||||
|
|
||||||
const { Utils, FileUtils, BDIpc, Config, WindowUtils, CSSEditor } = require('./modules');
|
const { Utils, FileUtils, BDIpc, Config, WindowUtils, CSSEditor } = require('./modules');
|
||||||
const { BrowserWindow } = require('electron');
|
const { BrowserWindow, dialog } = require('electron');
|
||||||
|
|
||||||
const Common = {};
|
const Common = {};
|
||||||
|
|
||||||
|
@ -56,6 +56,12 @@ class Comms {
|
||||||
|
|
||||||
BDIpc.on('bd-readFile', this.readFile);
|
BDIpc.on('bd-readFile', this.readFile);
|
||||||
BDIpc.on('bd-readJson', o => this.readFile(o, true));
|
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) {
|
async readFile(o, json) {
|
||||||
|
|
|
@ -76,6 +76,28 @@
|
||||||
"value": false,
|
"value": false,
|
||||||
"text": "Bool Test Setting 9",
|
"text": "Bool Test Setting 9",
|
||||||
"hint": "Bool Test Setting Hint 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"
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue