From a771d896a84059703815e4cf9901e0f85ec89cfa Mon Sep 17 00:00:00 2001
From: Thaum Rystra <stefanzermatten@gmail.com>
Date: Fri, 15 May 2020 13:31:07 +0200
Subject: [PATCH] Prevented dialog titles from overflowing

---
 .../ui/creature/CreatureFormDialog.vue        |   4 +-
 .../character/CharacterCreationDialog.vue     | 449 ++++++++++--------
 .../character/CharacterDeleteDialog.vue       |   4 +-
 .../CreaturePropertyDialog.vue                |   4 +-
 .../CreaturePropertyFromLibraryDialog.vue     |  36 +-
 .../CreaturePropertyInsertForm.vue            |  58 +--
 .../dialogStack/DeleteConfirmationDialog.vue  |  53 ++-
 .../ui/dialogStack/DialogBase.Story.vue       |  26 +-
 .../ui/library/LibraryCreationDialog.vue      |  51 +-
 app/imports/ui/library/LibraryEditDialog.vue  |   4 +-
 .../ui/library/LibraryNodeEditDialog.vue      |  71 +--
 .../ui/library/LibraryNodeInsertForm.vue      |  60 +--
 app/imports/ui/pages/Friends.vue              |   3 -
 app/imports/ui/pages/Register.vue             |   3 -
 .../components/features/FeatureCard.vue       |   4 +-
 .../components/inventory/ContainerCard.vue    |  40 +-
 .../components/spells/SpellListCard.vue       |  40 +-
 .../shared/SelectablePropertyDialog.vue       |  42 +-
 app/imports/ui/sharing/ShareDialog.vue        |   4 +-
 19 files changed, 543 insertions(+), 413 deletions(-)

diff --git a/app/imports/ui/creature/CreatureFormDialog.vue b/app/imports/ui/creature/CreatureFormDialog.vue
index 071fb2d5..bd6510cf 100644
--- a/app/imports/ui/creature/CreatureFormDialog.vue
+++ b/app/imports/ui/creature/CreatureFormDialog.vue
@@ -1,8 +1,8 @@
 <template lang="html">
   <dialog-base>
-    <div slot="toolbar">
+    <v-toolbar-title slot="toolbar">
       Creature Form Dialog
-    </div>
+    </v-toolbar-title>
     <div>
       <creature-form
         :model="model"
diff --git a/app/imports/ui/creature/character/CharacterCreationDialog.vue b/app/imports/ui/creature/character/CharacterCreationDialog.vue
index c42e0230..2d9e7df1 100644
--- a/app/imports/ui/creature/character/CharacterCreationDialog.vue
+++ b/app/imports/ui/creature/character/CharacterCreationDialog.vue
@@ -1,192 +1,269 @@
 <template>
   <dialog-base>
-    <template slot="toolbar">New Character</template>
-    <v-stepper v-model="step" class="no-shadow">
+    <v-toolbar-title slot="toolbar">
+      New Character
+    </v-toolbar-title>
+    <v-stepper
+      v-model="step"
+      class="no-shadow"
+    >
       <v-stepper-header class="no-shadow">
-        <v-stepper-step :complete="step > 1" step="1">
-					Name
-				</v-stepper-step>
-        <v-divider></v-divider>
-        <v-stepper-step :complete="step > 2" step="2">
+        <v-stepper-step
+          :complete="step > 1"
+          step="1"
+        >
+          Name
+        </v-stepper-step>
+        <v-divider />
+        <v-stepper-step
+          :complete="step > 2"
+          step="2"
+        >
           Ability Scores
         </v-stepper-step>
-        <v-divider></v-divider>
-        <v-stepper-step :complete="step > 3" step="3">
+        <v-divider />
+        <v-stepper-step
+          :complete="step > 3"
+          step="3"
+        >
           Class
         </v-stepper-step>
       </v-stepper-header>
 
       <v-stepper-items>
         <v-stepper-content step="1">
-          <v-text-field label="Name" v-model="name"></v-text-field>
-					<v-text-field label="Gender" v-model="gender"></v-text-field>
-					<v-text-field label="Alignment" v-model="alignment" @keydown.tab="step++"></v-text-field>
+          <v-text-field
+            v-model="name"
+            label="Name"
+          />
+          <v-text-field
+            v-model="gender"
+            label="Gender"
+          />
+          <v-text-field
+            v-model="alignment"
+            label="Alignment"
+            @keydown.tab="step++"
+          />
         </v-stepper-content>
         <v-stepper-content step="2">
-          <v-text-field label="Race" v-model="race"></v-text-field>
-					<v-layout row justify-center align-center>
-						<h3>Point Cost:</h3>
-						<h1 class="ml-2" :class="cost > 27 ? 'error--text' : ''">{{cost}}</h1>
-						<span class="ml-1">/27</span>
-					</v-layout>
-					<table class="point-buy-table mt-2">
-						<thead>
-							<tr class="font-weight-bold">
-								<td></td>
-								<td>Base Values</td>
-								<td>Race Bonus</td>
-								<td>Score</td>
-								<td>Modifier</td>
-							</tr>
-						</thead>
-						<tr>
-							<td>Strength</td>
-							<td><v-text-field
-								type="number"
-								height="20"
-								reverse
-								v-model.number="baseStrength"
-								min="8"
-								max="15">
-							</v-text-field></td>
-							<td><v-text-field
-								type="number"
-								height="20"
-								reverse
-								v-model.number="strengthBonus">
-							</v-text-field></td>
-							<td>{{baseStrength + strengthBonus}}</td>
-							<td>{{mod(baseStrength + strengthBonus)}}</td>
-						</tr>
-						<tr>
-							<td>Dexterity</td>
-							<td><v-text-field
-								type="number"
-								height="20"
-								reverse
-								v-model.number="baseDexterity"
-								min="8"
-								max="15">
-							</v-text-field></td>
-							<td><v-text-field
-								type="number"
-								height="20"
-								reverse
-								v-model.number="dexterityBonus">
-							</v-text-field></td>
-							<td>{{baseDexterity + dexterityBonus}}</td>
-							<td>{{mod(baseDexterity + dexterityBonus)}}</td>
-						</tr>
-						<tr>
-							<td>Constitution</td>
-							<td><v-text-field
-								type="number"
-								height="20"
-								reverse
-								v-model.number="baseConstitution"
-								min="8"
-								max="15">
-							</v-text-field></td>
-							<td><v-text-field
-								type="number"
-								height="20"
-								reverse
-								v-model.number="constitutionBonus">
-							</v-text-field></td>
-							<td>{{baseConstitution + constitutionBonus}}</td>
-							<td>{{mod(baseConstitution + constitutionBonus)}}</td>
-						</tr>
-						<tr>
-							<td>Intelligence</td>
-							<td><v-text-field
-								type="number"
-								height="20"
-								reverse
-								v-model.number="baseIntelligence"
-								min="8"
-								max="15">
-							</v-text-field></td>
-							<td><v-text-field
-								type="number"
-								height="20"
-								reverse
-								v-model.number="intelligenceBonus">
-							</v-text-field></td>
-							<td>{{baseIntelligence + intelligenceBonus}}</td>
-							<td>{{mod(baseIntelligence + intelligenceBonus)}}</td>
-						</tr>
-						<tr>
-							<td>Wisdom</td>
-							<td><v-text-field
-								type="number"
-								height="20"
-								reverse
-								v-model.number="baseWisdom"
-								min="8"
-								max="15">
-							</v-text-field></td>
-							<td><v-text-field
-								type="number"
-								height="20"
-								reverse
-								v-model.number="wisdomBonus">
-							</v-text-field></td>
-							<td>{{baseWisdom + wisdomBonus}}</td>
-							<td>{{mod(baseWisdom + wisdomBonus)}}</td>
-						</tr>
-						<tr>
-							<td>Charisma</td>
-							<td><v-text-field
-								type="number"
-								height="20"
-								reverse
-								v-model.number="baseCharisma"
-								min="8"
-								max="15">
-							</v-text-field></td>
-							<td><v-text-field
-								type="number"
-								height="20"
-								reverse
-								v-model.number="charismaBonus">
-							</v-text-field></td>
-							<td>{{baseCharisma + charismaBonus}}</td>
-							<td>{{mod(baseCharisma + charismaBonus)}}</td>
-						</tr>
-					</table>
+          <v-text-field
+            v-model="race"
+            label="Race"
+          />
+          <v-layout
+            row
+            justify-center
+            align-center
+          >
+            <h3>Point Cost:</h3>
+            <h1
+              class="ml-2"
+              :class="cost > 27 ? 'error--text' : ''"
+            >
+              {{ cost }}
+            </h1>
+            <span class="ml-1">/27</span>
+          </v-layout>
+          <table class="point-buy-table mt-2">
+            <thead>
+              <tr class="font-weight-bold">
+                <td />
+                <td>Base Values</td>
+                <td>Race Bonus</td>
+                <td>Score</td>
+                <td>Modifier</td>
+              </tr>
+            </thead>
+            <tr>
+              <td>Strength</td>
+              <td>
+                <v-text-field
+                  v-model.number="baseStrength"
+                  type="number"
+                  height="20"
+                  reverse
+                  min="8"
+                  max="15"
+                />
+              </td>
+              <td>
+                <v-text-field
+                  v-model.number="strengthBonus"
+                  type="number"
+                  height="20"
+                  reverse
+                />
+              </td>
+              <td>{{ baseStrength + strengthBonus }}</td>
+              <td>{{ mod(baseStrength + strengthBonus) }}</td>
+            </tr>
+            <tr>
+              <td>Dexterity</td>
+              <td>
+                <v-text-field
+                  v-model.number="baseDexterity"
+                  type="number"
+                  height="20"
+                  reverse
+                  min="8"
+                  max="15"
+                />
+              </td>
+              <td>
+                <v-text-field
+                  v-model.number="dexterityBonus"
+                  type="number"
+                  height="20"
+                  reverse
+                />
+              </td>
+              <td>{{ baseDexterity + dexterityBonus }}</td>
+              <td>{{ mod(baseDexterity + dexterityBonus) }}</td>
+            </tr>
+            <tr>
+              <td>Constitution</td>
+              <td>
+                <v-text-field
+                  v-model.number="baseConstitution"
+                  type="number"
+                  height="20"
+                  reverse
+                  min="8"
+                  max="15"
+                />
+              </td>
+              <td>
+                <v-text-field
+                  v-model.number="constitutionBonus"
+                  type="number"
+                  height="20"
+                  reverse
+                />
+              </td>
+              <td>{{ baseConstitution + constitutionBonus }}</td>
+              <td>{{ mod(baseConstitution + constitutionBonus) }}</td>
+            </tr>
+            <tr>
+              <td>Intelligence</td>
+              <td>
+                <v-text-field
+                  v-model.number="baseIntelligence"
+                  type="number"
+                  height="20"
+                  reverse
+                  min="8"
+                  max="15"
+                />
+              </td>
+              <td>
+                <v-text-field
+                  v-model.number="intelligenceBonus"
+                  type="number"
+                  height="20"
+                  reverse
+                />
+              </td>
+              <td>{{ baseIntelligence + intelligenceBonus }}</td>
+              <td>{{ mod(baseIntelligence + intelligenceBonus) }}</td>
+            </tr>
+            <tr>
+              <td>Wisdom</td>
+              <td>
+                <v-text-field
+                  v-model.number="baseWisdom"
+                  type="number"
+                  height="20"
+                  reverse
+                  min="8"
+                  max="15"
+                />
+              </td>
+              <td>
+                <v-text-field
+                  v-model.number="wisdomBonus"
+                  type="number"
+                  height="20"
+                  reverse
+                />
+              </td>
+              <td>{{ baseWisdom + wisdomBonus }}</td>
+              <td>{{ mod(baseWisdom + wisdomBonus) }}</td>
+            </tr>
+            <tr>
+              <td>Charisma</td>
+              <td>
+                <v-text-field
+                  v-model.number="baseCharisma"
+                  type="number"
+                  height="20"
+                  reverse
+                  min="8"
+                  max="15"
+                />
+              </td>
+              <td>
+                <v-text-field
+                  v-model.number="charismaBonus"
+                  type="number"
+                  height="20"
+                  reverse
+                />
+              </td>
+              <td>{{ baseCharisma + charismaBonus }}</td>
+              <td>{{ mod(baseCharisma + charismaBonus) }}</td>
+            </tr>
+          </table>
         </v-stepper-content>
         <v-stepper-content step="3">
           <v-text-field
-          	label="Class"
-						v-model="cls"
-          >
+            v-model="cls"
+            label="Class"
+          />
+          <v-select
+            v-model="hitDice"
+            :items="hitDiceItems"
+            label="Hit Dice"
+          />
           </v-text-field>
-					<v-select
-						:items="hitDiceItems"
-						label="Hit Dice"
-						v-model="hitDice">
-					</v-select>
-					</v-text-field>
         </v-stepper-content>
       </v-stepper-items>
     </v-stepper>
     <template slot="actions">
-      <v-btn flat @click="$emit('pop')">Cancel</v-btn>
-			<v-btn flat @click="step--" v-if="step > 1">Back</v-btn>
-      <v-spacer></v-spacer>
-      <v-btn color="accent" @click="step++" v-if="step < 3">Next</v-btn>
       <v-btn
-				:flat="step < 3"
-				:color="step < 3? '' : 'accent'"
-				@click="submit">
-				Create
-			</v-btn>
+        flat
+        @click="$emit('pop')"
+      >
+        Cancel
+      </v-btn>
+      <v-btn
+        v-if="step > 1"
+        flat
+        @click="step--"
+      >
+        Back
+      </v-btn>
+      <v-spacer />
+      <v-btn
+        v-if="step < 3"
+        color="accent"
+        @click="step++"
+      >
+        Next
+      </v-btn>
+      <v-btn
+        :flat="step < 3"
+        :color="step < 3? '' : 'accent'"
+        @click="submit"
+      >
+        Create
+      </v-btn>
     </template>
   </dialog-base>
 </template>
 
 <script>
-  import DialogBase from "/imports/ui/dialogStack/DialogBase.vue";
+  import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 	const getCost = function(score){
 		const costs = {
 			8: 0,
@@ -205,12 +282,15 @@
 		}
 	};
   export default {
+    components: {
+      DialogBase,
+    },
     data(){return {
       step: 1,
-			name: "New Character",
-			gender: "",
-			alignment: "",
-			race: "Race",
+			name: 'New Character',
+			gender: '',
+			alignment: '',
+			race: 'Race',
 			baseStrength: 10,
 			baseDexterity: 10,
 			baseConstitution: 10,
@@ -223,10 +303,23 @@
 			intelligenceBonus: 0,
 			wisdomBonus: 0,
 			charismaBonus: 0,
-			hitDiceItems: ["d6", "d8", "d10", "d12"],
-			hitDice: "d8",
-			cls: "Class",
+			hitDiceItems: ['d6', 'd8', 'd10', 'd12'],
+			hitDice: 'd8',
+			cls: 'Class',
     }},
+		computed: {
+			cost(){
+				return [
+					this.baseStrength,
+					this.baseDexterity,
+					this.baseConstitution,
+					this.baseIntelligence,
+					this.baseWisdom,
+					this.baseCharisma,
+				].map(getCost)
+				.reduce((memo, score) => memo + score, 0);
+			},
+		},
 		methods: {
 			mod(score){
 				let mod = Math.floor((score - 10) / 2);
@@ -257,25 +350,9 @@
 					hitDice: this.hitDice,
 					cls: this.cls,
 				};
-				this.$emit("pop", char);
+				this.$emit('pop', char);
 			},
 		},
-		computed: {
-			cost(){
-				return [
-					this.baseStrength,
-					this.baseDexterity,
-					this.baseConstitution,
-					this.baseIntelligence,
-					this.baseWisdom,
-					this.baseCharisma,
-				].map(getCost)
-				.reduce((memo, score) => memo + score, 0);
-			},
-		},
-    components: {
-      DialogBase,
-    },
   };
 </script>
 
diff --git a/app/imports/ui/creature/character/CharacterDeleteDialog.vue b/app/imports/ui/creature/character/CharacterDeleteDialog.vue
index 98c89c19..90dae5d1 100644
--- a/app/imports/ui/creature/character/CharacterDeleteDialog.vue
+++ b/app/imports/ui/creature/character/CharacterDeleteDialog.vue
@@ -1,8 +1,8 @@
 <template lang="html">
   <dialog-base>
-    <div slot="toolbar">
+    <v-toolbar-title slot="toolbar">
       Delete Character
-    </div>
+    </v-toolbar-title>
     <div>
       <p v-if="name">
         Type "{{ name }}" to permanenetly delete the character
diff --git a/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue b/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue
index 53a972cc..b9aefbe7 100644
--- a/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue
+++ b/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue
@@ -5,9 +5,9 @@
         :type="model.type"
         class="mr-2"
       />
-      <div class="title">
+      <v-toolbar-title class="title">
         {{ model.name || getPropertyName(model.type) }}
-      </div>
+      </v-toolbar-title>
       <v-spacer />
       <v-menu
         v-if="editing"
diff --git a/app/imports/ui/creature/creatureProperties/CreaturePropertyFromLibraryDialog.vue b/app/imports/ui/creature/creatureProperties/CreaturePropertyFromLibraryDialog.vue
index d2752de1..fb387db6 100644
--- a/app/imports/ui/creature/creatureProperties/CreaturePropertyFromLibraryDialog.vue
+++ b/app/imports/ui/creature/creatureProperties/CreaturePropertyFromLibraryDialog.vue
@@ -1,20 +1,24 @@
 <template lang="html">
-	<dialog-base>
-		<div slot="toolbar">Add from library</div>
-		<library-and-node
-			slot="unwrapped-content"
-			@selected="val => node = val"
-			style="height: 100%;"
-		/>
-		<template slot="actions">
-			<v-spacer/>
-			<v-btn
-				flat
-				@click="$store.dispatch('popDialogStack', node)"
-				color="primary"
-			>Insert</v-btn>
-		</template>
-	</dialog-base>
+  <dialog-base>
+    <v-toolbar-title slot="toolbar">
+      Add from library
+    </v-toolbar-title>
+    <library-and-node
+      slot="unwrapped-content"
+      style="height: 100%;"
+      @selected="val => node = val"
+    />
+    <template slot="actions">
+      <v-spacer />
+      <v-btn
+        flat
+        color="primary"
+        @click="$store.dispatch('popDialogStack', node)"
+      >
+        Insert
+      </v-btn>
+    </template>
+  </dialog-base>
 </template>
 
 <script>
diff --git a/app/imports/ui/creature/creatureProperties/CreaturePropertyInsertForm.vue b/app/imports/ui/creature/creatureProperties/CreaturePropertyInsertForm.vue
index e682fc7d..88618077 100644
--- a/app/imports/ui/creature/creatureProperties/CreaturePropertyInsertForm.vue
+++ b/app/imports/ui/creature/creatureProperties/CreaturePropertyInsertForm.vue
@@ -1,27 +1,31 @@
 <template lang="html">
-	<dialog-base :override-back-button="() => $emit('back')">
-		<div slot="toolbar">Add {{propertyName}}</div>
-		<component
-			v-if="type"
-			:is="type"
-			class="creature-property-form"
-			:model="model"
-			:errors="errors"
-			@change="change"
-			@push="push"
-			@pull="pull"
-		/>
-		<div
-			slot="actions"
-			class="layout row justify-end"
-		>
-			<v-btn
-				flat
-				:disabled="!valid"
-				@click="$store.dispatch('popDialogStack', model)"
-			>Insert</v-btn>
-		</div>
-	</dialog-base>
+  <dialog-base :override-back-button="() => $emit('back')">
+    <v-toolbar-title slot="toolbar">
+      Add {{ propertyName }}
+    </v-toolbar-title>
+    <component
+      :is="type"
+      v-if="type"
+      class="creature-property-form"
+      :model="model"
+      :errors="errors"
+      @change="change"
+      @push="push"
+      @pull="pull"
+    />
+    <div
+      slot="actions"
+      class="layout row justify-end"
+    >
+      <v-btn
+        flat
+        :disabled="!valid"
+        @click="$store.dispatch('popDialogStack', model)"
+      >
+        Insert
+      </v-btn>
+    </div>
+  </dialog-base>
 </template>
 
 <script>
@@ -35,6 +39,10 @@ export default {
 		DialogBase,
 	},
 	mixins: [schemaFormMixin],
+	props: {
+		propertyName: String,
+		type: String,
+	},
 	data(){return {
 		model: {
 			type: this.type,
@@ -42,10 +50,6 @@ export default {
 		schema: undefined,
 		validationContext: undefined,
 	};},
-	props: {
-		propertyName: String,
-		type: String,
-	},
 	watch: {
 		type(newType){
 			if (!newType) return;
diff --git a/app/imports/ui/dialogStack/DeleteConfirmationDialog.vue b/app/imports/ui/dialogStack/DeleteConfirmationDialog.vue
index f94ac653..05a361ee 100644
--- a/app/imports/ui/dialogStack/DeleteConfirmationDialog.vue
+++ b/app/imports/ui/dialogStack/DeleteConfirmationDialog.vue
@@ -1,28 +1,35 @@
 <template lang="html">
   <dialog-base>
-		<div slot="toolbar">
-			Delete {{typeName}}
-		</div>
-		<div>
-			<p v-if="name">
-				Type "{{name}}" to permanenetly delete
-			</p>
-			<v-text-field v-if="name" v-model="inputName"/>
-			<div class="layout row justify-center">
-				<v-btn
-				v-show="nameMatch"
-				class="primary"
-				@click="$store.dispatch('popDialogStack', true);"
-				>Delete forever</v-btn>
-			</div>
-		</div>
-		<v-spacer slot="actions"/>
-		<v-btn
-			slot="actions"
-			flat
-			@click="$store.dispatch('popDialogStack')"
-		>Cancel</v-btn>
-	</dialog-base>
+    <v-toolbar-title slot="toolbar">
+      Delete {{ typeName }}
+    </v-toolbar-title>
+    <div>
+      <p v-if="name">
+        Type "{{ name }}" to permanenetly delete
+      </p>
+      <v-text-field
+        v-if="name"
+        v-model="inputName"
+      />
+      <div class="layout row justify-center">
+        <v-btn
+          v-show="nameMatch"
+          class="primary"
+          @click="$store.dispatch('popDialogStack', true);"
+        >
+          Delete forever
+        </v-btn>
+      </div>
+    </div>
+    <v-spacer slot="actions" />
+    <v-btn
+      slot="actions"
+      flat
+      @click="$store.dispatch('popDialogStack')"
+    >
+      Cancel
+    </v-btn>
+  </dialog-base>
 </template>
 
 <script>
diff --git a/app/imports/ui/dialogStack/DialogBase.Story.vue b/app/imports/ui/dialogStack/DialogBase.Story.vue
index 891eb3b2..dd8041a6 100644
--- a/app/imports/ui/dialogStack/DialogBase.Story.vue
+++ b/app/imports/ui/dialogStack/DialogBase.Story.vue
@@ -1,22 +1,34 @@
 <template>
   <dialog-base>
-    <div slot="toolbar">
+    <v-toolbar-title slot="toolbar">
       Test Dialog
-    </div>
+    </v-toolbar-title>
     <div>
-			<v-btn @click="openDialog('btn')" data-id="btn">Open Dialog</v-btn>
-      <v-btn fab @click="openDialog('fab')" data-id="fab" color="green">Open Dialog</v-btn>
+      <v-btn
+        data-id="btn"
+        @click="openDialog('btn')"
+      >
+        Open Dialog
+      </v-btn>
+      <v-btn
+        fab
+        data-id="fab"
+        color="green"
+        @click="openDialog('fab')"
+      >
+        Open Dialog
+      </v-btn>
     </div>
   </dialog-base>
 </template>
 
 <script>
-  import store from "/imports/ui/vuexStore.js";
-  import DialogBase from "/imports/ui/dialogStack/DialogBase.vue";
+  import store from '/imports/ui/vuexStore.js';
+  import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
   const component = {
     methods: {
       openDialog(elementId){
-        store.commit("pushDialogStack", {
+        store.commit('pushDialogStack', {
           component,
 					elementId,
         });
diff --git a/app/imports/ui/library/LibraryCreationDialog.vue b/app/imports/ui/library/LibraryCreationDialog.vue
index d5b2d98f..893c6cb0 100644
--- a/app/imports/ui/library/LibraryCreationDialog.vue
+++ b/app/imports/ui/library/LibraryCreationDialog.vue
@@ -1,39 +1,44 @@
 <template lang="html">
-	<dialog-base>
-		<template slot="toolbar">
-			<div>
-				New Library
-			</div>
-		</template>
-		<template>
-			<text-field label="name" :value="library.name" @change="nameChanged" :debounce-time="0"/>
-		</template>
-		<template slot="actions">
-			<v-spacer/>
-			<v-btn
-				flat
-				:disabled="!valid"
-				@click="$store.dispatch('popDialogStack', library)"
-			>
-				Insert Library
-			</v-btn>
-		</template>
-	</dialog-base>
+  <dialog-base>
+    <template slot="toolbar">
+      <v-toolbar-title>
+        New Library
+      </v-toolbar-title>
+    </template>
+    <template>
+      <text-field
+        label="name"
+        :value="library.name"
+        :debounce-time="0"
+        @change="nameChanged"
+      />
+    </template>
+    <template slot="actions">
+      <v-spacer />
+      <v-btn
+        flat
+        :disabled="!valid"
+        @click="$store.dispatch('popDialogStack', library)"
+      >
+        Insert Library
+      </v-btn>
+    </template>
+  </dialog-base>
 </template>
 
 <script>
 	import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 
 	export default {
+		components: {
+			DialogBase,
+		},
 		data(){ return {
 			library: {
 				name: 'New Library',
 			},
 			valid: true,
 		}},
-		components: {
-			DialogBase,
-		},
 		methods: {
 			nameChanged(val, ack){
 				if (val){
diff --git a/app/imports/ui/library/LibraryEditDialog.vue b/app/imports/ui/library/LibraryEditDialog.vue
index df244508..4c683ba7 100644
--- a/app/imports/ui/library/LibraryEditDialog.vue
+++ b/app/imports/ui/library/LibraryEditDialog.vue
@@ -1,9 +1,9 @@
 <template lang="html">
   <dialog-base>
     <template slot="toolbar">
-      <div>
+      <v-toolbar-title>
         {{ model && model.name }}
-      </div>
+      </v-toolbar-title>
       <v-spacer />
       <v-btn
         flat
diff --git a/app/imports/ui/library/LibraryNodeEditDialog.vue b/app/imports/ui/library/LibraryNodeEditDialog.vue
index 1e083a27..771ccf26 100644
--- a/app/imports/ui/library/LibraryNodeEditDialog.vue
+++ b/app/imports/ui/library/LibraryNodeEditDialog.vue
@@ -1,35 +1,44 @@
 <template lang="html">
-	<dialog-base>
-		<template slot="toolbar">
-			<property-icon :type="model.type" class="mr-2"/>
-			<div class="title">
-				{{getPropertyName(model.type)}}
-			</div>
-			<v-spacer/>
-			<v-btn icon flat @click="remove">
-				<v-icon>delete</v-icon>
-			</v-btn>
-		</template>
-		<component
-			v-if="model"
-			class="library-node-form"
-			stored
-			:is="model.type"
-			:model="model"
-			@change="change"
-			@push="push"
-			@pull="pull"
-		/>
-		<div
-			slot="actions"
-			class="layout row justify-end"
-		>
-			<v-btn
-				flat
-				@click="$store.dispatch('popDialogStack')"
-			>Done</v-btn>
-		</div>
-	</dialog-base>
+  <dialog-base>
+    <template slot="toolbar">
+      <property-icon
+        :type="model.type"
+        class="mr-2"
+      />
+      <v-toolbar-title class="title">
+        {{ getPropertyName(model.type) }}
+      </v-toolbar-title>
+      <v-spacer />
+      <v-btn
+        icon
+        flat
+        @click="remove"
+      >
+        <v-icon>delete</v-icon>
+      </v-btn>
+    </template>
+    <component
+      :is="model.type"
+      v-if="model"
+      class="library-node-form"
+      stored
+      :model="model"
+      @change="change"
+      @push="push"
+      @pull="pull"
+    />
+    <div
+      slot="actions"
+      class="layout row justify-end"
+    >
+      <v-btn
+        flat
+        @click="$store.dispatch('popDialogStack')"
+      >
+        Done
+      </v-btn>
+    </div>
+  </dialog-base>
 </template>
 
 <script>
diff --git a/app/imports/ui/library/LibraryNodeInsertForm.vue b/app/imports/ui/library/LibraryNodeInsertForm.vue
index 4612ef24..e682bc37 100644
--- a/app/imports/ui/library/LibraryNodeInsertForm.vue
+++ b/app/imports/ui/library/LibraryNodeInsertForm.vue
@@ -1,28 +1,32 @@
 <template lang="html">
-	<dialog-base :override-back-button="() => $emit('back')">
-		<div slot="toolbar">Add {{propertyName}}</div>
-		<component
-			v-if="type"
-			stored
-			:is="type"
-			class="library-node-form"
-			:model="model"
-			:errors="errors"
-			@change="change"
-			@push="push"
-			@pull="pull"
-		/>
-		<div
-			slot="actions"
-			class="layout row justify-end"
-		>
-			<v-btn
-				flat
-				:disabled="!valid"
-				@click="$store.dispatch('popDialogStack', model)"
-			>Insert</v-btn>
-		</div>
-	</dialog-base>
+  <dialog-base :override-back-button="() => $emit('back')">
+    <v-toolbar-title slot="toolbar">
+      Add {{ propertyName }}
+    </v-toolbar-title>
+    <component
+      :is="type"
+      v-if="type"
+      stored
+      class="library-node-form"
+      :model="model"
+      :errors="errors"
+      @change="change"
+      @push="push"
+      @pull="pull"
+    />
+    <div
+      slot="actions"
+      class="layout row justify-end"
+    >
+      <v-btn
+        flat
+        :disabled="!valid"
+        @click="$store.dispatch('popDialogStack', model)"
+      >
+        Insert
+      </v-btn>
+    </div>
+  </dialog-base>
 </template>
 
 <script>
@@ -37,6 +41,10 @@ export default {
 		DialogBase,
 	},
 	mixins: [schemaFormMixin],
+	props: {
+		propertyName: String,
+		type: String,
+	},
 	data(){return {
 		model: {
 			type: this.type,
@@ -44,10 +52,6 @@ export default {
 		schema: undefined,
 		validationContext: undefined,
 	};},
-	props: {
-		propertyName: String,
-		type: String,
-	},
 	watch: {
 		type(newType){
 			if (!newType) return;
diff --git a/app/imports/ui/pages/Friends.vue b/app/imports/ui/pages/Friends.vue
index a0c16bb1..ba98ea17 100644
--- a/app/imports/ui/pages/Friends.vue
+++ b/app/imports/ui/pages/Friends.vue
@@ -1,8 +1,5 @@
 <template>
   <div>
-    <div slot="toolbar">
-      Friends
-    </div>
     <v-sheet>
       <h1>
         Friends
diff --git a/app/imports/ui/pages/Register.vue b/app/imports/ui/pages/Register.vue
index 8c381e00..0857a5ac 100644
--- a/app/imports/ui/pages/Register.vue
+++ b/app/imports/ui/pages/Register.vue
@@ -1,8 +1,5 @@
 <template>
   <div>
-    <div slot="toolbar">
-      Sign Up
-    </div>
     <v-form
       ref="form"
       class="mt-4"
diff --git a/app/imports/ui/properties/components/features/FeatureCard.vue b/app/imports/ui/properties/components/features/FeatureCard.vue
index e72abadc..976c6669 100644
--- a/app/imports/ui/properties/components/features/FeatureCard.vue
+++ b/app/imports/ui/properties/components/features/FeatureCard.vue
@@ -5,9 +5,9 @@
     @click="$emit('click')"
   >
     <template slot="toolbar">
-      <span>
+      <v-toolbar-title>
         {{ model.name }}
-      </span>
+      </v-toolbar-title>
       <v-spacer />
     </template>
     <v-card-text v-if="model.summary">
diff --git a/app/imports/ui/properties/components/inventory/ContainerCard.vue b/app/imports/ui/properties/components/inventory/ContainerCard.vue
index 40e574a2..d14f8f46 100644
--- a/app/imports/ui/properties/components/inventory/ContainerCard.vue
+++ b/app/imports/ui/properties/components/inventory/ContainerCard.vue
@@ -1,18 +1,22 @@
 <template lang="html">
-	<toolbar-card :color="model.color" @toolbarclick="clickContainer(model._id)" :data-id="model._id">
-		<template slot="toolbar">
-			<span>
-				{{model.name}}
-			</span>
-			<v-spacer/>
-		</template>
-		<creature-properties-tree
-			:root="{collection: 'creatureProperties', id: model._id}"
-			:filter="{type: {$in: ['container', 'item', 'folder']}}"
-			@selected="e => clickProperty(e)"
-			:organize="organize"
-			group="inventory"
-		/>
+  <toolbar-card
+    :color="model.color"
+    :data-id="model._id"
+    @toolbarclick="clickContainer(model._id)"
+  >
+    <template slot="toolbar">
+      <v-toolbar-title>
+        {{ model.name }}
+      </v-toolbar-title>
+      <v-spacer />
+    </template>
+    <creature-properties-tree
+      :root="{collection: 'creatureProperties', id: model._id}"
+      :filter="{type: {$in: ['container', 'item', 'folder']}}"
+      :organize="organize"
+      group="inventory"
+      @selected="e => clickProperty(e)"
+    />
   </toolbar-card>
 </template>
 
@@ -22,14 +26,14 @@ import ToolbarCard from '/imports/ui/components/ToolbarCard.vue';
 import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue';
 
 export default {
-	props: {
-		model: Object,
-		organize: Boolean,
-	},
 	components: {
 		ToolbarCard,
 		CreaturePropertiesTree,
 	},
+	props: {
+		model: Object,
+		organize: Boolean,
+	},
 	methods: {
 		clickContainer(_id){
 			this.$store.commit('pushDialogStack', {
diff --git a/app/imports/ui/properties/components/spells/SpellListCard.vue b/app/imports/ui/properties/components/spells/SpellListCard.vue
index 30f9e75b..299ea2d6 100644
--- a/app/imports/ui/properties/components/spells/SpellListCard.vue
+++ b/app/imports/ui/properties/components/spells/SpellListCard.vue
@@ -1,18 +1,22 @@
 <template lang="html">
-	<toolbar-card :color="model.color" @toolbarclick="clickSpellList(model._id)" :data-id="model._id">
-		<template slot="toolbar">
-			<span>
-				{{model.name}}
-			</span>
-			<v-spacer/>
-		</template>
-		<creature-properties-tree
-			:root="{collection: 'creatureProperties', id: model._id}"
-			:filter="{type: {$in: ['spellList', 'spell', 'folder']}}"
-			@selected="e => clickProperty(e)"
-			:organize="organize"
-			group="spells"
-		/>
+  <toolbar-card
+    :color="model.color"
+    :data-id="model._id"
+    @toolbarclick="clickSpellList(model._id)"
+  >
+    <template slot="toolbar">
+      <v-toolbar-title>
+        {{ model.name }}
+      </v-toolbar-title>
+      <v-spacer />
+    </template>
+    <creature-properties-tree
+      :root="{collection: 'creatureProperties', id: model._id}"
+      :filter="{type: {$in: ['spellList', 'spell', 'folder']}}"
+      :organize="organize"
+      group="spells"
+      @selected="e => clickProperty(e)"
+    />
   </toolbar-card>
 </template>
 
@@ -22,14 +26,14 @@ import ToolbarCard from '/imports/ui/components/ToolbarCard.vue';
 import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue';
 
 export default {
-	props: {
-		model: Object,
-		organize: Boolean,
-	},
 	components: {
 		ToolbarCard,
 		CreaturePropertiesTree,
 	},
+	props: {
+		model: Object,
+		organize: Boolean,
+	},
 	methods: {
 		clickSpellList(_id){
 			this.$store.commit('pushDialogStack', {
diff --git a/app/imports/ui/properties/shared/SelectablePropertyDialog.vue b/app/imports/ui/properties/shared/SelectablePropertyDialog.vue
index 011c6555..c6e478d5 100644
--- a/app/imports/ui/properties/shared/SelectablePropertyDialog.vue
+++ b/app/imports/ui/properties/shared/SelectablePropertyDialog.vue
@@ -1,18 +1,24 @@
 <template lang="html">
-	<transition-group name="slide">
-		<dialog-base v-show="!value" class="step-1" key="left">
-			<div slot="toolbar">Add Library Content</div>
-			<property-selector @select="property => $emit('input', property)"/>
-		</dialog-base>
-		<div
-			v-show="value"
-			class="step-2"
-			style="height: 100%;"
-			key="right"
-		>
-			<slot/>
-		</div>
-	</transition-group>
+  <transition-group name="slide">
+    <dialog-base
+      v-show="!value"
+      key="left"
+      class="step-1"
+    >
+      <v-toolbar-title slot="toolbar">
+        Add Library Content
+      </v-toolbar-title>
+      <property-selector @select="property => $emit('input', property)" />
+    </dialog-base>
+    <div
+      v-show="value"
+      key="right"
+      class="step-2"
+      style="height: 100%;"
+    >
+      <slot />
+    </div>
+  </transition-group>
 </template>
 
 <script>
@@ -20,15 +26,15 @@ import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import PropertySelector from '/imports/ui/properties/shared/PropertySelector.vue';
 
 export default {
+  components: {
+    DialogBase,
+		PropertySelector,
+  },
 	props: {
 		value: {
 			type: String,
 		},
 	},
-  components: {
-    DialogBase,
-		PropertySelector,
-  },
 };
 </script>
 
diff --git a/app/imports/ui/sharing/ShareDialog.vue b/app/imports/ui/sharing/ShareDialog.vue
index ef16b982..5892274c 100644
--- a/app/imports/ui/sharing/ShareDialog.vue
+++ b/app/imports/ui/sharing/ShareDialog.vue
@@ -1,8 +1,8 @@
 <template lang="html">
   <dialog-base>
-    <div slot="toolbar">
+    <v-toolbar-title slot="toolbar">
       Sharing
-    </div>
+    </v-toolbar-title>
     <div v-if="model">
       <smart-select
         label="Who can view"