From 996b18fb233ff0350c77736c430f8548582de276 Mon Sep 17 00:00:00 2001
From: herteleo <leonard.hertel@gmail.com>
Date: Sun, 28 Apr 2019 20:11:36 +0200
Subject: [PATCH] feat: introduced cleaner layout strategy

---
 package-lock.json                 |   5 ++
 package.json                      |   1 +
 src/App.vue                       | 102 +++------------------
 src/components/AppIcon.vue        |   4 +
 src/components/AppLayout.vue      | 142 ++++++++++++++++++++++++++++++
 src/components/SideBarButton.vue  |  40 +++++++++
 src/components/TabHeader.vue      |  36 +++-----
 src/components/TabsList.vue       |   2 +-
 src/components/TabsNav.vue        |  32 ++++++-
 src/components/TheSideBar.vue     |  13 +++
 src/components/TheTitleBar.vue    |  32 +++++++
 src/components/TitleBar.vue       |  43 +--------
 src/components/TitleBarButton.vue |   6 +-
 src/components/TitleBarText.vue   |  12 +++
 src/components/WindowControls.vue |  58 +++---------
 src/main.js                       |   5 +-
 src/views/Notifications.vue       |  34 ++++---
 src/views/Settings.vue            |  16 +++-
 18 files changed, 361 insertions(+), 222 deletions(-)
 create mode 100644 src/components/AppLayout.vue
 create mode 100644 src/components/SideBarButton.vue
 create mode 100644 src/components/TheSideBar.vue
 create mode 100644 src/components/TheTitleBar.vue
 create mode 100644 src/components/TitleBarText.vue

diff --git a/package-lock.json b/package-lock.json
index 3805449..5997b86 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15745,6 +15745,11 @@
       "integrity": "sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==",
       "dev": true
     },
+    "portal-vue": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/portal-vue/-/portal-vue-2.1.3.tgz",
+      "integrity": "sha512-7NSn4044csr6eqnt3XefU2DFzEHMnOhvuD1jei2MntMyIvDPIavk2h6Fg/h62pA4Vh8K33iauPzrLLI1N7RVXA=="
+    },
     "portfinder": {
       "version": "1.0.20",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz",
diff --git a/package.json b/package.json
index 4ce2fe9..5500be0 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "is-url-relative-without-domain": "^2.0.0",
     "lodash-id": "^0.14.0",
     "lowdb": "^1.0.0",
+    "portal-vue": "^2.1.3",
     "prism-themes": "^1.0.1",
     "prismjs": "^1.15.0",
     "vue": "^2.6.10",
diff --git a/src/App.vue b/src/App.vue
index be74a36..eaabac7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,109 +1,27 @@
 <template>
-  <div
-    :class="{
-      [$style.app]: true,
-      [$style['app--sidebar-right']]: isLayoutInverted,
-    }"
-  >
-    <aside :class="$style.aside">
-      <window-controls
-        :class="$style.aside__header"
-      />
-      <tabs-nav :class="$style.aside__body" />
-    </aside>
-    <tabs-list :class="$style.main" />
-    <div :class="$style.main">
+  <app-layout>
+    <template slot="main">
+      <tabs-list />
       <router-view :key="$route.path" />
-    </div>
-    <window-dimmer />
-  </div>
+    </template>
+    <template slot="overlays">
+      <window-dimmer />
+    </template>
+  </app-layout>
 </template>
 
 <script>
+import AppLayout from '@/components/AppLayout.vue';
 import TabsList from '@/components/TabsList.vue';
-import TabsNav from '@/components/TabsNav.vue';
-import WindowControls from '@/components/WindowControls.vue';
 import WindowDimmer from '@/components/WindowDimmer.vue';
 import NotificationSchedule from '@/utils/mixinNotificationSchedule';
 
 export default {
   components: {
+    AppLayout,
     TabsList,
-    TabsNav,
-    WindowControls,
     WindowDimmer,
   },
   mixins: [NotificationSchedule],
-  computed: {
-    isLayoutInverted() {
-      return this.$store.getters['Settings/byKey']('layout.sideBarLocation') === 'right';
-    },
-  },
 };
 </script>
-
-<style lang="postcss" module>
-@tailwind preflight;
-@tailwind components;
-
-.app {
-  @apply
-    font-sans text-grey
-    bg-black select-none;
-
-  display: grid;
-  grid-auto-flow: dense;
-  grid-template-columns: [aside] min-content [main] auto;
-  grid-template-rows: 100vh;
-}
-
-.app--sidebar-right {
-  direction: rtl;
-}
-
-.aside {
-  @apply relative flex flex-col;
-  grid-column: aside;
-  max-width: config('width.64');
-  direction: ltr;
-}
-
-.aside__header {
-  @apply flex-no-shrink;
-}
-
-.aside__body {
-  @apply flex-grow;
-}
-
-.main {
-  @apply relative z-10 overflow-hidden;
-  grid-column: main;
-  direction: ltr;
-}
-
-.main:after {
-  @apply absolute pin-y z-20 w-px pointer-events-none;
-  content: "";
-  background-color: #fff1;
-}
-
-.app:not(.app--sidebar-right) .main:after {
-  @apply pin-l;
-}
-
-.app.app--sidebar-right .main:after {
-  @apply pin-r;
-}
-</style>
-
-<style lang="postcss">
-body {
-  @apply h-screen overflow-hidden bg-black;
-}
-
-button:focus,
-button:active:focus {
-  outline: none !important;
-}
-</style>
diff --git a/src/components/AppIcon.vue b/src/components/AppIcon.vue
index b8096ae..e3cecb9 100644
--- a/src/components/AppIcon.vue
+++ b/src/components/AppIcon.vue
@@ -57,4 +57,8 @@ export default {
 .size-5 {
   @apply w-5 h-5;
 }
+
+.size-6 {
+  @apply w-6 h-6;
+}
 </style>
diff --git a/src/components/AppLayout.vue b/src/components/AppLayout.vue
new file mode 100644
index 0000000..b15bdad
--- /dev/null
+++ b/src/components/AppLayout.vue
@@ -0,0 +1,142 @@
+<template>
+  <div
+    :class="{
+      [$style.app]: true,
+      [$style.app__osMac]: $options.isMac,
+      [$style.app__osWin]: $options.isWin,
+      [$style.app__layoutLeft_extended]: !isLayoutInverted,
+      [$style.app__layoutRight_extended]: isLayoutInverted,
+    }"
+  >
+    <div
+      :class="{
+        [$style.titleBarSpacer]: true,
+        [$style.titleBarSpacer__osMac]: $options.isMac,
+        [$style.titleBarSpacer__osWin]: $options.isWin,
+      }"
+    />
+    <the-title-bar :class="$style.titleBar" />
+    <the-side-bar :class="$style.sideBar" />
+    <div
+      :class="{
+        [$style.main]: true,
+        [$style.main__sideBarLeft]: !isLayoutInverted,
+        [$style.main__sideBarRight]: isLayoutInverted,
+      }"
+    >
+      <slot name="main" />
+    </div>
+
+    <slot name="overlays" />
+  </div>
+</template>
+
+<script>
+import TheSideBar from '@/components/TheSideBar.vue';
+import TheTitleBar from '@/components/TheTitleBar.vue';
+
+export default {
+  isMac: process.platform === 'darwin',
+  isWin: process.platform !== 'darwin',
+  components: {
+    TheSideBar,
+    TheTitleBar,
+  },
+  computed: {
+    isLayoutInverted() {
+      return this.$store.getters['Settings/byKey']('layout.sideBarLocation') === 'right';
+    },
+  },
+};
+</script>
+
+<style lang="postcss" module>
+@tailwind preflight;
+@tailwind components;
+
+.app {
+  @apply
+    font-sans text-grey
+    bg-black select-none;
+
+  display: grid;
+  grid-template-columns: min-content min-content 1fr min-content min-content;
+  grid-template-rows: 2.4rem auto;
+  height: 100vh;
+}
+
+.app__osMac.app__layoutLeft_extended {
+  grid-template-areas:
+    "space space title title title"
+    "aside aside main  main  main"
+  ;
+}
+
+.app__osMac.app__layoutRight_extended {
+  grid-template-areas:
+    "space space title ..... ....."
+    "main  main  main  aside aside"
+  ;
+}
+
+.app__osWin.app__layoutLeft_extended {
+  grid-template-areas:
+    "title title title space space"
+    "aside aside main  main  main"
+  ;
+}
+
+.app__osWin.app__layoutRight_extended {
+  grid-template-areas:
+    "title title title space space"
+    "main  main  main  aside aside"
+  ;
+}
+
+.titleBarSpacer {
+  grid-area: space;
+  max-width: config('width.64');
+}
+
+.titleBarSpacer__osMac {
+  min-width: 5rem;
+}
+
+.titleBarSpacer__osWin {
+  min-width: config('width.32');
+}
+
+.titleBar {
+  grid-area: title;
+}
+
+.sideBar {
+  @apply flex flex-col overflow-y-auto;
+  grid-area: aside;
+  max-width: config('width.64');
+}
+
+.main {
+  @apply overflow-y-auto bg-grey-darkest;
+  grid-area: main;
+}
+
+.main__sideBarLeft {
+  @apply rounded-tl-sm;
+}
+
+.main__sideBarRight {
+  @apply rounded-tr-sm;
+}
+</style>
+
+<style lang="postcss">
+body {
+  @apply h-screen overflow-hidden bg-black;
+}
+
+button:focus,
+button:active:focus {
+  outline: none !important;
+}
+</style>
diff --git a/src/components/SideBarButton.vue b/src/components/SideBarButton.vue
new file mode 100644
index 0000000..fa13842
--- /dev/null
+++ b/src/components/SideBarButton.vue
@@ -0,0 +1,40 @@
+<template>
+  <router-link
+    :active-class="$style.active"
+    :class="$style.btn"
+    :to="to"
+    tag="button"
+  >
+    <app-icon
+      :face="icon"
+      :size="6"
+    />
+  </router-link>
+</template>
+
+<script>
+export default {
+  props: {
+    icon: {
+      type: String,
+      required: true,
+    },
+    to: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style lang="postcss" module>
+.btn {
+  @apply
+    block w-full p-2
+    text-grey-darkest text-center;
+}
+
+.active {
+  @apply text-grey-darker;
+}
+</style>
diff --git a/src/components/TabHeader.vue b/src/components/TabHeader.vue
index 07822e8..ceaeeeb 100644
--- a/src/components/TabHeader.vue
+++ b/src/components/TabHeader.vue
@@ -1,16 +1,8 @@
 <template>
-  <title-bar
-    :indent="isLayoutInverted"
-    area="main"
-  >
-    <title-bar-button
-      icon="home-variant"
-      @click="$emit('goToHome')"
-    />
-    <title-bar-button
-      icon="refresh"
-      @click="$emit('doReload')"
-    />
+  <title-bar>
+    <title-bar-text>
+      {{ pageState.title }}
+    </title-bar-text>
     <title-bar-button
       :disabled="!canGoBack"
       icon="arrow-left"
@@ -21,9 +13,14 @@
       icon="arrow-right"
       @click="$emit('goForward')"
     />
-    <div :class="$style.title">
-      {{ pageState.title }}
-    </div>
+    <title-bar-button
+      icon="refresh"
+      @click="$emit('doReload')"
+    />
+    <title-bar-button
+      icon="home-variant"
+      @click="$emit('goToHome')"
+    />
     <title-bar-button
       icon="code-tags"
       @click="$emit('toggleDevTools')"
@@ -38,11 +35,13 @@
 <script>
 import TitleBar from '@/components/TitleBar.vue';
 import TitleBarButton from '@/components/TitleBarButton.vue';
+import TitleBarText from '@/components/TitleBarText.vue';
 
 export default {
   components: {
     TitleBar,
     TitleBarButton,
+    TitleBarText,
   },
   props: {
     item: {
@@ -68,10 +67,3 @@ export default {
   },
 };
 </script>
-
-<style lang="postcss" module>
-.title {
-  @apply flex-1 p-2 text-sm truncate;
-  -webkit-user-select: none;
-}
-</style>
diff --git a/src/components/TabsList.vue b/src/components/TabsList.vue
index 1e6c0af..8917c3f 100644
--- a/src/components/TabsList.vue
+++ b/src/components/TabsList.vue
@@ -23,6 +23,6 @@ export default {
 
 <style lang="postcss" module>
 .tabs {
-  @apply flex flex-col;
+  @apply flex flex-col h-full;
 }
 </style>
diff --git a/src/components/TabsNav.vue b/src/components/TabsNav.vue
index 75833fe..92f2cdf 100644
--- a/src/components/TabsNav.vue
+++ b/src/components/TabsNav.vue
@@ -12,16 +12,37 @@
       :key="tab.id"
       :item="tab"
     />
+    <div
+      slot="footer"
+      :class="{
+        [$style.footer]: true,
+      }"
+    >
+      <side-bar-button
+        :to="{ name: 'tabs-create' }"
+        icon="tab-plus"
+      />
+      <side-bar-button
+        :to="{ name: 'notifications' }"
+        icon="bell"
+      />
+      <side-bar-button
+        :to="{ name: 'settings' }"
+        icon="settings"
+      />
+    </div>
   </vue-draggable>
 </template>
 
 <script>
 import VueDraggable from 'vuedraggable';
+import SideBarButton from '@/components/SideBarButton.vue';
 import TabsNavItem from '@/components/TabsNavItem.vue';
 
 export default {
   components: {
     VueDraggable,
+    SideBarButton,
     TabsNavItem,
   },
   computed: {
@@ -39,13 +60,20 @@ export default {
 
 <style lang="postcss" module>
 .nav {
-  @apply relative flex flex-col p-1 overflow-x-hidden overflow-y-auto;
-  background-color: #0002;
+  @apply
+    relative flex flex-col flex-grow justify-start
+    px-1 pb-1 overflow-x-hidden overflow-y-auto
+  ;
+}
+
+.footer {
+  @apply mt-auto;
 }
 
 .drag {
   @apply cursor-move text-blue-lighter bg-blue;
 }
+
 .helper {
   @apply opacity-0;
 }
diff --git a/src/components/TheSideBar.vue b/src/components/TheSideBar.vue
new file mode 100644
index 0000000..de27fab
--- /dev/null
+++ b/src/components/TheSideBar.vue
@@ -0,0 +1,13 @@
+<template>
+  <tabs-nav />
+</template>
+
+<script>
+import TabsNav from '@/components/TabsNav.vue';
+
+export default {
+  components: {
+    TabsNav,
+  },
+};
+</script>
diff --git a/src/components/TheTitleBar.vue b/src/components/TheTitleBar.vue
new file mode 100644
index 0000000..15e4b32
--- /dev/null
+++ b/src/components/TheTitleBar.vue
@@ -0,0 +1,32 @@
+<template>
+  <div :class="$style.bar">
+    <portal-target
+      :class="$style.body"
+      name="titleBar"
+    />
+    <window-controls />
+  </div>
+</template>
+
+<script>
+import WindowControls from '@/components/WindowControls.vue';
+
+export default {
+  components: {
+    WindowControls,
+  },
+};
+</script>
+
+
+<style lang="postcss" module>
+.bar {
+  @apply relative z-20 flex items-center px-1;
+  height: 2.4rem;
+  -webkit-app-region: drag;
+}
+
+.body {
+  @apply flex flex-grow items-center;
+}
+</style>
diff --git a/src/components/TitleBar.vue b/src/components/TitleBar.vue
index 3b8922d..b0b1e5c 100644
--- a/src/components/TitleBar.vue
+++ b/src/components/TitleBar.vue
@@ -1,44 +1,5 @@
 <template>
-  <div
-    :class="{
-      [$style.bar]: true,
-      [$style[area]]: true,
-      [$style.indent]: $options.isMac && indent
-    }"
-  >
+  <portal to="titleBar">
     <slot />
-  </div>
+  </portal>
 </template>
-
-<script>
-export default {
-  isMac: process.platform === 'darwin',
-  props: {
-    area: {
-      type: String,
-      required: true,
-    },
-    indent: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
-</script>
-
-<style lang="postcss" module>
-.bar {
-  @apply relative z-20 flex items-center px-1 leading-none;
-  height: 2.4rem;
-  box-shadow: 0 1px 0 #fff1;
-  -webkit-app-region: drag;
-}
-
-.aside {
-  background-color: #0002;
-}
-
-.indent {
-  @apply pl-20;
-}
-</style>
diff --git a/src/components/TitleBarButton.vue b/src/components/TitleBarButton.vue
index 29dd11c..66fa27a 100644
--- a/src/components/TitleBarButton.vue
+++ b/src/components/TitleBarButton.vue
@@ -11,7 +11,11 @@
     }"
     @click="$emit('click')"
   >
-    <app-icon :face="icon" />
+    <app-icon
+      v-if="icon"
+      :face="icon"
+    />
+    <slot />
   </component>
 </template>
 
diff --git a/src/components/TitleBarText.vue b/src/components/TitleBarText.vue
new file mode 100644
index 0000000..cffe9a1
--- /dev/null
+++ b/src/components/TitleBarText.vue
@@ -0,0 +1,12 @@
+<template>
+  <div :class="$style.text">
+    <slot />
+  </div>
+</template>
+
+<style lang="postcss" module>
+.text {
+  @apply flex-grow pr-2 mr-auto text-sm truncate;
+  -webkit-user-select: none;
+}
+</style>
diff --git a/src/components/WindowControls.vue b/src/components/WindowControls.vue
index fcd651b..d4e0464 100644
--- a/src/components/WindowControls.vue
+++ b/src/components/WindowControls.vue
@@ -1,42 +1,21 @@
 <template>
-  <title-bar
-    :class="{
-      [$style.inverted]: isLayoutInverted,
-    }"
-    :indent="!isLayoutInverted"
-    area="aside"
-  >
-    <template v-if="!$options.isMac">
-      <title-bar-button
-        icon="window-close"
-        schema="red"
-        @click="window.close()"
-      />
-      <title-bar-button
-        :icon="isMaximized ? 'window-restore' : 'window-maximize'"
-        schema="orange"
-        @click="toggleMaximized()"
-      />
-      <title-bar-button
-        icon="window-minimize"
-        schema="green"
-        @click="window.minimize()"
-      />
-    </template>
-    <div :class="$style.spacer" />
+  <div v-if="$options.isWin">
     <title-bar-button
-      :to="{ name: 'tabs-create' }"
-      icon="tab-plus"
+      icon="window-close"
+      schema="red"
+      @click="window.close()"
     />
     <title-bar-button
-      :to="{ name: 'notifications' }"
-      icon="bell"
+      :icon="isMaximized ? 'window-restore' : 'window-maximize'"
+      schema="orange"
+      @click="toggleMaximized()"
     />
     <title-bar-button
-      :to="{ name: 'settings' }"
-      icon="settings"
+      icon="window-minimize"
+      schema="green"
+      @click="window.minimize()"
     />
-  </title-bar>
+  </div>
 </template>
 
 <script>
@@ -48,7 +27,7 @@ export default {
     TitleBar,
     TitleBarButton,
   },
-  isMac: process.platform === 'darwin',
+  isWin: process.platform !== 'darwin',
   data() {
     return {
       isMaximized: false,
@@ -58,9 +37,6 @@ export default {
     window() {
       return this.$electron.remote.getCurrentWindow();
     },
-    isLayoutInverted() {
-      return this.$store.getters['Settings/byKey']('layout.sideBarLocation') === 'right';
-    },
   },
   created() {
     this.watchMaximizedState();
@@ -87,13 +63,3 @@ export default {
   },
 };
 </script>
-
-<style lang="postcss" module>
-.inverted {
-  @apply flex-row-reverse;
-}
-
-.spacer {
-  @apply flex-grow;
-}
-</style>
diff --git a/src/main.js b/src/main.js
index 3a5d58e..b31ae55 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,4 +1,6 @@
 import Vue from 'vue';
+import VueElectron from 'vue-electron';
+import PortalVue from 'portal-vue';
 import App from './App.vue';
 import router from './router';
 import store from './store';
@@ -7,7 +9,8 @@ import AppButton from './components/AppButton.vue';
 import AppContent from './components/AppContent.vue';
 import AppIcon from './components/AppIcon.vue';
 
-/* if (!process.env.IS_WEB) */ Vue.use(require('vue-electron'));
+Vue.use(VueElectron);
+Vue.use(PortalVue);
 
 Vue.config.productionTip = false;
 
diff --git a/src/views/Notifications.vue b/src/views/Notifications.vue
index 6897425..6456651 100644
--- a/src/views/Notifications.vue
+++ b/src/views/Notifications.vue
@@ -1,18 +1,15 @@
 <template>
   <app-content :class="$style.wrap">
-    <div :class="$style.header">
-      <div :class="$style.title">
+    <title-bar>
+      <title-bar-text>
         Notifications
-      </div>
-      <div>
-        <app-button
-          schema="secondary"
-          @click="removeAll"
-        >
-          Clear all
-        </app-button>
-      </div>
-    </div>
+      </title-bar-text>
+      <title-bar-button
+        @click="removeAll"
+      >
+        Clear all
+      </title-bar-button>
+    </title-bar>
     <template v-if="notifications.length">
       <div
         v-for="item in notifications"
@@ -63,7 +60,16 @@
 </template>
 
 <script>
+import TitleBar from '@/components/TitleBar.vue';
+import TitleBarButton from '@/components/TitleBarButton.vue';
+import TitleBarText from '@/components/TitleBarText.vue';
+
 export default {
+  components: {
+    TitleBar,
+    TitleBarButton,
+    TitleBarText,
+  },
   computed: {
     notifications() {
       return this.$store.getters['Notifications/list']();
@@ -82,7 +88,7 @@ export default {
 
 <style lang="postcss" module>
 .wrap {
-  @apply p-8;
+  @apply p-2;
 }
 
 .header {
@@ -94,7 +100,7 @@ export default {
 }
 
 .item {
-  @apply flex p-2 mb-2 bg-grey-darkest rounded;
+  @apply flex p-2 mb-2 bg-black rounded;
 }
 
 .itemTitle {
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 99dc00b..ca1f15a 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -1,5 +1,10 @@
 <template>
   <app-content>
+    <title-bar>
+      <title-bar-text>
+        Settings
+      </title-bar-text>
+    </title-bar>
     <button
       @click="isDimActive = !isDimActive"
     >
@@ -109,7 +114,14 @@
 </template>
 
 <script>
+import TitleBar from '@/components/TitleBar.vue';
+import TitleBarText from '@/components/TitleBarText.vue';
+
 export default {
+  components: {
+    TitleBar,
+    TitleBarText,
+  },
   computed: {
     isDimActive: {
       get() {
@@ -191,7 +203,7 @@ button {
 }
 
 button + button {
-    @apply border-t border-grey-darkest;
+    @apply border-t border-black;
 }
 </style>
 
@@ -213,7 +225,7 @@ button + button {
 }
 
 .input {
-  @apply w-full px-2 py-1 mt-2 text-grey bg-grey-darkest;
+  @apply w-full px-2 py-1 mt-2 text-grey bg-black;
 }
 
 .copyright {