fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-25 15:48:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Reorder tool icons, update favicon and logo, and other icon cleanup

Browse Source
This commit is contained in:
Keavon Chambers
2022-03-04 13:04:59 -08:00
parent acc02cf743
commit d8df4b9369
54 changed files with 320 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/panels/Document.vue
+35 -19
View File
@@ -16,25 +16,12 @@
<LayoutRow class="shelf-and-viewport">
<LayoutCol class="shelf">
<LayoutCol class="tools" :scrollableY="true">
<ShelfItemInput icon="LayoutSelectTool" title="Select Tool (V)" :active="activeTool === 'Select'" :action="() => selectTool('Select')" />
<ShelfItemInput icon="LayoutCropTool" title="Crop Tool" :active="activeTool === 'Crop'" :action="() => selectTool('Crop')" />
<ShelfItemInput icon="LayoutNavigateTool" title="Navigate Tool (Z)" :active="activeTool === 'Navigate'" :action="() => selectTool('Navigate')" />
<ShelfItemInput icon="LayoutEyedropperTool" title="Eyedropper Tool (I)" :active="activeTool === 'Eyedropper'" :action="() => selectTool('Eyedropper')" />
<Separator :type="'Section'" :direction="'Vertical'" />
<ShelfItemInput icon="ParametricTextTool" title="Text Tool (T)" :active="activeTool === 'Text'" :action="() => selectTool('Text')" />
<ShelfItemInput icon="ParametricFillTool" title="Fill Tool (F)" :active="activeTool === 'Fill'" :action="() => selectTool('Fill')" />
<ShelfItemInput icon="ParametricGradientTool" title="Gradient Tool (H)" :active="activeTool === 'Gradient'" :action="() => selectTool('Gradient')" />
<Separator :type="'Section'" :direction="'Vertical'" />
<ShelfItemInput icon="RasterBrushTool" title="Brush Tool (B)" :active="activeTool === 'Brush'" :action="() => (dialog.comingSoon(), false) && selectTool('Brush')" />
<ShelfItemInput icon="RasterHealTool" title="Heal Tool (J)" :active="activeTool === 'Heal'" :action="() => (dialog.comingSoon(), false) && selectTool('Heal')" />
<ShelfItemInput icon="RasterCloneTool" title="Clone Tool (C)" :active="activeTool === 'Clone'" :action="() => (dialog.comingSoon(), false) && selectTool('Clone')" />
<ShelfItemInput icon="RasterPatchTool" title="Patch Tool" :active="activeTool === 'Patch'" :action="() => (dialog.comingSoon(), false) && selectTool('Patch')" />
<ShelfItemInput icon="RasterDetailTool" title="Detail Tool (D)" :active="activeTool === 'Detail'" :action="() => (dialog.comingSoon(), false) && selectTool('Detail')" />
<ShelfItemInput icon="RasterRelightTool" title="Relight Tool (O)" :active="activeTool === 'Relight'" :action="() => (dialog.comingSoon(), false) && selectTool('Relight')" />
<ShelfItemInput icon="GeneralSelectTool" title="Select Tool (V)" :active="activeTool === 'Select'" :action="() => selectTool('Select')" />
<ShelfItemInput icon="GeneralCropTool" title="Crop Tool" :active="activeTool === 'Crop'" :action="() => selectTool('Crop')" />
<ShelfItemInput icon="GeneralNavigateTool" title="Navigate Tool (Z)" :active="activeTool === 'Navigate'" :action="() => selectTool('Navigate')" />
<ShelfItemInput icon="GeneralEyedropperTool" title="Eyedropper Tool (I)" :active="activeTool === 'Eyedropper'" :action="() => selectTool('Eyedropper')" />
<ShelfItemInput icon="GeneralFillTool" title="Fill Tool (F)" :active="activeTool === 'Fill'" :action="() => selectTool('Fill')" />
<ShelfItemInput icon="GeneralGradientTool" title="Gradient Tool (H)" :active="activeTool === 'Gradient'" :action="() => selectTool('Gradient')" />
<Separator :type="'Section'" :direction="'Vertical'" />
@@ -46,6 +33,26 @@
<ShelfItemInput icon="VectorRectangleTool" title="Rectangle Tool (M)" :active="activeTool === 'Rectangle'" :action="() => selectTool('Rectangle')" />
<ShelfItemInput icon="VectorEllipseTool" title="Ellipse Tool (E)" :active="activeTool === 'Ellipse'" :action="() => selectTool('Ellipse')" />
<ShelfItemInput icon="VectorShapeTool" title="Shape Tool (Y)" :active="activeTool === 'Shape'" :action="() => selectTool('Shape')" />
<ShelfItemInput icon="VectorTextTool" title="Text Tool (T)" :active="activeTool === 'Text'" :action="() => selectTool('Text')" />
<Separator :type="'Section'" :direction="'Vertical'" />
<ShelfItemInput icon="RasterBrushTool" title="Coming Soon: Brush Tool (B)" :active="activeTool === 'Brush'" :action="() => (dialog.comingSoon(), false) && selectTool('Brush')" />
<ShelfItemInput icon="RasterHealTool" title="Coming Soon: Heal Tool (J)" :active="activeTool === 'Heal'" :action="() => (dialog.comingSoon(), false) && selectTool('Heal')" />
<ShelfItemInput icon="RasterCloneTool" title="Coming Soon: Clone Tool (C)" :active="activeTool === 'Clone'" :action="() => (dialog.comingSoon(), false) && selectTool('Clone')" />
<ShelfItemInput icon="RasterPatchTool" title="Coming Soon: Patch Tool" :active="activeTool === 'Patch'" :action="() => (dialog.comingSoon(), false) && selectTool('Patch')" />
<ShelfItemInput
icon="RasterDetailTool"
title="Coming Soon: Detail Tool (D)"
:active="activeTool === 'Detail'"
:action="() => (dialog.comingSoon(), false) && selectTool('Detail')"
/>
<ShelfItemInput
icon="RasterRelightTool"
title="Coming Soon: Relight Tool (O)"
:active="activeTool === 'Relight'"
:action="() => (dialog.comingSoon(), false) && selectTool('Relight')"
/>
</LayoutCol>
<LayoutCol class="spacer"></LayoutCol>
@@ -126,6 +133,15 @@
.tools {
flex: 0 1 auto;
.shelf-item-input[title^="Coming Soon"] {
opacity: 0.25;
transition: opacity 0.25s;
&:hover {
opacity: 1;
}
}
}
.spacer {
frontend/src/utilities/icons.ts
+14 -14
View File
@@ -73,13 +73,12 @@ import MouseHintScrollUp from "@/../assets/16px-two-tone/mouse-hint-scroll-up.sv
import NodeTypeFolder from "@/../assets/24px-full-color/node-type-folder.svg";
import NodeTypePath from "@/../assets/24px-full-color/node-type-path.svg";
import LayoutCropTool from "@/../assets/24px-two-tone/layout-crop-tool.svg";
import LayoutEyedropperTool from "@/../assets/24px-two-tone/layout-eyedropper-tool.svg";
import LayoutNavigateTool from "@/../assets/24px-two-tone/layout-navigate-tool.svg";
import LayoutSelectTool from "@/../assets/24px-two-tone/layout-select-tool.svg";
import ParametricFillTool from "@/../assets/24px-two-tone/parametric-fill-tool.svg";
import ParametricGradientTool from "@/../assets/24px-two-tone/parametric-gradient-tool.svg";
import ParametricTextTool from "@/../assets/24px-two-tone/parametric-text-tool.svg";
import GeneralCropTool from "@/../assets/24px-two-tone/general-crop-tool.svg";
import GeneralEyedropperTool from "@/../assets/24px-two-tone/general-eyedropper-tool.svg";
import GeneralFillTool from "@/../assets/24px-two-tone/general-fill-tool.svg";
import GeneralGradientTool from "@/../assets/24px-two-tone/general-gradient-tool.svg";
import GeneralNavigateTool from "@/../assets/24px-two-tone/general-navigate-tool.svg";
import GeneralSelectTool from "@/../assets/24px-two-tone/general-select-tool.svg";
import RasterBrushTool from "@/../assets/24px-two-tone/raster-brush-tool.svg";
import RasterCloneTool from "@/../assets/24px-two-tone/raster-clone-tool.svg";
import RasterDetailTool from "@/../assets/24px-two-tone/raster-detail-tool.svg";
@@ -94,6 +93,7 @@ import VectorPenTool from "@/../assets/24px-two-tone/vector-pen-tool.svg";
import VectorRectangleTool from "@/../assets/24px-two-tone/vector-rectangle-tool.svg";
import VectorShapeTool from "@/../assets/24px-two-tone/vector-shape-tool.svg";
import VectorSplineTool from "@/../assets/24px-two-tone/vector-spline-tool.svg";
import VectorTextTool from "@/../assets/24px-two-tone/vector-text-tool.svg";
export type IconName = keyof typeof ICON_LIST;
export type IconSize = 12 | 16 | 24 | 32;
@@ -179,13 +179,12 @@ export const ICON_LIST = {
NodeTypeFolder: { component: NodeTypeFolder, size: size24 },
NodeTypePath: { component: NodeTypePath, size: size24 },
LayoutCropTool: { component: LayoutCropTool, size: size24 },
LayoutEyedropperTool: { component: LayoutEyedropperTool, size: size24 },
LayoutNavigateTool: { component: LayoutNavigateTool, size: size24 },
LayoutSelectTool: { component: LayoutSelectTool, size: size24 },
ParametricFillTool: { component: ParametricFillTool, size: size24 },
ParametricGradientTool: { component: ParametricGradientTool, size: size24 },
ParametricTextTool: { component: ParametricTextTool, size: size24 },
GeneralCropTool: { component: GeneralCropTool, size: size24 },
GeneralEyedropperTool: { component: GeneralEyedropperTool, size: size24 },
GeneralNavigateTool: { component: GeneralNavigateTool, size: size24 },
GeneralSelectTool: { component: GeneralSelectTool, size: size24 },
GeneralFillTool: { component: GeneralFillTool, size: size24 },
GeneralGradientTool: { component: GeneralGradientTool, size: size24 },
RasterBrushTool: { component: RasterBrushTool, size: size24 },
RasterCloneTool: { component: RasterCloneTool, size: size24 },
RasterDetailTool: { component: RasterDetailTool, size: size24 },
@@ -200,4 +199,5 @@ export const ICON_LIST = {
VectorRectangleTool: { component: VectorRectangleTool, size: size24 },
VectorShapeTool: { component: VectorShapeTool, size: size24 },
VectorSplineTool: { component: VectorSplineTool, size: size24 },
VectorTextTool: { component: VectorTextTool, size: size24 },
};