[+] Add close functionality

This commit is contained in:
Hykilpikonna
2021-12-11 18:17:35 -05:00
parent db05744f5b
commit 5b87dedf9e
+16 -3
View File
@@ -1,7 +1,8 @@
<template>
<div id="ColorPicker" ref="window">
<div id="ColorPicker" ref="window" @keydown.esc="close">
<div id="title-colors" class="fbox-h">
<div @mousedown="windowDrag">Colors</div>
<div class="text" @mousedown="windowDrag" @click.right.alt="close">Colors</div>
<div class="close fbox-vcenter" @click="close" v-if="showClose"><i class="fas fa-times"></i></div>
<input v-model="colorInput" spellcheck="false" @change="colorModel = colorInput">
</div>
<ColorPicker id="picker" :isWidget="true" pickerType="chrome" v-model:pureColor="colorModel"
@@ -33,6 +34,7 @@ export default class MyColorPicker extends Vue
colorModel = '' // Color model in #ffffffff format
colorInput = '' // Color input in ffffff format
palette: string[][] = []
showClose = false
/**
* Init
@@ -86,6 +88,13 @@ export default class MyColorPicker extends Vue
return this.palette
}
@Emit()
close(e?: Event): void
{
if (e) e.preventDefault()
console.log('Color picker close')
}
/**
* Left click to override
*/
@@ -176,7 +185,11 @@ export default class MyColorPicker extends Vue
font-size: 1.2em
padding: 0 15px
div
div.close
font-size: 10px
margin-right: 10px
div.text
flex-grow: 1
text-align: left
user-select: none