Tweak colour picker and add animation
This commit is contained in:
Samuel Elliott
parent
4634266e14
commit
441e80e0e8
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
.vc-chrome {
|
||||
position: absolute;
|
||||
right: 60px;
|
||||
right: 0;
|
||||
top: 35px;
|
||||
border-radius: 3px;
|
||||
z-index: 9001;
|
||||
|
|
@ -34,5 +34,19 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.bd-hide) {
|
||||
animation: bd-colourpicker-slidein 0.1s ease-in;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-colourpicker-slidein {
|
||||
0% {
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
100% {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,74 +9,67 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div ref="root" class="bd-form-colourpicker">
|
||||
<div 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="show"/>
|
||||
<button ref="swatch" class="bd-colourpicker-swatch" :style="{backgroundColor: rgbaString}" @click="open = !open" />
|
||||
</div>
|
||||
</div>
|
||||
<Picker ref="picker" v-model="colors" @input="pick" :class="{'bd-hidden': !open}" :style="{top: topOffset}"/>
|
||||
<Picker ref="picker" v-model="colours" @input="pick" :class="{'bd-hide': !open}" :style="{top: topOffset}" />
|
||||
<div class="bd-hint">{{setting.hint}}</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Chrome as Picker } from 'vue-color';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
open: false,
|
||||
colors: '#FFF',
|
||||
colours: '#fff',
|
||||
topOffset: '35px'
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Picker
|
||||
},
|
||||
props: ['setting', 'change'],
|
||||
props: ['setting'],
|
||||
computed: {
|
||||
hex() {
|
||||
if (!this.$refs.picker || !this.$refs.picker.val) return this.colors;
|
||||
if (!this.$refs.picker || !this.$refs.picker.val) return this.colours;
|
||||
return this.$refs.picker.val.hex;
|
||||
},
|
||||
rgba() {
|
||||
if (!this.$refs.picker || !this.$refs.picker.val) return this.colors;
|
||||
if (!this.$refs.picker || !this.$refs.picker.val) return this.colours;
|
||||
return this.$refs.picker.val.rgba;
|
||||
},
|
||||
hsva() {
|
||||
if (!this.$refs.picker || !this.$refs.picker.val) return this.colors;
|
||||
if (!this.$refs.picker || !this.$refs.picker.val) return this.colours;
|
||||
return this.$refs.picker.val.hsv;
|
||||
},
|
||||
hsla() {
|
||||
if (!this.$refs.picker || !this.$refs.picker.val) return this.colors;
|
||||
if (!this.$refs.picker || !this.$refs.picker.val) return this.colours;
|
||||
return this.$refs.picker.val.hsl;
|
||||
},
|
||||
rgbaString() {
|
||||
if ('string' === typeof this.colors) return this.colors;
|
||||
const { rgba } = this.colors;
|
||||
return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
|
||||
if (typeof this.colours === 'string') return this.colours;
|
||||
const { r, g, b, a } = this.colours.rgba;
|
||||
return `rgba(${r}, ${g}, ${b}, ${a})`;
|
||||
}
|
||||
},
|
||||
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);
|
||||
this.setting.value = this.rgbaString;
|
||||
},
|
||||
closePopup(e) {
|
||||
if (!this.$refs.root.contains(e.target)) this.open = false;
|
||||
if (!this.$refs.swatch.contains(e.target) && !this.$refs.picker.$el.contains(e.target))
|
||||
this.open = false;
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
this.colors = this.setting.value;
|
||||
window.addEventListener('click', this.closePopup);
|
||||
this.colours = this.setting.value;
|
||||
window.addEventListener('click', this.closePopup);
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener('click', this.closePopup);
|
||||
|
|
@ -84,14 +77,18 @@
|
|||
watch: {
|
||||
setting(newVal, oldVal) {
|
||||
if (newVal.value === oldVal.value) return;
|
||||
this.colors = newVal.value;
|
||||
this.colours = newVal.value;
|
||||
this.open = false;
|
||||
},
|
||||
open(open) {
|
||||
if (!open) return;
|
||||
const offset = window.innerHeight - this.$el.getBoundingClientRect().top - 340;
|
||||
if (offset >= 0) {
|
||||
this.topOffset = '35px';
|
||||
} else {
|
||||
this.topOffset = 35 + offset > 35 ? '35px' : `${35 + offset}px`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.bd-hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
<StringSetting v-if="setting.type === 'text' && !setting.multiline" :setting="setting" :change="change" />
|
||||
<MultilineTextSetting v-if="setting.type === 'text' && setting.multiline" :setting="setting" />
|
||||
<SliderSetting v-if="setting.type === 'slider'" :setting="setting" :change="change" />
|
||||
<ColourSetting v-if="setting.type === 'colour'" :setting="setting" :change="change" />
|
||||
<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" />
|
||||
<GuildSetting v-if="setting.type === 'guild'" :setting="setting" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue