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

Add multi parameter for slider and number settings

This commit is contained in:
Samuel Elliott 2018-03-04 23:48:46 +00:00
parent 05b3abd290
commit e9f533d600
No known key found for this signature in database
GPG Key ID: 8420C7CDE43DC4D6
4 changed files with 48 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
client/src/structs/settings/types/number.js
View File

@ -12,4 +12,22 @@ import Setting from './basesetting';
export default class NumberSetting extends Setting {
/**
* The current value.
*/
get value() {
return this.args.value * this.multi;
}
set value(value) {
this.setValue(value / this.multi);
}
/**
* A number to multiply the value by.
*/
get multi() {
return this.args.multi || 1;
}
}

18
client/src/structs/settings/types/slider.js
View File

@ -12,6 +12,17 @@ import Setting from './basesetting';
export default class SliderSetting extends Setting {
/**
* The current value.
*/
get value() {
return this.args.value * this.multi;
}
set value(value) {
this.setValue(value / this.multi);
}
/**
* The value to use when the setting doesn't have a value.
*/
@ -47,6 +58,13 @@ export default class SliderSetting extends Setting {
return this.args.unit || '';
}
/**
* A number to multiply the value by.
*/
get multi() {
return this.args.multi || 1;
}
/**
* An object mapping points on the slider to labels.
*/

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

@ -13,7 +13,7 @@
<div class="bd-title">
<h3 v-if="setting.text">{{setting.text}}</h3>
<div class="bd-number">
<input type="number" :value="setting.value" :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>
@ -31,11 +31,11 @@
let number = parseFloat(e.target.value)
if (Number.isNaN(number)) return;
this.change(number);
this.change(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.change((this.setting.value + (positive ? step : -step)) * this.setting.multi);
},
handleWheel() {} // No idea why this works but it does
},

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

@ -21,9 +21,9 @@
<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: (setting.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="setting.value" :min="setting.min || 0" :max="setting.max || 100" :step="setting.step || 1" @keyup.stop @input="input" />
<input type="range" :value="value" :min="setting.min || 0" :max="setting.max || 100" :step="setting.step || 1" @keyup.stop @input="input" />
</div>
</div>
</div>
@ -39,14 +39,19 @@
toolTip: false
};
},
computed: {
value() {
return this.setting.value / this.setting.multi;
}
},
methods: {
input(e) {
let number = parseFloat(e.target.value);
if (Number.isNaN(number)) return;
this.change(number);
this.change(number * this.setting.multi);
},
getPointPosition(value) {
return ((value || this.setting.value) - (this.setting.min || 0)) / ((this.setting.max || 100) - (this.setting.min || 0));
return ((value || this.value) - (this.setting.min || 0)) / ((this.setting.max || 100) - (this.setting.min || 0));
},
showTooltip() {
this.toolTip = true;