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

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 12ef88f261
commit c215719598
34 changed files with 385 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/components/window/MainWindow.vue
View File

@@ -1,14 +1,10 @@
<template>
<LayoutCol class="main-window">
<LayoutRow class="title-bar-row">
<TitleBar :platform="platform" :maximized="maximized" />
</LayoutRow>
<LayoutRow class="workspace-row">
<Workspace />
</LayoutRow>
<LayoutRow class="status-bar-row">
<StatusBar />
</LayoutRow>
<TitleBar :platform="platform" :maximized="maximized" />
<Workspace />
<StatusBar />
</LayoutCol>
</template>
@@ -18,29 +14,12 @@
overflow: auto;
touch-action: none;
}
.title-bar-row {
height: 28px;
flex: 0 0 auto;
}
.workspace-row {
position: relative;
flex: 1 1 100%;
}
.status-bar-row {
flex: 0 0 auto;
// Prevents the creation of a scrollbar due to the child's negative margin
overflow: hidden;
}
</style>
<script lang="ts">
import { defineComponent } from "vue";
import LayoutCol from "@/components/layout/LayoutCol.vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import StatusBar from "@/components/window/status-bar/StatusBar.vue";
import TitleBar from "@/components/window/title-bar/TitleBar.vue";
import Workspace from "@/components/workspace/Workspace.vue";
@@ -49,7 +28,6 @@ export type ApplicationPlatform = "Windows" | "Mac" | "Linux" | "Web";
export default defineComponent({
components: {
LayoutRow,
LayoutCol,
TitleBar,
Workspace,

59
frontend/src/components/window/status-bar/StatusBar.vue
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>

52
frontend/src/components/window/title-bar/TitleBar.vue
View File

@@ -1,32 +1,38 @@
<template>
<div class="header-third">
<WindowButtonsMac :maximized="maximized" v-if="platform === 'Mac'" />
<MenuBarInput v-if="platform !== 'Mac'" />
</div>
<div class="header-third">
<WindowTitle :title="`${activeDocumentDisplayName} - Graphite`" />
</div>
<div class="header-third">
<WindowButtonsWindows :maximized="maximized" v-if="platform === 'Windows' || platform === 'Linux'" />
<WindowButtonsWeb :maximized="maximized" v-if="platform === 'Web'" />
</div>
<LayoutRow class="title-bar">
<LayoutRow class="header-part">
<WindowButtonsMac :maximized="maximized" v-if="platform === 'Mac'" />
<MenuBarInput v-if="platform !== 'Mac'" />
</LayoutRow>
<LayoutRow class="header-part">
<WindowTitle :title="`${activeDocumentDisplayName} - Graphite`" />
</LayoutRow>
<LayoutRow class="header-part">
<WindowButtonsWindows :maximized="maximized" v-if="platform === 'Windows' || platform === 'Linux'" />
<WindowButtonsWeb :maximized="maximized" v-if="platform === 'Web'" />
</LayoutRow>
</LayoutRow>
</template>
<style lang="scss">
.header-third {
display: flex;
flex: 1 1 100%;
.title-bar {
height: 28px;
flex: 0 0 auto;
&:nth-child(1) {
justify-content: flex-start;
}
.header-part {
flex: 1 1 100%;
&:nth-child(2) {
justify-content: center;
}
&:nth-child(1) {
justify-content: flex-start;
}
&:nth-child(3) {
justify-content: flex-end;
&:nth-child(2) {
justify-content: center;
}
&:nth-child(3) {
justify-content: flex-end;
}
}
}
</style>
@@ -34,6 +40,7 @@
<script lang="ts">
import { defineComponent, PropType } from "vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import MenuBarInput from "@/components/widgets/inputs/MenuBarInput.vue";
import WindowButtonsMac from "@/components/window/title-bar/WindowButtonsMac.vue";
import WindowButtonsWeb from "@/components/window/title-bar/WindowButtonsWeb.vue";
@@ -59,6 +66,7 @@ export default defineComponent({
WindowButtonsWindows,
WindowButtonsMac,
WindowButtonsWeb,
LayoutRow,
},
});
</script>

19
frontend/src/components/window/title-bar/WindowButtonsMac.vue
View File

@@ -1,24 +1,28 @@
<template>
<div class="mac window-buttons">
<LayoutRow class="window-buttons mac">
<div class="close" title="Close"></div>
<div class="minimize" title="Minimize"></div>
<div class="zoom" title="Zoom"></div>
</div>
</LayoutRow>
</template>
<style lang="scss">
.mac.window-buttons {
display: flex;
.window-buttons.mac {
flex: 0 0 auto;
align-items: center;
margin: 0 8px;
div {
display: flex;
flex: 0 0 auto;
align-items: center;
margin-left: 8px;
width: 11px;
height: 11px;
border-radius: 50%;
& + div {
margin-left: 8px;
}
&.close {
background: #ff5a52;
}
@@ -37,9 +41,12 @@
<script lang="ts">
import { defineComponent, PropType } from "vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
export default defineComponent({
props: {
maximized: { type: Boolean as PropType<boolean>, default: false },
},
components: { LayoutRow },
});
</script>

8
frontend/src/components/window/title-bar/WindowButtonsWeb.vue
View File

@@ -1,13 +1,13 @@
<template>
<div class="window-buttons-web" @click="() => handleClick()" :title="fullscreen.state.windowFullscreen ? 'Exit Fullscreen (F11)' : 'Enter Fullscreen (F11)'">
<LayoutRow class="window-buttons-web" @click="() => handleClick()" :title="fullscreen.state.windowFullscreen ? 'Exit Fullscreen (F11)' : 'Enter Fullscreen (F11)'">
<TextLabel v-if="requestFullscreenHotkeys" :italic="true">Go fullscreen to access all hotkeys</TextLabel>
<IconLabel :icon="fullscreen.state.windowFullscreen ? 'FullscreenExit' : 'FullscreenEnter'" />
</div>
</LayoutRow>
</template>
<style lang="scss">
.window-buttons-web {
display: flex;
flex: 0 0 auto;
align-items: center;
padding: 0 8px;
@@ -33,6 +33,7 @@
<script lang="ts">
import { defineComponent } from "vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
import TextLabel from "@/components/widgets/labels/TextLabel.vue";
@@ -52,6 +53,7 @@ export default defineComponent({
components: {
IconLabel,
TextLabel,
LayoutRow,
},
});
</script>

26
frontend/src/components/window/title-bar/WindowButtonsWindows.vue
View File

@@ -1,21 +1,21 @@
<template>
<div class="windows window-button minimize" title="Minimize">
<LayoutRow class="window-button windows minimize" title="Minimize">
<IconLabel :icon="'WindowButtonWinMinimize'" />
</div>
<div class="windows window-button maximize" title="Maximize" v-if="!maximized">
</LayoutRow>
<LayoutRow class="window-button windows maximize" title="Maximize" v-if="!maximized">
<IconLabel :icon="'WindowButtonWinMaximize'" />
</div>
<div class="windows window-button restore-down" title="Restore Down" v-if="maximized">
</LayoutRow>
<LayoutRow class="window-button windows restore-down" title="Restore Down" v-if="maximized">
<IconLabel :icon="'WindowButtonWinRestoreDown'" />
</div>
<div class="windows window-button close" title="Close">
</LayoutRow>
<LayoutRow class="window-button windows close" title="Close">
<IconLabel :icon="'WindowButtonWinClose'" />
</div>
</LayoutRow>
</template>
<style lang="scss">
.windows.window-button {
display: flex;
.window-button.windows {
flex: 0 0 auto;
align-items: center;
padding: 0 17px;
@@ -40,10 +40,14 @@
<script lang="ts">
import { defineComponent, PropType } from "vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
export default defineComponent({
components: { IconLabel },
components: {
IconLabel,
LayoutRow,
},
props: {
maximized: { type: Boolean as PropType<boolean>, default: false },
},

9
frontend/src/components/window/title-bar/WindowTitle.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="window-title">
<LayoutRow class="window-title">
<span>{{ title }}</span>
</div>
</LayoutRow>
</template>
<style lang="scss">
.window-title {
display: flex;
flex: 0 0 auto;
align-items: center;
white-space: nowrap;
padding: 0 8px;
@@ -16,9 +16,12 @@
<script lang="ts">
import { defineComponent, PropType } from "vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
export default defineComponent({
props: {
title: { type: String as PropType<string>, required: true },
},
components: { LayoutRow },
});
</script>