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

Move all icon SVG imports to the Icon component

Browse Source 
This change also removes the need to specify the icon size.
This commit is contained in:
Keavon Chambers
2021-05-27 02:14:32 -07:00
parent 5016fde231
commit cdcddf176b
11 changed files with 254 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/web/src/components/widgets/buttons/IconButton.vue
+22 -32
View File
@@ -1,12 +1,14 @@
<template>
<button class="icon-button" :class="`size-${String(size)} icon-size-${String(iconSize)}`">
<slot></slot>
<button class="icon-button" :class="`size-${String(size)}`">
<Icon :icon="icon" />
</button>
</template>
<style lang="scss">
.icon-button {
display: inline-block;
display: inline-flex;
justify-content: center;
align-items: center;
flex: 0 0 auto;
padding: 0;
outline: none;
@@ -27,50 +29,38 @@
fill: var(--color-f-white);
}
&.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;
}
&.size-32 {
width: 32px;
height: 32px;
}
}
</style>
<script lang="ts">
import { defineComponent } from "vue";
import Icon from "../labels/Icon.vue";
export default defineComponent({
props: {
icon: { type: String, required: true },
size: { type: Number, required: true },
iconSize: { type: Number, required: true },
gapAfter: { type: Boolean, default: false },
},
components: { Icon },
});
</script>
client/web/src/components/widgets/buttons/PopoverButton.vue
+2 -8
View File
@@ -1,8 +1,6 @@
<template>
<div class="popover-button">
<IconButton :size="16" :iconSize="12" @click="clickButton">
<component :is="icon" />
</IconButton>
<IconButton :icon="icon" :size="16" @click="clickButton" />
<Popover :direction="PopoverDirection.Bottom" ref="popover">
<slot></slot>
</Popover>
@@ -21,7 +19,7 @@
left: 50%;
}
button {
.icon-button {
width: 100%;
height: 100%;
padding: 0;
@@ -42,8 +40,6 @@
<script lang="ts">
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 Popover, { PopoverDirection } from "../overlays/Popover.vue";
@@ -54,8 +50,6 @@ export enum PopoverButtonIcon {
export default defineComponent({
components: {
VerticalEllipsis,
DropdownArrow,
Popover,
IconButton,
},