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

Replace the Vue frontend with Svelte

Browse Source
This commit is contained in:
Keavon Chambers
2023-03-10 03:54:39 -08:00
parent e539e43483
commit 6e20ea538b
83 changed files with 10013 additions and 19687 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/widgets/buttons/PopoverButton.svelte
+57 -76
View File
@@ -1,90 +1,71 @@
<script lang="ts">
import { defineComponent, type PropType } from "vue";
import { type IconName } from "@/utility-functions/icons";
import { type IconName } from "@/utility-functions/icons";
import FloatingMenu from "@/components/layout/FloatingMenu.svelte";
import LayoutRow from "@/components/layout/LayoutRow.svelte";
import IconButton from "@/components/widgets/buttons/IconButton.svelte";
import FloatingMenu from "@/components/layout/FloatingMenu.vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import IconButton from "@/components/widgets/buttons/IconButton.vue";
export let icon: IconName = "DropdownArrow";
export let tooltip: string | undefined = undefined;
export let disabled = false;
// Callbacks
export let action: (() => void) | undefined = undefined;
export default defineComponent({
props: {
icon: { type: String as PropType<IconName>, default: "DropdownArrow" },
tooltip: { type: String as PropType<string | undefined>, required: false },
disabled: { type: Boolean as PropType<boolean>, default: false },
let open = false;
// Callbacks
action: { type: Function as PropType<() => void>, required: false },
},
data() {
return {
open: false,
};
},
methods: {
onClick() {
this.open = true;
this.action?.();
},
},
components: {
FloatingMenu,
IconButton,
LayoutRow,
},
});
function onClick() {
open = true;
action?.();
}
</script>
<template>
<LayoutRow class="popover-button">
<IconButton :class="{ open }" :disabled="disabled" :action="() => onClick()" :icon="icon" :size="16" data-floating-menu-spawner :tooltip="tooltip" />
<FloatingMenu v-model:open="open" :type="'Popover'" :direction="'Bottom'">
<slot></slot>
</FloatingMenu>
</LayoutRow>
</template>
<LayoutRow class="popover-button">
<IconButton classes={{ open }} {disabled} action={() => onClick()} icon={icon || "DropdownArrow"} size={16} {tooltip} data-floating-menu-spawner />
<FloatingMenu {open} on:open={({ detail }) => (open = detail)} type="Popover" direction="Bottom">
<slot />
</FloatingMenu>
</LayoutRow>
<style lang="scss">
.popover-button {
position: relative;
width: 16px;
height: 24px;
flex: 0 0 auto;
<style lang="scss" global>
.popover-button {
position: relative;
width: 16px;
height: 24px;
flex: 0 0 auto;
.floating-menu {
left: 50%;
bottom: 0;
}
.icon-button {
width: 100%;
height: 100%;
padding: 0;
border: none;
border-radius: 2px;
background: var(--color-1-nearblack);
fill: var(--color-e-nearwhite);
&:hover,
&.open {
background: var(--color-6-lowergray);
fill: var(--color-f-white);
.floating-menu {
left: 50%;
bottom: 0;
}
&.disabled {
background: var(--color-2-mildblack);
fill: var(--color-8-uppergray);
.icon-button.icon-button {
width: 100%;
height: 100%;
padding: 0;
border: none;
border-radius: 2px;
background: var(--color-1-nearblack);
fill: var(--color-e-nearwhite);
&:hover,
&.open {
background: var(--color-6-lowergray);
fill: var(--color-f-white);
}
&.disabled {
background: var(--color-2-mildblack);
fill: var(--color-8-uppergray);
}
}
// TODO: Refactor this and other complicated cases dealing with joined widget margins and border-radius by adding a single standard set of classes: joined-first, joined-inner, and joined-last
div[class*="-input"] + & {
margin-left: 1px;
.icon-button {
border-radius: 0 2px 2px 0;
}
}
}
// TODO: Refactor this and other complicated cases dealing with joined widget margins and border-radius by adding a single standard set of classes: joined-first, joined-inner, and joined-last
div[class*="-input"] + & {
margin-left: 1px;
.icon-button {
border-radius: 0 2px 2px 0;
}
}
}
</style>