fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-19 02:48:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve floating menu hover transfer behavior (#829)

Browse Source
This commit is contained in:
Keavon Chambers
2022-10-26 02:39:08 -07:00
committed by GitHub
parent 52048cb0d2
commit 5f1501aad3
7 changed files with 88 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/widgets/buttons/PopoverButton.vue
View File

@@ -1,6 +1,6 @@
<template>
<LayoutRow class="popover-button">
<IconButton :action="() => onClick()" :icon="icon" :size="16" data-hover-menu-spawner :tooltip="tooltip" />
<IconButton :action="() => onClick()" :icon="icon" :size="16" data-floating-menu-spawner :tooltip="tooltip" />
<FloatingMenu v-model:open="open" :type="'Popover'" :direction="'Bottom'">
<slot></slot>
</FloatingMenu>

2
frontend/src/components/widgets/inputs/DropdownInput.vue
View File

@@ -9,7 +9,7 @@
@blur="(e: FocusEvent) => unFocusDropdownBox(e)"
@keydown="(e: KeyboardEvent) => keydown(e)"
tabindex="0"
data-hover-menu-spawner
data-floating-menu-spawner
>
<IconLabel class="dropdown-icon" :icon="activeEntry.icon" v-if="activeEntry.icon" />
<span>{{ activeEntry.label }}</span>

2
frontend/src/components/widgets/inputs/FontInput.vue
View File

@@ -1,6 +1,6 @@
<template>
<LayoutRow class="font-input">
<LayoutRow class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px` }" :title="tooltip" tabindex="0" @click="toggleOpen" @keydown="keydown" data-hover-menu-spawner>
<LayoutRow class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px` }" :title="tooltip" tabindex="0" @click="toggleOpen" @keydown="keydown" data-floating-menu-spawner>
<span>{{ activeEntry?.value || "" }}</span>
<IconLabel class="dropdown-arrow" :icon="'DropdownArrow'" />
</LayoutRow>

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

@@ -8,7 +8,7 @@
class="entry"
:class="{ open: entry.ref?.isOpen }"
tabindex="0"
data-hover-menu-spawner
data-floating-menu-spawner
>
<IconLabel v-if="entry.icon" :icon="entry.icon" />
<span v-if="entry.label">{{ entry.label }}</span>

4
frontend/src/components/widgets/inputs/SwatchPairInput.vue
View File

@@ -1,11 +1,11 @@
<template>
<LayoutCol class="swatch-pair">
<LayoutRow class="secondary swatch">
<button @click="() => clickSecondarySwatch()" :style="`--swatch-color: ${secondary.toRgbaCSS()}`" data-hover-menu-spawner></button>
<button @click="() => clickSecondarySwatch()" :style="`--swatch-color: ${secondary.toRgbaCSS()}`" data-floating-menu-spawner="no-hover-transfer"></button>
<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>
<button @click="() => clickPrimarySwatch()" :style="`--swatch-color: ${primary.toRgbaCSS()}`" data-floating-menu-spawner="no-hover-transfer"></button>
<ColorPicker v-model:open="primaryOpen" :color="primary" @update:color="(color: Color) => primaryColorChanged(color)" :direction="'Right'" />
</LayoutRow>
</LayoutCol>