lightcordwarez
/
BetterDiscordApp-v2
mirror of https://github.com/JsSucks/BetterDiscordApp
1
0
Fork 0
Code Issues 3 Releases Wiki Activity

Use v-model/events instead of a change function 

Custom settings still work the same
This commit is contained in:
Samuel Elliott 2018-03-29 21:46:33 +01:00
parent 441e80e0e8
commit 9b1dd771ad
No known key found for this signature in database
GPG Key ID: 8420C7CDE43DC4D6
21 changed files with 78 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/styles/partials/generic/forms.scss
View File

@ -43,8 +43,6 @@
font-size: 12px;
}
.bd-form-divider {
height: 1px;
margin: 15px 0;

1
client/src/ui/components/BdSettings.vue
View File

@ -55,6 +55,7 @@
</SidebarView>
</div>
</template>
<script>
// Imports
import { shell } from 'electron';

1
client/src/ui/components/BdSettingsWrapper.vue
View File

@ -18,6 +18,7 @@
<BdSettings ref="settings" :active="active" :close="hideSettings" />
</div>
</template>
<script>
// Imports
import { Events, Settings } from 'modules';

2
client/src/ui/components/bd/PluginCard.vue
View File

@ -10,7 +10,7 @@
<template>
<Card :item="plugin">
<SettingSwitch v-if="plugin.type === 'plugin'" slot="toggle" :checked="plugin.enabled" :change="togglePlugin" />
<SettingSwitch v-if="plugin.type === 'plugin'" slot="toggle" :value="plugin.enabled" @input="togglePlugin" />
<ButtonGroup slot="controls">
<Button v-tooltip="'Settings (shift + click to open settings without cloning the set)'" v-if="plugin.hasSettings" :onClick="e => showSettings(e.shiftKey)"><MiSettings size="18" /></Button>
<Button v-tooltip="'Reload'" :onClick="reloadPlugin"><MiRefresh size="18" /></Button>

2
client/src/ui/components/bd/ThemeCard.vue
View File

@ -10,7 +10,7 @@
<template>
<Card :item="theme">
<SettingSwitch slot="toggle" :checked="theme.enabled" :change="toggleTheme" />
<SettingSwitch slot="toggle" :value="theme.enabled" @input="toggleTheme" />
<ButtonGroup slot="controls">
<Button v-tooltip="'Settings (shift + click to open settings without cloning the set)'" v-if="theme.hasSettings" :onClick="e => showSettings(e.shiftKey)"><MiSettings size="18" /></Button>
<Button v-tooltip="'Recompile (shift + click to reload)'" :onClick="e => reloadTheme(e.shiftKey)"><MiRefresh size="18" /></Button>

2
client/src/ui/components/bd/setting/Array.vue
View File

@ -43,7 +43,7 @@
import SettingsPanel from '../SettingsPanel.vue';
export default {
props: ['setting', 'change'],
props: ['setting'],
components: {
MiSettings, MiOpenInNew, MiMinus
},

5
client/src/ui/components/bd/setting/Bool.vue
View File

@ -12,16 +12,17 @@
<div class="bd-setting-switch">
<div class="bd-title">
<h3>{{setting.text}}</h3>
<SettingSwitch :checked="setting.value" :change="change" />
<SettingSwitch v-model="setting.value" />
</div>
<div class="bd-hint">{{setting.hint}}</div>
</div>
</template>
<script>
import SettingSwitch from '../../common/SettingSwitch.vue';
export default {
props: ['setting', 'change'],
props: ['setting'],
components: {
SettingSwitch
}

1
client/src/ui/components/bd/setting/Colour.vue
View File

@ -20,6 +20,7 @@
<div class="bd-hint">{{setting.hint}}</div>
</div>
</template>
<script>
import { Chrome as Picker } from 'vue-color';

9
client/src/ui/components/bd/setting/Custom.vue
View File

@ -24,7 +24,7 @@
import path from 'path';
export default {
props: ['setting', 'change'],
props: ['setting'],
components: {
Drawer
},
@ -34,6 +34,7 @@
const component = window.require(path.join(this.setting.path, this.setting.file));
return this.setting.component ? component[this.setting.component] : component.default ? component.default : component;
}
if (typeof this.setting.function === 'string') {
const plugin = PluginManager.getPluginByPath(this.setting.path);
if (!plugin) return;
@ -42,12 +43,14 @@
return this.componentFromHTMLElement(component, this.setting, this.change);
return component;
}
if (typeof this.setting.component === 'string') {
const plugin = PluginManager.getPluginByPath(this.setting.path);
if (!plugin) return;
const component = plugin[this.setting.component];
return component;
}
if (typeof this.setting.component === 'object') {
return this.setting.component;
}
@ -62,6 +65,10 @@
this.$el.appendChild(htmlelement);
}
};
},
change(value, ignore_disabled) {
if (this.disabled && !ignore_disabled) return;
this.setting = value;
}
}
}

7
client/src/ui/components/bd/setting/Dropdown.vue
View File

@ -12,17 +12,18 @@
<div class="bd-form-dropdown">
<div class="bd-title">
<h3 v-if="setting.text">{{setting.text}}</h3>
<Dropdown v-if="!setting.fullwidth" :options="setting.options" :selected="setting.value" :disabled="setting.disabled" :change="change" />
<Dropdown v-if="!setting.fullwidth" :options="setting.options" v-model="setting.value" :disabled="setting.disabled" />
</div>
<div class="bd-hint">{{setting.hint}}</div>
<Dropdown v-if="setting.fullwidth" :options="setting.options" :selected="setting.value" :disabled="setting.disabled" :change="change" />
<Dropdown v-if="setting.fullwidth" :options="setting.options" v-model="setting.value" :disabled="setting.disabled" />
</div>
</template>
<script>
import Dropdown from '../../common/Dropdown.vue';
export default {
props: ['setting', 'change'],
props: ['setting'],
components: {
Dropdown
}

11
client/src/ui/components/bd/setting/File.vue
View File

@ -16,12 +16,12 @@
</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">
<div class="bd-selected-file" v-for="file_path in 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)"><MiOpenInNew /></span>
<span class="bd-file-remove" @click="() => removeItem(file_path)"><MiMinus /></span>
<span class="bd-file-remove" :class="{'bd-disabled': setting.disabled}" @click="() => removeItem(file_path)"><MiMinus /></span>
</div>
</div>
</div>
@ -34,7 +34,7 @@
import path from 'path';
export default {
props: ['setting', 'change'],
props: ['setting'],
components: {
MiOpenInNew, MiMinus
},
@ -44,13 +44,14 @@
const filenames = await ClientIPC.send('bd-native-open', this.setting.dialogOptions);
if (filenames)
this.change(filenames);
this.setting.value = filenames;
},
openItem(file_path) {
shell.openItem(path.resolve(this.setting.path, file_path));
},
removeItem(file_path) {
this.change(this.setting.value.filter(f => f !== file_path));
if (this.setting.disabled) return;
this.setting = this.setting.value.filter(f => f !== file_path);
}
}
}

2
client/src/ui/components/bd/setting/Keybind.vue
View File

@ -27,13 +27,13 @@
import { KeybindSetting } from 'structs';
import { ClientIPC, ClientLogger as Logger } from 'common';
import { shell } from 'electron';
import process from 'process';
import Combokeys from 'combokeys';
import CombokeysRecord from 'combokeys/plugins/record';
const combokeys = new Combokeys(document);
CombokeysRecord(combokeys);
const process = window.require('process');
const modifierKey = process.platform === 'darwin' ? 'meta' : 'ctrl';
export default {

1
client/src/ui/components/bd/setting/Multiline.vue
View File

@ -19,6 +19,7 @@
<textarea class="bd-textarea" ref="textarea" @keyup.stop v-model="setting.value" :disabled="setting.disabled"></textarea>
</div>
</template>
<script>
export default {
props: ['setting'],

17
client/src/ui/components/bd/setting/Number.vue
View File

@ -13,29 +13,30 @@
<div class="bd-title">
<h3 v-if="setting.text">{{setting.text}}</h3>
<div class="bd-number">
<input type="number" :value="setting.value / setting.multi" :min="setting.min" :max="setting.max" :step="setting.step" @keyup.stop @input="input"/>
<input type="number" :value="setting.value / setting.multi" :min="setting.min" :max="setting.max" :step="setting.step" @keyup.stop @input="input" />
<div class="bd-number-spinner bd-flex bd-flex-col">
<div class="bd-arrow" @click="changeBy(true)"><div class="bd-up-arrow"></div></div>
<div class="bd-arrow" @click="changeBy(false)"><div class="bd-down-arrow"></div></div>
<div class="bd-arrow" @click="changeBy(1)"><div class="bd-up-arrow"></div></div>
<div class="bd-arrow" @click="changeBy(-1)"><div class="bd-down-arrow"></div></div>
</div>
</div>
</div>
<div class="bd-hint">{{setting.hint}}</div>
</div>
</template>
<script>
export default {
props: ['setting', 'change'],
props: ['setting'],
methods: {
input(e) {
let number = parseFloat(e.target.value)
if (Number.isNaN(number)) return;
this.change(number * this.setting.multi);
this.setting.value = number * this.setting.multi;
},
changeBy(positive) {
let step = this.setting.step == undefined ? 1 : this.settings.step;
this.change((this.setting.value + (positive ? step : -step)) * this.setting.multi);
changeBy(change) {
let step = this.setting.step === undefined ? 1 : this.settings.step;
this.setting.value = (this.setting.value + (change * step)) * this.setting.multi;
},
handleWheel() {} // No idea why this works but it does
},

5
client/src/ui/components/bd/setting/Radio.vue
View File

@ -16,14 +16,15 @@
</div>
<div class="bd-hint">{{setting.hint}}</div>
</div>
<RadioGroup :options="setting.options" :selected="setting.value" :disabled="setting.disabled" :change="change" />
<RadioGroup :options="setting.options" v-model="setting.value" :disabled="setting.disabled" />
</div>
</template>
<script>
import RadioGroup from '../../common/RadioGroup.vue';
export default {
props: ['setting', 'change'],
props: ['setting'],
components: {
RadioGroup
}

25
client/src/ui/components/bd/setting/Setting.vue
View File

@ -10,22 +10,23 @@
<template>
<div class="bd-form-item" :class="{'bd-form-item-changed': setting.changed, 'bd-disabled': disabled, 'bd-form-item-noheader': !setting.text, 'bd-form-item-fullwidth': setting.fullwidth}">
<BoolSetting v-if="setting.type === 'bool'" :setting="setting" :change="change" />
<DropdownSetting v-if="setting.type === 'dropdown'" :setting="setting" :change="change" />
<NumberSetting v-if="setting.type === 'number'" :setting="setting" :change="change" />
<RadioSetting v-if="setting.type === 'radio'" :setting="setting" :change="change" />
<StringSetting v-if="setting.type === 'text' && !setting.multiline" :setting="setting" :change="change" />
<BoolSetting v-if="setting.type === 'bool'" :setting="setting" />
<StringSetting v-if="setting.type === 'text' && !setting.multiline" :setting="setting" />
<MultilineTextSetting v-if="setting.type === 'text' && setting.multiline" :setting="setting" />
<SliderSetting v-if="setting.type === 'slider'" :setting="setting" :change="change" />
<NumberSetting v-if="setting.type === 'number'" :setting="setting" />
<DropdownSetting v-if="setting.type === 'dropdown'" :setting="setting" />
<RadioSetting v-if="setting.type === 'radio'" :setting="setting" />
<SliderSetting v-if="setting.type === 'slider'" :setting="setting" />
<ColourSetting v-if="setting.type === 'colour'" :setting="setting" />
<KeybindSetting v-if="setting.type === 'keybind'" :setting="setting" />
<FileSetting v-if="setting.type === 'file'" :setting="setting" :change="change" />
<FileSetting v-if="setting.type === 'file'" :setting="setting" />
<GuildSetting v-if="setting.type === 'guild'" :setting="setting" />
<ArraySetting v-if="setting.type === 'array'" :setting="setting" :change="change" />
<CustomSetting v-if="setting.type === 'custom'" :setting="setting" :change="change" />
<ArraySetting v-if="setting.type === 'array'" :setting="setting" />
<CustomSetting v-if="setting.type === 'custom'" :setting="setting" />
<div class="bd-form-divider"></div>
</div>
</template>
<script>
// Imports
import BoolSetting from './Bool.vue';
@ -68,12 +69,6 @@
disabled() {
return this.setting.disabled || false;
}
},
methods: {
change(value) {
if (this.disabled) return;
this.setting.value = value;
}
}
}
</script>

17
client/src/ui/components/bd/setting/Slider.vue
View File

@ -9,7 +9,7 @@
*/
<template>
<div class="bd-form-slider" @mouseenter="showTooltip" @mouseleave="hideTooltip">
<div class="bd-form-slider" @mouseenter="tooltip = true" @mouseleave="tooltip = false">
<div class="bd-title">
<h3>{{ setting.text }}</h3>
<div class="bd-slider">
@ -21,7 +21,7 @@
<div class="bd-slider-bar-filled" :style="{width: `${getPointPosition() * 100}%`}"></div>
</div>
<div class="bd-slider-thumb-wrap">
<div class="bd-slider-thumb" v-tooltip="{content: (value || '0') + setting.unit, show: toolTip, trigger: 'manual'}" :style="{left: `${getPointPosition() * 100}%`}"></div>
<div class="bd-slider-thumb" v-tooltip="{content: (value || '0') + setting.unit, show: tooltip, trigger: 'manual'}" :style="{left: `${getPointPosition() * 100}%`}"></div>
</div>
<input type="range" :value="value" :min="setting.min || 0" :max="setting.max || 100" :step="setting.step || 1" @keyup.stop @input="input" />
</div>
@ -30,13 +30,14 @@
<div class="bd-hint">{{ setting.hint }}</div>
</div>
</template>
<script>
export default {
props: ['setting', 'change'],
props: ['setting'],
data() {
return {
fillpercentage: 0,
toolTip: false
tooltip: false
};
},
computed: {
@ -48,16 +49,10 @@
input(e) {
let number = parseFloat(e.target.value);
if (Number.isNaN(number)) return;
this.change(number * this.setting.multi);
this.setting.value = number * this.setting.multi;
},
getPointPosition(value) {
return ((value || this.value) - (this.setting.min || 0)) / ((this.setting.max || 100) - (this.setting.min || 0));
},
showTooltip() {
this.toolTip = true;
},
hideTooltip() {
this.toolTip = false;
}
}
}

10
client/src/ui/components/bd/setting/String.vue
View File

@ -13,19 +13,15 @@
<div class="bd-title">
<h3 v-if="setting.text">{{setting.text}}</h3>
<div class="bd-textinput-wrapper">
<input type="text" :value="setting.value" @keyup.stop @input="input"/>
<input type="text" v-model="setting.value" @keyup.stop />
</div>
</div>
<div class="bd-hint">{{setting.hint}}</div>
</div>
</template>
<script>
export default {
props: ['setting', 'change'],
methods: {
input(e) {
this.change(e.target.value);
}
}
props: ['setting']
}
</script>

10
client/src/ui/components/common/Dropdown.vue
View File

@ -17,13 +17,13 @@
</span>
</div>
<div class="bd-dropdown-options bd-flex bd-flex-col" ref="options" v-if="active">
<div class="bd-dropdown-option" v-for="option in options" :class="{'bd-dropdown-option-selected': selected === option.value}" @click="change(option.value); active = false">{{ option.text }}</div>
<div class="bd-dropdown-option" v-for="option in options" :class="{'bd-dropdown-option-selected': selected === option.value}" @click="select(option)">{{ option.text }}</div>
</div>
</div>
</template>
<script>
export default {
props: ['options', 'selected', 'disabled', 'change'],
props: ['options', 'value', 'disabled'],
data() {
return {
active: false
@ -33,10 +33,14 @@
getSelectedText() {
const selected_option = this.options.find(option => option.value === this.selected);
return selected_option ? selected_option.text : this.selected;
},
select(option) {
this.$emit('input', option.value);
this.active = false;
}
},
mounted() {
document.addEventListener("click", e => {
document.addEventListener('click', e => {
let options = this.$refs.options;
if (options && !options.contains(e.target) && options !== e.target) {
this.active = false;

11
client/src/ui/components/common/RadioGroup.vue
View File

@ -10,16 +10,19 @@
<template>
<div class="bd-radio-group" :class="{'bd-disabled': disabled}">
<label class="bd-radio" v-for="option in options" :class="{'bd-radio-selected': selected === option.value}" @click="change(option.value)">
<label class="bd-radio" v-for="option in options" :class="{'bd-radio-selected': value === option.value}" @click="$emit('input', option.value)">
<div class="bd-radio-control-wrap">
<svg class="bd-radio-control" name="Checkmark" width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><polyline stroke="#3e82e5" stroke-width="2" points="3.5 9.5 7 13 15 5"></polyline></g></svg>
<svg class="bd-radio-control" name="Checkmark" width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd"><polyline stroke="#3e82e5" stroke-width="2" points="3.5 9.5 7 13 15 5"></polyline></g>
</svg>
</div>
<div class="bd-radio-text">{{option.text}}</div>
<div class="bd-radio-text">{{ option.text }}</div>
</label>
</div>
</template>
<script>
export default {
props: ['options', 'selected', 'disabled', 'change']
props: ['options', 'value', 'disabled']
}
</script>

7
client/src/ui/components/common/SettingSwitch.vue
View File

@ -9,13 +9,14 @@
*/
<template>
<label class="bd-switch-wrapper" @click="() => change(!checked)">
<label class="bd-switch-wrapper" @click="$emit('input', !value)">
<input type="checkbox" class="bd-switch-checkbox" />
<div class="bd-switch" :class="{'bd-checked': checked}" />
<div class="bd-switch" :class="{'bd-checked': value}" />
</label>
</template>
<script>
export default {
props: ['checked', 'change']
props: ['value']
}
</script>