[+] Add close functionality
This commit is contained in:
@@ -1,7 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="ColorPicker" ref="window">
|
<div id="ColorPicker" ref="window" @keydown.esc="close">
|
||||||
<div id="title-colors" class="fbox-h">
|
<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">
|
<input v-model="colorInput" spellcheck="false" @change="colorModel = colorInput">
|
||||||
</div>
|
</div>
|
||||||
<ColorPicker id="picker" :isWidget="true" pickerType="chrome" v-model:pureColor="colorModel"
|
<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
|
colorModel = '' // Color model in #ffffffff format
|
||||||
colorInput = '' // Color input in ffffff format
|
colorInput = '' // Color input in ffffff format
|
||||||
palette: string[][] = []
|
palette: string[][] = []
|
||||||
|
showClose = false
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Init
|
* Init
|
||||||
@@ -86,6 +88,13 @@ export default class MyColorPicker extends Vue
|
|||||||
return this.palette
|
return this.palette
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@Emit()
|
||||||
|
close(e?: Event): void
|
||||||
|
{
|
||||||
|
if (e) e.preventDefault()
|
||||||
|
console.log('Color picker close')
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Left click to override
|
* Left click to override
|
||||||
*/
|
*/
|
||||||
@@ -176,7 +185,11 @@ export default class MyColorPicker extends Vue
|
|||||||
font-size: 1.2em
|
font-size: 1.2em
|
||||||
padding: 0 15px
|
padding: 0 15px
|
||||||
|
|
||||||
div
|
div.close
|
||||||
|
font-size: 10px
|
||||||
|
margin-right: 10px
|
||||||
|
|
||||||
|
div.text
|
||||||
flex-grow: 1
|
flex-grow: 1
|
||||||
text-align: left
|
text-align: left
|
||||||
user-select: none
|
user-select: none
|
||||||
|
|||||||
Reference in New Issue
Block a user