From c46f8c5171371b703a5bb2b9d58d2700c17b1e84 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Tue, 2 Oct 2018 08:50:45 +0200
Subject: [PATCH] Speed dial fixed

---
 app/client/main.js                       |   1 +
 app/imports/ui/components/LabeledFab.vue |  48 +++++++--
 app/imports/ui/components/Sidebar.vue    |  10 +-
 app/imports/ui/pages/CharacterList.vue   | 124 +++++++++++------------
 app/imports/ui/styles/speedDial.css      |   3 +
 app/imports/ui/styles/stylesIndex.js     |   1 +
 app/imports/ui/vueSetup.js               |   2 +-
 7 files changed, 109 insertions(+), 80 deletions(-)
 create mode 100644 app/imports/ui/styles/speedDial.css
 create mode 100644 app/imports/ui/styles/stylesIndex.js

diff --git a/app/client/main.js b/app/client/main.js
index 365c9cd4..d4491d98 100644
--- a/app/client/main.js
+++ b/app/client/main.js
@@ -1 +1,2 @@
 import "/imports/ui/vueSetup.js";
+import "/imports/styles/stylesIndex.js";
diff --git a/app/imports/ui/components/LabeledFab.vue b/app/imports/ui/components/LabeledFab.vue
index 83370dc7..3c345db1 100644
--- a/app/imports/ui/components/LabeledFab.vue
+++ b/app/imports/ui/components/LabeledFab.vue
@@ -1,21 +1,47 @@
 <template>
-  <v-layout row align-center justify-end>
-    <v-btn fab small>
-      <v-icon>
-        {{icon}}
-      </v-icon>
-    </v-btn>
-    <div class="label pa-2">
+  <v-btn fab small>
+    <v-icon>
+      {{icon}}
+    </v-icon>
+    <span id="label">
       {{label}}
-    </div>
-  </v-layout>
+    </span>
+  </v-btn>
 </template>
 
+<script>
+  /*
+   * Because speed dials only work well with v-btn's as children, this hacky
+   * component creates a v-btn with a label.
+   */
+  export default {
+    props: ["icon", "label"],
+  }
+</script>
+
 <style scoped>
-  .label {
-    background-color: #424242;
+  /*
+   *  Remove all button formatting and replace it with label formatting
+   */
+  #label {
+    left: initial;
+    top: initial;
+    bottom: initial;
+    transform: initial;
+    position: absolute;
+    font-weight: initial;
+    text-transform: initial;
+    cursor: initial;
+    opacity: initial;
+    pointer-events: none;
+    right: 56px;
+    background-color: #616161;
+    border-radius: 2px;
+    padding: 5px 8px;
     color: white;
     overflow: hidden;
     white-space: nowrap;
+    font-size: 12px;
+    content: "meep";
   }
 </style>
diff --git a/app/imports/ui/components/Sidebar.vue b/app/imports/ui/components/Sidebar.vue
index a693b7ba..13610ec7 100644
--- a/app/imports/ui/components/Sidebar.vue
+++ b/app/imports/ui/components/Sidebar.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="sidebar">
 		<v-toolbar color="primary" dark>
-			<v-layout row v-if="signedIn">
+			<v-layout row align-center v-if="signedIn">
 				{{userName}}
 				<v-spacer></v-spacer>
 				<v-tooltip bottom>
@@ -17,7 +17,7 @@
       <v-list-tile
         v-for="(link, i) in links"
 				v-if="link.vif || link.vif === undefined"
-        :href="link.href"
+        :to="link.to"
         :key="i"
       >
         <v-list-tile-action>
@@ -77,9 +77,9 @@
 			},
 			links(){
 				return [
-					{title: "Home", icon: "home", href: "/"},
-	        {title: "Characters", icon: "group", href: "/characterList", vif: Meteor.userId()},
-	        {title: "Send Feedback", icon: "bug_report", href: "/feedback"},
+					{title: "Home", icon: "home", to: "/"},
+	        {title: "Characters", icon: "group", to: "characterList", vif: Meteor.userId()},
+	        {title: "Send Feedback", icon: "bug_report", to: "feedback"},
 	        {title: "Patreon", icon: "", href: "https://www.patreon.com/dicecloud"},
 	        {title: "Github", icon: "", href: "https://github.com/ThaumRystra/DiceCloud1"},
 				];
diff --git a/app/imports/ui/pages/CharacterList.vue b/app/imports/ui/pages/CharacterList.vue
index 176f5e7c..c2bfa1c1 100644
--- a/app/imports/ui/pages/CharacterList.vue
+++ b/app/imports/ui/pages/CharacterList.vue
@@ -1,81 +1,75 @@
 <template>
   <ToolbarLayout>
-    <v-expansion-panel popout class="ma-2">
-      <!--No party-->
-      <v-expansion-panel-content
-        v-if="charactersWithNoParty.length"
-      >
-        <div slot="header">Characters</div>
-        <v-card>
-          <v-list>
-            <v-list-tile
-              v-for="character in charactersWithNoParty"
-              :key="character._id"
-              :href="character.url"
-            >
-              <v-list-tile-avatar :color="character.color">
-                  <img
-                  v-if="character.picture"
-                  :src="character.picture"
-                  alt="character.name"
-                  >
-                  <template v-else>
-                    {{character.initial}}
-                  </template>
-              </v-list-tile-avatar>
-              <v-list-tile-title>
-                {{character.name}}
-              </v-list-tile-title>
-            </v-list-tile>
-          </v-list>
-        </v-card>
-      </v-expansion-panel-content>
-      <!--Parties-->
-      <v-expansion-panel-content
-        v-for="party in parties"
-        :key="party._id"
-      >
-        <div slot="header">{{party.name}}</div>
-        <v-card>
-          <v-list>
-            <v-list-tile
-              v-for="character in party.characterDocs"
-              :key="character._id"
-            >
-              <v-list-tile-avatar>
-                <img :src="character.picture" alt="character.name">
-              </v-list-tile-avatar>
-            </v-list-tile>
-          </v-list>
-        </v-card>
-      </v-expansion-panel-content>
-    </v-expansion-panel>
-    <v-speed-dial fixed bottom right>
+    <span slot="toolbar">Characters</span>
+    <v-card class="ma-4">
+      <v-list v-if="charactersWithNoParty.length">
+        <v-list-tile
+          v-for="character in charactersWithNoParty"
+          :key="character._id"
+          :href="character.url"
+        >
+          <v-list-tile-avatar :color="character.color">
+              <img
+              v-if="character.picture"
+              :src="character.picture"
+              alt="character.name"
+              >
+              <template v-else>
+                {{character.initial}}
+              </template>
+          </v-list-tile-avatar>
+          <v-list-tile-title>
+            {{character.name}}
+          </v-list-tile-title>
+        </v-list-tile>
+      </v-list>
+      <v-expansion-panel popout>
+        <v-expansion-panel-content
+          v-for="party in parties"
+          :key="party._id"
+        >
+          <div slot="header">{{party.name}}</div>
+          <v-card>
+            <v-list>
+              <v-list-tile
+                v-for="character in party.characterDocs"
+                :key="character._id"
+              >
+                <v-list-tile-avatar>
+                  <img :src="character.picture" alt="character.name">
+                </v-list-tile-avatar>
+              </v-list-tile>
+            </v-list>
+          </v-card>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+    </v-card>
+    <v-speed-dial
+      fixed
+      bottom
+      right
+      transition="slide-y-reverse-transition"
+      v-model="fab"
+    >
       <v-btn
         slot="activator"
+        color="accent"
         fab
+        v-model="fab"
       >
         <v-icon>add</v-icon>
         <v-icon>close</v-icon>
       </v-btn>
-      <div>
-        <span class="v-tooltip__content">New Character</span>
-        <v-btn fab small slot="activator">
-          <v-icon>group</v-icon>
-        </v-btn>
-      </div>
-      <div>
-        <span>New Party</span>
-        <v-btn fab small slot="activator">
-          <v-icon>group</v-icon>
-        </v-btn>
-      </div>
+      <labeled-fab icon="face" label="New Character"></labeled-fab>
+      <labeled-fab icon="group" label="New Party"></labeled-fab>
     </v-speed-dial>
   </ToolbarLayout>
 </template>
 
 <script>
   import ToolbarLayout from "/imports/ui/layouts/ToolbarLayout.vue";
+  import LabeledFab from "/imports/ui/components/LabeledFab.vue";
+
   const characterTransform = function(char){
     char.url = `\/character\/${char._id}\/${char.urlName || "-"}`;
     char.color = getColorClass(char.color);
@@ -83,6 +77,9 @@
     return char;
   };
   export default {
+    data(){ return{
+      fab: false,
+    }},
     meteor: {
       $subscribe: {
         "characterList": [],
@@ -118,6 +115,7 @@
     },
     components: {
       ToolbarLayout,
+      LabeledFab,
     }
   };
 </script>
diff --git a/app/imports/ui/styles/speedDial.css b/app/imports/ui/styles/speedDial.css
new file mode 100644
index 00000000..b7694705
--- /dev/null
+++ b/app/imports/ui/styles/speedDial.css
@@ -0,0 +1,3 @@
+.v-speed-dial__list{
+  margin-bottom: 12px;
+}
diff --git a/app/imports/ui/styles/stylesIndex.js b/app/imports/ui/styles/stylesIndex.js
new file mode 100644
index 00000000..39a0ca67
--- /dev/null
+++ b/app/imports/ui/styles/stylesIndex.js
@@ -0,0 +1 @@
+import "./speedDial.css";
diff --git a/app/imports/ui/vueSetup.js b/app/imports/ui/vueSetup.js
index d2e7a1b5..400dd4f6 100644
--- a/app/imports/ui/vueSetup.js
+++ b/app/imports/ui/vueSetup.js
@@ -25,7 +25,7 @@ Vue.use(VueMeteorTracker);
 // App start
 Meteor.startup(() => {
   // Create the router instance
-  const router = routerFactory.create()
+  const router = routerFactory.create();
 
   // Start the Vue app
   new Vue({