Add file setting
This commit is contained in:
Samuel Elliott
parent
5fe333c3d3
commit
2d0ba0cc0e
|
|
@ -112,6 +112,7 @@
|
|||
}
|
||||
|
||||
.bd-plugin-settings-body {
|
||||
margin-bottom: 80px;
|
||||
|
||||
.bd-setting-switch {
|
||||
.bd-switch-wrapper {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue