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

Clean up web code's use of display CSS properties, using <LayoutRow>/<LayoutCol> where intended

Browse Source
This commit is contained in:
Keavon Chambers
2022-01-23 20:24:50 -08:00
parent 12ef88f261
commit c215719598
34 changed files with 385 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/widgets/labels/IconLabel.vue
+8 -4
View File
@@ -1,12 +1,11 @@
<template>
<div class="icon-label" :class="`size-${icons[icon].size}`">
<LayoutRow class="icon-label" :class="`size-${icons[icon].size}`">
<component :is="icon" />
</div>
</LayoutRow>
</template>
<style lang="scss">
.icon-label {
display: block;
flex: 0 0 auto;
fill: var(--color-e-nearwhite);
@@ -32,10 +31,11 @@ import { DefineComponent, defineComponent, PropType } from "vue";
import { IconName, IconSize, ICON_LIST } from "@/utilities/icons";
import LayoutRow from "@/components/layout/LayoutRow.vue";
const icons: Record<IconName, { component: DefineComponent; size: IconSize }> = ICON_LIST;
export default defineComponent({
components: Object.fromEntries(Object.entries(icons).map(([name, data]) => [name, data.component])),
props: {
icon: { type: String as PropType<IconName>, required: true },
gapAfter: { type: Boolean as PropType<boolean>, default: false },
@@ -45,5 +45,9 @@ export default defineComponent({
icons,
};
},
components: {
LayoutRow,
...Object.fromEntries(Object.entries(icons).map(([name, data]) => [name, data.component])),
},
});
</script>
frontend/src/components/widgets/labels/UserInputLabel.vue
+12 -6
View File
@@ -1,5 +1,5 @@
<template>
<div class="user-input-label">
<LayoutRow class="user-input-label">
<template v-for="(keyGroup, keyGroupIndex) in inputKeys" :key="keyGroupIndex">
<span class="group-gap" v-if="keyGroupIndex > 0"></span>
<template v-for="(keyInfo, index) in keyTextOrIconList(keyGroup)" :key="index">
@@ -15,14 +15,14 @@
<span class="hint-text" v-if="hasSlotContent">
<slot></slot>
</span>
</div>
</LayoutRow>
</template>
<style lang="scss">
.user-input-label {
flex: 0 0 auto;
height: 100%;
margin: 0 8px;
display: flex;
align-items: center;
white-space: nowrap;
@@ -39,6 +39,9 @@
}
.input-key {
display: flex;
justify-content: center;
align-items: center;
font-family: "Inconsolata", monospace;
font-weight: 400;
text-align: center;
@@ -49,7 +52,7 @@
border-color: var(--color-7-middlegray);
border-radius: 4px;
height: 16px;
// Firefox renders the text 1px lower than Chrome (tested on Windows) with 16px line-height, so moving it up 1 pixel with 15px makes them agree
// Firefox renders the text 1px lower than Chrome (tested on Windows) with 16px line-height, so moving it up 1 pixel by using 15px makes them agree
line-height: 15px;
&.width-16 {
@@ -74,7 +77,6 @@
.icon-label {
margin: 1px;
display: inline-block;
}
}
@@ -101,10 +103,14 @@ import { HintInfo, KeysGroup } from "@/dispatcher/js-messages";
import { IconName } from "@/utilities/icons";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
export default defineComponent({
components: { IconLabel },
components: {
IconLabel,
LayoutRow,
},
props: {
inputKeys: { type: Array as PropType<HintInfo["key_groups"]>, default: () => [] },
inputMouse: { type: String as PropType<HintInfo["mouse"]>, default: null },