mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-09-25 07:58:11 +08:00
Replace the Vue frontend with Svelte
This commit is contained in:
Keavon Chambers
@@ -1,99 +1,92 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent, type PropType } from "vue";
|
||||
import { type IconName } from "@/utility-functions/icons";
|
||||
|
||||
import { type IconName } from "@/utility-functions/icons";
|
||||
import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
|
||||
import TextLabel from "@/components/widgets/labels/TextLabel.svelte";
|
||||
|
||||
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
|
||||
import TextLabel from "@/components/widgets/labels/TextLabel.vue";
|
||||
export let label: string;
|
||||
export let icon: IconName | undefined = undefined;
|
||||
export let emphasized: boolean = false;
|
||||
export let minWidth: number = 0;
|
||||
export let disabled: boolean = false;
|
||||
export let tooltip: string | undefined = undefined;
|
||||
export let sharpRightCorners: boolean = false;
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
label: { type: String as PropType<string>, required: true },
|
||||
icon: { type: String as PropType<IconName | undefined>, required: false },
|
||||
emphasized: { type: Boolean as PropType<boolean>, default: false },
|
||||
minWidth: { type: Number as PropType<number>, default: 0 },
|
||||
disabled: { type: Boolean as PropType<boolean>, default: false },
|
||||
tooltip: { type: String as PropType<string | undefined>, required: false },
|
||||
sharpRightCorners: { type: Boolean as PropType<boolean>, default: false },
|
||||
|
||||
// Callbacks
|
||||
action: { type: Function as PropType<(e: MouseEvent) => void>, required: true },
|
||||
},
|
||||
components: {
|
||||
IconLabel,
|
||||
TextLabel,
|
||||
},
|
||||
});
|
||||
// Callbacks
|
||||
// TODO: Replace this with an event binding (and on other components that do this)
|
||||
export let action: (e: MouseEvent) => void;
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
class="text-button"
|
||||
:class="{ emphasized, disabled, 'sharp-right-corners': sharpRightCorners }"
|
||||
:data-emphasized="emphasized || undefined"
|
||||
:data-disabled="disabled || undefined"
|
||||
data-text-button
|
||||
:title="tooltip"
|
||||
:style="{ 'min-width': minWidth > 0 ? `${minWidth}px` : undefined }"
|
||||
@click="(e: MouseEvent) => action(e)"
|
||||
:tabindex="disabled ? -1 : 0"
|
||||
>
|
||||
<IconLabel v-if="icon" :icon="icon" />
|
||||
<TextLabel>{{ label }}</TextLabel>
|
||||
</button>
|
||||
</template>
|
||||
<button
|
||||
class="text-button"
|
||||
class:emphasized
|
||||
class:disabled
|
||||
class:sharp-right-corners={sharpRightCorners}
|
||||
style:min-width={minWidth > 0 ? `${minWidth}px` : undefined}
|
||||
title={tooltip}
|
||||
data-emphasized={emphasized || undefined}
|
||||
data-disabled={disabled || undefined}
|
||||
data-text-button
|
||||
tabindex={disabled ? -1 : 0}
|
||||
on:click={action}
|
||||
>
|
||||
{#if icon}
|
||||
<IconLabel {icon} />
|
||||
{/if}
|
||||
<TextLabel>{label}</TextLabel>
|
||||
</button>
|
||||
|
||||
<style lang="scss">
|
||||
.text-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
height: 24px;
|
||||
margin: 0;
|
||||
padding: 0 8px;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
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 {
|
||||
--button-background-color: var(--color-6-lowergray);
|
||||
--button-text-color: var(--color-f-white);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
--button-background-color: var(--color-4-dimgray);
|
||||
--button-text-color: var(--color-8-uppergray);
|
||||
}
|
||||
|
||||
&.emphasized {
|
||||
--button-background-color: var(--color-e-nearwhite);
|
||||
--button-text-color: var(--color-2-mildblack);
|
||||
<style lang="scss" global>
|
||||
.text-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
height: 24px;
|
||||
margin: 0;
|
||||
padding: 0 8px;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
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 {
|
||||
--button-background-color: var(--color-f-white);
|
||||
--button-background-color: var(--color-6-lowergray);
|
||||
--button-text-color: var(--color-f-white);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
--button-background-color: var(--color-8-uppergray);
|
||||
--button-background-color: var(--color-4-dimgray);
|
||||
--button-text-color: var(--color-8-uppergray);
|
||||
}
|
||||
|
||||
&.emphasized {
|
||||
--button-background-color: var(--color-e-nearwhite);
|
||||
--button-text-color: var(--color-2-mildblack);
|
||||
|
||||
&:hover {
|
||||
--button-background-color: var(--color-f-white);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
--button-background-color: var(--color-8-uppergray);
|
||||
}
|
||||
}
|
||||
|
||||
& + .text-button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.icon-label {
|
||||
position: relative;
|
||||
left: -4px;
|
||||
}
|
||||
|
||||
.text-label {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
& + .text-button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.icon-label {
|
||||
position: relative;
|
||||
left: -4px;
|
||||
}
|
||||
|
||||
.text-label {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user