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

Add styled scrollbars (#231)

Browse Source
This commit is contained in:
Keavon Chambers
2021-07-01 22:08:23 -07:00
parent df6f3fd9e8
commit 55d2fc4408
6 changed files with 95 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/web/src/components/widgets/floating-menus/FloatingMenu.vue
+2 -1
View File
@@ -2,7 +2,7 @@
<div class="floating-menu" :class="[direction.toLowerCase(), type.toLowerCase()]" v-if="open" ref="floatingMenu">
<div class="tail" v-if="type === MenuType.Popover"></div>
<div class="floating-menu-container" ref="floatingMenuContainer">
<div class="floating-menu-content" ref="floatingMenuContent" :style="floatingMenuContentStyle">
<div class="floating-menu-content" :class="{ 'scrollable-y': scrollable }" ref="floatingMenuContent" :style="floatingMenuContentStyle">
<slot></slot>
</div>
</div>
@@ -193,6 +193,7 @@ export default defineComponent({
type: { type: String, required: true },
windowEdgeMargin: { type: Number, default: 8 },
minWidth: { type: Number, default: 0 },
scrollable: { type: Boolean, default: false },
},
data() {
return {
client/web/src/components/widgets/floating-menus/MenuList.vue
+13 -15
View File
@@ -1,5 +1,5 @@
<template>
<FloatingMenu :class="'menu-list'" :direction="direction" :type="MenuType.Dropdown" ref="floatingMenu" :windowEdgeMargin="0" data-hover-menu-keep-open>
<FloatingMenu :class="'menu-list'" :direction="direction" :type="MenuType.Dropdown" ref="floatingMenu" :windowEdgeMargin="0" :scrollable="scrollable" data-hover-menu-keep-open>
<template v-for="(section, sectionIndex) in menuEntries" :key="sectionIndex">
<Separator :type="SeparatorType.List" :direction="SeparatorDirection.Vertical" v-if="sectionIndex > 0" />
<div
@@ -25,6 +25,7 @@
v-model:active-entry="currentEntry"
:minWidth="minWidth"
:drawIcon="drawIcon"
:scrollable="scrollable"
:ref="(ref) => setEntryRefs(entry, ref)"
/>
</div>
@@ -144,8 +145,10 @@ const MenuList = defineComponent({
direction: { type: String as PropType<MenuDirection>, default: MenuDirection.Bottom },
menuEntries: { type: Array as PropType<SectionsOfMenuListEntries>, required: true },
activeEntry: { type: Object as PropType<MenuListEntry>, required: false },
defaultAction: { type: Function as PropType<Function | undefined>, required: false },
minWidth: { type: Number, default: 0 },
drawIcon: { type: Boolean, default: false },
scrollable: { type: Boolean, default: false },
},
methods: {
setEntryRefs(menuEntry: MenuListEntry, ref: typeof FloatingMenu) {
@@ -154,32 +157,27 @@ const MenuList = defineComponent({
handleEntryClick(menuEntry: MenuListEntry) {
(this.$refs.floatingMenu as typeof FloatingMenu).setClosed();
if (menuEntry.action) {
menuEntry.action();
} else {
this.$emit("update:activeEntry", menuEntry);
}
if (menuEntry.action) menuEntry.action();
else if (this.defaultAction) this.defaultAction();
else this.$emit("update:activeEntry", menuEntry);
},
handleEntryMouseEnter(menuEntry: MenuListEntry) {
if (!menuEntry.children || !menuEntry.children.length) return;
if (menuEntry.ref) {
menuEntry.ref.setOpen();
} else throw new Error("The menu bar floating menu has no associated ref");
if (menuEntry.ref) menuEntry.ref.setOpen();
else throw new Error("The menu bar floating menu has no associated ref");
},
handleEntryMouseLeave(menuEntry: MenuListEntry) {
if (!menuEntry.children || !menuEntry.children.length) return;
if (menuEntry.ref) {
menuEntry.ref.setClosed();
} else throw new Error("The menu bar floating menu has no associated ref");
if (menuEntry.ref) menuEntry.ref.setClosed();
else throw new Error("The menu bar floating menu has no associated ref");
},
isMenuEntryOpen(menuEntry: MenuListEntry): boolean {
if (!menuEntry.children || !menuEntry.children.length) return false;
if (menuEntry.ref) {
return menuEntry.ref.isOpen();
}
if (menuEntry.ref) return menuEntry.ref.isOpen();
return false;
},
setOpen() {