feat: new layout improvements for windows

pigmentapp · Apr 28, 2019 · 7b89997 · 7b89997
1 parent ea95c72
commit 7b89997
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 51 deletions.
diff --git a/src/components/AppLayout.vue b/src/components/AppLayout.vue
@@ -3,7 +3,7 @@
     :class="{
       [$style.app]: true,
       [$style.app__osMac]: $options.isMac,
-      [$style.app__osWin]: $options.isWin,
+      [$style.app__osNotMac]: !$options.isMac,
       [$style.app__layoutLeft_compact]: !isLayoutInverted && !displaysTabLabels,
       [$style.app__layoutLeft_extended]: !isLayoutInverted && displaysTabLabels,
       [$style.app__layoutRight_compact]: isLayoutInverted && !displaysTabLabels,
@@ -14,10 +14,18 @@
       :class="{
         [$style.titleBarSpacer]: true,
         [$style.titleBarSpacer__osMac]: $options.isMac,
-        [$style.titleBarSpacer__osWin]: $options.isWin,
+        [$style.titleBarSpacer__osNotMac]: !$options.isMac,
+      }"
+    >
+      <window-controls v-if="!$options.isMac" />
+    </div>
+    <the-title-bar
+      :class="{
+        [$style.titleBar]: true,
+        [$style.titleBar__osMac]: $options.isMac,
+        [$style.titleBar__osNotMac]: !$options.isMac,
       }"
     />
-    <the-title-bar :class="$style.titleBar" />
     <the-side-bar :class="$style.sideBar" />
     <div
       :class="{
@@ -36,13 +44,14 @@
 <script>
 import TheSideBar from '@/components/TheSideBar.vue';
 import TheTitleBar from '@/components/TheTitleBar.vue';
+import WindowControls from '@/components/WindowControls.vue';
 
 export default {
   isMac: process.platform === 'darwin',
-  isWin: process.platform !== 'darwin',
   components: {
     TheSideBar,
     TheTitleBar,
+    WindowControls,
   },
   computed: {
     isLayoutInverted() {
@@ -70,6 +79,14 @@ export default {
   height: 100vh;
 }
 
+.app__osMac {
+  grid-template-rows: 2.4rem auto;
+}
+
+.app__osNotMac {
+  grid-template-rows: min-content auto;
+}
+
 .app__osMac.app__layoutLeft_compact {
   grid-template-areas:
     "space space title title title"
@@ -98,28 +115,28 @@ export default {
   ;
 }
 
-.app__osWin.app__layoutLeft_compact {
+.app__osNotMac.app__layoutLeft_compact {
   grid-template-areas:
     "title title title space space"
     "aside main  main  main  main"
   ;
 }
 
-.app__osWin.app__layoutLeft_extended {
+.app__osNotMac.app__layoutLeft_extended {
   grid-template-areas:
     "title title title space space"
     "aside aside main  main  main"
   ;
 }
 
-.app__osWin.app__layoutRight_compact {
+.app__osNotMac.app__layoutRight_compact {
   grid-template-areas:
     "title title title space space"
     "main  main  main  main  aside"
   ;
 }
 
-.app__osWin.app__layoutRight_extended {
+.app__osNotMac.app__layoutRight_extended {
   grid-template-areas:
     "title title title space space"
     "main  main  main  aside aside"
@@ -135,14 +152,14 @@ export default {
   min-width: 5rem;
 }
 
-.titleBarSpacer__osWin {
-  min-width: config('width.32');
-}
-
 .titleBar {
   grid-area: title;
 }
 
+.titleBar__osNotMac {
+  @apply pl-3;
+}
+
 .sideBar {
   @apply flex flex-col overflow-y-auto;
   grid-area: aside;

diff --git a/src/components/TheTitleBar.vue b/src/components/TheTitleBar.vue
@@ -1,32 +1,13 @@
 <template>
-  <div :class="$style.bar">
-    <portal-target
-      :class="$style.body"
-      name="titleBar"
-    />
-    <window-controls />
-  </div>
+  <portal-target
+    :class="$style.bar"
+    name="titleBar"
+  />
 </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;
+  @apply relative z-20 flex flex-grow items-center px-1;
   -webkit-app-region: drag;
 }
-
-.body {
-  @apply flex flex-grow items-center;
-}
 </style>
diff --git a/src/components/TitleBarButton.vue b/src/components/TitleBarButton.vue
@@ -64,12 +64,8 @@ export default {
   @apply text-red-lighter bg-red-dark;
 }
 
-.orange:hover {
-  @apply text-orange-lighter bg-orange-dark;
-}
-
-.green:hover {
-  @apply text-green-lighter bg-green-dark;
+.grey:hover {
+  @apply bg-grey-darkest;
 }
 
 .active {

diff --git a/src/components/WindowControls.vue b/src/components/WindowControls.vue
@@ -1,19 +1,19 @@
 <template>
-  <div v-if="$options.isWin">
+  <div :class="$style.wrap">
     <title-bar-button
-      icon="window-close"
-      schema="red"
-      @click="window.close()"
+      icon="window-minimize"
+      schema="grey"
+      @click="window.minimize()"
     />
     <title-bar-button
       :icon="isMaximized ? 'window-restore' : 'window-maximize'"
-      schema="orange"
+      schema="grey"
       @click="toggleMaximized()"
     />
     <title-bar-button
-      icon="window-minimize"
-      schema="green"
-      @click="window.minimize()"
+      icon="window-close"
+      schema="red"
+      @click="window.close()"
     />
   </div>
 </template>
@@ -27,7 +27,6 @@ export default {
     TitleBar,
     TitleBarButton,
   },
-  isWin: process.platform !== 'darwin',
   data() {
     return {
       isMaximized: false,
@@ -63,3 +62,9 @@ export default {
   },
 };
 </script>
+
+<style lang="postcss" module>
+.wrap {
+  @apply flex justify-end pl-2;
+}
+</style>