Moved log tab to right drawer

app/imports/ui/creature/character/CharacterSheet.vue

@@ -37,9 +37,6 @@
         <v-tabs-items
           v-model="activeTab"
         >
-          <v-tab-item>
-            <log-tab :creature-id="creatureId" />
-          </v-tab-item>
           <v-tab-item>
             <stats-tab :creature-id="creatureId" />
           </v-tab-item>
@@ -62,16 +59,17 @@
       </div>
     </v-fade-transition>
     <v-snackbar
-      v-for="(snackbar, index) in snackbars"
-      :key="index"
-      :value="true"
+      v-for="snackbar in snackbars"
+      :key="snackbar._id"
+      :value="snackbar.open"
     >
-      {{ snackbar.text }}
+      {{ snackbar.text.split(/\n+/).pop() }}
       <v-btn
         flat
+        icon
         @click="snackbar.open = false"
       >
-        Close
+        <v-icon>close</v-icon>
       </v-btn>
     </v-snackbar>
   </div>
@@ -112,7 +110,7 @@
       },
 		},
     data(){return {
-      snackbars: new Set(),
+      snackbars: [],
     }},
     reactiveProvide: {
       name: 'context',
@@ -136,16 +134,23 @@
     mounted(){
       this.$store.commit('setPageTitle', this.creature && this.creature.name || 'Character Sheet');
       let that = this;
-      let observer = CreatureLogs.find({
+      this.logObserver = CreatureLogs.find({
         creatureId: this.creatureId,
       }).observe({
         added(doc){
-          console.log({added: doc});
-          that.snackbars.add(doc);
-          setTimeout(function(){that.snackbars.delete(doc)}, 8000);
+          if (!that.$subReady.singleCharacter) return;
+          if (that.activeTab === 0) return;
+          if (that.snackbars.some(o => o._id === doc._id)) return;
+          doc.open = true;
+          that.snackbars.push(doc);
+          setTimeout(function(){
+            that.snackbars = that.snackbars.filter(bar => bar._id === doc._id);
+          }, 8000);
         },
       });
-      console.log(observer);
+    },
+    beforeDestroy(){
+      this.logObserver.stop();
     },
 		meteor: {
 			$subscribe: {
@@ -164,6 +169,9 @@
           return false;
         }
       },
+      snackbars(){
+
+      }
 		},
 	}
 </script>

app/imports/ui/creature/character/CharacterSheetRightDrawer.vue

@@ -0,0 +1,32 @@
+<template lang="html">
+  <v-navigation-drawer
+    v-model="drawer"
+    app
+    right
+    clipped
+  >
+    <log-tab :creature-id="$route.params.id" />
+  </v-navigation-drawer>
+</template>
+
+<script>
+import LogTab from '/imports/ui/creature/character/characterSheetTabs/LogTab.vue';
+export default {
+  components: {
+    LogTab,
+  },
+  computed: {
+    drawer: {
+      get () {
+        return this.$store.state.rightDrawer;
+      },
+      set (value) {
+        this.$store.commit('setRightDrawer', value);
+      },
+    },
+  },
+}
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/creature/character/CharacterSheetToolbar.vue

@@ -71,6 +71,7 @@
               </v-list-tile>
             </v-list>
           </v-menu>
+          <v-toolbar-side-icon @click="toggleRightDrawer" />
         </v-toolbar-items>
       </div>
     </v-fade-transition>
@@ -91,9 +92,6 @@
           max="100px"
           @change="e => $emit('input', e)"
         >
-          <v-tab>
-            Log
-          </v-tab>
           <v-tab>
             Stats
           </v-tab>
@@ -156,6 +154,7 @@ export default {
   methods: {
     ...mapMutations([
       'toggleDrawer',
+      'toggleRightDrawer',
     ]),
 		recompute(charId){
 			recomputeCreature.call({charId});

app/imports/ui/creature/character/characterSheetTabs/LogTab.vue

@@ -1,6 +1,6 @@
 <template lang="html">
   <div
-    style="height: calc(100vh - 96px); overflow: hidden;"
+    style="height: 100%; overflow: hidden;"
     class="log-tab layout column justify-end"
   >
     <div
@@ -20,7 +20,7 @@
     <v-card>
       <v-text-field
         v-model="input"
-        solo
+        class="mx-2 mb-2"
         persistent-hint
         style="flex-grow: 0"
         append-outer-icon="send"

app/imports/ui/layouts/AppLayout.vue

@@ -63,7 +63,9 @@
         <router-view :tabs.sync="tabs" />
       </v-fade-transition>
     </v-content>
-
+    <router-view
+      name="rightDrawer"
+    />
     <dialog-stack />
   </v-app>
 </template>

app/imports/ui/router.js

@@ -10,6 +10,7 @@ import SingleLibraryPage from '/imports/ui/pages/SingleLibraryPage.vue'
 import SingleLibraryToolbarItems from '/imports/ui/library/SingleLibraryToolbarItems.vue'
 import CharacterSheetPage from '/imports/ui/pages/CharacterSheetPage.vue';
 import CharacterSheetToolbar from '/imports/ui/creature/character/CharacterSheetToolbar.vue';
+import CharacterSheetRightDrawer from '/imports/ui/creature/character/CharacterSheetRightDrawer.vue';
 import SignIn from '/imports/ui/pages/SignIn.vue' ;
 import Register from '/imports/ui/pages/Register.vue';
 import IconAdmin from '/imports/ui/icons/IconAdmin.vue';
@@ -142,6 +143,7 @@ RouterFactory.configure(factory => {
       components: {
         default: CharacterSheetPage,
         toolbar: CharacterSheetToolbar,
+        rightDrawer: CharacterSheetRightDrawer,
       },
       meta: {
         title: 'Character Sheet',
@@ -151,6 +153,7 @@ RouterFactory.configure(factory => {
       components: {
         default: CharacterSheetPage,
         toolbar: CharacterSheetToolbar,
+        rightDrawer: CharacterSheetRightDrawer,
       },
       meta: {
         title: 'Character Sheet',

app/imports/ui/vuexStore.js

@@ -10,15 +10,22 @@ const store = new Vuex.Store({
   },
   state: {
     drawer: undefined,
+    rightDrawer: undefined,
     pageTitle: undefined,
   },
   mutations: {
     toggleDrawer (state) {
       state.drawer = !state.drawer;
     },
+    toggleRightDrawer (state) {
+      state.rightDrawer = !state.rightDrawer;
+    },
     setDrawer (state, value) {
       state.drawer = value;
     },
+    setRightDrawer (state, value) {
+      state.rightDrawer = value;
+    },
     setPageTitle (state, value) {
       state.pageTitle = value;
       document.title = value;