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

Clean up widget type naming conventions

Browse Source
This commit is contained in:
Keavon Chambers
2021-07-16 15:57:42 -07:00
parent c453199704
commit c2f735504d
13 changed files with 77 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/web/src/components/widgets/buttons/IconButton.vue
+3 -3
View File
@@ -1,6 +1,6 @@
<template>
<button class="icon-button" :class="`size-${String(size)}`">
<Icon :icon="icon" />
<IconLabel :icon="icon" />
</button>
</template>
@@ -53,7 +53,7 @@
<script lang="ts">
import { defineComponent } from "vue";
import Icon from "@/components/widgets/labels/Icon.vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
export default defineComponent({
props: {
@@ -61,6 +61,6 @@ export default defineComponent({
size: { type: Number, required: true },
gapAfter: { type: Boolean, default: false },
},
components: { Icon },
components: { IconLabel },
});
</script>
client/web/src/components/widgets/floating-menus/MenuList.vue
+6 -6
View File
@@ -12,10 +12,10 @@
@mouseleave="handleEntryMouseLeave(entry)"
:data-hover-menu-spawner-extend="entry.children && []"
>
<Icon :icon="entry.icon" v-if="entry.icon && drawIcon" />
<IconLabel :icon="entry.icon" v-if="entry.icon && drawIcon" />
<div class="no-icon" v-else-if="drawIcon" />
<span class="entry-label">{{ entry.label }}</span>
<Icon :icon="'Info'" v-if="entry.shortcutRequiresLock && !fullscreen.keyboardLocked" :title="keyboardLockInfoMessage" />
<IconLabel :icon="'Info'" v-if="entry.shortcutRequiresLock && !fullscreen.keyboardLocked" :title="keyboardLockInfoMessage" />
<UserInputLabel v-else-if="entry.shortcut && entry.shortcut.length" :inputKeys="[entry.shortcut]" />
<div class="submenu-arrow" v-if="entry.children && entry.children.length"></div>
<div class="no-submenu-arrow" v-else></div>
@@ -53,7 +53,7 @@
flex: 0 0 auto;
}
.icon svg {
.icon-label svg {
fill: var(--color-e-nearwhite);
}
@@ -66,7 +66,7 @@
margin-left: 8px;
}
.icon,
.icon-label,
.no-icon {
margin: 0 4px;
@@ -125,7 +125,7 @@ import { defineComponent, PropType } from "vue";
import { keyboardLockApiSupported } from "@/utilities/fullscreen";
import FloatingMenu, { MenuDirection, MenuType } from "@/components/widgets/floating-menus/FloatingMenu.vue";
import Separator, { SeparatorDirection, SeparatorType } from "@/components/widgets/separators/Separator.vue";
import Icon from "@/components/widgets/labels/Icon.vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
export type MenuListEntries = Array<MenuListEntry>;
@@ -259,7 +259,7 @@ const MenuList = defineComponent({
components: {
FloatingMenu,
Separator,
Icon,
IconLabel,
UserInputLabel,
},
});
client/web/src/components/widgets/inputs/CheckboxInput.vue
+5 -5
View File
@@ -3,7 +3,7 @@
<input type="checkbox" :id="`checkbox-${id}`" :checked="checked" @input="(e) => $emit('update:checked', e.target.checked)" />
<label :for="`checkbox-${id}`">
<div class="checkbox-box">
<Icon :icon="icon" />
<IconLabel :icon="icon" />
</div>
</label>
</div>
@@ -26,7 +26,7 @@
padding: 2px;
border-radius: 2px;
.icon {
.icon-label {
fill: var(--color-2-mildblack);
}
}
@@ -40,7 +40,7 @@
.checkbox-box {
background: var(--color-accent);
.icon {
.icon-label {
fill: var(--color-f-white);
}
}
@@ -54,7 +54,7 @@
<script lang="ts">
import { defineComponent } from "vue";
import Icon from "@/components/widgets/labels/Icon.vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
export default defineComponent({
data() {
@@ -71,6 +71,6 @@ export default defineComponent({
checked: { type: Boolean, required: true },
icon: { type: String, default: "Checkmark" },
},
components: { Icon },
components: { IconLabel },
});
</script>
client/web/src/components/widgets/inputs/DropdownInput.vue
+4 -4
View File
@@ -1,9 +1,9 @@
<template>
<div class="dropdown-input">
<div class="dropdown-box" :style="{ minWidth: `${minWidth}px` }" @click="clickDropdownBox" data-hover-menu-spawner>
<Icon :class="'dropdown-icon'" :icon="activeEntry.icon" v-if="activeEntry.icon" />
<IconLabel :class="'dropdown-icon'" :icon="activeEntry.icon" v-if="activeEntry.icon" />
<span>{{ activeEntry.label }}</span>
<Icon :class="'dropdown-arrow'" :icon="'DropdownArrow'" />
<IconLabel :class="'dropdown-arrow'" :icon="'DropdownArrow'" />
</div>
<MenuList
:menuEntries="menuEntries"
@@ -76,7 +76,7 @@
<script lang="ts">
import { defineComponent, PropType } from "vue";
import Icon from "@/components/widgets/labels/Icon.vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
import MenuList, { MenuListEntry, SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
import { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
@@ -105,7 +105,7 @@ export default defineComponent({
},
},
components: {
Icon,
IconLabel,
MenuList,
},
});
client/web/src/components/widgets/inputs/MenuBarInput.vue
+4 -4
View File
@@ -2,12 +2,12 @@
<div class="menu-bar-input">
<div class="entry-container">
<div @click="handleLogoClick(entry)" class="entry">
<Icon :icon="'GraphiteLogo'" />
<IconLabel :icon="'GraphiteLogo'" />
</div>
</div>
<div class="entry-container" v-for="entry in menuEntries" :key="entry">
<div @click="handleEntryClick(entry)" class="entry" :class="{ open: entry.ref && entry.ref.isOpen() }" data-hover-menu-spawner>
<Icon :icon="entry.icon" v-if="entry.icon" />
<IconLabel :icon="entry.icon" v-if="entry.icon" />
<span v-if="entry.label">{{ entry.label }}</span>
</div>
<MenuList :menuEntries="entry.children" :direction="MenuDirection.Bottom" :minWidth="240" :drawIcon="true" :defaultAction="actionNotImplemented" :ref="(ref) => setEntryRefs(entry, ref)" />
@@ -52,7 +52,7 @@
<script lang="ts">
import { defineComponent } from "vue";
import Icon from "@/components/widgets/labels/Icon.vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
import { ApplicationPlatform } from "@/components/window/MainWindow.vue";
import MenuList, { MenuListEntry, MenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
import { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
@@ -166,7 +166,7 @@ export default defineComponent({
};
},
components: {
Icon,
IconLabel,
MenuList,
},
});
client/web/src/components/widgets/inputs/ShelfItem.vue → client/web/src/components/widgets/inputs/ShelfItemInput.vue
+2 -2
View File
@@ -1,11 +1,11 @@
<template>
<div class="shelf-item" :class="{ active: active }">
<div class="shelf-item-input" :class="{ active: active }">
<IconButton :icon="icon" :size="32" />
</div>
</template>
<style lang="scss">
.shelf-item {
.shelf-item-input {
flex: 0 0 auto;
border-radius: 2px;
client/web/src/components/widgets/inputs/SwatchPair.vue
-42
View File
@@ -1,42 +0,0 @@
<template>
<div class="swatch-pair">
<SwatchPairInput />
<div class="swap-and-reset">
<IconButton @click="swapColors" :icon="'Swap'" title="Swap (Shift+X)" :size="16" />
<IconButton @click="resetColors" :icon="'ResetColors'" title="Reset (Ctrl+Shift+X)" :size="16" />
</div>
</div>
</template>
<style lang="scss">
.swatch-pair {
.swap-and-reset {
font-size: 0;
}
}
</style>
<script lang="ts">
import { defineComponent } from "vue";
import SwatchPairInput from "@/components/widgets/inputs/SwatchPairInput.vue";
import IconButton from "@/components/widgets/buttons/IconButton.vue";
const wasm = import("@/../wasm/pkg");
export default defineComponent({
methods: {
async swapColors() {
const { swap_colors } = await wasm;
swap_colors();
},
async resetColors() {
const { reset_colors } = await wasm;
reset_colors();
},
},
components: {
SwatchPairInput,
IconButton,
},
});
</script>
client/web/src/components/widgets/labels/Icon.vue → client/web/src/components/widgets/labels/IconLabel.vue
+2 -2
View File
@@ -1,11 +1,11 @@
<template>
<div class="icon" :class="`size-${String(icons[icon].size)}`">
<div class="icon-label" :class="`size-${String(icons[icon].size)}`">
<component :is="icon" />
</div>
</template>
<style lang="scss">
.icon {
.icon-label {
display: block;
flex: 0 0 auto;
fill: var(--color-e-nearwhite);
client/web/src/components/widgets/labels/UserInputLabel.vue
+3 -3
View File
@@ -7,7 +7,7 @@
</span>
</template>
<span class="input-mouse" v-if="inputMouse">
<Icon :icon="mouseInputInteractionToIcon(inputMouse)" />
<IconLabel :icon="mouseInputInteractionToIcon(inputMouse)" />
</span>
<span class="hint-text" v-if="hasSlotContent">
<slot></slot>
@@ -90,7 +90,7 @@
<script lang="ts">
import { defineComponent } from "vue";
import Icon from "@/components/widgets/labels/Icon.vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
export enum MouseInputInteraction {
"None" = "None",
@@ -106,7 +106,7 @@ export enum MouseInputInteraction {
}
export default defineComponent({
components: { Icon },
components: { IconLabel },
props: {
inputKeys: { type: Array, default: () => [] },
inputMouse: { type: String },