fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-23 04:58:13 +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 17:16:40 +00:00
parent e5564f87a8
commit c9820efe35
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/WidgetRow.vue
+3
View File
@@ -54,6 +54,7 @@
<SwatchPairInput v-if="component.props.kind === 'SwatchPairInput'" v-bind="component.props" />
<TextAreaInput v-if="component.props.kind === 'TextAreaInput'" v-bind="component.props" @commitText="(value: string) => updateLayout(component.widgetId, value)" />
<TextButton v-if="component.props.kind === 'TextButton'" v-bind="component.props" :action="() => updateLayout(component.widgetId, undefined)" :sharpRightCorners="nextIsSuffix" />
<BreadcrumbTrailButtons v-if="component.props.kind === 'BreadcrumbTrailButtons'" v-bind="component.props" :action="(index: number) => updateLayout(component.widgetId, index)" />
<TextInput
v-if="component.props.kind === 'TextInput'"
v-bind="component.props"
@@ -104,6 +105,7 @@ import type { Widget } from "@/wasm-communication/messages";
import { isWidgetColumn, isWidgetRow, type WidgetColumn, type WidgetRow } from "@/wasm-communication/messages";
import PivotAssist from "@/components/widgets/assists/PivotAssist.vue";
import BreadcrumbTrailButtons from "@/components/widgets/buttons/BreadcrumbTrailButtons.vue";
import IconButton from "@/components/widgets/buttons/IconButton.vue";
import ParameterExposeButton from "@/components/widgets/buttons/ParameterExposeButton.vue";
import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
@@ -168,6 +170,7 @@ export default defineComponent({
},
},
components: {
BreadcrumbTrailButtons,
CheckboxInput,
ColorInput,
DropdownInput,
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";