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

Standardize icon sizes and folder paths (closes #110)

Browse Source
This commit is contained in:
Keavon Chambers
2021-05-27 00:14:50 -07:00
parent 3fba54fad1
commit 313a1dfc65
110 changed files with 333 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
client/web/src/components/widgets/WorkingColors.vue
View File

@@ -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: {

47
client/web/src/components/widgets/buttons/IconButton.vue
View File

@@ -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 },
},
});

11
client/web/src/components/widgets/buttons/PopoverButton.vue
View File

@@ -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 },

2
client/web/src/components/widgets/inputs/MenuBarInput.vue
View File

@@ -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 },

20
client/web/src/components/widgets/labels/UserInputLabel.vue
View File

@@ -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",