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

Merge pull request #146 from JsSucks/colour-picker 

Save and reset
This commit is contained in:
Alexei Stukov 2018-02-28 06:00:36 +02:00 committed by GitHub
parent 963d9e61d8 e7e79c9ac8
commit f255c010cd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,7 +13,7 @@
<div class="bd-title"> <div class="bd-title">
<h3 v-if="setting.text">{{setting.text}}</h3> <h3 v-if="setting.text">{{setting.text}}</h3>
<div class="bd-colourpicker-wrapper"> <div class="bd-colourpicker-wrapper">
<button class="bd-colourpicker-swatch" :style="{backgroundColor: `rgba(${rgbaString})`}" @click="open = !open"/> <button class="bd-colourpicker-swatch" :style="{backgroundColor: rgbaString}" @click="open = !open"/>
</div> </div>
</div> </div>
<Picker ref="picker" v-model="colors" @input="pick" :class="{'bd-hidden': !open}"/> <Picker ref="picker" v-model="colors" @input="pick" :class="{'bd-hidden': !open}"/>
@ -25,14 +25,14 @@
export default { export default {
data() { data() {
return { return {
colors: '#3e82e5', open: false,
open: false colors: '#FFF'
} }
}, },
components: { components: {
Picker Picker
}, },
props: ['setting'], props: ['setting', 'change'],
computed: { computed: {
hex() { hex() {
if (!this.$refs.picker || !this.$refs.picker.val) return this.colors; if (!this.$refs.picker || !this.$refs.picker.val) return this.colors;
@ -51,14 +51,24 @@
return this.$refs.picker.val.hsl; return this.$refs.picker.val.hsl;
}, },
rgbaString() { rgbaString() {
const rgba = this.rgba; if ('string' === typeof this.colors) return this.colors;
if (!rgba.r) return this.colors; const { rgba } = this.colors;
return `${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a}`; return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
} }
}, },
methods: { methods: {
pick(c) { pick(c) {
this.change(this.rgbaString);
}
},
beforeMount() {
this.colors = this.setting.value;
},
watch: {
setting(newVal, oldVal) {
if (newVal.value === oldVal.value) return;
this.colors = newVal.value;
this.open = false;
} }
} }
} }

1
tests/themes/Example/config.json
View File

@ -15,7 +15,6 @@
{ {
"id": "colourTest", "id": "colourTest",
"type": "colour", "type": "colour",
"subtype": "hex",
"value": "#3e82e5", "value": "#3e82e5",
"text": "Colour Picker Test", "text": "Colour Picker Test",
"hint": "Colour Picker Test Hint" "hint": "Colour Picker Test Hint"