fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-25 17: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: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/title-bar/TitleBar.vue
+30 -22
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>
frontend/src/components/window/title-bar/WindowButtonsMac.vue
+13 -6
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>
frontend/src/components/window/title-bar/WindowButtonsWeb.vue
+5 -3
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>
frontend/src/components/window/title-bar/WindowButtonsWindows.vue
+15 -11
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 },
},
frontend/src/components/window/title-bar/WindowTitle.vue
+6 -3
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>