fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-26 00:48: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:23:35 -08:00
parent 45d75bd13f
commit 8c29592db8
34 changed files with 385 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/window/status-bar/StatusBar.vue
+35 -24
View File
@@ -1,33 +1,42 @@
<template>
<div class="status-bar">
<template v-for="(hintGroup, index) in hintData" :key="hintGroup">
<Separator :type="'Section'" v-if="index !== 0" />
<template v-for="hint in hintGroup" :key="hint">
<span v-if="hint.plus" class="plus">+</span>
<UserInputLabel :inputMouse="hint.mouse" :inputKeys="hint.key_groups">{{ hint.label }}</UserInputLabel>
<LayoutRow class="status-bar">
<LayoutRow class="hint-groups">
<template v-for="(hintGroup, index) in hintData" :key="hintGroup">
<Separator :type="'Section'" v-if="index !== 0" />
<template v-for="hint in hintGroup" :key="hint">
<LayoutRow v-if="hint.plus" class="plus">+</LayoutRow>
<UserInputLabel :inputMouse="hint.mouse" :inputKeys="hint.key_groups">{{ hint.label }}</UserInputLabel>
</template>
</template>
</template>
</div>
</LayoutRow>
</LayoutRow>
</template>
<style lang="scss">
.status-bar {
display: flex;
height: 24px;
margin: 0 -4px;
width: 100%;
flex: 0 0 auto;
.separator.section {
margin: 0;
}
.hint-groups {
flex: 0 0 auto;
max-width: 100%;
margin: 0 -4px;
overflow: hidden;
.plus {
display: flex;
align-items: center;
font-weight: 700;
}
.separator.section {
margin: 0;
}
.user-input-label + .user-input-label {
margin-left: 0;
.plus {
flex: 0 0 auto;
align-items: center;
font-weight: 700;
}
.user-input-label + .user-input-label {
margin-left: 0;
}
}
}
</style>
@@ -37,15 +46,12 @@ import { defineComponent } from "vue";
import { HintData, UpdateInputHints } from "@/dispatcher/js-messages";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
import Separator from "@/components/widgets/separators/Separator.vue";
export default defineComponent({
inject: ["editor"],
components: {
UserInputLabel,
Separator,
},
data() {
return {
hintData: [] as HintData,
@@ -60,5 +66,10 @@ export default defineComponent({
this.editor.instance.select_tool("Path");
this.editor.instance.select_tool("Select");
},
components: {
UserInputLabel,
Separator,
LayoutRow,
},
});
</script>