mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2025-12-23 10:11:54 +00:00
Clean up widget type naming conventions
This commit is contained in:
Keavon Chambers
parent
9c68ff2952
commit
d57bfb87ee
13 changed files with 77 additions and 109 deletions
|
|
@ -104,39 +104,45 @@
|
|||
<LayoutRow :class="'shelf-and-viewport'">
|
||||
<LayoutCol :class="'shelf'">
|
||||
<div class="tools">
|
||||
<ShelfItem :icon="'LayoutSelectTool'" title="Select Tool (V)" :active="activeTool === 'Select'" @click="selectTool('Select')" />
|
||||
<ShelfItem :icon="'LayoutCropTool'" title="Crop Tool" :active="activeTool === 'Crop'" @click="'tool not implemented' || selectTool('Crop')" />
|
||||
<ShelfItem :icon="'LayoutNavigateTool'" title="Navigate Tool (Z)" :active="activeTool === 'Navigate'" @click="'tool not implemented' || selectTool('Navigate')" />
|
||||
<ShelfItem :icon="'LayoutEyedropperTool'" title="Eyedropper Tool (I)" :active="activeTool === 'Eyedropper'" @click="'tool not implemented' || selectTool('Eyedropper')" />
|
||||
<ShelfItemInput :icon="'LayoutSelectTool'" title="Select Tool (V)" :active="activeTool === 'Select'" @click="selectTool('Select')" />
|
||||
<ShelfItemInput :icon="'LayoutCropTool'" title="Crop Tool" :active="activeTool === 'Crop'" @click="'tool not implemented' || selectTool('Crop')" />
|
||||
<ShelfItemInput :icon="'LayoutNavigateTool'" title="Navigate Tool (Z)" :active="activeTool === 'Navigate'" @click="'tool not implemented' || selectTool('Navigate')" />
|
||||
<ShelfItemInput :icon="'LayoutEyedropperTool'" title="Eyedropper Tool (I)" :active="activeTool === 'Eyedropper'" @click="'tool not implemented' || selectTool('Eyedropper')" />
|
||||
|
||||
<Separator :type="SeparatorType.Section" :direction="SeparatorDirection.Vertical" />
|
||||
|
||||
<ShelfItem :icon="'ParametricTextTool'" title="Text Tool (T)" :active="activeTool === 'Text'" @click="'tool not implemented' || selectTool('Text')" />
|
||||
<ShelfItem :icon="'ParametricFillTool'" title="Fill Tool (F)" :active="activeTool === 'Fill'" @click="selectTool('Fill')" />
|
||||
<ShelfItem :icon="'ParametricGradientTool'" title="Gradient Tool (H)" :active="activeTool === 'Gradient'" @click="'tool not implemented' || selectTool('Gradient')" />
|
||||
<ShelfItemInput :icon="'ParametricTextTool'" title="Text Tool (T)" :active="activeTool === 'Text'" @click="'tool not implemented' || selectTool('Text')" />
|
||||
<ShelfItemInput :icon="'ParametricFillTool'" title="Fill Tool (F)" :active="activeTool === 'Fill'" @click="selectTool('Fill')" />
|
||||
<ShelfItemInput :icon="'ParametricGradientTool'" title="Gradient Tool (H)" :active="activeTool === 'Gradient'" @click="'tool not implemented' || selectTool('Gradient')" />
|
||||
|
||||
<Separator :type="SeparatorType.Section" :direction="SeparatorDirection.Vertical" />
|
||||
|
||||
<ShelfItem :icon="'RasterBrushTool'" title="Brush Tool (B)" :active="activeTool === 'Brush'" @click="'tool not implemented' || selectTool('Brush')" />
|
||||
<ShelfItem :icon="'RasterHealTool'" title="Heal Tool (J)" :active="activeTool === 'Heal'" @click="'tool not implemented' || selectTool('Heal')" />
|
||||
<ShelfItem :icon="'RasterCloneTool'" title="Clone Tool (C)" :active="activeTool === 'Clone'" @click="'tool not implemented' || selectTool('Clone')" />
|
||||
<ShelfItem :icon="'RasterPatchTool'" title="Patch Tool" :active="activeTool === 'Patch'" @click="'tool not implemented' || selectTool('Patch')" />
|
||||
<ShelfItem :icon="'RasterBlurSharpenTool'" title="Detail Tool (D)" :active="activeTool === 'BlurSharpen'" @click="'tool not implemented' || selectTool('BlurSharpen')" />
|
||||
<ShelfItem :icon="'RasterRelightTool'" title="Relight Tool (O)" :active="activeTool === 'Relight'" @click="'tool not implemented' || selectTool('Relight')" />
|
||||
<ShelfItemInput :icon="'RasterBrushTool'" title="Brush Tool (B)" :active="activeTool === 'Brush'" @click="'tool not implemented' || selectTool('Brush')" />
|
||||
<ShelfItemInput :icon="'RasterHealTool'" title="Heal Tool (J)" :active="activeTool === 'Heal'" @click="'tool not implemented' || selectTool('Heal')" />
|
||||
<ShelfItemInput :icon="'RasterCloneTool'" title="Clone Tool (C)" :active="activeTool === 'Clone'" @click="'tool not implemented' || selectTool('Clone')" />
|
||||
<ShelfItemInput :icon="'RasterPatchTool'" title="Patch Tool" :active="activeTool === 'Patch'" @click="'tool not implemented' || selectTool('Patch')" />
|
||||
<ShelfItemInput :icon="'RasterBlurSharpenTool'" title="Detail Tool (D)" :active="activeTool === 'BlurSharpen'" @click="'tool not implemented' || selectTool('BlurSharpen')" />
|
||||
<ShelfItemInput :icon="'RasterRelightTool'" title="Relight Tool (O)" :active="activeTool === 'Relight'" @click="'tool not implemented' || selectTool('Relight')" />
|
||||
|
||||
<Separator :type="SeparatorType.Section" :direction="SeparatorDirection.Vertical" />
|
||||
|
||||
<ShelfItem :icon="'VectorPathTool'" title="Path Tool (A)" :active="activeTool === 'Path'" @click="'tool not implemented' || selectTool('Path')" />
|
||||
<ShelfItem :icon="'VectorPenTool'" title="Pen Tool (P)" :active="activeTool === 'Pen'" @click="selectTool('Pen')" />
|
||||
<ShelfItem :icon="'VectorFreehandTool'" title="Freehand Tool (N)" :active="activeTool === 'Freehand'" @click="'tool not implemented' || selectTool('Freehand')" />
|
||||
<ShelfItem :icon="'VectorSplineTool'" title="Spline Tool" :active="activeTool === 'Spline'" @click="'tool not implemented' || selectTool('Spline')" />
|
||||
<ShelfItem :icon="'VectorLineTool'" title="Line Tool (L)" :active="activeTool === 'Line'" @click="selectTool('Line')" />
|
||||
<ShelfItem :icon="'VectorRectangleTool'" title="Rectangle Tool (M)" :active="activeTool === 'Rectangle'" @click="selectTool('Rectangle')" />
|
||||
<ShelfItem :icon="'VectorEllipseTool'" title="Ellipse Tool (E)" :active="activeTool === 'Ellipse'" @click="selectTool('Ellipse')" />
|
||||
<ShelfItem :icon="'VectorShapeTool'" title="Shape Tool (Y)" :active="activeTool === 'Shape'" @click="selectTool('Shape')" />
|
||||
<ShelfItemInput :icon="'VectorPathTool'" title="Path Tool (A)" :active="activeTool === 'Path'" @click="'tool not implemented' || selectTool('Path')" />
|
||||
<ShelfItemInput :icon="'VectorPenTool'" title="Pen Tool (P)" :active="activeTool === 'Pen'" @click="selectTool('Pen')" />
|
||||
<ShelfItemInput :icon="'VectorFreehandTool'" title="Freehand Tool (N)" :active="activeTool === 'Freehand'" @click="'tool not implemented' || selectTool('Freehand')" />
|
||||
<ShelfItemInput :icon="'VectorSplineTool'" title="Spline Tool" :active="activeTool === 'Spline'" @click="'tool not implemented' || selectTool('Spline')" />
|
||||
<ShelfItemInput :icon="'VectorLineTool'" title="Line Tool (L)" :active="activeTool === 'Line'" @click="selectTool('Line')" />
|
||||
<ShelfItemInput :icon="'VectorRectangleTool'" title="Rectangle Tool (M)" :active="activeTool === 'Rectangle'" @click="selectTool('Rectangle')" />
|
||||
<ShelfItemInput :icon="'VectorEllipseTool'" title="Ellipse Tool (E)" :active="activeTool === 'Ellipse'" @click="selectTool('Ellipse')" />
|
||||
<ShelfItemInput :icon="'VectorShapeTool'" title="Shape Tool (Y)" :active="activeTool === 'Shape'" @click="selectTool('Shape')" />
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<SwatchPair />
|
||||
<div class="working-colors">
|
||||
<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>
|
||||
</LayoutCol>
|
||||
<LayoutCol :class="'viewport'">
|
||||
<div class="canvas" @mousedown="canvasMouseDown" @mouseup="canvasMouseUp" @mousemove="canvasMouseMove" ref="canvas">
|
||||
|
|
@ -169,6 +175,10 @@
|
|||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.working-colors .swap-and-reset {
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.viewport {
|
||||
|
|
@ -196,9 +206,9 @@ import { makeModifiersBitfield } from "@/utilities/input";
|
|||
import { ResponseType, registerResponseHandler, Response, UpdateCanvas, SetActiveTool, ExportDocument, SetCanvasZoom, SetCanvasRotation } from "@/utilities/response-handler";
|
||||
import LayoutRow from "@/components/layout/LayoutRow.vue";
|
||||
import LayoutCol from "@/components/layout/LayoutCol.vue";
|
||||
import SwatchPair from "@/components/widgets/inputs/SwatchPair.vue";
|
||||
import SwatchPairInput from "@/components/widgets/inputs/SwatchPairInput.vue";
|
||||
import { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
|
||||
import ShelfItem from "@/components/widgets/inputs/ShelfItem.vue";
|
||||
import ShelfItemInput from "@/components/widgets/inputs/ShelfItemInput.vue";
|
||||
import Separator, { SeparatorDirection, SeparatorType } from "@/components/widgets/separators/Separator.vue";
|
||||
import IconButton from "@/components/widgets/buttons/IconButton.vue";
|
||||
import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
|
||||
|
|
@ -331,8 +341,8 @@ export default defineComponent({
|
|||
components: {
|
||||
LayoutRow,
|
||||
LayoutCol,
|
||||
SwatchPair,
|
||||
ShelfItem,
|
||||
SwatchPairInput,
|
||||
ShelfItemInput,
|
||||
Separator,
|
||||
IconButton,
|
||||
PopoverButton,
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
>
|
||||
<div class="layer-thumbnail"></div>
|
||||
<div class="layer-type-icon">
|
||||
<Icon :icon="'NodeTypePath'" title="Path" />
|
||||
<IconLabel :icon="'NodeTypePath'" title="Path" />
|
||||
</div>
|
||||
<div class="layer-name">
|
||||
<span>{{ layer.name }}</span>
|
||||
|
|
@ -112,7 +112,7 @@ import NumberInput from "@/components/widgets/inputs/NumberInput.vue";
|
|||
import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
|
||||
import { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
|
||||
import IconButton from "@/components/widgets/buttons/IconButton.vue";
|
||||
import Icon from "@/components/widgets/labels/Icon.vue";
|
||||
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
|
||||
import DropdownInput from "@/components/widgets/inputs/DropdownInput.vue";
|
||||
import { SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
|
||||
|
||||
|
|
@ -230,7 +230,7 @@ export default defineComponent({
|
|||
PopoverButton,
|
||||
NumberInput,
|
||||
IconButton,
|
||||
Icon,
|
||||
IconLabel,
|
||||
DropdownInput,
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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);
|
||||
|
|
@ -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 },
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="window-buttons-web" @click="handleClick" :title="fullscreen.windowFullscreen ? 'Exit Fullscreen (F11)' : 'Enter Fullscreen (F11)'">
|
||||
<TextLabel v-if="requestFullscreenHotkeys">Click to access all hotkeys</TextLabel>
|
||||
<Icon :icon="fullscreen.windowFullscreen ? 'FullscreenExit' : 'FullscreenEnter'" />
|
||||
<IconLabel :icon="fullscreen.windowFullscreen ? 'FullscreenExit' : 'FullscreenEnter'" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import fullscreen, { keyboardLockApiSupported, enterFullscreen, exitFullscreen } from "@/utilities/fullscreen";
|
||||
import Icon from "@/components/widgets/labels/Icon.vue";
|
||||
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
|
||||
import TextLabel from "@/components/widgets/labels/TextLabel.vue";
|
||||
|
||||
const canUseKeyboardLock = keyboardLockApiSupported();
|
||||
|
|
@ -48,7 +48,7 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
components: {
|
||||
Icon,
|
||||
IconLabel,
|
||||
TextLabel,
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
<template>
|
||||
<div class="windows window-button minimize" title="Minimize">
|
||||
<Icon :icon="'WindowButtonWinMinimize'" />
|
||||
<IconLabel :icon="'WindowButtonWinMinimize'" />
|
||||
</div>
|
||||
<div class="windows window-button maximize" title="Maximize" v-if="!maximized">
|
||||
<Icon :icon="'WindowButtonWinMaximize'" />
|
||||
<IconLabel :icon="'WindowButtonWinMaximize'" />
|
||||
</div>
|
||||
<div class="windows window-button restore-down" title="Restore Down" v-if="maximized">
|
||||
<Icon :icon="'WindowButtonWinRestoreDown'" />
|
||||
<IconLabel :icon="'WindowButtonWinRestoreDown'" />
|
||||
</div>
|
||||
<div class="windows window-button close" title="Close">
|
||||
<Icon :icon="'WindowButtonWinClose'" />
|
||||
<IconLabel :icon="'WindowButtonWinClose'" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -39,10 +39,10 @@
|
|||
|
||||
<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({
|
||||
components: { Icon },
|
||||
components: { IconLabel },
|
||||
props: {
|
||||
maximized: { type: Boolean, default: false },
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue