fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-27 21:58:12 +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/ParameterExposeButton.svelte
+34 -44
View File
@@ -1,59 +1,49 @@
<script lang="ts">
import { defineComponent, type PropType } from "vue";
import LayoutRow from "@/components/layout/LayoutRow.svelte";
import LayoutRow from "@/components/layout/LayoutRow.vue";
export default defineComponent({
props: {
exposed: { type: Boolean as PropType<boolean>, required: true },
dataType: { type: String as PropType<string>, required: true },
tooltip: { type: String as PropType<string | undefined>, required: false },
// Callbacks
action: { type: Function as PropType<(e?: MouseEvent) => void>, required: true },
},
components: { LayoutRow },
});
export let exposed: boolean;
export let dataType: string;
export let tooltip: string | undefined = undefined;
// Callbacks
export let action: (e?: MouseEvent) => void;
</script>
<template>
<LayoutRow class="parameter-expose-button">
<button :class="{ exposed }" :style="{ '--data-type-color': `var(--color-data-${dataType})` }" @click="(e: MouseEvent) => action(e)" :title="tooltip" :tabindex="0"></button>
</LayoutRow>
</template>
<LayoutRow class="parameter-expose-button">
<button class:exposed style:--data-type-color={`var(--color-data-${dataType})`} on:click={action} title={tooltip} tabindex="0" />
</LayoutRow>
<style lang="scss">
.parameter-expose-button {
display: flex;
align-items: center;
flex: 0 0 auto;
max-height: 24px;
button {
<style lang="scss" global>
.parameter-expose-button {
display: flex;
align-items: center;
flex: 0 0 auto;
width: 8px;
height: 8px;
margin: 0;
padding: 0;
border: none;
border-radius: 50%;
max-height: 24px;
&:not(.exposed) {
background: none;
border: 1px solid var(--data-type-color);
button {
flex: 0 0 auto;
width: 8px;
height: 8px;
margin: 0;
padding: 0;
border: none;
border-radius: 50%;
&:hover {
background: var(--color-6-lowergray);
&:not(.exposed) {
background: none;
border: 1px solid var(--data-type-color);
&:hover {
background: var(--color-6-lowergray);
}
}
}
&.exposed {
background: var(--data-type-color);
&.exposed {
background: var(--data-type-color);
&:hover {
border: 1px solid var(--color-f-white);
&:hover {
border: 1px solid var(--color-f-white);
}
}
}
}
}
</style>