Ma/ueblueprint
1
0
Fork 0
mirror of https://github.com/barsdeveloper/ueblueprint.git synced 2026-05-17 19:03:27 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Color picker wip

Browse Source
This commit is contained in:
barsdeveloper
2022-09-30 21:12:10 +02:00
parent 7846aa74ea
commit 91e1e0885e
12 changed files with 212 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
js/template/ColorPickerWindowTemplate.js
View File

@@ -1,10 +1,53 @@
import { html } from "lit"
import WindowTemplate from "./WindowTemplate"
/** @typedef {import("../element/NodeElement").default} NodeElement */
/** @typedef {import("../element/WindowElement").default} WindowElement */
export default class ColorPickerWindowTemplate extends WindowTemplate {
static windowName = html`Color Picker`
#picker
ColorPickerWindowTemplate()
/** @param {Map} changedProperties */
firstUpdated(changedProperties) {
this.#picker = new iro.ColorPicker(
this.element.querySelector(".ueb-color-picker"),
{
layout: [
]
}
)
}
renderContent() {
return html`
<div class="ueb-color-picker">
<div class="ueb-color-picker-theme"></div>
<div class="ueb-color-picker-srgb"></div>
<div class="ueb-color-picker-wheel"></div>
<div class="ueb-color-picker-saturation"></div>
<div class="ueb-color-picker-value"></div>
<div class="ueb-color-picker-preview">
<div class="ueb-color-picker-preview-old"></div>
<div class="ueb-color-picker-preview-new"></div>
</div>
<div class="ueb-color-picker-advanced-toggle"></div>
<div class="ueb-color-picker-advanced">
<div class="ueb-color-picker-r"></div>
<div class="ueb-color-picker-g"></div>
<div class="ueb-color-picker-b"></div>
<div class="ueb-color-picker-a"></div>
<div class="ueb-color-picker-h"></div>
<div class="ueb-color-picker-s"></div>
<div class="ueb-color-picker-v"></div>
<div class="ueb-color-picker-hex-linear"></div>
<div class="ueb-color-picker-hex-srgb"></div>
</div>
<div class="ueb-color-picker-ok"></div>
<div class="ueb-color-picker-cancel"></div>
</div>
`
}
}