From 5f87bbc4f59acff710c8c589428d10dec5a7c21c Mon Sep 17 00:00:00 2001
From: Thaum Rystra <stefanzermatten@gmail.com>
Date: Fri, 8 May 2020 15:59:59 +0200
Subject: [PATCH] Used custom labels on tree tab buttons to prevent tooltip
 formatting shenanigans

---
 app/imports/ui/components/LabeledFab.vue      |  14 +-
 .../character/characterSheetTabs/TreeTab.vue  | 286 +++++++++---------
 2 files changed, 158 insertions(+), 142 deletions(-)

diff --git a/app/imports/ui/components/LabeledFab.vue b/app/imports/ui/components/LabeledFab.vue
index 74f0af80..3d3f5680 100644
--- a/app/imports/ui/components/LabeledFab.vue
+++ b/app/imports/ui/components/LabeledFab.vue
@@ -1,8 +1,13 @@
 <template>
-  <v-btn fab small @click="$emit('click')">
-    <v-icon>{{icon}}</v-icon>
+  <v-btn
+    fab
+    small
+    v-bind="$attrs"
+    @click="$emit('click')"
+  >
+    <v-icon>{{ icon }}</v-icon>
     <span id="label">
-      {{label}}
+      {{ label }}
     </span>
   </v-btn>
 </template>
@@ -12,8 +17,9 @@
    * Because speed dials only work well with v-btn's as children, this hacky
    * component creates a v-btn with a label.
    */
+   console.log('labeled fab reporting for duty')
   export default {
-    props: ["icon", "label"],
+    props: ['icon', 'label'],
   }
 </script>
 
diff --git a/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue b/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue
index 7f621ed5..e844c1f9 100644
--- a/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue
+++ b/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue
@@ -1,102 +1,112 @@
 <template lang="html">
   <div class="tree-tab">
-		<v-card class="ma-4 layout row" data-id="creature-tree-card">
-			<div>
-				<v-toolbar flat dense>
-					<v-spacer/>
-					<v-switch
-						label="Organize"
-						class="mx-3"
-						v-model="organize"
-						:disabled="organizeDisabled"
-						style="flex-grow: 0; height: 32px;"
-					/>
-				</v-toolbar>
-				<v-combobox
-	        v-model="filterString"
-	        :items="filterOptions"
-	        prepend-inner-icon="search"
-					class="mx-4"
-					hide-no-data
-					hide-selected
-					multiple
-					clearable
-					small-chips
-					deletable-chips
-					ref="searchBox"
-      	/>
-				<creature-properties-tree
-					class="pt-0"
-					:root="{collection: 'creatures', id: creatureId}"
-					:organize="organize"
-					@selected="e => selected = e"
-					:selected-node-id="selected"
-					:filter="filter"
-					style="min-width: 320px;"
-				/>
-			</div>
-			<v-divider vertical/>
-			<div style="width: 100%; background-color: inherit;" data-id="selected-node-card">
-				<v-toolbar dense flat>
-					<property-icon :type="selectedProperty && selectedProperty.type" class="mr-2"/>
-					<div class="title">
-						{{getPropertyName(selectedProperty && selectedProperty.type)}}
-					</div>
-					<v-spacer/>
-					<v-btn flat icon @click="editCreatureProperty" v-if="selectedProperty">
-						<v-icon>create</v-icon>
-					</v-btn>
-				</v-toolbar>
-				<v-card-text>
-					<property-viewer :model="selectedProperty"/>
-				</v-card-text>
-			</div>
-		</v-card>
-		<v-speed-dial
+    <v-card
+      class="ma-4 layout row"
+      data-id="creature-tree-card"
+    >
+      <div>
+        <v-toolbar
+          flat
+          dense
+        >
+          <v-spacer />
+          <v-switch
+            v-model="organize"
+            label="Organize"
+            class="mx-3"
+            :disabled="organizeDisabled"
+            style="flex-grow: 0; height: 32px;"
+          />
+        </v-toolbar>
+        <v-combobox
+          ref="searchBox"
+          v-model="filterString"
+          :items="filterOptions"
+          prepend-inner-icon="search"
+          class="mx-4"
+          hide-no-data
+          hide-selected
+          multiple
+          clearable
+          small-chips
+          deletable-chips
+        />
+        <creature-properties-tree
+          class="pt-0"
+          :root="{collection: 'creatures', id: creatureId}"
+          :organize="organize"
+          :selected-node-id="selected"
+          :filter="filter"
+          style="min-width: 320px;"
+          @selected="e => selected = e"
+        />
+      </div>
+      <v-divider vertical />
+      <div
+        style="width: 100%; background-color: inherit;"
+        data-id="selected-node-card"
+      >
+        <v-toolbar
+          dense
+          flat
+        >
+          <property-icon
+            :type="selectedProperty && selectedProperty.type"
+            class="mr-2"
+          />
+          <div class="title">
+            {{ getPropertyName(selectedProperty && selectedProperty.type) }}
+          </div>
+          <v-spacer />
+          <v-btn
+            v-if="selectedProperty"
+            flat
+            icon
+            @click="editCreatureProperty"
+          >
+            <v-icon>create</v-icon>
+          </v-btn>
+        </v-toolbar>
+        <v-card-text>
+          <property-viewer :model="selectedProperty" />
+        </v-card-text>
+      </div>
+    </v-card>
+    <v-speed-dial
       v-model="fab"
-			fixed
+      fixed
       bottom="bottom"
       right="right"
     >
-      <template v-slot:activator>
+      <template #activator>
         <v-btn
           v-model="fab"
           color="primary"
           fab
-					data-id="insert-creature-property-fab"
+          data-id="insert-creature-property-fab"
         >
           <v-icon>add</v-icon>
           <v-icon>close</v-icon>
         </v-btn>
       </template>
-			<v-tooltip disabled left :value="true" :nudge-left="16">
-				Property from library
-				<v-btn
-					slot="activator"
-					color="primary"
-					small fab
-					@click="propertyFromLibrary"
-				>
-					<v-icon>book</v-icon>
-				</v-btn>
-			</v-tooltip>
-			<v-tooltip disabled left :value="true" :nudge-left="16">
-				New property
-				<v-btn
-					slot="activator"
-					color="primary"
-					small fab
-					@click="insertCreatureProperty"
-				>
-					<v-icon>edit</v-icon>
-				</v-btn>
-			</v-tooltip>
+      <labeled-fab
+        color="primary"
+        label="Property from library"
+        icon="book"
+        @click="propertyFromLibrary"
+      />
+      <labeled-fab
+        color="primary"
+        label="New property"
+        icon="edit"
+        @click="insertCreatureProperty"
+      />
     </v-speed-dial>
   </div>
 </template>
 
 <script>
-import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue';
+  import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue';
 	import CreatureProperties, {
 		insertProperty,
 		insertPropertyFromLibraryNode
@@ -105,12 +115,19 @@ import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/Crea
 	import { setDocToLastOrder } from '/imports/api/parenting/order.js';
 	import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
 	import { getPropertyName } from '/imports/constants/PROPERTIES.js';
+  import LabeledFab from '/imports/ui/components/LabeledFab.vue';
 
 	export default {
 		components: {
 			CreaturePropertiesTree,
 			PropertyViewer,
 			PropertyIcon,
+      LabeledFab,
+		},
+		props: {
+			creatureId: {
+				type: String,
+			},
 		},
 		data(){ return {
 			organize: false,
@@ -140,63 +157,6 @@ import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/Crea
 				{text: 'Items', value: 'item'},
 			],
 		};},
-		props: {
-			creatureId: {
-				type: String,
-			},
-		},
-		methods: {
-			insertCreatureProperty(){
-				let that = this;
-				this.$store.commit('pushDialogStack', {
-					component: 'creature-property-creation-dialog',
-					elementId: 'insert-creature-property-fab',
-					callback(creatureProperty){
-						if (!creatureProperty) return;
-						creatureProperty.parent = {collection: "creatures", id: that.creatureId};
-						creatureProperty.ancestors = [ {collection: "creatures", id: that.creatureId}];
-						setDocToLastOrder({collection: CreatureProperties, doc: creatureProperty});
-						let creaturePropertyId = insertProperty.call({creatureProperty});
-						return creaturePropertyId;
-					}
-				});
-			},
-			propertyFromLibrary(){
-				let that = this;
-				this.$store.commit('pushDialogStack', {
-					component: 'creature-property-from-library-dialog',
-					elementId: 'insert-creature-property-fab',
-					callback(libraryNode){
-						if (!libraryNode) return;
-						let propertyId = insertPropertyFromLibraryNode.call({
-							nodeId: libraryNode._id,
-							parentRef: {collection: 'creatures', id: that.creatureId},
-						});
-						return;
-					}
-				});
-			},
-			editCreatureProperty(){
-				let that = this;
-				this.$store.commit('pushDialogStack', {
-					component: 'creature-property-dialog',
-					elementId: 'selected-node-card',
-					data: {
-						_id: this.selected,
-						startInEditTab: true,
-					},
-				});
-			},
-			getPropertyName,
-		},
-		meteor: {
-			selectedProperty(){
-				return CreatureProperties.findOne({
-					_id: this.selected,
-					removed: {$ne: true}
-				});
-			}
-		},
 		computed: {
 			filter(){
 				if (!this.filterString.length) return;
@@ -207,8 +167,8 @@ import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/Crea
 						typeFilters.push(filter.value);
 					} else {
 						// escape string
-						let term = filter.replace( /[-\/\\^$*+?.()|[\]{}]/g, '\\$&' );
-  					var reg = new RegExp( '.*' + term + '.*', 'i' );
+						let term = filter.replace( /[-/\\^$*+?.()|[\]{}]/g, '\\$&' );
+            var reg = new RegExp( '.*' + term + '.*', 'i' );
 						nameFilters.push(reg)
 					}
 				});
@@ -227,6 +187,56 @@ import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/Crea
 					this.organizeDisabled = false;
 				}
 			},
+		},
+		methods: {
+			insertCreatureProperty(){
+				let that = this;
+				this.$store.commit('pushDialogStack', {
+					component: 'creature-property-creation-dialog',
+					elementId: 'insert-creature-property-fab',
+					callback(creatureProperty){
+						if (!creatureProperty) return;
+						creatureProperty.parent = {collection: 'creatures', id: that.creatureId};
+						creatureProperty.ancestors = [ {collection: 'creatures', id: that.creatureId}];
+						setDocToLastOrder({collection: CreatureProperties, doc: creatureProperty});
+						let creaturePropertyId = insertProperty.call({creatureProperty});
+						return creaturePropertyId;
+					}
+				});
+			},
+			propertyFromLibrary(){
+				let that = this;
+				this.$store.commit('pushDialogStack', {
+					component: 'creature-property-from-library-dialog',
+					elementId: 'insert-creature-property-fab',
+					callback(libraryNode){
+						if (!libraryNode) return;
+						insertPropertyFromLibraryNode.call({
+							nodeId: libraryNode._id,
+							parentRef: {collection: 'creatures', id: that.creatureId},
+						});
+					}
+				});
+			},
+			editCreatureProperty(){
+				this.$store.commit('pushDialogStack', {
+					component: 'creature-property-dialog',
+					elementId: 'selected-node-card',
+					data: {
+						_id: this.selected,
+						startInEditTab: true,
+					},
+				});
+			},
+			getPropertyName,
+		},
+		meteor: {
+			selectedProperty(){
+				return CreatureProperties.findOne({
+					_id: this.selected,
+					removed: {$ne: true}
+				});
+			}
 		}
 	};
 </script>