Merge pull request #148 from JsSucks/colour-picker-styling
Colour picker styling
This commit is contained in:
commit
4f451e3822
|
@ -23,3 +23,4 @@ Installers/**/*/packages
|
|||
dist/
|
||||
user.config.json
|
||||
tests/data
|
||||
/tests/themes/SimplerFlat
|
||||
|
|
|
@ -101,6 +101,10 @@ export default class ThemeManager extends ContentManager {
|
|||
const { type, id, value } = setting;
|
||||
const name = id.replace(/[^a-zA-Z0-9-]/g, '-').replace(/--/g, '-');
|
||||
|
||||
if (type === 'colour' || type === 'color') {
|
||||
return [name, value];
|
||||
}
|
||||
|
||||
if (type === 'array') {
|
||||
const items = JSON.parse(JSON.stringify(value)) || [];
|
||||
const settings_json = JSON.stringify(setting.settings);
|
||||
|
|
|
@ -23,9 +23,10 @@
|
|||
|
||||
.vc-chrome {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
right: 60px;
|
||||
top: 35px;
|
||||
border-radius: 3px;
|
||||
z-index: 9001;
|
||||
|
||||
.vc-chrome-body {
|
||||
background: #36393e;
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
<div class="bd-settings-modal" :class="{'bd-edited': changed}">
|
||||
<Modal :headerText="modal.headertext" :close="modal.close" :class="{'bd-modal-out': modal.closing}">
|
||||
<SettingsPanel :settings="configCache" :schemes="modal.schemes" :change="settingChange" slot="body" class="bd-settings-modal-body" />
|
||||
<div slot="footer" class="bd-footer-alert" :class="{'bd-active': changed, 'bd-warn': warnclose}">
|
||||
<div slot="footer" class="bd-footer-alert" :class="{'bd-active': changed, 'bd-warn': warnclose}" :style="{pointerEvents: changed ? 'all' : 'none'}">
|
||||
<div class="bd-footer-alert-text">Unsaved changes</div>
|
||||
<div class="bd-button bd-reset-button bd-tp" :class="{'bd-disabled': saving}" @click="resetSettings">Reset</div>
|
||||
<div class="bd-button bd-ok" :class="{'bd-disabled': saving}" @click="saveSettings">
|
||||
|
|
|
@ -9,14 +9,14 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-form-colourpicker">
|
||||
<div ref="root" class="bd-form-colourpicker">
|
||||
<div class="bd-title">
|
||||
<h3 v-if="setting.text">{{setting.text}}</h3>
|
||||
<div class="bd-colourpicker-wrapper">
|
||||
<button class="bd-colourpicker-swatch" :style="{backgroundColor: rgbaString}" @click="open = !open"/>
|
||||
<button class="bd-colourpicker-swatch" :style="{backgroundColor: rgbaString}" @click="show"/>
|
||||
</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}" :style="{top: topOffset}"/>
|
||||
<div class="bd-hint">{{setting.hint}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -26,7 +26,8 @@
|
|||
data() {
|
||||
return {
|
||||
open: false,
|
||||
colors: '#FFF'
|
||||
colors: '#FFF',
|
||||
topOffset: '35px'
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
@ -57,12 +58,28 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
show() {
|
||||
const offset = window.innerHeight - this.$refs.root.getBoundingClientRect().top - 340;
|
||||
if (offset >= 0) {
|
||||
this.topOffset = '35px';
|
||||
} else {
|
||||
this.topOffset = 35 + offset > 35 ? '35px' : `${35 + offset}px`;
|
||||
}
|
||||
this.open = true;
|
||||
},
|
||||
pick(c) {
|
||||
this.change(this.rgbaString);
|
||||
},
|
||||
closePopup(e) {
|
||||
if (!this.$refs.root.contains(e.target)) this.open = false;
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
this.colors = this.setting.value;
|
||||
window.addEventListener('click', this.closePopup);
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener('click', this.closePopup);
|
||||
},
|
||||
watch: {
|
||||
setting(newVal, oldVal) {
|
||||
|
|
Loading…
Reference in New Issue