fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-10-02 18: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/BreadcrumbTrailButtons.svelte
+48 -66
View File
@@ -1,81 +1,63 @@
<script lang="ts">
import { defineComponent, type PropType } from "vue";
import LayoutRow from "@/components/layout/LayoutRow.svelte";
import TextButton from "@/components/widgets/buttons/TextButton.svelte";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import TextButton from "@/components/widgets/buttons/TextButton.vue";
export default defineComponent({
props: {
labels: { type: Array as PropType<string[]>, required: true },
disabled: { type: Boolean as PropType<boolean>, default: false },
tooltip: { type: String as PropType<string | undefined>, required: false },
// Callbacks
action: { type: Function as PropType<(index: number) => void>, required: true },
},
components: {
LayoutRow,
TextButton,
},
});
export let labels: string[];
export let disabled = false;
export let tooltip: string | undefined = undefined;
// Callbacks
export let action: (index: number) => void;
</script>
<template>
<LayoutRow class="breadcrumb-trail-buttons" :title="tooltip">
<TextButton
v-for="(label, index) in labels"
:key="index"
:label="label"
:emphasized="index === labels.length - 1"
:disabled="disabled"
:action="() => !disabled && index !== labels.length - 1 && action(index)"
/>
</LayoutRow>
</template>
<LayoutRow class="breadcrumb-trail-buttons" {tooltip}>
{#each labels as label, index (index)}
<TextButton {label} emphasized={index === labels.length - 1} {disabled} action={() => !disabled && index !== labels.length - 1 && action(index)} />
{/each}
</LayoutRow>
<style lang="scss">
.breadcrumb-trail-buttons {
.text-button {
position: relative;
<style lang="scss" global>
.breadcrumb-trail-buttons {
.text-button {
position: relative;
&:not(:first-of-type) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
&:not(:first-of-type) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
&::before {
content: "";
position: absolute;
top: 0;
left: -4px;
width: 0;
height: 0;
border-style: solid;
border-width: 12px 0 12px 4px;
border-color: var(--button-background-color) var(--button-background-color) var(--button-background-color) transparent;
&::before {
content: "";
position: absolute;
top: 0;
left: -4px;
width: 0;
height: 0;
border-style: solid;
border-width: 12px 0 12px 4px;
border-color: var(--button-background-color) var(--button-background-color) var(--button-background-color) transparent;
}
}
}
&:not(:last-of-type) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
&:not(:last-of-type) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
&::after {
content: "";
position: absolute;
top: 0;
right: -4px;
width: 0;
height: 0;
border-style: solid;
border-width: 12px 0 12px 4px;
border-color: transparent transparent transparent var(--button-background-color);
&::after {
content: "";
position: absolute;
top: 0;
right: -4px;
width: 0;
height: 0;
border-style: solid;
border-width: 12px 0 12px 4px;
border-color: transparent transparent transparent var(--button-background-color);
}
}
}
&:last-of-type {
// Make this non-functional button not change color on hover
pointer-events: none;
&:last-of-type {
// Make this non-functional button not change color on hover
pointer-events: none;
}
}
}
}
</style>