Move all icon SVG imports to the Icon component
This change also removes the need to specify the icon size.
This commit is contained in:
Keavon Chambers
parent
5016fde231
commit
cdcddf176b
|
|
@ -6,15 +6,15 @@
|
||||||
|
|
||||||
<Separator :type="SeparatorType.Section" />
|
<Separator :type="SeparatorType.Section" />
|
||||||
|
|
||||||
<IconButton :size="24" :iconSize="16" title="Horizontal Align Left"><AlignHorizontalLeft /></IconButton>
|
<IconButton :icon="'AlignHorizontalLeft'" :size="24" title="Horizontal Align Left" />
|
||||||
<IconButton :size="24" :iconSize="16" title="Horizontal Align Center"><AlignHorizontalCenter /></IconButton>
|
<IconButton :icon="'AlignHorizontalCenter'" :size="24" title="Horizontal Align Center" />
|
||||||
<IconButton :size="24" :iconSize="16" gapAfter title="Horizontal Align Right"><AlignHorizontalRight /></IconButton>
|
<IconButton :icon="'AlignHorizontalRight'" :size="24" gapAfter title="Horizontal Align Right" />
|
||||||
|
|
||||||
<Separator :type="SeparatorType.Unrelated" />
|
<Separator :type="SeparatorType.Unrelated" />
|
||||||
|
|
||||||
<IconButton :size="24" :iconSize="16" title="Vertical Align Top"><AlignVerticalTop /></IconButton>
|
<IconButton :icon="'AlignVerticalTop'" :size="24" title="Vertical Align Top" />
|
||||||
<IconButton :size="24" :iconSize="16" title="Vertical Align Center"><AlignVerticalCenter /></IconButton>
|
<IconButton :icon="'AlignVerticalCenter'" :size="24" title="Vertical Align Center" />
|
||||||
<IconButton :size="24" :iconSize="16" title="Vertical Align Bottom"><AlignVerticalBottom /></IconButton>
|
<IconButton :icon="'AlignVerticalBottom'" :size="24" title="Vertical Align Bottom" />
|
||||||
|
|
||||||
<Separator :type="SeparatorType.Related" />
|
<Separator :type="SeparatorType.Related" />
|
||||||
|
|
||||||
|
|
@ -25,8 +25,8 @@
|
||||||
|
|
||||||
<Separator :type="SeparatorType.Section" />
|
<Separator :type="SeparatorType.Section" />
|
||||||
|
|
||||||
<IconButton :size="24" :iconSize="16" title="Flip Horizontal"><FlipHorizontal /></IconButton>
|
<IconButton :icon="'FlipHorizontal'" :size="24" title="Flip Horizontal" />
|
||||||
<IconButton :size="24" :iconSize="16" title="Flip Vertical"><FlipVertical /></IconButton>
|
<IconButton :icon="'FlipVertical'" :size="24" title="Flip Vertical" />
|
||||||
|
|
||||||
<Separator :type="SeparatorType.Related" />
|
<Separator :type="SeparatorType.Related" />
|
||||||
|
|
||||||
|
|
@ -37,11 +37,11 @@
|
||||||
|
|
||||||
<Separator :type="SeparatorType.Section" />
|
<Separator :type="SeparatorType.Section" />
|
||||||
|
|
||||||
<IconButton :size="24" :iconSize="16" title="Boolean Union"><BooleanUnion /></IconButton>
|
<IconButton :icon="'BooleanUnion'" :size="24" title="Boolean Union" />
|
||||||
<IconButton :size="24" :iconSize="16" title="Boolean Subtract Front"><BooleanSubtractFront /></IconButton>
|
<IconButton :icon="'BooleanSubtractFront'" :size="24" title="Boolean Subtract Front" />
|
||||||
<IconButton :size="24" :iconSize="16" title="Boolean Subtract Back"><BooleanSubtractBack /></IconButton>
|
<IconButton :icon="'BooleanSubtractBack'" :size="24" title="Boolean Subtract Back" />
|
||||||
<IconButton :size="24" :iconSize="16" title="Boolean Intersect"><BooleanIntersect /></IconButton>
|
<IconButton :icon="'BooleanIntersect'" :size="24" title="Boolean Intersect" />
|
||||||
<IconButton :size="24" :iconSize="16" title="Boolean Difference"><BooleanDifference /></IconButton>
|
<IconButton :icon="'BooleanDifference'" :size="24" title="Boolean Difference" />
|
||||||
|
|
||||||
<Separator :type="SeparatorType.Related" />
|
<Separator :type="SeparatorType.Related" />
|
||||||
|
|
||||||
|
|
@ -53,9 +53,9 @@
|
||||||
<div class="spacer"></div>
|
<div class="spacer"></div>
|
||||||
<div class="right side">
|
<div class="right side">
|
||||||
<RadioInput :initialIndex="0" @changed="viewModeChanged">
|
<RadioInput :initialIndex="0" @changed="viewModeChanged">
|
||||||
<IconButton :size="24" :iconSize="16" title="View Mode: Normal"><ViewModeNormal /></IconButton>
|
<IconButton :icon="'ViewModeNormal'" :size="24" title="View Mode: Normal" />
|
||||||
<IconButton :size="24" :iconSize="16" title="View Mode: Outline"><ViewModeOutline /></IconButton>
|
<IconButton :icon="'ViewModeOutline'" :size="24" title="View Mode: Outline" />
|
||||||
<IconButton :size="24" :iconSize="16" title="View Mode: Pixels"><ViewModePixels /></IconButton>
|
<IconButton :icon="'ViewModePixels'" :size="24" title="View Mode: Pixels" />
|
||||||
<PopoverButton>
|
<PopoverButton>
|
||||||
<h3>Display Mode</h3>
|
<h3>Display Mode</h3>
|
||||||
<p>More display mode options will be here</p>
|
<p>More display mode options will be here</p>
|
||||||
|
|
@ -64,9 +64,9 @@
|
||||||
|
|
||||||
<Separator :type="SeparatorType.Section" />
|
<Separator :type="SeparatorType.Section" />
|
||||||
|
|
||||||
<IconButton :size="24" :iconSize="16" title="Zoom In"><ZoomIn /></IconButton>
|
<IconButton :icon="'ZoomIn'" :size="24" title="Zoom In" />
|
||||||
<IconButton :size="24" :iconSize="16" title="Zoom Out"><ZoomOut /></IconButton>
|
<IconButton :icon="'ZoomOut'" :size="24" title="Zoom Out" />
|
||||||
<IconButton :size="24" :iconSize="16" title="Zoom to 100%"><ZoomReset /></IconButton>
|
<IconButton :icon="'ZoomReset'" :size="24" title="Zoom to 100%" />
|
||||||
|
|
||||||
<Separator :type="SeparatorType.Related" />
|
<Separator :type="SeparatorType.Related" />
|
||||||
|
|
||||||
|
|
@ -76,36 +76,36 @@
|
||||||
<LayoutRow :class="'shelf-and-viewport'">
|
<LayoutRow :class="'shelf-and-viewport'">
|
||||||
<LayoutCol :class="'shelf'">
|
<LayoutCol :class="'shelf'">
|
||||||
<div class="tools">
|
<div class="tools">
|
||||||
<ShelfItem title="Select Tool (V)" :active="activeTool === 'Select'" @click="selectTool('Select')"><SelectTool /></ShelfItem>
|
<ShelfItem :icon="'SelectTool'" title="Select Tool (V)" :active="activeTool === 'Select'" @click="selectTool('Select')" />
|
||||||
<ShelfItem title="Crop Tool" :active="activeTool === 'Crop'" @click="'tool not implemented' || selectTool('Crop')"><CropTool /></ShelfItem>
|
<ShelfItem :icon="'CropTool'" title="Crop Tool" :active="activeTool === 'Crop'" @click="'tool not implemented' || selectTool('Crop')" />
|
||||||
<ShelfItem title="Navigate Tool" :active="activeTool === 'Navigate'" @click="'tool not implemented' || selectTool('Navigate')"><NavigateTool /></ShelfItem>
|
<ShelfItem :icon="'NavigateTool'" title="Navigate Tool" :active="activeTool === 'Navigate'" @click="'tool not implemented' || selectTool('Navigate')" />
|
||||||
<ShelfItem title="Eyedropper Tool" :active="activeTool === 'Eyedropper'" @click="'tool not implemented' || selectTool('Eyedropper')"><EyedropperTool /></ShelfItem>
|
<ShelfItem :icon="'EyedropperTool'" title="Eyedropper Tool" :active="activeTool === 'Eyedropper'" @click="'tool not implemented' || selectTool('Eyedropper')" />
|
||||||
|
|
||||||
<Separator :type="SeparatorType.Section" :direction="SeparatorDirection.Vertical" />
|
<Separator :type="SeparatorType.Section" :direction="SeparatorDirection.Vertical" />
|
||||||
|
|
||||||
<ShelfItem title="Text Tool" :active="activeTool === 'Text'" @click="'tool not implemented' || selectTool('Text')"><TextTool /></ShelfItem>
|
<ShelfItem :icon="'TextTool'" title="Text Tool" :active="activeTool === 'Text'" @click="'tool not implemented' || selectTool('Text')" />
|
||||||
<ShelfItem title="Fill Tool" :active="activeTool === 'Fill'" @click="'tool not implemented' || selectTool('Fill')"><FillTool /></ShelfItem>
|
<ShelfItem :icon="'FillTool'" title="Fill Tool" :active="activeTool === 'Fill'" @click="'tool not implemented' || selectTool('Fill')" />
|
||||||
<ShelfItem title="Gradient Tool" :active="activeTool === 'Gradient'" @click="'tool not implemented' || selectTool('Gradient')"><GradientTool /></ShelfItem>
|
<ShelfItem :icon="'GradientTool'" title="Gradient Tool" :active="activeTool === 'Gradient'" @click="'tool not implemented' || selectTool('Gradient')" />
|
||||||
|
|
||||||
<Separator :type="SeparatorType.Section" :direction="SeparatorDirection.Vertical" />
|
<Separator :type="SeparatorType.Section" :direction="SeparatorDirection.Vertical" />
|
||||||
|
|
||||||
<ShelfItem title="Brush Tool" :active="activeTool === 'Brush'" @click="'tool not implemented' || selectTool('Brush')"><BrushTool /></ShelfItem>
|
<ShelfItem :icon="'BrushTool'" title="Brush Tool" :active="activeTool === 'Brush'" @click="'tool not implemented' || selectTool('Brush')" />
|
||||||
<ShelfItem title="Heal Tool" :active="activeTool === 'Heal'" @click="'tool not implemented' || selectTool('Heal')"><HealTool /></ShelfItem>
|
<ShelfItem :icon="'HealTool'" title="Heal Tool" :active="activeTool === 'Heal'" @click="'tool not implemented' || selectTool('Heal')" />
|
||||||
<ShelfItem title="Clone Tool" :active="activeTool === 'Clone'" @click="'tool not implemented' || selectTool('Clone')"><CloneTool /></ShelfItem>
|
<ShelfItem :icon="'CloneTool'" title="Clone Tool" :active="activeTool === 'Clone'" @click="'tool not implemented' || selectTool('Clone')" />
|
||||||
<ShelfItem title="Patch Tool" :active="activeTool === 'Patch'" @click="'tool not implemented' || selectTool('Patch')"><PatchTool /></ShelfItem>
|
<ShelfItem :icon="'PatchTool'" title="Patch Tool" :active="activeTool === 'Patch'" @click="'tool not implemented' || selectTool('Patch')" />
|
||||||
<ShelfItem title="Detail Tool" :active="activeTool === 'BlurSharpen'" @click="'tool not implemented' || selectTool('BlurSharpen')"><BlurSharpenTool /></ShelfItem>
|
<ShelfItem :icon="'BlurSharpenTool'" title="Detail Tool" :active="activeTool === 'BlurSharpen'" @click="'tool not implemented' || selectTool('BlurSharpen')" />
|
||||||
<ShelfItem title="Relight Tool" :active="activeTool === 'Relight'" @click="'tool not implemented' || selectTool('Relight')"><RelightTool /></ShelfItem>
|
<ShelfItem :icon="'RelightTool'" title="Relight Tool" :active="activeTool === 'Relight'" @click="'tool not implemented' || selectTool('Relight')" />
|
||||||
|
|
||||||
<Separator :type="SeparatorType.Section" :direction="SeparatorDirection.Vertical" />
|
<Separator :type="SeparatorType.Section" :direction="SeparatorDirection.Vertical" />
|
||||||
|
|
||||||
<ShelfItem title="Path Tool" :active="activeTool === 'Path'" @click="'tool not implemented' || selectTool('Path')"><PathTool /></ShelfItem>
|
<ShelfItem :icon="'PathTool'" title="Path Tool" :active="activeTool === 'Path'" @click="'tool not implemented' || selectTool('Path')" />
|
||||||
<ShelfItem title="Pen Tool (P)" :active="activeTool === 'Pen'" @click="selectTool('Pen')"><PenTool /></ShelfItem>
|
<ShelfItem :icon="'PenTool'" title="Pen Tool (P)" :active="activeTool === 'Pen'" @click="selectTool('Pen')" />
|
||||||
<ShelfItem title="Freehand Tool" :active="activeTool === 'Freehand'" @click="'tool not implemented' || selectTool('Freehand')"><FreehandTool /></ShelfItem>
|
<ShelfItem :icon="'FreehandTool'" title="Freehand Tool" :active="activeTool === 'Freehand'" @click="'tool not implemented' || selectTool('Freehand')" />
|
||||||
<ShelfItem title="Spline Tool" :active="activeTool === 'Spline'" @click="'tool not implemented' || selectTool('Spline')"><SplineTool /></ShelfItem>
|
<ShelfItem :icon="'SplineTool'" title="Spline Tool" :active="activeTool === 'Spline'" @click="'tool not implemented' || selectTool('Spline')" />
|
||||||
<ShelfItem title="Line Tool (L)" :active="activeTool === 'Line'" @click="selectTool('Line')"><LineTool /></ShelfItem>
|
<ShelfItem :icon="'LineTool'" title="Line Tool (L)" :active="activeTool === 'Line'" @click="selectTool('Line')" />
|
||||||
<ShelfItem title="Rectangle Tool (M)" :active="activeTool === 'Rectangle'" @click="selectTool('Rectangle')"><RectangleTool /></ShelfItem>
|
<ShelfItem :icon="'RectangleTool'" title="Rectangle Tool (M)" :active="activeTool === 'Rectangle'" @click="selectTool('Rectangle')" />
|
||||||
<ShelfItem title="Ellipse Tool (E)" :active="activeTool === 'Ellipse'" @click="selectTool('Ellipse')"><EllipseTool /></ShelfItem>
|
<ShelfItem :icon="'EllipseTool'" title="Ellipse Tool (E)" :active="activeTool === 'Ellipse'" @click="selectTool('Ellipse')" />
|
||||||
<ShelfItem title="Shape Tool (Y)" :active="activeTool === 'Shape'" @click="selectTool('Shape')"><ShapeTool /></ShelfItem>
|
<ShelfItem :icon="'ShapeTool'" title="Shape Tool (Y)" :active="activeTool === 'Shape'" @click="selectTool('Shape')" />
|
||||||
</div>
|
</div>
|
||||||
<div class="spacer"></div>
|
<div class="spacer"></div>
|
||||||
<WorkingColors />
|
<WorkingColors />
|
||||||
|
|
@ -176,46 +176,6 @@ import IconButton from "../widgets/buttons/IconButton.vue";
|
||||||
import PopoverButton from "../widgets/buttons/PopoverButton.vue";
|
import PopoverButton from "../widgets/buttons/PopoverButton.vue";
|
||||||
import RadioInput from "../widgets/inputs/RadioInput.vue";
|
import RadioInput from "../widgets/inputs/RadioInput.vue";
|
||||||
import NumberInput from "../widgets/inputs/NumberInput.vue";
|
import NumberInput from "../widgets/inputs/NumberInput.vue";
|
||||||
import SelectTool from "../../../assets/24px-two-tone/document-tool-layout-select.svg";
|
|
||||||
import CropTool from "../../../assets/24px-two-tone/document-tool-layout-crop.svg";
|
|
||||||
import NavigateTool from "../../../assets/24px-two-tone/document-tool-layout-navigate.svg";
|
|
||||||
import EyedropperTool from "../../../assets/24px-two-tone/document-tool-layout-eyedropper.svg";
|
|
||||||
import TextTool from "../../../assets/24px-two-tone/document-tool-parametric-text.svg";
|
|
||||||
import FillTool from "../../../assets/24px-two-tone/document-tool-parametric-fill.svg";
|
|
||||||
import GradientTool from "../../../assets/24px-two-tone/document-tool-parametric-gradient.svg";
|
|
||||||
import BrushTool from "../../../assets/24px-two-tone/document-tool-raster-brush.svg";
|
|
||||||
import HealTool from "../../../assets/24px-two-tone/document-tool-raster-heal.svg";
|
|
||||||
import CloneTool from "../../../assets/24px-two-tone/document-tool-raster-clone.svg";
|
|
||||||
import PatchTool from "../../../assets/24px-two-tone/document-tool-raster-patch.svg";
|
|
||||||
import BlurSharpenTool from "../../../assets/24px-two-tone/document-tool-raster-detail.svg";
|
|
||||||
import RelightTool from "../../../assets/24px-two-tone/document-tool-raster-relight.svg";
|
|
||||||
import PathTool from "../../../assets/24px-two-tone/document-tool-vector-path.svg";
|
|
||||||
import PenTool from "../../../assets/24px-two-tone/document-tool-vector-pen.svg";
|
|
||||||
import FreehandTool from "../../../assets/24px-two-tone/document-tool-vector-freehand.svg";
|
|
||||||
import SplineTool from "../../../assets/24px-two-tone/document-tool-vector-spline.svg";
|
|
||||||
import LineTool from "../../../assets/24px-two-tone/document-tool-vector-line.svg";
|
|
||||||
import RectangleTool from "../../../assets/24px-two-tone/document-tool-vector-rectangle.svg";
|
|
||||||
import EllipseTool from "../../../assets/24px-two-tone/document-tool-vector-ellipse.svg";
|
|
||||||
import ShapeTool from "../../../assets/24px-two-tone/document-tool-vector-shape.svg";
|
|
||||||
import AlignHorizontalLeft from "../../../assets/16px-solid/align-horizontal-left.svg";
|
|
||||||
import AlignHorizontalCenter from "../../../assets/16px-solid/align-horizontal-center.svg";
|
|
||||||
import AlignHorizontalRight from "../../../assets/16px-solid/align-horizontal-right.svg";
|
|
||||||
import AlignVerticalTop from "../../../assets/16px-solid/align-vertical-top.svg";
|
|
||||||
import AlignVerticalCenter from "../../../assets/16px-solid/align-vertical-center.svg";
|
|
||||||
import AlignVerticalBottom from "../../../assets/16px-solid/align-vertical-bottom.svg";
|
|
||||||
import FlipHorizontal from "../../../assets/16px-solid/flip-horizontal.svg";
|
|
||||||
import FlipVertical from "../../../assets/16px-solid/flip-vertical.svg";
|
|
||||||
import BooleanUnion from "../../../assets/16px-solid/boolean-union.svg";
|
|
||||||
import BooleanSubtractFront from "../../../assets/16px-solid/boolean-subtract-front.svg";
|
|
||||||
import BooleanSubtractBack from "../../../assets/16px-solid/boolean-subtract-back.svg";
|
|
||||||
import BooleanIntersect from "../../../assets/16px-solid/boolean-intersect.svg";
|
|
||||||
import BooleanDifference from "../../../assets/16px-solid/boolean-difference.svg";
|
|
||||||
import ZoomReset from "../../../assets/16px-solid/zoom-reset.svg";
|
|
||||||
import ZoomIn from "../../../assets/16px-solid/zoom-in.svg";
|
|
||||||
import ZoomOut from "../../../assets/16px-solid/zoom-out.svg";
|
|
||||||
import ViewModeNormal from "../../../assets/16px-solid/view-mode-normal.svg";
|
|
||||||
import ViewModeOutline from "../../../assets/16px-solid/view-mode-outline.svg";
|
|
||||||
import ViewModePixels from "../../../assets/16px-solid/view-mode-pixels.svg";
|
|
||||||
|
|
||||||
const wasm = import("../../../wasm/pkg");
|
const wasm = import("../../../wasm/pkg");
|
||||||
|
|
||||||
|
|
@ -230,46 +190,6 @@ export default defineComponent({
|
||||||
PopoverButton,
|
PopoverButton,
|
||||||
RadioInput,
|
RadioInput,
|
||||||
NumberInput,
|
NumberInput,
|
||||||
SelectTool,
|
|
||||||
CropTool,
|
|
||||||
NavigateTool,
|
|
||||||
EyedropperTool,
|
|
||||||
TextTool,
|
|
||||||
FillTool,
|
|
||||||
GradientTool,
|
|
||||||
BrushTool,
|
|
||||||
HealTool,
|
|
||||||
CloneTool,
|
|
||||||
PatchTool,
|
|
||||||
BlurSharpenTool,
|
|
||||||
RelightTool,
|
|
||||||
PathTool,
|
|
||||||
PenTool,
|
|
||||||
FreehandTool,
|
|
||||||
SplineTool,
|
|
||||||
LineTool,
|
|
||||||
RectangleTool,
|
|
||||||
EllipseTool,
|
|
||||||
ShapeTool,
|
|
||||||
AlignHorizontalLeft,
|
|
||||||
AlignHorizontalCenter,
|
|
||||||
AlignHorizontalRight,
|
|
||||||
AlignVerticalTop,
|
|
||||||
AlignVerticalCenter,
|
|
||||||
AlignVerticalBottom,
|
|
||||||
FlipHorizontal,
|
|
||||||
FlipVertical,
|
|
||||||
BooleanUnion,
|
|
||||||
BooleanSubtractFront,
|
|
||||||
BooleanSubtractBack,
|
|
||||||
BooleanIntersect,
|
|
||||||
BooleanDifference,
|
|
||||||
ZoomReset,
|
|
||||||
ZoomIn,
|
|
||||||
ZoomOut,
|
|
||||||
ViewModeNormal,
|
|
||||||
ViewModeOutline,
|
|
||||||
ViewModePixels,
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async canvasMouseDown(e: MouseEvent) {
|
async canvasMouseDown(e: MouseEvent) {
|
||||||
|
|
|
||||||
|
|
@ -14,15 +14,12 @@
|
||||||
<LayoutCol :class="'list'">
|
<LayoutCol :class="'list'">
|
||||||
<div class="layer-row" v-for="layer in layers" :key="layer.path">
|
<div class="layer-row" v-for="layer in layers" :key="layer.path">
|
||||||
<div class="layer-visibility">
|
<div class="layer-visibility">
|
||||||
<IconButton @click="toggleLayerVisibility(layer.path)" :size="24" :iconSize="16" :title="layer.visible ? 'Visible' : 'Hidden'">
|
<IconButton :icon="layer.visible ? 'Visible' : 'Hidden'" @click="toggleLayerVisibility(layer.path)" :size="24" :title="layer.visible ? 'Visible' : 'Hidden'" />
|
||||||
<EyeVisible v-if="layer.visible" />
|
|
||||||
<EyeHidden v-if="!layer.visible" />
|
|
||||||
</IconButton>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="layer">
|
<div class="layer">
|
||||||
<div class="layer-thumbnail"></div>
|
<div class="layer-thumbnail"></div>
|
||||||
<div class="layer-type-icon">
|
<div class="layer-type-icon">
|
||||||
<Icon :size="24" title="Path"><NodeTypePath /></Icon>
|
<Icon :icon="'NodeTypePath'" title="Path" />
|
||||||
</div>
|
</div>
|
||||||
<div class="layer-name">
|
<div class="layer-name">
|
||||||
<span>{{ layer.name }}</span>
|
<span>{{ layer.name }}</span>
|
||||||
|
|
@ -91,9 +88,6 @@ import PopoverButton from "../widgets/buttons/PopoverButton.vue";
|
||||||
import { PopoverDirection } from "../widgets/overlays/Popover.vue";
|
import { PopoverDirection } from "../widgets/overlays/Popover.vue";
|
||||||
import IconButton from "../widgets/buttons/IconButton.vue";
|
import IconButton from "../widgets/buttons/IconButton.vue";
|
||||||
import Icon from "../widgets/labels/Icon.vue";
|
import Icon from "../widgets/labels/Icon.vue";
|
||||||
import EyeVisible from "../../../assets/16px-solid/visibility-eye-visible.svg";
|
|
||||||
import EyeHidden from "../../../assets/16px-solid/visibility-eye-hidden.svg";
|
|
||||||
import NodeTypePath from "../../../assets/24px-full-color/node-type-path.svg";
|
|
||||||
|
|
||||||
const wasm = import("../../../wasm/pkg");
|
const wasm = import("../../../wasm/pkg");
|
||||||
|
|
||||||
|
|
@ -106,9 +100,6 @@ export default defineComponent({
|
||||||
NumberInput,
|
NumberInput,
|
||||||
IconButton,
|
IconButton,
|
||||||
Icon,
|
Icon,
|
||||||
EyeVisible,
|
|
||||||
EyeHidden,
|
|
||||||
NodeTypePath,
|
|
||||||
},
|
},
|
||||||
props: {},
|
props: {},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="shelf-item" :class="{ active: active }">
|
<div class="shelf-item" :class="{ active: active }">
|
||||||
<slot></slot>
|
<IconButton :icon="icon" :size="32" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.shelf-item {
|
.shelf-item {
|
||||||
padding: 4px;
|
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
@ -27,9 +26,12 @@
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from "vue";
|
import { defineComponent } from "vue";
|
||||||
|
import IconButton from "./buttons/IconButton.vue";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
|
components: { IconButton },
|
||||||
props: {
|
props: {
|
||||||
|
icon: { type: String, required: true },
|
||||||
active: { type: Boolean, default: false },
|
active: { type: Boolean, default: false },
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -2,12 +2,8 @@
|
||||||
<div class="working-colors">
|
<div class="working-colors">
|
||||||
<SwatchPairInput />
|
<SwatchPairInput />
|
||||||
<div class="swap-and-reset">
|
<div class="swap-and-reset">
|
||||||
<IconButton :size="16" :iconSize="12">
|
<IconButton :icon="'SwapButton'" :size="16" />
|
||||||
<SwapButton />
|
<IconButton :icon="'ResetColorsButton'" :size="16" />
|
||||||
</IconButton>
|
|
||||||
<IconButton :size="16" :iconSize="12">
|
|
||||||
<ResetColorsButton />
|
|
||||||
</IconButton>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -24,15 +20,11 @@
|
||||||
import { defineComponent } from "vue";
|
import { defineComponent } from "vue";
|
||||||
import SwatchPairInput from "./inputs/SwatchPairInput.vue";
|
import SwatchPairInput from "./inputs/SwatchPairInput.vue";
|
||||||
import IconButton from "./buttons/IconButton.vue";
|
import IconButton from "./buttons/IconButton.vue";
|
||||||
import SwapButton from "../../../assets/12px-solid/swap.svg";
|
|
||||||
import ResetColorsButton from "../../../assets/12px-solid/reset-colors.svg";
|
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
SwatchPairInput,
|
SwatchPairInput,
|
||||||
IconButton,
|
IconButton,
|
||||||
SwapButton,
|
|
||||||
ResetColorsButton,
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,14 @@
|
||||||
<template>
|
<template>
|
||||||
<button class="icon-button" :class="`size-${String(size)} icon-size-${String(iconSize)}`">
|
<button class="icon-button" :class="`size-${String(size)}`">
|
||||||
<slot></slot>
|
<Icon :icon="icon" />
|
||||||
</button>
|
</button>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.icon-button {
|
.icon-button {
|
||||||
display: inline-block;
|
display: inline-flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
@ -27,50 +29,38 @@
|
||||||
fill: var(--color-f-white);
|
fill: var(--color-f-white);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.icon-size-12 {
|
&.size-12 {
|
||||||
svg {
|
width: 12px;
|
||||||
width: 12px;
|
height: 12px;
|
||||||
height: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.size-16 {
|
|
||||||
padding: (16px - 12px) / 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.size-24 {
|
|
||||||
padding: (24px - 12px) / 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.size-32 {
|
|
||||||
padding: (32px - 12px) / 2;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.icon-size-16 {
|
&.size-16 {
|
||||||
svg {
|
width: 16px;
|
||||||
width: 16px;
|
height: 16px;
|
||||||
height: 16px;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&.size-24 {
|
&.size-24 {
|
||||||
padding: (24px - 16px) / 2;
|
width: 24px;
|
||||||
}
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
&.size-32 {
|
&.size-32 {
|
||||||
padding: (32px - 16px) / 2;
|
width: 32px;
|
||||||
}
|
height: 32px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from "vue";
|
import { defineComponent } from "vue";
|
||||||
|
import Icon from "../labels/Icon.vue";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
props: {
|
props: {
|
||||||
|
icon: { type: String, required: true },
|
||||||
size: { type: Number, required: true },
|
size: { type: Number, required: true },
|
||||||
iconSize: { type: Number, required: true },
|
|
||||||
gapAfter: { type: Boolean, default: false },
|
gapAfter: { type: Boolean, default: false },
|
||||||
},
|
},
|
||||||
|
components: { Icon },
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="popover-button">
|
<div class="popover-button">
|
||||||
<IconButton :size="16" :iconSize="12" @click="clickButton">
|
<IconButton :icon="icon" :size="16" @click="clickButton" />
|
||||||
<component :is="icon" />
|
|
||||||
</IconButton>
|
|
||||||
<Popover :direction="PopoverDirection.Bottom" ref="popover">
|
<Popover :direction="PopoverDirection.Bottom" ref="popover">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</Popover>
|
</Popover>
|
||||||
|
|
@ -21,7 +19,7 @@
|
||||||
left: 50%;
|
left: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
.icon-button {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -42,8 +40,6 @@
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from "vue";
|
import { defineComponent } from "vue";
|
||||||
import DropdownArrow from "../../../../assets/12px-solid/dropdown-arrow.svg";
|
|
||||||
import VerticalEllipsis from "../../../../assets/12px-solid/vertical-ellipsis.svg";
|
|
||||||
import IconButton from "./IconButton.vue";
|
import IconButton from "./IconButton.vue";
|
||||||
import Popover, { PopoverDirection } from "../overlays/Popover.vue";
|
import Popover, { PopoverDirection } from "../overlays/Popover.vue";
|
||||||
|
|
||||||
|
|
@ -54,8 +50,6 @@ export enum PopoverButtonIcon {
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
VerticalEllipsis,
|
|
||||||
DropdownArrow,
|
|
||||||
Popover,
|
Popover,
|
||||||
IconButton,
|
IconButton,
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="menu-bar-input">
|
<div class="menu-bar-input">
|
||||||
<div class="entry"><GraphiteLogo width="16" height="16" /></div>
|
<div class="entry"><Icon :icon="'GraphiteLogo'" /></div>
|
||||||
<div class="entry"><span>File</span></div>
|
<div class="entry"><span>File</span></div>
|
||||||
<div class="entry"><span>Edit</span></div>
|
<div class="entry"><span>Edit</span></div>
|
||||||
<div class="entry"><span>Document</span></div>
|
<div class="entry"><span>Document</span></div>
|
||||||
|
|
@ -40,11 +40,11 @@
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from "vue";
|
import { defineComponent } from "vue";
|
||||||
|
import Icon from "../labels/Icon.vue";
|
||||||
import { ApplicationPlatform } from "../../window/MainWindow.vue";
|
import { ApplicationPlatform } from "../../window/MainWindow.vue";
|
||||||
import GraphiteLogo from "../../../../assets/16px-solid/graphite-logo.svg";
|
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: { GraphiteLogo },
|
components: { Icon },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
ApplicationPlatform,
|
ApplicationPlatform,
|
||||||
|
|
|
||||||
|
|
@ -1,23 +1,14 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="icon" :class="`size-${String(size)}`">
|
<div class="icon" :class="`size-${String(icons[icon].size)}`">
|
||||||
<slot></slot>
|
<component :is="icon" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.icon {
|
.icon {
|
||||||
display: inline-block;
|
display: block;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
fill: var(--color-e-nearwhite);
|
fill: var(--color-e-nearwhite);
|
||||||
vertical-align: top;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
margin-left: 0;
|
|
||||||
|
|
||||||
&.size-10 {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.size-12 {
|
&.size-12 {
|
||||||
width: 12px;
|
width: 12px;
|
||||||
|
|
@ -39,10 +30,150 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from "vue";
|
import { defineComponent } from "vue";
|
||||||
|
|
||||||
|
import SelectTool from "../../../../assets/24px-two-tone/document-tool-layout-select.svg";
|
||||||
|
import CropTool from "../../../../assets/24px-two-tone/document-tool-layout-crop.svg";
|
||||||
|
import NavigateTool from "../../../../assets/24px-two-tone/document-tool-layout-navigate.svg";
|
||||||
|
import EyedropperTool from "../../../../assets/24px-two-tone/document-tool-layout-eyedropper.svg";
|
||||||
|
import TextTool from "../../../../assets/24px-two-tone/document-tool-parametric-text.svg";
|
||||||
|
import FillTool from "../../../../assets/24px-two-tone/document-tool-parametric-fill.svg";
|
||||||
|
import GradientTool from "../../../../assets/24px-two-tone/document-tool-parametric-gradient.svg";
|
||||||
|
import BrushTool from "../../../../assets/24px-two-tone/document-tool-raster-brush.svg";
|
||||||
|
import HealTool from "../../../../assets/24px-two-tone/document-tool-raster-heal.svg";
|
||||||
|
import CloneTool from "../../../../assets/24px-two-tone/document-tool-raster-clone.svg";
|
||||||
|
import PatchTool from "../../../../assets/24px-two-tone/document-tool-raster-patch.svg";
|
||||||
|
import BlurSharpenTool from "../../../../assets/24px-two-tone/document-tool-raster-detail.svg";
|
||||||
|
import RelightTool from "../../../../assets/24px-two-tone/document-tool-raster-relight.svg";
|
||||||
|
import PathTool from "../../../../assets/24px-two-tone/document-tool-vector-path.svg";
|
||||||
|
import PenTool from "../../../../assets/24px-two-tone/document-tool-vector-pen.svg";
|
||||||
|
import FreehandTool from "../../../../assets/24px-two-tone/document-tool-vector-freehand.svg";
|
||||||
|
import SplineTool from "../../../../assets/24px-two-tone/document-tool-vector-spline.svg";
|
||||||
|
import LineTool from "../../../../assets/24px-two-tone/document-tool-vector-line.svg";
|
||||||
|
import RectangleTool from "../../../../assets/24px-two-tone/document-tool-vector-rectangle.svg";
|
||||||
|
import EllipseTool from "../../../../assets/24px-two-tone/document-tool-vector-ellipse.svg";
|
||||||
|
import ShapeTool from "../../../../assets/24px-two-tone/document-tool-vector-shape.svg";
|
||||||
|
|
||||||
|
import AlignHorizontalLeft from "../../../../assets/16px-solid/align-horizontal-left.svg";
|
||||||
|
import AlignHorizontalCenter from "../../../../assets/16px-solid/align-horizontal-center.svg";
|
||||||
|
import AlignHorizontalRight from "../../../../assets/16px-solid/align-horizontal-right.svg";
|
||||||
|
import AlignVerticalTop from "../../../../assets/16px-solid/align-vertical-top.svg";
|
||||||
|
import AlignVerticalCenter from "../../../../assets/16px-solid/align-vertical-center.svg";
|
||||||
|
import AlignVerticalBottom from "../../../../assets/16px-solid/align-vertical-bottom.svg";
|
||||||
|
import FlipHorizontal from "../../../../assets/16px-solid/flip-horizontal.svg";
|
||||||
|
import FlipVertical from "../../../../assets/16px-solid/flip-vertical.svg";
|
||||||
|
import BooleanUnion from "../../../../assets/16px-solid/boolean-union.svg";
|
||||||
|
import BooleanSubtractFront from "../../../../assets/16px-solid/boolean-subtract-front.svg";
|
||||||
|
import BooleanSubtractBack from "../../../../assets/16px-solid/boolean-subtract-back.svg";
|
||||||
|
import BooleanIntersect from "../../../../assets/16px-solid/boolean-intersect.svg";
|
||||||
|
import BooleanDifference from "../../../../assets/16px-solid/boolean-difference.svg";
|
||||||
|
import ZoomReset from "../../../../assets/16px-solid/zoom-reset.svg";
|
||||||
|
import ZoomIn from "../../../../assets/16px-solid/zoom-in.svg";
|
||||||
|
import ZoomOut from "../../../../assets/16px-solid/zoom-out.svg";
|
||||||
|
import ViewModeNormal from "../../../../assets/16px-solid/view-mode-normal.svg";
|
||||||
|
import ViewModeOutline from "../../../../assets/16px-solid/view-mode-outline.svg";
|
||||||
|
import ViewModePixels from "../../../../assets/16px-solid/view-mode-pixels.svg";
|
||||||
|
import EyeVisible from "../../../../assets/16px-solid/visibility-eye-visible.svg";
|
||||||
|
import EyeHidden from "../../../../assets/16px-solid/visibility-eye-hidden.svg";
|
||||||
|
import GraphiteLogo from "../../../../assets/16px-solid/graphite-logo.svg";
|
||||||
|
|
||||||
|
import SwapButton from "../../../../assets/12px-solid/swap.svg";
|
||||||
|
import ResetColorsButton from "../../../../assets/12px-solid/reset-colors.svg";
|
||||||
|
import DropdownArrow from "../../../../assets/12px-solid/dropdown-arrow.svg";
|
||||||
|
import VerticalEllipsis from "../../../../assets/12px-solid/vertical-ellipsis.svg";
|
||||||
|
import CloseX from "../../../../assets/12px-solid/close-x.svg";
|
||||||
|
import WindowButtonWinMinimize from "../../../../assets/12px-solid/window-button-win-minimize.svg";
|
||||||
|
import WindowButtonWinMaximize from "../../../../assets/12px-solid/window-button-win-maximize.svg";
|
||||||
|
import WindowButtonWinRestoreDown from "../../../../assets/12px-solid/window-button-win-restore-down.svg";
|
||||||
|
import WindowButtonWinClose from "../../../../assets/12px-solid/window-button-win-close.svg";
|
||||||
|
|
||||||
|
import MouseHintNone from "../../../../assets/16px-two-tone/mouse-hint-none.svg";
|
||||||
|
import MouseHintLMB from "../../../../assets/16px-two-tone/mouse-hint-lmb.svg";
|
||||||
|
import MouseHintRMB from "../../../../assets/16px-two-tone/mouse-hint-rmb.svg";
|
||||||
|
import MouseHintMMB from "../../../../assets/16px-two-tone/mouse-hint-mmb.svg";
|
||||||
|
import MouseHintScrollUp from "../../../../assets/16px-two-tone/mouse-hint-scroll-up.svg";
|
||||||
|
import MouseHintScrollDown from "../../../../assets/16px-two-tone/mouse-hint-scroll-down.svg";
|
||||||
|
import MouseHintDrag from "../../../../assets/16px-two-tone/mouse-hint-drag.svg";
|
||||||
|
import MouseHintLMBDrag from "../../../../assets/16px-two-tone/mouse-hint-lmb-drag.svg";
|
||||||
|
import MouseHintRMBDrag from "../../../../assets/16px-two-tone/mouse-hint-rmb-drag.svg";
|
||||||
|
import MouseHintMMBDrag from "../../../../assets/16px-two-tone/mouse-hint-mmb-drag.svg";
|
||||||
|
|
||||||
|
import NodeTypePath from "../../../../assets/24px-full-color/node-type-path.svg";
|
||||||
|
|
||||||
|
const icons = {
|
||||||
|
SelectTool: { component: SelectTool, size: 24 },
|
||||||
|
CropTool: { component: CropTool, size: 24 },
|
||||||
|
NavigateTool: { component: NavigateTool, size: 24 },
|
||||||
|
EyedropperTool: { component: EyedropperTool, size: 24 },
|
||||||
|
TextTool: { component: TextTool, size: 24 },
|
||||||
|
FillTool: { component: FillTool, size: 24 },
|
||||||
|
GradientTool: { component: GradientTool, size: 24 },
|
||||||
|
BrushTool: { component: BrushTool, size: 24 },
|
||||||
|
HealTool: { component: HealTool, size: 24 },
|
||||||
|
CloneTool: { component: CloneTool, size: 24 },
|
||||||
|
PatchTool: { component: PatchTool, size: 24 },
|
||||||
|
BlurSharpenTool: { component: BlurSharpenTool, size: 24 },
|
||||||
|
RelightTool: { component: RelightTool, size: 24 },
|
||||||
|
PathTool: { component: PathTool, size: 24 },
|
||||||
|
PenTool: { component: PenTool, size: 24 },
|
||||||
|
FreehandTool: { component: FreehandTool, size: 24 },
|
||||||
|
SplineTool: { component: SplineTool, size: 24 },
|
||||||
|
LineTool: { component: LineTool, size: 24 },
|
||||||
|
RectangleTool: { component: RectangleTool, size: 24 },
|
||||||
|
EllipseTool: { component: EllipseTool, size: 24 },
|
||||||
|
ShapeTool: { component: ShapeTool, size: 24 },
|
||||||
|
AlignHorizontalLeft: { component: AlignHorizontalLeft, size: 16 },
|
||||||
|
AlignHorizontalCenter: { component: AlignHorizontalCenter, size: 16 },
|
||||||
|
AlignHorizontalRight: { component: AlignHorizontalRight, size: 16 },
|
||||||
|
AlignVerticalTop: { component: AlignVerticalTop, size: 16 },
|
||||||
|
AlignVerticalCenter: { component: AlignVerticalCenter, size: 16 },
|
||||||
|
AlignVerticalBottom: { component: AlignVerticalBottom, size: 16 },
|
||||||
|
FlipHorizontal: { component: FlipHorizontal, size: 16 },
|
||||||
|
FlipVertical: { component: FlipVertical, size: 16 },
|
||||||
|
BooleanUnion: { component: BooleanUnion, size: 16 },
|
||||||
|
BooleanSubtractFront: { component: BooleanSubtractFront, size: 16 },
|
||||||
|
BooleanSubtractBack: { component: BooleanSubtractBack, size: 16 },
|
||||||
|
BooleanIntersect: { component: BooleanIntersect, size: 16 },
|
||||||
|
BooleanDifference: { component: BooleanDifference, size: 16 },
|
||||||
|
ZoomReset: { component: ZoomReset, size: 16 },
|
||||||
|
ZoomIn: { component: ZoomIn, size: 16 },
|
||||||
|
ZoomOut: { component: ZoomOut, size: 16 },
|
||||||
|
ViewModeNormal: { component: ViewModeNormal, size: 16 },
|
||||||
|
ViewModeOutline: { component: ViewModeOutline, size: 16 },
|
||||||
|
ViewModePixels: { component: ViewModePixels, size: 16 },
|
||||||
|
EyeVisible: { component: EyeVisible, size: 16 },
|
||||||
|
EyeHidden: { component: EyeHidden, size: 16 },
|
||||||
|
GraphiteLogo: { component: GraphiteLogo, size: 16 },
|
||||||
|
SwapButton: { component: SwapButton, size: 12 },
|
||||||
|
ResetColorsButton: { component: ResetColorsButton, size: 12 },
|
||||||
|
DropdownArrow: { component: DropdownArrow, size: 12 },
|
||||||
|
VerticalEllipsis: { component: VerticalEllipsis, size: 12 },
|
||||||
|
CloseX: { component: CloseX, size: 12 },
|
||||||
|
WindowButtonWinMinimize: { component: WindowButtonWinMinimize, size: 12 },
|
||||||
|
WindowButtonWinMaximize: { component: WindowButtonWinMaximize, size: 12 },
|
||||||
|
WindowButtonWinRestoreDown: { component: WindowButtonWinRestoreDown, size: 12 },
|
||||||
|
WindowButtonWinClose: { component: WindowButtonWinClose, size: 12 },
|
||||||
|
MouseHintNone: { component: MouseHintNone, size: 16 },
|
||||||
|
MouseHintLMB: { component: MouseHintLMB, size: 16 },
|
||||||
|
MouseHintRMB: { component: MouseHintRMB, size: 16 },
|
||||||
|
MouseHintMMB: { component: MouseHintMMB, size: 16 },
|
||||||
|
MouseHintScrollUp: { component: MouseHintScrollUp, size: 16 },
|
||||||
|
MouseHintScrollDown: { component: MouseHintScrollDown, size: 16 },
|
||||||
|
MouseHintDrag: { component: MouseHintDrag, size: 16 },
|
||||||
|
MouseHintLMBDrag: { component: MouseHintLMBDrag, size: 16 },
|
||||||
|
MouseHintRMBDrag: { component: MouseHintRMBDrag, size: 16 },
|
||||||
|
MouseHintMMBDrag: { component: MouseHintMMBDrag, size: 16 },
|
||||||
|
NodeTypePath: { component: NodeTypePath, size: 24 },
|
||||||
|
};
|
||||||
|
|
||||||
|
const components = Object.fromEntries(Object.entries(icons).map(([name, data]) => [name, data.component]));
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
props: {
|
props: {
|
||||||
size: { type: Number, required: true },
|
icon: { type: String, required: true },
|
||||||
gapAfter: { type: Boolean, default: false },
|
gapAfter: { type: Boolean, default: false },
|
||||||
},
|
},
|
||||||
|
components,
|
||||||
|
data() {
|
||||||
|
return { icons };
|
||||||
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -4,16 +4,7 @@
|
||||||
{{ inputKey }}
|
{{ inputKey }}
|
||||||
</span>
|
</span>
|
||||||
<span class="input-mouse" v-if="inputMouse">
|
<span class="input-mouse" v-if="inputMouse">
|
||||||
<MouseHintNone v-if="inputMouse === MouseInputInteraction.None" width="16" height="16" />
|
<Icon :icon="mouseInputInteractionToIcon(inputMouse)" />
|
||||||
<MouseHintLMB v-if="inputMouse === MouseInputInteraction.LMB" width="16" height="16" />
|
|
||||||
<MouseHintRMB v-if="inputMouse === MouseInputInteraction.RMB" width="16" height="16" />
|
|
||||||
<MouseHintMMB v-if="inputMouse === MouseInputInteraction.MMB" width="16" height="16" />
|
|
||||||
<MouseHintScrollUp v-if="inputMouse === MouseInputInteraction.ScrollUp" width="16" height="16" />
|
|
||||||
<MouseHintScrollDown v-if="inputMouse === MouseInputInteraction.ScrollDown" width="16" height="16" />
|
|
||||||
<MouseHintDrag v-if="inputMouse === MouseInputInteraction.Drag" width="16" height="16" />
|
|
||||||
<MouseHintLMBDrag v-if="inputMouse === MouseInputInteraction.LMBDrag" width="16" height="16" />
|
|
||||||
<MouseHintRMBDrag v-if="inputMouse === MouseInputInteraction.RMBDrag" width="16" height="16" />
|
|
||||||
<MouseHintMMBDrag v-if="inputMouse === MouseInputInteraction.MMBDrag" width="16" height="16" />
|
|
||||||
</span>
|
</span>
|
||||||
<span class="hint-text">
|
<span class="hint-text">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
|
|
@ -87,16 +78,7 @@
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from "vue";
|
import { defineComponent } from "vue";
|
||||||
import MouseHintNone from "../../../../assets/16px-two-tone/mouse-hint-none.svg";
|
import Icon from "./Icon.vue";
|
||||||
import MouseHintLMB from "../../../../assets/16px-two-tone/mouse-hint-lmb.svg";
|
|
||||||
import MouseHintRMB from "../../../../assets/16px-two-tone/mouse-hint-rmb.svg";
|
|
||||||
import MouseHintMMB from "../../../../assets/16px-two-tone/mouse-hint-mmb.svg";
|
|
||||||
import MouseHintScrollUp from "../../../../assets/16px-two-tone/mouse-hint-scroll-up.svg";
|
|
||||||
import MouseHintScrollDown from "../../../../assets/16px-two-tone/mouse-hint-scroll-down.svg";
|
|
||||||
import MouseHintDrag from "../../../../assets/16px-two-tone/mouse-hint-drag.svg";
|
|
||||||
import MouseHintLMBDrag from "../../../../assets/16px-two-tone/mouse-hint-lmb-drag.svg";
|
|
||||||
import MouseHintRMBDrag from "../../../../assets/16px-two-tone/mouse-hint-rmb-drag.svg";
|
|
||||||
import MouseHintMMBDrag from "../../../../assets/16px-two-tone/mouse-hint-mmb-drag.svg";
|
|
||||||
|
|
||||||
export enum MouseInputInteraction {
|
export enum MouseInputInteraction {
|
||||||
"None" = "None",
|
"None" = "None",
|
||||||
|
|
@ -112,18 +94,7 @@ export enum MouseInputInteraction {
|
||||||
}
|
}
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: { Icon },
|
||||||
MouseHintNone,
|
|
||||||
MouseHintLMB,
|
|
||||||
MouseHintRMB,
|
|
||||||
MouseHintMMB,
|
|
||||||
MouseHintScrollUp,
|
|
||||||
MouseHintScrollDown,
|
|
||||||
MouseHintDrag,
|
|
||||||
MouseHintLMBDrag,
|
|
||||||
MouseHintRMBDrag,
|
|
||||||
MouseHintMMBDrag,
|
|
||||||
},
|
|
||||||
props: {
|
props: {
|
||||||
inputKeys: { type: Array, default: () => [] },
|
inputKeys: { type: Array, default: () => [] },
|
||||||
inputMouse: { type: String },
|
inputMouse: { type: String },
|
||||||
|
|
@ -132,6 +103,31 @@ export default defineComponent({
|
||||||
keyCapWidth(keyText: string) {
|
keyCapWidth(keyText: string) {
|
||||||
return `width-${keyText.length * 8 + 8}`;
|
return `width-${keyText.length * 8 + 8}`;
|
||||||
},
|
},
|
||||||
|
mouseInputInteractionToIcon(mouseInputInteraction: MouseInputInteraction) {
|
||||||
|
switch (mouseInputInteraction) {
|
||||||
|
case MouseInputInteraction.LMB:
|
||||||
|
return "MouseHintLMB";
|
||||||
|
case MouseInputInteraction.RMB:
|
||||||
|
return "MouseHintRMB";
|
||||||
|
case MouseInputInteraction.MMB:
|
||||||
|
return "MouseHintMMB";
|
||||||
|
case MouseInputInteraction.ScrollUp:
|
||||||
|
return "MouseHintScrollUp";
|
||||||
|
case MouseInputInteraction.ScrollDown:
|
||||||
|
return "MouseHintScrollDown";
|
||||||
|
case MouseInputInteraction.Drag:
|
||||||
|
return "MouseHintDrag";
|
||||||
|
case MouseInputInteraction.LMBDrag:
|
||||||
|
return "MouseHintLMBDrag";
|
||||||
|
case MouseInputInteraction.RMBDrag:
|
||||||
|
return "MouseHintRMBDrag";
|
||||||
|
case MouseInputInteraction.MMBDrag:
|
||||||
|
return "MouseHintMMBDrag";
|
||||||
|
default:
|
||||||
|
case MouseInputInteraction.None:
|
||||||
|
return "MouseHintNone";
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,15 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="windows window-button minimize" title="Minimize">
|
<div class="windows window-button minimize" title="Minimize">
|
||||||
<WindowButtonWinMinimize width="12" height="12" />
|
<Icon :icon="'WindowButtonWinMinimize'" />
|
||||||
</div>
|
</div>
|
||||||
<div class="windows window-button maximize" title="Maximize" v-if="!maximized">
|
<div class="windows window-button maximize" title="Maximize" v-if="!maximized">
|
||||||
<WindowButtonWinMaximize width="12" height="12" />
|
<Icon :icon="'WindowButtonWinMaximize'" />
|
||||||
</div>
|
</div>
|
||||||
<div class="windows window-button restore-down" title="Restore Down" v-if="maximized">
|
<div class="windows window-button restore-down" title="Restore Down" v-if="maximized">
|
||||||
<WindowButtonWinRestoreDown width="12" height="12" />
|
<Icon :icon="'WindowButtonWinRestoreDown'" />
|
||||||
</div>
|
</div>
|
||||||
<div class="windows window-button close" title="Close">
|
<div class="windows window-button close" title="Close">
|
||||||
<WindowButtonWinClose width="12" height="12" />
|
<Icon :icon="'WindowButtonWinClose'" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -39,18 +39,10 @@
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from "vue";
|
import { defineComponent } from "vue";
|
||||||
import WindowButtonWinMinimize from "../../../../assets/12px-solid/window-button-win-minimize.svg";
|
import Icon from "../../widgets/labels/Icon.vue";
|
||||||
import WindowButtonWinMaximize from "../../../../assets/12px-solid/window-button-win-maximize.svg";
|
|
||||||
import WindowButtonWinRestoreDown from "../../../../assets/12px-solid/window-button-win-restore-down.svg";
|
|
||||||
import WindowButtonWinClose from "../../../../assets/12px-solid/window-button-win-close.svg";
|
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: { Icon },
|
||||||
WindowButtonWinMinimize,
|
|
||||||
WindowButtonWinMaximize,
|
|
||||||
WindowButtonWinRestoreDown,
|
|
||||||
WindowButtonWinClose,
|
|
||||||
},
|
|
||||||
props: {
|
props: {
|
||||||
maximized: { type: Boolean, default: false },
|
maximized: { type: Boolean, default: false },
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -4,9 +4,7 @@
|
||||||
<div class="tab-group">
|
<div class="tab-group">
|
||||||
<div class="tab" :class="{ active: tabIndex === tabActiveIndex }" v-for="(tabLabel, tabIndex) in tabLabels" :key="tabLabel">
|
<div class="tab" :class="{ active: tabIndex === tabActiveIndex }" v-for="(tabLabel, tabIndex) in tabLabels" :key="tabLabel">
|
||||||
<span>{{ tabLabel }}</span>
|
<span>{{ tabLabel }}</span>
|
||||||
<IconButton :size="16" :iconSize="12" v-if="tabCloseButtons">
|
<IconButton :icon="'CloseX'" :size="16" v-if="tabCloseButtons" />
|
||||||
<CloseX />
|
|
||||||
</IconButton>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<PopoverButton :icon="PopoverButtonIcon.VerticalEllipsis">
|
<PopoverButton :icon="PopoverButtonIcon.VerticalEllipsis">
|
||||||
|
|
@ -142,7 +140,6 @@ import Minimap from "../panels/Minimap.vue";
|
||||||
import IconButton from "../widgets/buttons/IconButton.vue";
|
import IconButton from "../widgets/buttons/IconButton.vue";
|
||||||
import PopoverButton, { PopoverButtonIcon } from "../widgets/buttons/PopoverButton.vue";
|
import PopoverButton, { PopoverButtonIcon } from "../widgets/buttons/PopoverButton.vue";
|
||||||
import { PopoverDirection } from "../widgets/overlays/Popover.vue";
|
import { PopoverDirection } from "../widgets/overlays/Popover.vue";
|
||||||
import CloseX from "../../../assets/12px-solid/close-x.svg";
|
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
|
|
@ -152,7 +149,6 @@ export default defineComponent({
|
||||||
Minimap,
|
Minimap,
|
||||||
IconButton,
|
IconButton,
|
||||||
PopoverButton,
|
PopoverButton,
|
||||||
CloseX,
|
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
tabMinWidths: { type: Boolean, default: false },
|
tabMinWidths: { type: Boolean, default: false },
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue