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

Add breadcrumb trail widget (#884)

Browse Source
This commit is contained in:
Keavon Chambers
2022-12-12 09:16:40 -08:00
parent f46f113b93
commit 52117d642c
7 changed files with 132 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.vue
+81
View File
@@ -0,0 +1,81 @@
<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>
<style lang="scss">
.breadcrumb-trail-buttons {
.text-button {
position: relative;
&: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;
}
}
&: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);
}
}
&:last-of-type {
// Make this non-functional button not change color on hover
pointer-events: none;
}
}
}
</style>
<script lang="ts">
import { defineComponent, type PropType } from "vue";
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,
},
});
</script>
frontend/src/components/widgets/buttons/TextButton.vue
+12 -11
View File
@@ -27,29 +27,31 @@
box-sizing: border-box;
border: none;
border-radius: 2px;
background: var(--color-5-dullgray);
color: var(--color-e-nearwhite);
background: var(--button-background-color);
color: var(--button-text-color);
--button-background-color: var(--color-5-dullgray);
--button-text-color: var(--color-e-nearwhite);
&:hover {
background: var(--color-6-lowergray);
color: var(--color-f-white);
--button-background-color: var(--color-6-lowergray);
--button-text-color: var(--color-f-white);
}
&.disabled {
background: var(--color-4-dimgray);
color: var(--color-8-uppergray);
--button-background-color: var(--color-4-dimgray);
--button-text-color: var(--color-8-uppergray);
}
&.emphasized {
background: var(--color-e-nearwhite);
color: var(--color-2-mildblack);
--button-background-color: var(--color-e-nearwhite);
--button-text-color: var(--color-2-mildblack);
&:hover {
background: var(--color-f-white);
--button-background-color: var(--color-f-white);
}
&.disabled {
background: var(--color-8-uppergray);
--button-background-color: var(--color-8-uppergray);
}
}
@@ -64,7 +66,6 @@
}
</style>
<script lang="ts">
import { defineComponent, type PropType } from "vue";