jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Window title bar now draws for Windows, Mac, Linux, and Web

This commit is contained in:
Keavon Chambers 2021-02-20 19:42:07 -08:00
parent f367f12ca2
commit 3582432fc7
10 changed files with 152 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
web-frontend/src/components/header/HeaderBar.vue
View File

@ -1,45 +0,0 @@
<template>
<div class="header-third">
<FileMenu />
</div>
<div class="header-third">
<WindowTitle />
</div>
<div class="header-third">
<WindowButtons :maximized="true" />
</div>
</template>
<style lang="scss">
.header-third {
display: flex;
flex: 1 1 100%;
&:nth-child(1) {
justify-content: flex-start;
}
&:nth-child(2) {
justify-content: center;
}
&:nth-child(3) {
justify-content: flex-end;
}
}
</style>
<script lang="ts">
import { defineComponent } from "vue";
import FileMenu from "./FileMenu.vue";
import WindowTitle from "./WindowTitle.vue";
import WindowButtons from "./WindowButtons.vue";
export default defineComponent({
components: {
FileMenu,
WindowTitle,
WindowButtons,
},
});
</script>

10
web-frontend/src/components/panel-system/DockablePanel.vue
View File

@ -3,7 +3,11 @@
<div class="tab-bar" :class="{ 'constant-widths': tabConstantWidths }">
<div class="tab" :class="{ active: tabIndex === tabActiveIndex }" v-for="(tabLabel, tabIndex) in tabLabels" :key="tabLabel">
<span>{{tabLabel}}</span>
<button v-if="tabCloseButtons">✕</button>
<button v-if="tabCloseButtons">
<svg width="16" height="16" viewBox="0 0 16 16">
<polygon points="12,5 11,4 8,7 5,4 4,5 7,8 4,11 5,12 8,9 11,12 12,11 9,8" />
</svg>
</button>
</div>
</div>
<div class="panel-content">
@ -70,7 +74,7 @@
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
// Required because https://stackoverflow.com/a/21611191/775283
// Height and line-height required because https://stackoverflow.com/a/21611191/775283
height: 100%;
line-height: 28px;
}
@ -88,10 +92,12 @@
font-size: 10px;
border-radius: 2px;
margin-left: 8px;
fill: #ddd;
&:hover {
background: #555;
color: white;
fill: white;
}
}

29
web-frontend/src/components/window/MainWindow.vue
View File

@ -1,12 +1,12 @@
<template>
<LayoutCol class="main-window">
<LayoutRow :class="['header-bar']">
<HeaderBar />
<LayoutRow :class="'title-bar'">
<TitleBar :platform="platform" :maximized="maximized" />
</LayoutRow>
<LayoutRow :class="['panel-container']">
<LayoutRow :class="'panel-container'">
<PanelArea />
</LayoutRow>
<LayoutRow :class="['footer-bar']">
<LayoutRow :class="'footer-bar'">
<FooterBar />
</LayoutRow>
</LayoutCol>
@ -17,7 +17,7 @@
height: 100%;
}
.header-bar {
.title-bar {
height: 28px;
flex: 0 0 auto;
}
@ -37,17 +37,30 @@
import { defineComponent } from "vue";
import LayoutRow from "../layout/LayoutRow.vue";
import LayoutCol from "../layout/LayoutCol.vue";
import HeaderBar from "../header/HeaderBar.vue";
import PanelArea from "../panel-system/PanelArea.vue";
import FooterBar from "../footer/FooterBar.vue";
import TitleBar from "./title-bar/TitleBar.vue";
import FooterBar from "./footer-bar/FooterBar.vue";
export enum ApplicationPlatform {
"Windows" = "Windows",
"Mac" = "Mac",
"Linux" = "Linux",
"Web" = "Web",
}
export default defineComponent({
components: {
LayoutRow,
LayoutCol,
HeaderBar,
TitleBar,
PanelArea,
FooterBar,
},
data() {
return {
platform: ApplicationPlatform.Web,
maximized: true,
};
},
});
</script>

2
web-frontend/src/components/footer/FooterBar.vue → web-frontend/src/components/window/footer-bar/FooterBar.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="status-area footer-third">
<div>
<span>File: 1.8 MB | Memory: 137 MB | Scratch: 0.7/12.3 GB</span>
<span>Document: 0.17 MB | Memory: 137 MB | Scratch: 0.7/12.3 GB</span>
</div>
</div>
<div class="hint-area footer-third">

0
web-frontend/src/components/footer/InputHint.vue → web-frontend/src/components/window/footer-bar/InputHint.vue
View File

9
web-frontend/src/components/header/FileMenu.vue → web-frontend/src/components/window/title-bar/FileMenu.vue
View File

@ -49,6 +49,13 @@
<script lang="ts">
import { defineComponent } from "vue";
import { ApplicationPlatform } from "../MainWindow.vue";
export default defineComponent({});
export default defineComponent({
data() {
return {
ApplicationPlatform,
};
},
});
</script>

58
web-frontend/src/components/window/title-bar/TitleBar.vue Normal file
View File

@ -0,0 +1,58 @@
<template>
<div class="header-third">
<WindowButtonsMac :maximized="maximized" v-if="platform === ApplicationPlatform.Mac" />
<FileMenu v-if="platform !== ApplicationPlatform.Mac" />
</div>
<div class="header-third">
<WindowTitle :title="'X-35B.gdd* - Graphite'" />
</div>
<div class="header-third">
<WindowButtonsWindows :maximized="maximized" v-if="platform === ApplicationPlatform.Windows || platform === ApplicationPlatform.Linux" />
</div>
</template>
<style lang="scss">
.header-third {
display: flex;
flex: 1 1 100%;
&:nth-child(1) {
justify-content: flex-start;
}
&:nth-child(2) {
justify-content: center;
}
&:nth-child(3) {
justify-content: flex-end;
}
}
</style>
<script lang="ts">
import { defineComponent } from "vue";
import FileMenu from "./FileMenu.vue";
import WindowTitle from "./WindowTitle.vue";
import WindowButtonsWindows from "./WindowButtonsWindows.vue";
import WindowButtonsMac from "./WindowButtonsMac.vue";
import { ApplicationPlatform } from "../MainWindow.vue";
export default defineComponent({
components: {
FileMenu,
WindowTitle,
WindowButtonsWindows,
WindowButtonsMac,
},
props: {
platform: { type: String, required: true },
maximized: { type: Boolean, required: true },
},
data() {
return {
ApplicationPlatform,
};
},
});
</script>

45
web-frontend/src/components/window/title-bar/WindowButtonsMac.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<div class="mac window-buttons">
<div class="close" title="Close"></div>
<div class="minimize" title="Minimize"></div>
<div class="zoom" title="Zoom"></div>
</div>
</template>
<style lang="scss">
.mac.window-buttons {
display: flex;
align-items: center;
div {
display: flex;
align-items: center;
margin-left: 8px;
width: 11px;
height: 11px;
border-radius: 50%;
&.close {
background: #ff5f57;
}
&.minimize {
background: #ffbd2f;
}
&.zoom {
background: #29c93f;
}
}
}
</style>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
props: {
maximized: { type: Boolean, default: false },
},
});
</script>

10
web-frontend/src/components/header/WindowButtons.vue → web-frontend/src/components/window/title-bar/WindowButtonsWindows.vue
View File

@ -1,20 +1,20 @@
<template>
<div class="button minimize" title="Minimize">
<div class="windows window-button minimize" title="Minimize">
<svg width="10" height="10" viewBox="0 0 10 10">
<rect y="4" width="10" height="1" />
</svg>
</div>
<div class="button maximize" title="Maximize" v-if="maximized === false">
<div class="windows window-button maximize" title="Maximize" v-if="!maximized">
<svg width="10" height="10" viewBox="0 0 10 10">
<path d="M10,0v10H0V0H10z M9,1H1v8h8V1z" />
</svg>
</div>
<div class="button restore-down" title="Restore Down" v-if="maximized === true">
<div class="windows window-button restore-down" title="Restore Down" v-if="maximized">
<svg width="10" height="10" viewBox="0 0 10 10">
<path d="M10,8H8v2H0V2h2V0h8V8z M7,3H1v6h6V3z M9,1H3v1h5v5h1V1z" />
</svg>
</div>
<div class="button close" title="Close">
<div class="windows window-button close" title="Close">
<svg width="10" height="10" viewBox="0 0 10 10">
<polygon points="10,0.7 9.3,0 5,4.3 0.7,0 0,0.7 4.3,5 0,9.3 0.7,10 5,5.7 9.3,10 10,9.3 5.7,5" />
</svg>
@ -22,7 +22,7 @@
</template>
<style lang="scss">
.button {
.windows.window-button {
display: flex;
align-items: center;
padding: 0 20px;

8
web-frontend/src/components/header/WindowTitle.vue → web-frontend/src/components/window/title-bar/WindowTitle.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="window-title">
<span>X-35B.gdd* - Graphite</span>
<span>{{title}}</span>
</div>
</template>
@ -16,5 +16,9 @@
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({});
export default defineComponent({
props: {
title: { type: String, required: true },
},
});
</script>