157 lines
3.8 KiB
Vue
157 lines
3.8 KiB
Vue
<template>
|
|
<div class="menu-bar-input">
|
|
<div class="entry-container" v-for="entry in menuEntries" :key="entry">
|
|
<div @click="handleEntryClick(entry)" class="entry" :class="{ open: entry.ref && entry.ref.isOpen() }" data-hover-menu-spawner>
|
|
<Icon :icon="entry.icon" v-if="entry.icon" />
|
|
<span v-if="entry.label">{{ entry.label }}</span>
|
|
</div>
|
|
<MenuList :menuEntries="entry.children" :direction="MenuDirection.Bottom" :ref="(ref) => setEntryRefs(entry, ref)" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.menu-bar-input {
|
|
display: flex;
|
|
|
|
.entry-container {
|
|
display: flex;
|
|
position: relative;
|
|
|
|
.entry {
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
padding: 0 8px;
|
|
|
|
svg {
|
|
fill: var(--color-e-nearwhite);
|
|
}
|
|
|
|
&:hover,
|
|
&.open {
|
|
background: var(--color-6-lowergray);
|
|
|
|
svg {
|
|
fill: var(--color-f-white);
|
|
}
|
|
|
|
span {
|
|
color: var(--color-f-white);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from "vue";
|
|
import Icon from "../labels/Icon.vue";
|
|
import { ApplicationPlatform } from "../../window/MainWindow.vue";
|
|
import MenuList, { MenuListEntry, MenuListEntries } from "../floating-menus/MenuList.vue";
|
|
import { MenuDirection } from "../floating-menus/FloatingMenu.vue";
|
|
|
|
const wasm = import("../../../../wasm/pkg");
|
|
|
|
const menuEntries: MenuListEntries = [
|
|
{
|
|
icon: "GraphiteLogo",
|
|
ref: undefined,
|
|
children: [[{ label: "Visit project GitHub…", action: () => window.open("https://github.com/GraphiteEditor/Graphite", "_blank") }]],
|
|
},
|
|
{
|
|
label: "File",
|
|
ref: undefined,
|
|
children: [
|
|
[
|
|
{ label: "New", icon: "FileNew", shortcut: ["Ctrl", "N"] },
|
|
{ label: "Open…", shortcut: ["Ctrl", "O"] },
|
|
{
|
|
label: "Open Recent",
|
|
shortcut: ["Ctrl", "⇧", "O"],
|
|
children: [
|
|
[{ label: "Reopen Last Closed", shortcut: ["Ctrl", "⇧", "T"] }, { label: "Clear Recently Opened" }],
|
|
[
|
|
{ label: "Some Recent File.gdd" },
|
|
{ label: "Another Recent File.gdd" },
|
|
{ label: "An Older File.gdd" },
|
|
{ label: "Some Other Older File.gdd" },
|
|
{ label: "Yet Another Older File.gdd" },
|
|
],
|
|
],
|
|
},
|
|
],
|
|
[
|
|
{ label: "Close", shortcut: ["Ctrl", "W"] },
|
|
{ label: "Close All", shortcut: ["Ctrl", "Alt", "W"] },
|
|
],
|
|
[
|
|
{ label: "Save", shortcut: ["Ctrl", "S"] },
|
|
{ label: "Save As…", shortcut: ["Ctrl", "⇧", "S"] },
|
|
{ label: "Save All", shortcut: ["Ctrl", "Alt", "S"] },
|
|
{ label: "Auto-Save", shortcut: undefined },
|
|
],
|
|
[
|
|
{ label: "Import…", shortcut: ["Ctrl", "I"] },
|
|
{ label: "Export…", shortcut: ["Ctrl", "E"] },
|
|
],
|
|
[{ label: "Quit", shortcut: ["Ctrl", "Q"] }],
|
|
],
|
|
},
|
|
{
|
|
label: "Edit",
|
|
ref: undefined,
|
|
children: [
|
|
[
|
|
{ label: "Undo", shortcut: ["Ctrl", "Z"], action: async () => (await wasm).undo()},
|
|
{ label: "Redo", shortcut: ["Ctrl", "⇧", "Z"] },
|
|
],
|
|
[
|
|
{ label: "Cut", shortcut: ["Ctrl", "X"] },
|
|
{ label: "Copy", shortcut: ["Ctrl", "C"] },
|
|
{ label: "Paste", shortcut: ["Ctrl", "V"] },
|
|
],
|
|
],
|
|
},
|
|
{
|
|
label: "Document",
|
|
ref: undefined,
|
|
children: [[{ label: "Menu not yet populated" }]],
|
|
},
|
|
{
|
|
label: "View",
|
|
ref: undefined,
|
|
children: [[{ label: "Menu not yet populated" }]],
|
|
},
|
|
{
|
|
label: "Help",
|
|
ref: undefined,
|
|
children: [[{ label: "Menu not yet populated" }]],
|
|
},
|
|
];
|
|
|
|
export default defineComponent({
|
|
methods: {
|
|
setEntryRefs(menuEntry: MenuListEntry, ref: typeof MenuList) {
|
|
if (ref) menuEntry.ref = ref;
|
|
},
|
|
handleEntryClick(menuEntry: MenuListEntry) {
|
|
if (menuEntry.ref) menuEntry.ref.setOpen();
|
|
else throw new Error("The menu bar floating menu has no associated ref");
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
ApplicationPlatform,
|
|
menuEntries,
|
|
MenuDirection,
|
|
};
|
|
},
|
|
components: {
|
|
Icon,
|
|
MenuList,
|
|
},
|
|
});
|
|
</script>
|