feat(titlebar): optional 'back to previous view' button

pigmentapp · Apr 28, 2019 · fa812ad · fa812ad
1 parent 933cbe7
commit fa812ad
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 2 deletions.
diff --git a/src/components/TitleBar.vue b/src/components/TitleBar.vue
@@ -1,5 +1,26 @@
 <template>
   <portal to="titleBar">
     <slot />
+    <title-bar-button
+      v-if="backButton"
+      icon="arrow-left"
+      @click="$router.back()"
+    />
   </portal>
 </template>
+
+<script>
+import TitleBarButton from '@/components/TitleBarButton.vue';
+
+export default {
+  components: {
+    TitleBarButton,
+  },
+  props: {
+    backButton: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
diff --git a/src/views/Notifications.vue b/src/views/Notifications.vue
@@ -1,6 +1,6 @@
 <template>
   <app-content :class="$style.wrap">
-    <title-bar>
+    <title-bar :back-button="true">
       <title-bar-text>
         Notifications
       </title-bar-text>

diff --git a/src/views/Settings.vue b/src/views/Settings.vue
@@ -1,6 +1,6 @@
 <template>
   <app-content>
-    <title-bar>
+    <title-bar :back-button="true">
       <title-bar-text>
         Settings
       </title-bar-text>

diff --git a/src/views/TabSettings.vue b/src/views/TabSettings.vue
@@ -3,6 +3,11 @@
     :class="$style.wrap"
     @submit.prevent="submitForm"
   >
+    <title-bar :back-button="true">
+      <title-bar-text>
+        {{ isCreateMode ? 'Create new tab' : `Edit ${tab.label}` }}
+      </title-bar-text>
+    </title-bar>
     <div>
       <label :class="$style.item">
         <div :class="$style.label">Label</div>
@@ -70,10 +75,14 @@
 import 'prismjs';
 import 'prism-themes/themes/prism-darcula.css';
 import PrismEditor from 'vue-prism-editor';
+import TitleBar from '@/components/TitleBar.vue';
+import TitleBarText from '@/components/TitleBarText.vue';
 
 export default {
   components: {
     PrismEditor,
+    TitleBar,
+    TitleBarText,
   },
   data() {
     return {