mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-08-04 05:18:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Change MenuList checkbox to be an icon from a widget

Browse source
This commit is contained in:
Keavon Chambers 2022-06-17 17:55:04 -07:00
parent ea0dbd1290
commit 9bd27ec3f8
8 changed files with 21 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

3
editor/src/layout/widgets.rs
View file

@ -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<String>,
#[serde(rename = "shortcutRequiresLock")]
pub shortcut_requires_lock: bool,

4
frontend/assets/icon-16px-solid/checkbox-checked.svg Normal file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<polygon points="7.19,13.83 2.18,9.44 3.82,7.56 6.81,10.17 12,3.25 14,4.75" />
<path d="M14,16H2c-1.1,0-2-.9-2-2V2C0,.9,.9,0,2,0H14c1.1,0,2,.9,2,2V14c0,1.1-.9,2-2,2ZM2,1c-.55,0-1,.45-1,1V14c0,.55,.45,1,1,1H14c.55,0,1-.45,1-1V2c0-.55-.45-1-1-1H2Z" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 320 B

3
frontend/assets/icon-16px-solid/checkbox-unchecked.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path d="M14,16H2c-1.1,0-2-.9-2-2V2C0,.9,.9,0,2,0H14c1.1,0,2,.9,2,2V14c0,1.1-.9,2-2,2ZM2,1c-.55,0-1,.45-1,1V14c0,.55,.45,1,1,1H14c.55,0,1-.45,1-1V2c0-.55-.45-1-1-1H2Z" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 240 B

21
frontend/src/components/floating-menus/MenuList.vue
View file

@ -26,8 +26,7 @@
@pointerenter="() => onEntryPointerEnter(entry)"
@pointerleave="() => onEntryPointerLeave(entry)"
>
<CheckboxInput v-if="entry.checkbox" v-model:checked="entry.checked" :outlineStyle="true" :disableTabIndex="true" class="entry-checkbox" />
<IconLabel v-else-if="entry.icon && drawIcon" :icon="entry.icon" class="entry-icon" />
<IconLabel v-if="entry.icon && drawIcon" :icon="entry.icon" class="entry-icon" />
<div v-else-if="drawIcon" class="no-icon"></div>
<link v-if="entry.font" rel="stylesheet" :href="entry.font?.toString()" />
@ -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<Value = string> {
label?: string;
icon?: IconName;
font?: URL;
checkbox?: boolean;
shortcut?: string[];
shortcutRequiresLock?: boolean;
action?: () => void;
children?: SectionsOfMenuListEntries;
}
export type MenuListEntry<Value = string> = MenuListEntryData<Value> & { ref?: typeof FloatingMenu | typeof MenuList; checked?: boolean };
export type MenuListEntry<Value = string> = MenuListEntryData<Value> & { 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,

11
frontend/src/components/panels/NodeGraph.vue
View file

@ -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: {

30
frontend/src/components/widgets/inputs/CheckboxInput.vue
View file

@ -1,5 +1,5 @@
<template>
<LayoutRow class="checkbox-input" :class="{ 'outline-style': outlineStyle }">
<LayoutRow class="checkbox-input">
<input type="checkbox" :id="`checkbox-input-${id}`" :checked="checked" @change="(e) => $emit('update:checked', (e.target as HTMLInputElement).checked)" />
<label :for="`checkbox-input-${id}`" :tabindex="disableTabIndex ? -1 : 0" @keydown.enter="(e) => ((e.target as HTMLElement).previousSibling as HTMLInputElement).click()">
<LayoutRow class="checkbox-box">
@ -53,33 +53,6 @@
background: var(--color-accent-hover);
}
}
&.outline-style label {
.checkbox-box {
border: 1px solid var(--color-e-nearwhite);
padding: 1px;
background: none;
svg {
display: none;
}
}
&:hover .checkbox-box {
border: 1px solid var(--color-f-white);
}
}
&.outline-style input:checked + label {
.checkbox-box {
background: none;
svg {
display: block;
fill: var(--color-e-nearwhite);
}
}
}
}
</style>
@ -106,7 +79,6 @@ export default defineComponent({
props: {
checked: { type: Boolean as PropType<boolean>, default: false },
icon: { type: String as PropType<IconName>, default: "Checkmark" },
outlineStyle: { type: Boolean as PropType<boolean>, default: false },
disableTabIndex: { type: Boolean as PropType<boolean>, default: false },
},
components: {

2
frontend/src/components/widgets/inputs/MenuBarInput.vue
View file

@ -110,7 +110,7 @@ function makeEntries(editor: Editor): MenuListEntries {
{ label: "Save", shortcut: ["KeyControl", "KeyS"], action: async (): Promise<void> => editor.instance.save_document() },
{ label: "Save As…", shortcut: ["KeyControl", "KeyShift", "KeyS"], action: async (): Promise<void> => editor.instance.save_document() },
{ label: "Save All", shortcut: ["KeyControl", "KeyAlt", "KeyS"] },
{ label: "Auto-Save", checkbox: true, checked: true },
{ label: "Auto-Save", icon: "CheckboxChecked" },
],
[
{ label: "Import…", shortcut: ["KeyControl", "KeyI"] },

4
frontend/src/utility-functions/icons.ts
View file

@ -75,6 +75,8 @@ import BooleanIntersect from "@/../assets/icon-16px-solid/boolean-intersect.svg"
import BooleanSubtractBack from "@/../assets/icon-16px-solid/boolean-subtract-back.svg";
import BooleanSubtractFront from "@/../assets/icon-16px-solid/boolean-subtract-front.svg";
import BooleanUnion from "@/../assets/icon-16px-solid/boolean-union.svg";
import CheckboxChecked from "@/../assets/icon-16px-solid/checkbox-checked.svg";
import CheckboxUnchecked from "@/../assets/icon-16px-solid/checkbox-unchecked.svg";
import Copy from "@/../assets/icon-16px-solid/copy.svg";
import EyeHidden from "@/../assets/icon-16px-solid/eye-hidden.svg";
import EyeVisible from "@/../assets/icon-16px-solid/eye-visible.svg";
@ -120,6 +122,8 @@ const SOLID_16PX = {
BooleanSubtractBack: { component: BooleanSubtractBack, size: 16 },
BooleanSubtractFront: { component: BooleanSubtractFront, size: 16 },
BooleanUnion: { component: BooleanUnion, size: 16 },
CheckboxChecked: { component: CheckboxChecked, size: 16 },
CheckboxUnchecked: { component: CheckboxUnchecked, size: 16 },
Copy: { component: Copy, size: 16 },
EyeHidden: { component: EyeHidden, size: 16 },
EyeVisible: { component: EyeVisible, size: 16 },