fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-30 03:18:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Refactor color picker floating menu (#809)

Browse Source 
* Move FloatingMenu template component

* Rewrite the ColorPicker component so it's not horrifically bad code

* Move FloatingMenu into the ColorPicker component

* Little Imaginate fixes

* Add todo
This commit is contained in:
Keavon Chambers
2022-10-23 17:29:04 -07:00
committed by GitHub
parent a9d787bb49
commit 0b9c45c9e8
14 changed files with 177 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/widgets/inputs/SwatchPairInput.vue
+7 -16
View File
@@ -2,15 +2,11 @@
<LayoutCol class="swatch-pair">
<LayoutRow class="secondary swatch">
<button @click="() => clickSecondarySwatch()" :style="`--swatch-color: ${secondary.toRgbaCSS()}`" data-hover-menu-spawner></button>
<FloatingMenu :type="'Popover'" :direction="'Right'" v-model:open="secondaryOpen">
<ColorPicker @update:color="(color: RGBA) => secondaryColorChanged(color)" :color="secondary.toRgba()" />
</FloatingMenu>
<ColorPicker v-model:open="secondaryOpen" :color="secondary" @update:color="(color: Color) => secondaryColorChanged(color)" :direction="'Right'" />
</LayoutRow>
<LayoutRow class="primary swatch">
<button @click="() => clickPrimarySwatch()" :style="`--swatch-color: ${primary.toRgbaCSS()}`" data-hover-menu-spawner></button>
<FloatingMenu :type="'Popover'" :direction="'Right'" v-model:open="primaryOpen">
<ColorPicker @update:color="(color: RGBA) => primaryColorChanged(color)" :color="primary.toRgba()" />
</FloatingMenu>
<ColorPicker v-model:open="primaryOpen" :color="primary" @update:color="(color: Color) => primaryColorChanged(color)" :direction="'Right'" />
</LayoutRow>
</LayoutCol>
</template>
@@ -68,11 +64,9 @@
<script lang="ts">
import { defineComponent, type PropType } from "vue";
import { rgbaToDecimalRgba } from "@/utility-functions/color";
import { type RGBA, type Color } from "@/wasm-communication/messages";
import { type Color } from "@/wasm-communication/messages";
import ColorPicker from "@/components/floating-menus/ColorPicker.vue";
import FloatingMenu from "@/components/floating-menus/FloatingMenu.vue";
import LayoutCol from "@/components/layout/LayoutCol.vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
@@ -97,18 +91,15 @@ export default defineComponent({
this.primaryOpen = false;
this.secondaryOpen = true;
},
primaryColorChanged(color: RGBA) {
const newColor = rgbaToDecimalRgba(color);
this.editor.instance.updatePrimaryColor(newColor.r, newColor.g, newColor.b, newColor.a);
primaryColorChanged(color: Color) {
this.editor.instance.updatePrimaryColor(color.red, color.green, color.blue, color.alpha);
},
secondaryColorChanged(color: RGBA) {
const newColor = rgbaToDecimalRgba(color);
this.editor.instance.updateSecondaryColor(newColor.r, newColor.g, newColor.b, newColor.a);
secondaryColorChanged(color: Color) {
this.editor.instance.updateSecondaryColor(color.red, color.green, color.blue, color.alpha);
},
},
components: {
ColorPicker,
FloatingMenu,
LayoutCol,
LayoutRow,
},