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

Add the checkbox input widget (#204)

Browse Source 
* Add the checkbox input widget

* Add OptionalInput widget
This commit is contained in:
Keavon Chambers
2021-07-08 14:10:30 -07:00
parent 8eea3720f2
commit 12dac1c154
16 changed files with 274 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/web/src/components/widgets/WorkingColors.vue
+2 -2
View File
@@ -2,8 +2,8 @@
<div class="working-colors">
<SwatchPairInput />
<div class="swap-and-reset">
<IconButton @click="swapColors" :icon="'SwapButton'" title="Swap (Shift+X)" :size="16" />
<IconButton @click="resetColors" :icon="'ResetColorsButton'" title="Reset (Ctrl+Shift+X)" :size="16" />
<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>
client/web/src/components/widgets/buttons/PopoverButton.vue
+9
View File
@@ -35,6 +35,15 @@
fill: var(--color-f-white);
}
}
// TODO: Refactor this and other complicated cases dealing with joined widget margins and border-radius by adding a single standard set of classes: joined-first, joined-inner, and joined-last
div[class*="-input"] + & {
margin-left: 1px;
.icon-button {
border-radius: 0 2px 2px 0;
}
}
}
</style>
client/web/src/components/widgets/inputs/CheckboxInput.vue
+74
View File
@@ -0,0 +1,74 @@
<template>
<div class="checkbox-input">
<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" />
</div>
</label>
</div>
</template>
<style lang="scss">
.checkbox-input {
display: inline-block;
input {
display: none;
}
label {
display: block;
.checkbox-box {
display: block;
background: var(--color-e-nearwhite);
padding: 2px;
border-radius: 2px;
&:hover {
background: var(--color-f-white);
}
.icon {
fill: var(--color-2-mildblack);
}
}
}
input:checked + label .checkbox-box {
background: var(--color-accent);
&:hover {
background: var(--color-accent-hover);
}
.icon {
fill: var(--color-f-white);
}
}
}
</style>
<script lang="ts">
import { defineComponent } from "vue";
import Icon from "../labels/Icon.vue";
export default defineComponent({
data() {
return {
id: `${Math.random()}`.substring(2),
};
},
methods: {
isChecked() {
return this.checked;
},
},
props: {
checked: { type: Boolean, required: true },
icon: { type: String, default: "Checkmark" },
},
components: { Icon },
});
</script>
client/web/src/components/widgets/inputs/OptionalInput.vue
+80
View File
@@ -0,0 +1,80 @@
<template>
<div class="optional-input">
<CheckboxInput :checked="checked" @input="(e) => $emit('update:checked', e.target.checked)" :icon="icon" />
</div>
</template>
<style lang="scss">
.optional-input {
label {
display: flex;
align-items: center;
white-space: nowrap;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 2px 0 0 2px;
background: var(--color-5-dullgray);
.checkbox-box {
background: var(--color-e-nearwhite);
.icon {
fill: var(--color-5-dullgray);
}
}
&:hover {
background: var(--color-6-lowergray);
.checkbox-box {
background: var(--color-f-white);
.icon {
fill: var(--color-6-lowergray);
}
}
}
}
input:checked + label {
background: var(--color-accent);
.checkbox-box,
.checkbox-box:hover {
background: var(--color-f-white);
.icon {
fill: var(--color-accent);
}
}
&:hover {
background: var(--color-accent-hover);
.checkbox-box,
.checkbox-box:hover {
.icon {
fill: var(--color-accent-hover);
}
}
}
}
}
</style>
<script lang="ts">
import { defineComponent } from "vue";
import CheckboxInput from "./CheckboxInput.vue";
export default defineComponent({
props: {
checked: { type: Boolean, required: true },
icon: { type: String, default: "Checkmark" },
},
components: {
CheckboxInput,
},
});
</script>
client/web/src/components/widgets/labels/Icon.vue
+37 -27
View File
@@ -30,27 +30,27 @@
<script lang="ts">
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 SelectTool from "../../../../assets/24px-two-tone/document-tool-layout-select.svg"; // TODO: Rename
import CropTool from "../../../../assets/24px-two-tone/document-tool-layout-crop.svg"; // TODO: Rename
import NavigateTool from "../../../../assets/24px-two-tone/document-tool-layout-navigate.svg"; // TODO: Rename
import EyedropperTool from "../../../../assets/24px-two-tone/document-tool-layout-eyedropper.svg"; // TODO: Rename
import TextTool from "../../../../assets/24px-two-tone/document-tool-parametric-text.svg"; // TODO: Rename
import FillTool from "../../../../assets/24px-two-tone/document-tool-parametric-fill.svg"; // TODO: Rename
import GradientTool from "../../../../assets/24px-two-tone/document-tool-parametric-gradient.svg"; // TODO: Rename
import BrushTool from "../../../../assets/24px-two-tone/document-tool-raster-brush.svg"; // TODO: Rename
import HealTool from "../../../../assets/24px-two-tone/document-tool-raster-heal.svg"; // TODO: Rename
import CloneTool from "../../../../assets/24px-two-tone/document-tool-raster-clone.svg"; // TODO: Rename
import PatchTool from "../../../../assets/24px-two-tone/document-tool-raster-patch.svg"; // TODO: Rename
import BlurSharpenTool from "../../../../assets/24px-two-tone/document-tool-raster-detail.svg"; // TODO: Rename
import RelightTool from "../../../../assets/24px-two-tone/document-tool-raster-relight.svg"; // TODO: Rename
import PathTool from "../../../../assets/24px-two-tone/document-tool-vector-path.svg"; // TODO: Rename
import PenTool from "../../../../assets/24px-two-tone/document-tool-vector-pen.svg"; // TODO: Rename
import FreehandTool from "../../../../assets/24px-two-tone/document-tool-vector-freehand.svg"; // TODO: Rename
import SplineTool from "../../../../assets/24px-two-tone/document-tool-vector-spline.svg"; // TODO: Rename
import LineTool from "../../../../assets/24px-two-tone/document-tool-vector-line.svg"; // TODO: Rename
import RectangleTool from "../../../../assets/24px-two-tone/document-tool-vector-rectangle.svg"; // TODO: Rename
import EllipseTool from "../../../../assets/24px-two-tone/document-tool-vector-ellipse.svg"; // TODO: Rename
import ShapeTool from "../../../../assets/24px-two-tone/document-tool-vector-shape.svg"; // TODO: Rename
import AlignHorizontalLeft from "../../../../assets/16px-solid/align-horizontal-left.svg";
import AlignHorizontalCenter from "../../../../assets/16px-solid/align-horizontal-center.svg";
@@ -71,8 +71,8 @@ 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 EyeVisible from "../../../../assets/16px-solid/eye-visible.svg";
import EyeHidden from "../../../../assets/16px-solid/eye-hidden.svg";
import GraphiteLogo from "../../../../assets/16px-solid/graphite-logo.svg";
import File from "../../../../assets/16px-solid/file.svg";
import Copy from "../../../../assets/16px-solid/copy.svg";
@@ -81,8 +81,13 @@ import ViewportDesignMode from "../../../../assets/16px-solid/viewport-design-mo
import ViewportSelectMode from "../../../../assets/16px-solid/viewport-select-mode.svg";
import ViewportGuideMode from "../../../../assets/16px-solid/viewport-guide-mode.svg";
import SwapButton from "../../../../assets/12px-solid/swap.svg";
import ResetColorsButton from "../../../../assets/12px-solid/reset-colors.svg";
import Checkmark from "../../../../assets/12px-solid/checkmark.svg";
import Link from "../../../../assets/12px-solid/link.svg";
import Grid from "../../../../assets/12px-solid/grid.svg";
import Overlays from "../../../../assets/12px-solid/overlays.svg";
import Snapping from "../../../../assets/12px-solid/snapping.svg";
import Swap from "../../../../assets/12px-solid/swap.svg";
import ResetColors 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";
@@ -154,8 +159,13 @@ const icons = {
ViewportDesignMode: { component: ViewportDesignMode, size: 16 },
ViewportSelectMode: { component: ViewportSelectMode, size: 16 },
ViewportGuideMode: { component: ViewportGuideMode, size: 16 },
SwapButton: { component: SwapButton, size: 12 },
ResetColorsButton: { component: ResetColorsButton, size: 12 },
Checkmark: { component: Checkmark, size: 12 },
Link: { component: Link, size: 12 },
Grid: { component: Grid, size: 12 },
Overlays: { component: Overlays, size: 12 },
Snapping: { component: Snapping, size: 12 },
Swap: { component: Swap, size: 12 },
ResetColors: { component: ResetColors, size: 12 },
DropdownArrow: { component: DropdownArrow, size: 12 },
VerticalEllipsis: { component: VerticalEllipsis, size: 12 },
CloseX: { component: CloseX, size: 12 },