feat(notifications): moved button to titlebar

pigmentapp · Apr 19, 2019 · 8403169 · 8403169
1 parent 2c5167b
commit 8403169
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 35 deletions.
diff --git a/src/components/TabsNav.vue b/src/components/TabsNav.vue
@@ -1,27 +1,20 @@
 <template>
-  <div :class="$style.wrap">
+  <vue-draggable
+    v-model="tabList"
+    :class="$style.nav"
+    :delay="400"
+    :chosen-class="$style.drag"
+    :drag-class="$style.helper"
+    tag="nav"
+  >
     <tabs-nav-item
-      :to="{ name: 'notifications' }"
-      label="Notifications"
-      icon="bell"
+      v-for="tab in tabList"
+      :key="tab.ident"
+      :label="tab.label"
+      :image="tab.favicon"
+      :to="{ name: 'tabs', params: { ident: tab.ident } }"
     />
-    <vue-draggable
-      v-model="tabList"
-      :class="$style.nav"
-      :delay="400"
-      :chosen-class="$style.drag"
-      :drag-class="$style.helper"
-      tag="nav"
-    >
-      <tabs-nav-item
-        v-for="tab in tabList"
-        :key="tab.ident"
-        :label="tab.label"
-        :image="tab.favicon"
-        :to="{ name: 'tabs', params: { ident: tab.ident } }"
-      />
-    </vue-draggable>
-  </div>
+  </vue-draggable>
 </template>
 
 <script>
@@ -47,12 +40,8 @@ export default {
 </script>
 
 <style lang="postcss" module>
-.wrap {
-  @apply flex flex-col;
-}
-
 .nav {
-  @apply flex flex-col mt-2;
+  @apply flex flex-col;
 }
 
 .drag {

diff --git a/src/components/TitleBarButton.vue b/src/components/TitleBarButton.vue
@@ -1,15 +1,18 @@
 <template>
-  <button
+  <component
+    :is="to ? 'router-link' : tag"
+    :to="to"
+    :tag="tag"
+    :type="tag === 'button' && 'button'"
     :class="{
       [$style.btn]: true,
       [$style[schema]]: true,
       [$style.active]: active,
     }"
-    type="button"
     @click="$emit('click')"
   >
     <app-icon :face="icon" />
-  </button>
+  </component>
 </template>
 
 <script>
@@ -27,6 +30,14 @@ export default {
       type: String,
       default: 'blue',
     },
+    tag: {
+      type: String,
+      default: 'button',
+    },
+    to: {
+      type: [Object, String],
+      default: undefined,
+    },
   },
 };
 </script>

diff --git a/src/components/WindowControls.vue b/src/components/WindowControls.vue
@@ -28,8 +28,12 @@
       @click="createTab"
     />
     <title-bar-button
+      :to="{ name: 'notifications' }"
+      icon="bell"
+    />
+    <title-bar-button
+      :to="{ name: 'settings' }"
       icon="settings"
-      @click="showSettings"
     />
   </title-bar>
 </template>
@@ -92,11 +96,6 @@ export default {
         this.window.maximize();
       }
     },
-    showSettings() {
-      this.$router.push({
-        name: 'settings',
-      });
-    },
   },
 };
 </script>