Skip to content
This repository was archived by the owner on Sep 1, 2023. It is now read-only.

Commit 996b18f

Browse files
herteleoherteleo
committed
feat: introduced cleaner layout strategy
1 parent e5d2eb9 commit 996b18f

18 files changed

+361
-222
lines changed

‎package-lock.json

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"is-url-relative-without-domain": "^2.0.0",
2929
"lodash-id": "^0.14.0",
3030
"lowdb": "^1.0.0",
31+
"portal-vue": "^2.1.3",
3132
"prism-themes": "^1.0.1",
3233
"prismjs": "^1.15.0",
3334
"vue": "^2.6.10",

‎src/App.vue

Lines changed: 10 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,27 @@
11
<template>
2-
<div
3-
:class="{
4-
[$style.app]: true,
5-
[$style['app--sidebar-right']]: isLayoutInverted,
6-
}"
7-
>
8-
<aside :class="$style.aside">
9-
<window-controls
10-
:class="$style.aside__header"
11-
/>
12-
<tabs-nav :class="$style.aside__body" />
13-
</aside>
14-
<tabs-list :class="$style.main" />
15-
<div :class="$style.main">
2+
<app-layout>
3+
<template slot="main">
4+
<tabs-list />
165
<router-view :key="$route.path" />
17-
</div>
18-
<window-dimmer />
19-
</div>
6+
</template>
7+
<template slot="overlays">
8+
<window-dimmer />
9+
</template>
10+
</app-layout>
2011
</template>
2112

2213
<script>
14+
import AppLayout from '@/components/AppLayout.vue';
2315
import TabsList from '@/components/TabsList.vue';
24-
import TabsNav from '@/components/TabsNav.vue';
25-
import WindowControls from '@/components/WindowControls.vue';
2616
import WindowDimmer from '@/components/WindowDimmer.vue';
2717
import NotificationSchedule from '@/utils/mixinNotificationSchedule';
2818
2919
export default {
3020
components: {
21+
AppLayout,
3122
TabsList,
32-
TabsNav,
33-
WindowControls,
3423
WindowDimmer,
3524
},
3625
mixins: [NotificationSchedule],
37-
computed: {
38-
isLayoutInverted() {
39-
return this.$store.getters['Settings/byKey']('layout.sideBarLocation') === 'right';
40-
},
41-
},
4226
};
4327
</script>
44-
45-
<style lang="postcss" module>
46-
@tailwind preflight;
47-
@tailwind components;
48-
49-
.app {
50-
@apply
51-
font-sans text-grey
52-
bg-black select-none;
53-
54-
display: grid;
55-
grid-auto-flow: dense;
56-
grid-template-columns: [aside] min-content [main] auto;
57-
grid-template-rows: 100vh;
58-
}
59-
60-
.app--sidebar-right {
61-
direction: rtl;
62-
}
63-
64-
.aside {
65-
@apply relative flex flex-col;
66-
grid-column: aside;
67-
max-width: config('width.64');
68-
direction: ltr;
69-
}
70-
71-
.aside__header {
72-
@apply flex-no-shrink;
73-
}
74-
75-
.aside__body {
76-
@apply flex-grow;
77-
}
78-
79-
.main {
80-
@apply relative z-10 overflow-hidden;
81-
grid-column: main;
82-
direction: ltr;
83-
}
84-
85-
.main:after {
86-
@apply absolute pin-y z-20 w-px pointer-events-none;
87-
content: "";
88-
background-color: #fff1;
89-
}
90-
91-
.app:not(.app--sidebar-right) .main:after {
92-
@apply pin-l;
93-
}
94-
95-
.app.app--sidebar-right .main:after {
96-
@apply pin-r;
97-
}
98-
</style>
99-
100-
<style lang="postcss">
101-
body {
102-
@apply h-screen overflow-hidden bg-black;
103-
}
104-
105-
button:focus,
106-
button:active:focus {
107-
outline: none !important;
108-
}
109-
</style>

‎src/components/AppIcon.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,4 +57,8 @@ export default {
5757
.size-5 {
5858
@apply w-5 h-5;
5959
}
60+
61+
.size-6 {
62+
@apply w-6 h-6;
63+
}
6064
</style>

‎src/components/AppLayout.vue

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
<template>
2+
<div
3+
:class="{
4+
[$style.app]: true,
5+
[$style.app__osMac]: $options.isMac,
6+
[$style.app__osWin]: $options.isWin,
7+
[$style.app__layoutLeft_extended]: !isLayoutInverted,
8+
[$style.app__layoutRight_extended]: isLayoutInverted,
9+
}"
10+
>
11+
<div
12+
:class="{
13+
[$style.titleBarSpacer]: true,
14+
[$style.titleBarSpacer__osMac]: $options.isMac,
15+
[$style.titleBarSpacer__osWin]: $options.isWin,
16+
}"
17+
/>
18+
<the-title-bar :class="$style.titleBar" />
19+
<the-side-bar :class="$style.sideBar" />
20+
<div
21+
:class="{
22+
[$style.main]: true,
23+
[$style.main__sideBarLeft]: !isLayoutInverted,
24+
[$style.main__sideBarRight]: isLayoutInverted,
25+
}"
26+
>
27+
<slot name="main" />
28+
</div>
29+
30+
<slot name="overlays" />
31+
</div>
32+
</template>
33+
34+
<script>
35+
import TheSideBar from '@/components/TheSideBar.vue';
36+
import TheTitleBar from '@/components/TheTitleBar.vue';
37+
38+
export default {
39+
isMac: process.platform === 'darwin',
40+
isWin: process.platform !== 'darwin',
41+
components: {
42+
TheSideBar,
43+
TheTitleBar,
44+
},
45+
computed: {
46+
isLayoutInverted() {
47+
return this.$store.getters['Settings/byKey']('layout.sideBarLocation') === 'right';
48+
},
49+
},
50+
};
51+
</script>
52+
53+
<style lang="postcss" module>
54+
@tailwind preflight;
55+
@tailwind components;
56+
57+
.app {
58+
@apply
59+
font-sans text-grey
60+
bg-black select-none;
61+
62+
display: grid;
63+
grid-template-columns: min-content min-content 1fr min-content min-content;
64+
grid-template-rows: 2.4rem auto;
65+
height: 100vh;
66+
}
67+
68+
.app__osMac.app__layoutLeft_extended {
69+
grid-template-areas:
70+
"space space title title title"
71+
"aside aside main main main"
72+
;
73+
}
74+
75+
.app__osMac.app__layoutRight_extended {
76+
grid-template-areas:
77+
"space space title ..... ....."
78+
"main main main aside aside"
79+
;
80+
}
81+
82+
.app__osWin.app__layoutLeft_extended {
83+
grid-template-areas:
84+
"title title title space space"
85+
"aside aside main main main"
86+
;
87+
}
88+
89+
.app__osWin.app__layoutRight_extended {
90+
grid-template-areas:
91+
"title title title space space"
92+
"main main main aside aside"
93+
;
94+
}
95+
96+
.titleBarSpacer {
97+
grid-area: space;
98+
max-width: config('width.64');
99+
}
100+
101+
.titleBarSpacer__osMac {
102+
min-width: 5rem;
103+
}
104+
105+
.titleBarSpacer__osWin {
106+
min-width: config('width.32');
107+
}
108+
109+
.titleBar {
110+
grid-area: title;
111+
}
112+
113+
.sideBar {
114+
@apply flex flex-col overflow-y-auto;
115+
grid-area: aside;
116+
max-width: config('width.64');
117+
}
118+
119+
.main {
120+
@apply overflow-y-auto bg-grey-darkest;
121+
grid-area: main;
122+
}
123+
124+
.main__sideBarLeft {
125+
@apply rounded-tl-sm;
126+
}
127+
128+
.main__sideBarRight {
129+
@apply rounded-tr-sm;
130+
}
131+
</style>
132+
133+
<style lang="postcss">
134+
body {
135+
@apply h-screen overflow-hidden bg-black;
136+
}
137+
138+
button:focus,
139+
button:active:focus {
140+
outline: none !important;
141+
}
142+
</style>

‎src/components/SideBarButton.vue

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<template>
2+
<router-link
3+
:active-class="$style.active"
4+
:class="$style.btn"
5+
:to="to"
6+
tag="button"
7+
>
8+
<app-icon
9+
:face="icon"
10+
:size="6"
11+
/>
12+
</router-link>
13+
</template>
14+
15+
<script>
16+
export default {
17+
props: {
18+
icon: {
19+
type: String,
20+
required: true,
21+
},
22+
to: {
23+
type: Object,
24+
required: true,
25+
},
26+
},
27+
};
28+
</script>
29+
30+
<style lang="postcss" module>
31+
.btn {
32+
@apply
33+
block w-full p-2
34+
text-grey-darkest text-center;
35+
}
36+
37+
.active {
38+
@apply text-grey-darker;
39+
}
40+
</style>

‎src/components/TabHeader.vue

Lines changed: 14 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,8 @@
11
<template>
2-
<title-bar
3-
:indent="isLayoutInverted"
4-
area="main"
5-
>
6-
<title-bar-button
7-
icon="home-variant"
8-
@click="$emit('goToHome')"
9-
/>
10-
<title-bar-button
11-
icon="refresh"
12-
@click="$emit('doReload')"
13-
/>
2+
<title-bar>
3+
<title-bar-text>
4+
{{ pageState.title }}
5+
</title-bar-text>
146
<title-bar-button
157
:disabled="!canGoBack"
168
icon="arrow-left"
@@ -21,9 +13,14 @@
2113
icon="arrow-right"
2214
@click="$emit('goForward')"
2315
/>
24-
<div :class="$style.title">
25-
{{ pageState.title }}
26-
</div>
16+
<title-bar-button
17+
icon="refresh"
18+
@click="$emit('doReload')"
19+
/>
20+
<title-bar-button
21+
icon="home-variant"
22+
@click="$emit('goToHome')"
23+
/>
2724
<title-bar-button
2825
icon="code-tags"
2926
@click="$emit('toggleDevTools')"
@@ -38,11 +35,13 @@
3835
<script>
3936
import TitleBar from '@/components/TitleBar.vue';
4037
import TitleBarButton from '@/components/TitleBarButton.vue';
38+
import TitleBarText from '@/components/TitleBarText.vue';
4139
4240
export default {
4341
components: {
4442
TitleBar,
4543
TitleBarButton,
44+
TitleBarText,
4645
},
4746
props: {
4847
item: {
@@ -68,10 +67,3 @@ export default {
6867
},
6968
};
7069
</script>
71-
72-
<style lang="postcss" module>
73-
.title {
74-
@apply flex-1 p-2 text-sm truncate;
75-
-webkit-user-select: none;
76-
}
77-
</style>

0 commit comments

Comments
 (0)