add top offset

This commit is contained in:
Jiiks 2018-02-28 08:55:30 +02:00
parent 67142ca7db
commit 7046316d60
1 changed files with 13 additions and 3 deletions

View File

@ -13,10 +13,10 @@
<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,6 +58,15 @@
}
},
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);
},