From 9bd27ec3f88b55cdda978c9592290c470550804d Mon Sep 17 00:00:00 2001 From: Keavon Chambers Date: Fri, 17 Jun 2022 17:55:04 -0700 Subject: [PATCH] Change MenuList checkbox to be an icon from a widget --- editor/src/layout/widgets.rs | 3 -- .../icon-16px-solid/checkbox-checked.svg | 4 +++ .../icon-16px-solid/checkbox-unchecked.svg | 3 ++ .../components/floating-menus/MenuList.vue | 21 ++----------- frontend/src/components/panels/NodeGraph.vue | 11 +++---- .../widgets/inputs/CheckboxInput.vue | 30 +------------------ .../widgets/inputs/MenuBarInput.vue | 2 +- frontend/src/utility-functions/icons.ts | 4 +++ 8 files changed, 21 insertions(+), 57 deletions(-) create mode 100644 frontend/assets/icon-16px-solid/checkbox-checked.svg create mode 100644 frontend/assets/icon-16px-solid/checkbox-unchecked.svg diff --git a/editor/src/layout/widgets.rs b/editor/src/layout/widgets.rs index 3aebb7f0..71be6d5d 100644 --- a/editor/src/layout/widgets.rs +++ b/editor/src/layout/widgets.rs @@ -341,8 +341,6 @@ pub struct OptionalInput { pub struct CheckboxInput { pub checked: bool, pub icon: String, - #[serde(rename = "outlineStyle")] - pub outline_style: bool, #[serde(rename = "title")] pub tooltip: String, #[serde(skip)] @@ -378,7 +376,6 @@ pub struct DropdownEntryData { pub value: String, pub label: String, pub icon: String, - pub checkbox: bool, pub shortcut: Vec, #[serde(rename = "shortcutRequiresLock")] pub shortcut_requires_lock: bool, diff --git a/frontend/assets/icon-16px-solid/checkbox-checked.svg b/frontend/assets/icon-16px-solid/checkbox-checked.svg new file mode 100644 index 00000000..9c406e6a --- /dev/null +++ b/frontend/assets/icon-16px-solid/checkbox-checked.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/assets/icon-16px-solid/checkbox-unchecked.svg b/frontend/assets/icon-16px-solid/checkbox-unchecked.svg new file mode 100644 index 00000000..91517a6e --- /dev/null +++ b/frontend/assets/icon-16px-solid/checkbox-unchecked.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/components/floating-menus/MenuList.vue b/frontend/src/components/floating-menus/MenuList.vue index 7db19737..f50ec30d 100644 --- a/frontend/src/components/floating-menus/MenuList.vue +++ b/frontend/src/components/floating-menus/MenuList.vue @@ -26,8 +26,7 @@ @pointerenter="() => onEntryPointerEnter(entry)" @pointerleave="() => onEntryPointerLeave(entry)" > - - +
@@ -93,7 +92,6 @@ margin-left: 8px; } - .entry-checkbox, .entry-icon, .no-icon { margin: 0 4px; @@ -143,14 +141,6 @@ color: var(--color-f-white); } } - - &:hover .entry-checkbox label .checkbox-box { - border: 1px solid var(--color-f-white); - - svg { - fill: var(--color-f-white); - } - } } } } @@ -164,7 +154,6 @@ import { IconName } from "@/utility-functions/icons"; import FloatingMenu, { MenuDirection } from "@/components/floating-menus/FloatingMenu.vue"; import LayoutCol from "@/components/layout/LayoutCol.vue"; import LayoutRow from "@/components/layout/LayoutRow.vue"; -import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue"; import IconLabel from "@/components/widgets/labels/IconLabel.vue"; import Separator from "@/components/widgets/labels/Separator.vue"; import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue"; @@ -177,14 +166,13 @@ interface MenuListEntryData { label?: string; icon?: IconName; font?: URL; - checkbox?: boolean; shortcut?: string[]; shortcutRequiresLock?: boolean; action?: () => void; children?: SectionsOfMenuListEntries; } -export type MenuListEntry = MenuListEntryData & { ref?: typeof FloatingMenu | typeof MenuList; checked?: boolean }; +export type MenuListEntry = MenuListEntryData & { ref?: typeof FloatingMenu | typeof MenuList }; const KEYBOARD_LOCK_USE_FULLSCREEN = "This hotkey is reserved by the browser, but becomes available in fullscreen mode"; const KEYBOARD_LOCK_SWITCH_BROWSER = "This hotkey is reserved by the browser, but becomes available in Chrome, Edge, and Opera which support the Keyboard.lock() API"; @@ -232,10 +220,6 @@ const MenuList = defineComponent({ }, methods: { onEntryClick(menuEntry: MenuListEntry): void { - // Toggle checkbox - // TODO: This is broken at the moment, fix it when we get rid of using `ref` - if (menuEntry.checkbox) menuEntry.checked = !menuEntry.checked; - // Call the action, or a default, if either are provided if (menuEntry.action) menuEntry.action(); else if (this.defaultAction) this.defaultAction(); @@ -375,7 +359,6 @@ const MenuList = defineComponent({ FloatingMenu, Separator, IconLabel, - CheckboxInput, UserInputLabel, LayoutRow, LayoutCol, diff --git a/frontend/src/components/panels/NodeGraph.vue b/frontend/src/components/panels/NodeGraph.vue index 58f23ecf..fe0867a7 100644 --- a/frontend/src/components/panels/NodeGraph.vue +++ b/frontend/src/components/panels/NodeGraph.vue @@ -200,6 +200,7 @@ background-position: calc(var(--grid-offset-x) - var(--dot-radius)) calc(var(--grid-offset-y) - var(--dot-radius)); background-image: radial-gradient(circle at var(--dot-radius) var(--dot-radius), var(--color-3-darkgray) var(--dot-radius), transparent 0); image-rendering: pixelated; + mix-blend-mode: screen; } } @@ -235,8 +236,8 @@ min-width: 120px; border-radius: 4px; background: var(--color-4-dimgray); - left: calc(var(--offset-left) * 24px); - top: calc(var(--offset-top) * 24px); + left: calc((var(--offset-left) + 0.5) * 24px); + top: calc((var(--offset-top) + 0.5) * 24px); .primary { display: flex; @@ -245,7 +246,7 @@ gap: 4px; width: 100%; height: 24px; - background: var(--color-6-lowergray); + background: var(--color-5-dullgray); border-radius: 4px; .icon-label { @@ -277,7 +278,7 @@ &::after { content: ""; position: absolute; - background: var(--color-6-lowergray); + background: var(--color-5-dullgray); width: 4px; height: 4px; top: -4px; @@ -369,7 +370,7 @@ export default defineComponent({ return sparse; }, dotRadius(): number { - return 1 + Math.floor(this.transform.scale + 0.001) / 2; + return 1 + Math.floor(this.transform.scale - 0.5 + 0.001) / 2; }, }, methods: { diff --git a/frontend/src/components/widgets/inputs/CheckboxInput.vue b/frontend/src/components/widgets/inputs/CheckboxInput.vue index 2b5c59e0..cb341486 100644 --- a/frontend/src/components/widgets/inputs/CheckboxInput.vue +++ b/frontend/src/components/widgets/inputs/CheckboxInput.vue @@ -1,5 +1,5 @@