mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-09-20 11:28:30 +08:00
Change MenuList checkbox to be an icon from a widget
This commit is contained in:
Keavon Chambers
@@ -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,
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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"] },
|
||||
|
||||
Reference in New Issue
Block a user