mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-09-18 18:38:05 +08:00
Standardize icon sizes and folder paths (closes #110)
This commit is contained in:
Keavon Chambers
@@ -6,15 +6,15 @@
|
||||
|
||||
<Separator :type="SeparatorType.Section" />
|
||||
|
||||
<IconButton :size="24" title="Horizontal Align Left"><AlignHorizontalLeft /></IconButton>
|
||||
<IconButton :size="24" title="Horizontal Align Center"><AlignHorizontalCenter /></IconButton>
|
||||
<IconButton :size="24" gapAfter title="Horizontal Align Right"><AlignHorizontalRight /></IconButton>
|
||||
<IconButton :size="24" :iconSize="16" title="Horizontal Align Left"><AlignHorizontalLeft /></IconButton>
|
||||
<IconButton :size="24" :iconSize="16" title="Horizontal Align Center"><AlignHorizontalCenter /></IconButton>
|
||||
<IconButton :size="24" :iconSize="16" gapAfter title="Horizontal Align Right"><AlignHorizontalRight /></IconButton>
|
||||
|
||||
<Separator :type="SeparatorType.Unrelated" />
|
||||
|
||||
<IconButton :size="24" title="Vertical Align Top"><AlignVerticalTop /></IconButton>
|
||||
<IconButton :size="24" title="Vertical Align Center"><AlignVerticalCenter /></IconButton>
|
||||
<IconButton :size="24" title="Vertical Align Bottom"><AlignVerticalBottom /></IconButton>
|
||||
<IconButton :size="24" :iconSize="16" title="Vertical Align Top"><AlignVerticalTop /></IconButton>
|
||||
<IconButton :size="24" :iconSize="16" title="Vertical Align Center"><AlignVerticalCenter /></IconButton>
|
||||
<IconButton :size="24" :iconSize="16" title="Vertical Align Bottom"><AlignVerticalBottom /></IconButton>
|
||||
|
||||
<Separator :type="SeparatorType.Related" />
|
||||
|
||||
@@ -25,8 +25,8 @@
|
||||
|
||||
<Separator :type="SeparatorType.Section" />
|
||||
|
||||
<IconButton :size="24" title="Flip Horizontal"><FlipHorizontal /></IconButton>
|
||||
<IconButton :size="24" title="Flip Vertical"><FlipVertical /></IconButton>
|
||||
<IconButton :size="24" :iconSize="16" title="Flip Horizontal"><FlipHorizontal /></IconButton>
|
||||
<IconButton :size="24" :iconSize="16" title="Flip Vertical"><FlipVertical /></IconButton>
|
||||
|
||||
<Separator :type="SeparatorType.Related" />
|
||||
|
||||
@@ -37,11 +37,11 @@
|
||||
|
||||
<Separator :type="SeparatorType.Section" />
|
||||
|
||||
<IconButton :size="24" title="Boolean Union"><BooleanUnion /></IconButton>
|
||||
<IconButton :size="24" title="Boolean Subtract Front"><BooleanSubtractFront /></IconButton>
|
||||
<IconButton :size="24" title="Boolean Subtract Back"><BooleanSubtractBack /></IconButton>
|
||||
<IconButton :size="24" title="Boolean Intersect"><BooleanIntersect /></IconButton>
|
||||
<IconButton :size="24" title="Boolean Difference"><BooleanDifference /></IconButton>
|
||||
<IconButton :size="24" :iconSize="16" title="Boolean Union"><BooleanUnion /></IconButton>
|
||||
<IconButton :size="24" :iconSize="16" title="Boolean Subtract Front"><BooleanSubtractFront /></IconButton>
|
||||
<IconButton :size="24" :iconSize="16" title="Boolean Subtract Back"><BooleanSubtractBack /></IconButton>
|
||||
<IconButton :size="24" :iconSize="16" title="Boolean Intersect"><BooleanIntersect /></IconButton>
|
||||
<IconButton :size="24" :iconSize="16" title="Boolean Difference"><BooleanDifference /></IconButton>
|
||||
|
||||
<Separator :type="SeparatorType.Related" />
|
||||
|
||||
@@ -53,9 +53,9 @@
|
||||
<div class="spacer"></div>
|
||||
<div class="right side">
|
||||
<RadioInput :initialIndex="0" @changed="viewModeChanged">
|
||||
<IconButton :size="24" title="View Mode: Normal"><ViewModeNormal /></IconButton>
|
||||
<IconButton :size="24" title="View Mode: Outline"><ViewModeOutline /></IconButton>
|
||||
<IconButton :size="24" title="View Mode: Pixels"><ViewModePixels /></IconButton>
|
||||
<IconButton :size="24" :iconSize="16" title="View Mode: Normal"><ViewModeNormal /></IconButton>
|
||||
<IconButton :size="24" :iconSize="16" title="View Mode: Outline"><ViewModeOutline /></IconButton>
|
||||
<IconButton :size="24" :iconSize="16" title="View Mode: Pixels"><ViewModePixels /></IconButton>
|
||||
<PopoverButton>
|
||||
<h3>Display Mode</h3>
|
||||
<p>More display mode options will be here</p>
|
||||
@@ -64,9 +64,9 @@
|
||||
|
||||
<Separator :type="SeparatorType.Section" />
|
||||
|
||||
<IconButton :size="24" title="Zoom In"><ZoomIn /></IconButton>
|
||||
<IconButton :size="24" title="Zoom Out"><ZoomOut /></IconButton>
|
||||
<IconButton :size="24" title="Zoom to 100%"><ZoomReset /></IconButton>
|
||||
<IconButton :size="24" :iconSize="16" title="Zoom In"><ZoomIn /></IconButton>
|
||||
<IconButton :size="24" :iconSize="16" title="Zoom Out"><ZoomOut /></IconButton>
|
||||
<IconButton :size="24" :iconSize="16" title="Zoom to 100%"><ZoomReset /></IconButton>
|
||||
|
||||
<Separator :type="SeparatorType.Related" />
|
||||
|
||||
@@ -176,46 +176,46 @@ import IconButton from "../widgets/buttons/IconButton.vue";
|
||||
import PopoverButton from "../widgets/buttons/PopoverButton.vue";
|
||||
import RadioInput from "../widgets/inputs/RadioInput.vue";
|
||||
import NumberInput from "../widgets/inputs/NumberInput.vue";
|
||||
import SelectTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-layout-select.svg";
|
||||
import CropTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-layout-crop.svg";
|
||||
import NavigateTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-layout-navigate.svg";
|
||||
import EyedropperTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-layout-eyedropper.svg";
|
||||
import TextTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-parametric-text.svg";
|
||||
import FillTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-parametric-fill.svg";
|
||||
import GradientTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-parametric-gradient.svg";
|
||||
import BrushTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-raster-brush.svg";
|
||||
import HealTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-raster-heal.svg";
|
||||
import CloneTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-raster-clone.svg";
|
||||
import PatchTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-raster-patch.svg";
|
||||
import BlurSharpenTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-raster-detail.svg";
|
||||
import RelightTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-raster-relight.svg";
|
||||
import PathTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-vector-path.svg";
|
||||
import PenTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-vector-pen.svg";
|
||||
import FreehandTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-vector-freehand.svg";
|
||||
import SplineTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-vector-spline.svg";
|
||||
import LineTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-vector-line.svg";
|
||||
import RectangleTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-vector-rectangle.svg";
|
||||
import EllipseTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-vector-ellipse.svg";
|
||||
import ShapeTool from "../../../assets/svg/24x24-bounds-24x24-icon/document-tool-vector-shape.svg";
|
||||
import AlignHorizontalLeft from "../../../assets/svg/24x24-bounds-16x16-icon/align-horizontal-left.svg";
|
||||
import AlignHorizontalCenter from "../../../assets/svg/24x24-bounds-16x16-icon/align-horizontal-center.svg";
|
||||
import AlignHorizontalRight from "../../../assets/svg/24x24-bounds-16x16-icon/align-horizontal-right.svg";
|
||||
import AlignVerticalTop from "../../../assets/svg/24x24-bounds-16x16-icon/align-vertical-top.svg";
|
||||
import AlignVerticalCenter from "../../../assets/svg/24x24-bounds-16x16-icon/align-vertical-center.svg";
|
||||
import AlignVerticalBottom from "../../../assets/svg/24x24-bounds-16x16-icon/align-vertical-bottom.svg";
|
||||
import FlipHorizontal from "../../../assets/svg/24x24-bounds-16x16-icon/flip-horizontal.svg";
|
||||
import FlipVertical from "../../../assets/svg/24x24-bounds-16x16-icon/flip-vertical.svg";
|
||||
import BooleanUnion from "../../../assets/svg/24x24-bounds-16x16-icon/boolean-union.svg";
|
||||
import BooleanSubtractFront from "../../../assets/svg/24x24-bounds-16x16-icon/boolean-subtract-front.svg";
|
||||
import BooleanSubtractBack from "../../../assets/svg/24x24-bounds-16x16-icon/boolean-subtract-back.svg";
|
||||
import BooleanIntersect from "../../../assets/svg/24x24-bounds-16x16-icon/boolean-intersect.svg";
|
||||
import BooleanDifference from "../../../assets/svg/24x24-bounds-16x16-icon/boolean-difference.svg";
|
||||
import ZoomReset from "../../../assets/svg/24x24-bounds-16x16-icon/zoom-reset.svg";
|
||||
import ZoomIn from "../../../assets/svg/24x24-bounds-16x16-icon/zoom-in.svg";
|
||||
import ZoomOut from "../../../assets/svg/24x24-bounds-16x16-icon/zoom-out.svg";
|
||||
import ViewModeNormal from "../../../assets/svg/24x24-bounds-16x16-icon/view-mode-normal.svg";
|
||||
import ViewModeOutline from "../../../assets/svg/24x24-bounds-16x16-icon/view-mode-outline.svg";
|
||||
import ViewModePixels from "../../../assets/svg/24x24-bounds-16x16-icon/view-mode-pixels.svg";
|
||||
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");
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<LayoutCol :class="'list'">
|
||||
<div class="layer-row" v-for="layer in layers" :key="layer.path">
|
||||
<div class="layer-visibility">
|
||||
<IconButton @click="toggleLayerVisibility(layer.path)" :size="24" :title="layer.visible ? 'Visible' : 'Hidden'">
|
||||
<IconButton @click="toggleLayerVisibility(layer.path)" :size="24" :iconSize="16" :title="layer.visible ? 'Visible' : 'Hidden'">
|
||||
<EyeVisible v-if="layer.visible" />
|
||||
<EyeHidden v-if="!layer.visible" />
|
||||
</IconButton>
|
||||
@@ -91,9 +91,9 @@ import PopoverButton from "../widgets/buttons/PopoverButton.vue";
|
||||
import { PopoverDirection } from "../widgets/overlays/Popover.vue";
|
||||
import IconButton from "../widgets/buttons/IconButton.vue";
|
||||
import Icon from "../widgets/labels/Icon.vue";
|
||||
import EyeVisible from "../../../assets/svg/24x24-bounds-16x16-icon/visibility-eye-visible.svg";
|
||||
import EyeHidden from "../../../assets/svg/24x24-bounds-16x16-icon/visibility-eye-hidden.svg";
|
||||
import NodeTypePath from "../../../assets/svg/24x24-node-type-icon/node-type-path.svg";
|
||||
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");
|
||||
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
<div class="working-colors">
|
||||
<SwatchPairInput />
|
||||
<div class="swap-and-reset">
|
||||
<IconButton :size="16">
|
||||
<IconButton :size="16" :iconSize="12">
|
||||
<SwapButton />
|
||||
</IconButton>
|
||||
<IconButton :size="16">
|
||||
<IconButton :size="16" :iconSize="12">
|
||||
<ResetColorsButton />
|
||||
</IconButton>
|
||||
</div>
|
||||
@@ -24,8 +24,8 @@
|
||||
import { defineComponent } from "vue";
|
||||
import SwatchPairInput from "./inputs/SwatchPairInput.vue";
|
||||
import IconButton from "./buttons/IconButton.vue";
|
||||
import SwapButton from "../../../assets/svg/16x16-bounds-12x12-icon/swap.svg";
|
||||
import ResetColorsButton from "../../../assets/svg/16x16-bounds-12x12-icon/reset-colors.svg";
|
||||
import SwapButton from "../../../assets/12px-solid/swap.svg";
|
||||
import ResetColorsButton from "../../../assets/12px-solid/reset-colors.svg";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<button class="icon-button" :class="`size-${String(size)}`">
|
||||
<button class="icon-button" :class="`size-${String(size)} icon-size-${String(iconSize)}`">
|
||||
<slot></slot>
|
||||
</button>
|
||||
</template>
|
||||
@@ -15,8 +15,6 @@
|
||||
background: none;
|
||||
vertical-align: top;
|
||||
fill: var(--color-e-nearwhite);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
// The `where` pseduo-class does not contribtue to specificity
|
||||
& + :where(.icon-button) {
|
||||
@@ -29,24 +27,38 @@
|
||||
fill: var(--color-f-white);
|
||||
}
|
||||
|
||||
&.size-10 {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
&.icon-size-12 {
|
||||
svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
&.size-16 {
|
||||
padding: (16px - 12px) / 2;
|
||||
}
|
||||
|
||||
&.size-24 {
|
||||
padding: (24px - 12px) / 2;
|
||||
}
|
||||
|
||||
&.size-32 {
|
||||
padding: (32px - 12px) / 2;
|
||||
}
|
||||
}
|
||||
|
||||
&.size-12 {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
&.icon-size-16 {
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&.size-16 {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
&.size-24 {
|
||||
padding: (24px - 16px) / 2;
|
||||
}
|
||||
|
||||
&.size-24 {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
&.size-32 {
|
||||
padding: (32px - 16px) / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -57,6 +69,7 @@ import { defineComponent } from "vue";
|
||||
export default defineComponent({
|
||||
props: {
|
||||
size: { type: Number, required: true },
|
||||
iconSize: { type: Number, required: true },
|
||||
gapAfter: { type: Boolean, default: false },
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="popover-button">
|
||||
<button @click="clickButton">
|
||||
<IconButton :size="16" :iconSize="12" @click="clickButton">
|
||||
<component :is="icon" />
|
||||
</button>
|
||||
</IconButton>
|
||||
<Popover :direction="PopoverDirection.Bottom" ref="popover">
|
||||
<slot></slot>
|
||||
</Popover>
|
||||
@@ -42,8 +42,9 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import DropdownArrow from "../../../../assets/svg/16x24-bounds-8x16-icon/dropdown-arrow.svg";
|
||||
import VerticalEllipsis from "../../../../assets/svg/16x24-bounds-8x16-icon/vertical-ellipsis.svg";
|
||||
import DropdownArrow from "../../../../assets/12px-solid/dropdown-arrow.svg";
|
||||
import VerticalEllipsis from "../../../../assets/12px-solid/vertical-ellipsis.svg";
|
||||
import IconButton from "./IconButton.vue";
|
||||
import Popover, { PopoverDirection } from "../overlays/Popover.vue";
|
||||
|
||||
export enum PopoverButtonIcon {
|
||||
@@ -56,7 +57,7 @@ export default defineComponent({
|
||||
VerticalEllipsis,
|
||||
DropdownArrow,
|
||||
Popover,
|
||||
PopoverDirection,
|
||||
IconButton,
|
||||
},
|
||||
props: {
|
||||
icon: { type: String, default: PopoverButtonIcon.DropdownArrow },
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { ApplicationPlatform } from "../../window/MainWindow.vue";
|
||||
import GraphiteLogo from "../../../../assets/svg/16x16-bounds-16x16-icon/graphite-logo.svg";
|
||||
import GraphiteLogo from "../../../../assets/16px-solid/graphite-logo.svg";
|
||||
|
||||
export default defineComponent({
|
||||
components: { GraphiteLogo },
|
||||
|
||||
@@ -87,16 +87,16 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import MouseHintNone from "../../../../assets/svg/16x16-bounds-16x16-icon/mouse-hint-none.svg";
|
||||
import MouseHintLMB from "../../../../assets/svg/16x16-bounds-16x16-icon/mouse-hint-lmb.svg";
|
||||
import MouseHintRMB from "../../../../assets/svg/16x16-bounds-16x16-icon/mouse-hint-rmb.svg";
|
||||
import MouseHintMMB from "../../../../assets/svg/16x16-bounds-16x16-icon/mouse-hint-mmb.svg";
|
||||
import MouseHintScrollUp from "../../../../assets/svg/16x16-bounds-16x16-icon/mouse-hint-scroll-up.svg";
|
||||
import MouseHintScrollDown from "../../../../assets/svg/16x16-bounds-16x16-icon/mouse-hint-scroll-down.svg";
|
||||
import MouseHintDrag from "../../../../assets/svg/16x16-bounds-16x16-icon/mouse-hint-drag.svg";
|
||||
import MouseHintLMBDrag from "../../../../assets/svg/16x16-bounds-16x16-icon/mouse-hint-lmb-drag.svg";
|
||||
import MouseHintRMBDrag from "../../../../assets/svg/16x16-bounds-16x16-icon/mouse-hint-rmb-drag.svg";
|
||||
import MouseHintMMBDrag from "../../../../assets/svg/16x16-bounds-16x16-icon/mouse-hint-mmb-drag.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";
|
||||
|
||||
export enum MouseInputInteraction {
|
||||
"None" = "None",
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<div class="windows window-button minimize" title="Minimize">
|
||||
<WindowButtonWinMinimize width="10" height="10" />
|
||||
<WindowButtonWinMinimize width="12" height="12" />
|
||||
</div>
|
||||
<div class="windows window-button maximize" title="Maximize" v-if="!maximized">
|
||||
<WindowButtonWinMaximize width="10" height="10" />
|
||||
<WindowButtonWinMaximize width="12" height="12" />
|
||||
</div>
|
||||
<div class="windows window-button restore-down" title="Restore Down" v-if="maximized">
|
||||
<WindowButtonWinRestoreDown width="10" height="10" />
|
||||
<WindowButtonWinRestoreDown width="12" height="12" />
|
||||
</div>
|
||||
<div class="windows window-button close" title="Close">
|
||||
<WindowButtonWinClose width="10" height="10" />
|
||||
<WindowButtonWinClose width="12" height="12" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
.windows.window-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
padding: 0 17px;
|
||||
|
||||
svg {
|
||||
fill: var(--color-e-nearwhite);
|
||||
@@ -39,10 +39,10 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import WindowButtonWinMinimize from "../../../../assets/svg/10x10-bounds-10x10-icon/window-button-win-minimize.svg";
|
||||
import WindowButtonWinMaximize from "../../../../assets/svg/10x10-bounds-10x10-icon/window-button-win-maximize.svg";
|
||||
import WindowButtonWinRestoreDown from "../../../../assets/svg/10x10-bounds-10x10-icon/window-button-win-restore-down.svg";
|
||||
import WindowButtonWinClose from "../../../../assets/svg/10x10-bounds-10x10-icon/window-button-win-close.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";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="tab-group">
|
||||
<div class="tab" :class="{ active: tabIndex === tabActiveIndex }" v-for="(tabLabel, tabIndex) in tabLabels" :key="tabLabel">
|
||||
<span>{{ tabLabel }}</span>
|
||||
<IconButton :size="16" v-if="tabCloseButtons">
|
||||
<IconButton :size="16" :iconSize="12" v-if="tabCloseButtons">
|
||||
<CloseX />
|
||||
</IconButton>
|
||||
</div>
|
||||
@@ -142,8 +142,7 @@ import Minimap from "../panels/Minimap.vue";
|
||||
import IconButton from "../widgets/buttons/IconButton.vue";
|
||||
import PopoverButton, { PopoverButtonIcon } from "../widgets/buttons/PopoverButton.vue";
|
||||
import { PopoverDirection } from "../widgets/overlays/Popover.vue";
|
||||
import VerticalEllipsis from "../../../assets/svg/16x24-bounds-8x16-icon/vertical-ellipsis.svg";
|
||||
import CloseX from "../../../assets/svg/16x16-bounds-12x12-icon/close-x.svg";
|
||||
import CloseX from "../../../assets/12px-solid/close-x.svg";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
@@ -154,7 +153,6 @@ export default defineComponent({
|
||||
IconButton,
|
||||
PopoverButton,
|
||||
CloseX,
|
||||
VerticalEllipsis,
|
||||
},
|
||||
props: {
|
||||
tabMinWidths: { type: Boolean, default: false },
|
||||
|
||||
Reference in New Issue
Block a user