Dark mode now with 20% more dark

app/imports/api/creature/Creatures.js

@@ -143,7 +143,15 @@ const updateCreature = new ValidatedMethod({
   validate({_id, path}){
 		if (!_id) return false;
 		// Allowed fields
-		let allowedFields = ['name', 'alignment', 'gender', 'picture', 'avatarPicture', 'settings'];
+		let allowedFields = [
+      'name',
+      'alignment',
+      'gender',
+      'picture',
+      'avatarPicture',
+      'color',
+      'settings',
+    ];
 		if (!allowedFields.includes(path[0])){
 			throw new Meteor.Error('Creatures.methods.update.denied',
       'This field can\'t be updated using this method');
@@ -152,9 +160,15 @@ const updateCreature = new ValidatedMethod({
   run({_id, path, value}) {
 		let creature = Creatures.findOne(_id);
     assertEditPermission(creature, this.userId);
-		Creatures.update(_id, {
+    if (value === undefined || value === null){
-			$set: {[path.join('.')]: value},
+      Creatures.update(_id, {
-		});
+        $unset: {[path.join('.')]: 1},
+      });
+    } else {
+      Creatures.update(_id, {
+        $set: {[path.join('.')]: value},
+      });
+    }
   },
 });
 

app/imports/api/creature/computation/recomputeCreature.js

@@ -72,13 +72,11 @@ const calculationPropertyTypes = [
  * - Write the computed results back to the database
  */
 export function recomputeCreatureById(creatureId){
-  // Skipping computation on the client can result in the server being made to
-  // do work that isn't possible, in exchange for dramatic performance gains
-  if (Meteor.isClient) return;
   let props = getActiveProperties({
     ancestorId: creatureId,
     filter: {type: {$in: calculationPropertyTypes}},
     includeUntoggled: true,
+    // TODO filter out expensive fields, particularly icon field
   });
   let computationMemo = new ComputationMemo(props);
   computeMemo(computationMemo);

app/imports/api/properties/Containers.js

@@ -18,12 +18,12 @@ let ContainerSchema = new SimpleSchema({
 	weight: {
 		type: Number,
 		min: 0,
-		defaultValue: 0
+    optional: true,
 	},
 	value: {
 		type: Number,
 		min: 0,
-		defaultValue: 0
+    optional: true,
 	},
 	description: {
 		type: String,
@@ -32,4 +32,16 @@ let ContainerSchema = new SimpleSchema({
 	},
 });
 
-export { ContainerSchema };
+const ComputedOnlyContainerSchema = new SimpleSchema({
+  // Weight of all the contents, zero if `contentsWeightless` is true
+  contentsWeight:{
+    type: Number,
+    optional: true,
+  },
+});
+
+const ComputedContainerSchema = new SimpleSchema()
+	.extend(ComputedOnlyContainerSchema)
+	.extend(ContainerSchema);
+
+export { ContainerSchema, ComputedContainerSchema };

app/imports/constants/PROPERTIES.js

@@ -1,42 +1,42 @@
 const PROPERTIES = Object.freeze({
   action: {
-    icon: 'offline_bolt',
+    icon: '$vuetify.icons.action',
     name: 'Action'
   },
   adjustment: {
-    icon: 'warning',
+    icon: '$vuetify.icons.attribute_damage',
     name: 'Attribute damage'
   },
   attack: {
-    icon: 'bolt',
+    icon: '$vuetify.icons.attack',
     name: 'Attack'
   },
   attribute: {
-    icon: 'donut_small',
+    icon: '$vuetify.icons.attribute',
     name: 'Attribute'
   },
   buff: {
-    icon: 'star',
+    icon: '$vuetify.icons.buff',
     name: 'Buff'
   },
   classLevel: {
-    icon: 'school',
+    icon: '$vuetify.icons.class_level',
     name: 'Class level'
   },
   damage: {
-    icon: 'report',
+    icon: '$vuetify.icons.damage',
     name: 'Damage'
   },
   damageMultiplier: {
-    icon: 'layers',
+    icon: '$vuetify.icons.damage_multiplier',
     name: 'Damage multiplier'
   },
   effect: {
-    icon: 'show_chart',
+    icon: '$vuetify.icons.effect',
     name: 'Effect'
   },
   experience: {
-    icon: 'add',
+    icon: '$vuetify.icons.experience',
     name: 'Experience'
   },
   feature: {
@@ -56,23 +56,23 @@ const PROPERTIES = Object.freeze({
     name: 'Proficiency'
   },
   roll: {
-    icon: 'flare',
+    icon: '$vuetify.icons.roll',
     name: 'Roll'
   },
   savingThrow: {
-    icon: 'all_out',
+    icon: '$vuetify.icons.saving_throw',
     name: 'Saving throw'
   },
   skill: {
-    icon: 'check_box',
+    icon: '$vuetify.icons.skill',
     name: 'Skill'
   },
   spellList: {
-    icon: 'list',
+    icon: '$vuetify.icons.spell_list',
     name: 'Spell list'
   },
   spell: {
-    icon: 'whatshot',
+    icon: '$vuetify.icons.spell',
     name: 'Spell'
   },
   container: {
@@ -80,11 +80,11 @@ const PROPERTIES = Object.freeze({
     name: 'Container'
   },
   item: {
-    icon: 'category',
+    icon: '$vuetify.icons.item',
     name: 'Item'
   },
   toggle: {
-    icon: 'power_settings_new',
+    icon: '$vuetify.icons.toggle',
     name: 'Toggle'
   },
 });

app/imports/ui/components/ColorPicker.vue

@@ -56,7 +56,7 @@
               <v-scroll-y-transition>
                 <v-icon
                   v-if="kebabShade === shadeOption"
-                  :class="{dark: isDark(color, shade)}"
+                  :class="isDark(color, shade) ? 'dark' : 'light'"
                 >
                   check
                 </v-icon>

app/imports/ui/components/IconSearch.vue

@@ -1,79 +0,0 @@
-<template lang="html">
-	<v-autocomplete
-		v-model="model"
-		:search-input.sync="searchString"
-		:items="items"
-		:loading="!$subReady.searchIcons || isLoading"
-		item-text="name"
-		item-value="_id"
-		label="Search icons"
-		hide-no-data
-		@input="input"
-	>
-		<template
-			slot="item"
-			slot-scope="{ item, tile }"
-		>
-			<v-list-tile-avatar>
-				<svg class="avatar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path :d="item.shape"/></svg>
-			</v-list-tile-avatar>
-			<v-list-tile-content>
-				<v-list-tile-title v-text="item.name"></v-list-tile-title>
-			</v-list-tile-content>
-		</template>
-	</v-autocomplete>
-</template>
-
-<script>
-import Icons from '/imports/api/icons/Icons.js';
-
-export default {
-	data(){ return {
-		model: this.value,
-		searchString: null,
-		serverSearchString: null,
-		isLoading: false,
-	}},
-	props: {
-		value: String,
-	},
-	watch: {
-		searchString(string){
-			this.isLoading = true;
-			this.searchServer(string)
-		},
-		value(newValue){
-			this.model = newValue;
-		},
-	},
-	methods: {
-		searchServer: _.debounce(function(string){
-			this.serverSearchString = string;
-		}, 200),
-		input(e){
-			this.$emit('input', e);
-		}
-	},
-	meteor: {
-		$subscribe: {
-			searchIcons() {
-				this.isLoading = false;
-				return [this.serverSearchString];
-			},
-		},
-		items(){
-			return Icons.find({}, { sort: [['score', 'desc']] }).fetch();
-		},
-	},
-}
-</script>
-
-<style lang="css" scoped>
-	.avatar {
-		width: 100%;
-		height: 100%;
-	}
-	.theme--dark .avatar {
-		fill: white;
-	}
-</style>

app/imports/ui/components/ToolbarCard.vue

@@ -9,6 +9,7 @@
       :style="`transform: none; ${hasToolbarClickListener ? 'cursor: pointer;' : ''}`"
       :color="color"
       :dark="isDark"
+      :light="!isDark"
       @click="$emit('toolbarclick')"
     >
       <slot name="toolbar" />

app/imports/ui/components/global/IconPicker.vue

@@ -99,6 +99,17 @@ export default {
     searchString: '',
     icons: [],
 	};},
+  watch: {
+    menu(value){
+      if (value){
+        setTimeout(() => {
+          if (this.$refs.iconSearchField){
+            this.$refs.iconSearchField.$children[0].focus();
+          }
+        }, 100);
+      }
+    },
+  },
 	methods: {
     search(value, ack){
       this.searchString = value;

app/imports/ui/components/global/SvgIcon.vue

@@ -1,5 +1,6 @@
 <template lang="html">
   <i
+    ref="icon"
     aria-hidden
     role="img"
     class="v-icon"
@@ -50,6 +51,9 @@ export default {
     large: Boolean,
     xLarge: Boolean,
   },
+  data(){return {
+    inheritedSize: undefined,
+  }},
   computed: {
     isDark () {
       if (this.dark === true) {
@@ -70,6 +74,7 @@ export default {
       }
     },
     size() {
+      if (this.inheritedSize) return this.inheritedSize;
       if (this.xSmall) return SIZE_MAP['xSmall'];
       if (this.small)  return SIZE_MAP['small'];
       if (this.medium) return SIZE_MAP['medium'];
@@ -77,6 +82,9 @@ export default {
       if (this.xLarge) return SIZE_MAP['xLarge'];
       return SIZE_MAP['default'];
     },
+  },
+  mounted(){
+    this.inheritedSize = this.$refs.icon.style.fontSize;
   }
 }
 </script>

app/imports/ui/components/propertyToolbar.vue

@@ -2,6 +2,7 @@
   <v-toolbar
     :color="color || 'secondary'"
     :dark="isDark"
+    :light="!isDark"
     :flat="flat"
   >
     <property-icon

app/imports/ui/creature/CreatureFormDialog.vue

@@ -1,8 +1,15 @@
 <template lang="html">
-  <dialog-base>
+  <dialog-base :color="model.color">
-    <v-toolbar-title slot="toolbar">
+    <template slot="toolbar">
-      Creature Form Dialog
+      <v-toolbar-title>
-    </v-toolbar-title>
+        Creature Form Dialog
+      </v-toolbar-title>
+      <v-spacer />
+      <color-picker
+        :value="model.color"
+        @input="value => change({path: ['color'], value})"
+      />
+    </template>
     <div>
       <creature-form
         :model="model"
@@ -27,11 +34,13 @@ import {updateCreature} from '/imports/api/creature/Creatures.js';
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import CreatureForm from '/imports/ui/creature/CreatureForm.vue'
 import { assertEditPermission } from '/imports/api/creature/creaturePermissions.js';
+import ColorPicker from '/imports/ui/components/ColorPicker.vue';
 
 export default {
 	components: {
 		DialogBase,
 		CreatureForm,
+    ColorPicker,
 	},
 	props: {
 		_id: String,
@@ -52,8 +61,16 @@ export default {
 	},
 	methods: {
 		change({path, value, ack}){
-			updateCreature.call({_id: this._id, path, value}, (error, result) =>{
+			updateCreature.call({_id: this._id, path, value}, (error) =>{
-				ack && ack(error && error.reason || error);
+        if (error){
+          if(ack){
+            ack(error && error.reason || error)
+          } else {
+            console.error(error)
+          }
+        } else if (ack) {
+          ack();
+        }
 			});
 		},
 	}

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

@@ -0,0 +1,247 @@
+<template lang="html">
+  <v-toolbar
+    app
+    class="character-sheet-toolbar"
+    :color="toolbarColor"
+    :dark="isDark"
+    :light="!isDark"
+    tabs
+    dense
+  >
+    <v-toolbar-side-icon @click="toggleDrawer" />
+    <v-toolbar-title>
+      <v-fade-transition
+        mode="out-in"
+      >
+        <div :key="$store.state.pageTitle">
+          {{ $store.state.pageTitle }}
+        </div>
+      </v-fade-transition>
+    </v-toolbar-title>
+    <v-spacer />
+    <v-fade-transition
+      mode="out-in"
+    >
+      <div :key="$route.meta.title">
+        <v-toolbar-items v-if="creature">
+          <v-btn
+            v-if="editPermission"
+            flat
+            icon
+            @click="recompute(creature._id)"
+          >
+            <v-icon>refresh</v-icon>
+          </v-btn>
+          <v-menu
+            bottom
+            left
+            transition="slide-y-transition"
+            data-id="creature-menu"
+          >
+            <template #activator="{ on }">
+              <v-btn
+                icon
+                v-on="on"
+              >
+                <v-icon>more_vert</v-icon>
+              </v-btn>
+            </template>
+            <v-list v-if="editPermission">
+              <v-list-tile @click="deleteCharacter">
+                <v-list-tile-title>
+                  <v-icon>delete</v-icon> Delete
+                </v-list-tile-title>
+              </v-list-tile>
+              <v-list-tile @click="showCharacterForm">
+                <v-list-tile-title>
+                  <v-icon>create</v-icon> Edit details
+                </v-list-tile-title>
+              </v-list-tile>
+              <v-list-tile @click="showShareDialog">
+                <v-list-tile-title>
+                  <v-icon>share</v-icon> Sharing
+                </v-list-tile-title>
+              </v-list-tile>
+            </v-list>
+            <v-list v-else>
+              <v-list-tile @click="unshareWithMe">
+                <v-list-tile-title>
+                  <v-icon>delete</v-icon> Unshare with me
+                </v-list-tile-title>
+              </v-list-tile>
+            </v-list>
+          </v-menu>
+        </v-toolbar-items>
+      </div>
+    </v-fade-transition>
+    <v-fade-transition
+      slot="extension"
+      mode="out-in"
+    >
+      <div
+        :key="$route.meta.title"
+        style="width: 100%"
+      >
+        <v-tabs
+          v-if="creature"
+          slot="extension"
+          :value="value"
+          centered
+          grow
+          max="100px"
+          @change="e => $emit('input', e)"
+        >
+          <v-tab>
+            Stats
+          </v-tab>
+          <v-tab>
+            Features
+          </v-tab>
+          <v-tab>
+            Inventory
+          </v-tab>
+          <v-tab>
+            Spells
+          </v-tab>
+          <v-tab>
+            Persona
+          </v-tab>
+          <v-tab>
+            Tree
+          </v-tab>
+        </v-tabs>
+      </div>
+    </v-fade-transition>
+  </v-toolbar>
+</template>
+
+<script>
+import Creatures from '/imports/api/creature/Creatures.js';
+import removeCreature from '/imports/api/creature/removeCreature.js';
+import { mapMutations } from 'vuex';
+import { theme } from '/imports/ui/theme.js';
+import { recomputeCreature } from '/imports/api/creature/computation/recomputeCreature.js';
+import { assertEditPermission } from '/imports/api/creature/creaturePermissions.js';
+import { updateUserSharePermissions } from '/imports/api/sharing/sharing.js';
+import isDarkColor from '/imports/ui/utility/isDarkColor.js';
+
+export default {
+  props: {
+    value: {
+      type: Number,
+      required: true,
+    },
+  },
+  data(){return {
+    theme,
+  }},
+  computed: {
+    creatureId(){
+      return this.$route.params.id;
+    },
+    toolbarColor(){
+      if (this.creature && this.creature.color){
+        return this.creature.color;
+      } else {
+        return this.$vuetify.theme.secondary;
+      }
+    },
+    isDark(){
+      return isDarkColor(this.toolbarColor);
+    },
+  },
+  methods: {
+    ...mapMutations([
+      'toggleDrawer',
+    ]),
+		recompute(charId){
+			recomputeCreature.call({charId});
+		},
+		showCharacterForm(){
+			this.$store.commit('pushDialogStack', {
+				component: 'creature-form-dialog',
+				elementId: 'creature-menu',
+				data: {
+					_id: this.creatureId,
+				},
+			});
+		},
+		showShareDialog(){
+			this.$store.commit('pushDialogStack', {
+				component: 'share-dialog',
+				elementId: 'creature-menu',
+				data: {
+					docRef: {
+						id: this.creatureId,
+						collection: 'creatures',
+					}
+				},
+			});
+		},
+		deleteCharacter(){
+			let that = this;
+			this.$store.commit('pushDialogStack', {
+				component: 'delete-confirmation-dialog',
+				elementId: 'creature-menu',
+				data: {
+					name: this.creature.name,
+					typeName: 'Character'
+				},
+				callback(confirmation){
+					if(!confirmation) return;
+					removeCreature.call({charId: that.creatureId}, (error) => {
+						if (error) {
+							console.error(error);
+						} else {
+							that.$router.push('/characterList');
+						}
+					});
+				}
+			});
+		},
+    unshareWithMe(){
+      updateUserSharePermissions.call({
+        docRef: {
+          collection: 'creatures',
+          id: this.creatureId,
+        },
+        userId: Meteor.userId(),
+        role: 'none',
+      }, (error) => {
+        if (error) {
+          console.error(error);
+        } else {
+          this.$router.push('/characterList');
+        }
+      });
+    },
+  },
+  meteor: {
+    $subscribe: {
+      'singleCharacter'(){
+        return [this.creatureId];
+      },
+    },
+    creature(){
+      return Creatures.findOne(this.creatureId);
+    },
+    editPermission(){
+      try {
+        assertEditPermission(this.creature, Meteor.userId());
+        return true;
+      } catch (e) {
+        return false;
+      }
+    },
+  },
+}
+</script>
+
+<style lang="css">
+.character-sheet-toolbar .v-tabs__container--grow .v-tabs__div {
+  max-width: 120px !important;
+}
+.character-sheet-toolbar .v-tabs__bar {
+  background: none !important;
+}
+</style>

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

@@ -53,7 +53,6 @@
 <script>
 import Creatures from '/imports/api/creature/Creatures.js';
 import removeCreature from '/imports/api/creature/removeCreature.js';
-import isDarkColor from '/imports/ui/utility/isDarkColor.js';
 import { mapMutations } from 'vuex';
 import { theme } from '/imports/ui/theme.js';
 import { recomputeCreature } from '/imports/api/creature/computation/recomputeCreature.js';
@@ -134,7 +133,6 @@ export default {
         }
       });
     },
-		isDarkColor,
   },
   meteor: {
     $subscribe: {

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

@@ -2,7 +2,7 @@
   <div class="inventory">
     <column-layout>
       <div>
-        <toolbar-card color="">
+        <toolbar-card :color="$vuetify.theme.secondary">
           <v-spacer slot="toolbar" />
           <v-switch
             v-if="context.editPermission !== false"

app/imports/ui/creature/creatureProperties/CreaturePropertyInsertForm.vue

@@ -1,8 +1,18 @@
 <template lang="html">
-  <dialog-base :override-back-button="() => $emit('back')">
+  <dialog-base
-    <v-toolbar-title slot="toolbar">
+    :override-back-button="() => $emit('back')"
-      Add {{ propertyName }}
+    :color="model.color"
-    </v-toolbar-title>
+  >
+    <template slot="toolbar">
+      <v-toolbar-title>
+        Add {{ propertyName }}
+      </v-toolbar-title>
+      <v-spacer />
+      <color-picker
+        :value="model.color"
+        @input="value => change({path: ['color'], value})"
+      />
+    </template>
     <component
       :is="type"
       v-if="type"
@@ -32,11 +42,14 @@
 import propertySchemasIndex from '/imports/api/properties/propertySchemasIndex.js';
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import propertyFormIndex from '/imports/ui/properties/forms/shared/propertyFormIndex.js';
+import ColorPicker from '/imports/ui/components/ColorPicker.vue';
 import schemaFormMixin from '/imports/ui/properties/forms/shared/schemaFormMixin.js';
+
 export default {
 	components: {
 		...propertyFormIndex,
 		DialogBase,
+    ColorPicker,
 	},
 	mixins: [schemaFormMixin],
 	props: {

app/imports/ui/dialogStack/DialogBase.vue

@@ -10,6 +10,7 @@
       <v-toolbar
         :color="computedColor"
         :dark="isDark"
+        :light="!isDark"
         class="base-dialog-toolbar"
         :flat="!offsetTop"
       >

app/imports/ui/icons/IconAdmin.vue

@@ -40,6 +40,9 @@
       searchString: '',
       testIcon: undefined,
     }},
+    mounted(){
+      console.log(this.$vuetify);
+    },
     methods: {
       fileChanged (file) {
         importIcons(file);

app/imports/ui/icons/SvgIconByName.vue

@@ -0,0 +1,30 @@
+<template lang="html">
+  <svg-icon
+    :shape="shape"
+  />
+</template>
+
+<script>
+import SvgIcon from '/imports/ui/components/global/SvgIcon.vue'
+import SVG_ICONS from '/imports/constants/SVG_ICONS.js';
+
+export default {
+  components: {
+    SvgIcon,
+  },
+  props: {
+    name: {
+      type: String,
+      required: true,
+    }
+  },
+  computed: {
+    shape(){
+      return SVG_ICONS[this.name].shape;
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/layouts/AppLayout.vue

@@ -4,14 +4,17 @@
     :light="!darkMode"
   >
     <v-navigation-drawer
-      v-if="$route.path !== '/countdown'"
       v-model="drawer"
       app
     >
       <Sidebar />
     </v-navigation-drawer>
+    <router-view
+      v-model="tabs"
+      name="toolbar"
+    />
     <v-toolbar
-      v-if="$route.path !== '/countdown'"
+      v-if="!$route.matched[0].components.toolbar"
       app
       color="secondary"
       dark
@@ -116,6 +119,9 @@
         'toggleDrawer',
       ]),
     },
+    mounted(){
+      console.log(this.$route);
+    }
   };
 </script>
 

app/imports/ui/layouts/Sidebar.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="sidebar">
     <v-alert
-      v-if="$route.path !== '/countdown'"
       icon="priority_high"
       type="error"
       dismissible

app/imports/ui/library/LibraryAndNode.vue

@@ -14,7 +14,8 @@
       <v-toolbar
         flat
         :color="selectedNode && selectedNode.color || 'secondary'"
-        :dark="isDarkColor(selectedNode && selectedNode.color || $vuetify.theme.secondary)"
+        :dark="isToolbarDark"
+        :light="!isToolbarDark"
       >
         <v-spacer />
         <v-switch
@@ -67,6 +68,14 @@ export default {
     organize: false,
     selected: undefined,
   };},
+  computed: {
+    isToolbarDark(){
+      return isDarkColor(
+        this.selectedNode && this.selectedNode.color ||
+        this.$vuetify.theme.secondary
+      );
+    }
+  },
   watch:{
     selectedNode(val){
       this.$emit('selected', val)
@@ -101,7 +110,6 @@ export default {
       }
     },
     getPropertyName,
-    isDarkColor,
   },
   meteor: {
     $subscribe: {

app/imports/ui/library/LibraryNodeInsertForm.vue

@@ -1,8 +1,18 @@
 <template lang="html">
-  <dialog-base :override-back-button="() => $emit('back')">
+  <dialog-base
-    <v-toolbar-title slot="toolbar">
+    :override-back-button="() => $emit('back')"
-      Add {{ propertyName }}
+    :color="model.color"
-    </v-toolbar-title>
+  >
+    <template slot="toolbar">
+      <v-toolbar-title>
+        Add {{ propertyName }}
+      </v-toolbar-title>
+      <v-spacer />
+      <color-picker
+        :value="model.color"
+        @input="value => change({path: ['color'], value})"
+      />
+    </template>
     <component
       :is="type"
       v-if="type"
@@ -32,12 +42,14 @@
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import propertyFormIndex from '/imports/ui/properties/forms/shared/propertyFormIndex.js';
 import schemaFormMixin from '/imports/ui/properties/forms/shared/schemaFormMixin.js';
+import ColorPicker from '/imports/ui/components/ColorPicker.vue';
 import propertySchemasIndex from '/imports/api/properties/propertySchemasIndex.js';
 
 export default {
 	components: {
 		...propertyFormIndex,
 		DialogBase,
+    ColorPicker,
 	},
 	mixins: [schemaFormMixin],
 	props: {

app/imports/ui/properties/components/persona/NoteCard.vue

@@ -1,16 +1,25 @@
 <template lang="html">
-	<v-card :color="model.color" :data-id="model._id" hover @click="clickProperty(model._id)">
+  <v-card
-		<v-card-title class="title">
+    :color="model.color"
-			{{model.name}}
+    :data-id="model._id"
-		</v-card-title>
+    hover
-		<v-card-text>
+    :dark="model.color && isDark"
-			<property-description :value="model.description"/>
+    :light="model.color && !isDark"
-		</v-card-text>
+    @click="clickProperty(model._id)"
-	</v-card>
+  >
+    <v-card-title class="title">
+      {{ model.name }}
+    </v-card-title>
+    <v-card-text>
+      <property-description :value="model.description" />
+    </v-card-text>
+  </v-card>
 </template>
 
 <script>
 import PropertyDescription from '/imports/ui/properties/viewers/shared/PropertyDescription.vue';
+import isDarkColor from '/imports/ui/utility/isDarkColor.js';
+
 export default {
 	components: {
 		PropertyDescription,
@@ -18,6 +27,11 @@ export default {
 	props: {
 		model: Object,
 	},
+  computed: {
+    isDark(){
+      return isDarkColor(this.model.color);
+    },
+  },
 	methods: {
 		clickProperty(_id){
 			this.$store.commit('pushDialogStack', {

app/imports/ui/properties/forms/ContainerForm.vue

@@ -1,11 +1,22 @@
 <template lang="html">
   <div class="attribute-form">
-    <text-field
+    <div class="layout row justify-space-between wrap">
-      label="Name"
+      <text-field
-      :value="model.name"
+        label="Name"
-      :error-messages="errors.name"
+        :value="model.name"
-      @change="change('name', ...arguments)"
+        :error-messages="errors.name"
-    />
+        @change="change('name', ...arguments)"
+      />
+      <div>
+        <smart-switch
+          label="Carried"
+          class="mx-3"
+          :value="model.carried"
+          :error-messages="errors.carried"
+          @change="change('carried', ...arguments)"
+        />
+      </div>
+    </div>
     <div class="layout row wrap">
       <text-field
         label="Value"
@@ -15,17 +26,19 @@
         hint="The value of the item in gold pieces, using decimals for values less than 1 gp"
         class="mx-1"
         style="flex-basis: 300px;"
+        prepend-inner-icon="$vuetify.icons.two_coins"
         :value="model.value"
         :error-messages="errors.value"
         @change="change('value', ...arguments)"
       />
       <text-field
         label="Weight"
-        suffix="lbs"
+        suffix="lb"
         type="number"
         min="0"
         class="mx-1"
         style="flex-basis: 300px;"
+        prepend-inner-icon="$vuetify.icons.weight"
         :value="model.weight"
         :error-messages="errors.weight"
         @change="change('weight', ...arguments)"
@@ -41,18 +54,16 @@
       name="Advanced"
       standalone
     >
-      <smart-switch
+      <div class="layout row justify-center">
-        label="Carried"
+        <div>
-        :value="model.carried"
+          <smart-switch
-        :error-messages="errors.carried"
+            label="Contents are weightless"
-        @change="change('carried', ...arguments)"
+            :value="model.contentsWeightless"
-      />
+            :error-messages="errors.contentsWeightless"
-      <smart-switch
+            @change="change('contentsWeightless', ...arguments)"
-        label="Contents are weightless"
+          />
-        :value="model.contentsWeightless"
+        </div>
-        :error-messages="errors.contentsWeightless"
+      </div>
-        @change="change('contentsWeightless', ...arguments)"
-      />
     </form-section>
   </div>
 </template>

app/imports/ui/properties/forms/ItemForm.vue

@@ -41,17 +41,19 @@
         hint="The value of the item in gold pieces, using decimals for values less than 1 gp"
         class="mx-1"
         style="flex-basis: 300px;"
+        prepend-inner-icon="$vuetify.icons.two_coins"
         :value="model.value"
         :error-messages="errors.value"
         @change="change('value', ...arguments)"
       />
       <text-field
         label="Weight"
-        suffix="lbs"
+        suffix="lb"
         type="number"
         min="0"
         class="mx-1"
         style="flex-basis: 300px;"
+        prepend-inner-icon="$vuetify.icons.weight"
         :value="model.weight"
         :error-messages="errors.weight"
         @change="change('weight', ...arguments)"
@@ -61,6 +63,7 @@
       label="Quantity"
       type="number"
       min="0"
+      prepend-inner-icon="$vuetify.icons.abacus"
       :value="model.quantity"
       :error-messages="errors.quantity"
       @change="change('quantity', ...arguments)"

app/imports/ui/properties/viewers/ContainerViewer.vue

@@ -1,26 +1,48 @@
 <template lang="html">
   <div class="container-viewer">
-    <property-name :value="model.name" />
+    <property-tags :tags="model.tags" />
-    <div
+    <div class="layout row wrap justify-space-around">
-      v-if="!model.carried"
+      <div
-      class="caption"
+        v-if="model.value !== undefined"
-    >
+        class="mr-3 my-3"
-      Not carried
+      >
+        <v-layout
+          row
+          align-center
+        >
+          <v-icon
+            class="mr-2"
+            x-large
+          >
+            $vuetify.icons.two_coins
+          </v-icon>
+          <coin-value
+            class="title mr-2"
+            :value="model.value"
+          />
+        </v-layout>
+      </div>
+      <div
+        v-if="model.weight !== undefined"
+        class="my-3"
+      >
+        <v-layout
+          row
+          align-center
+          justify-end
+        >
+          <span class="title mr-2">
+            {{ model.weight }} lb
+          </span>
+          <v-icon
+            class="ml-2"
+            x-large
+          >
+            $vuetify.icons.weight
+          </v-icon>
+        </v-layout>
+      </div>
     </div>
-    <div
-      v-if="model.contentsWeightless"
-      class="caption"
-    >
-      Contents are weightless
-    </div>
-    <property-field
-      name="Weight"
-      :value="`${model.weight} lbs`"
-    />
-    <property-field
-      name="Value"
-      :value="`${model.value} gp`"
-    />
     <property-description
       v-if="model.description"
       :value="model.description"
@@ -29,8 +51,12 @@
 </template>
 
 <script>
+import CoinValue from '/imports/ui/components/CoinValue.vue';
 import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js'
 export default {
+  components: {
+    CoinValue,
+  },
 	mixins: [propertyViewerMixin],
 }
 </script>

app/imports/ui/properties/viewers/ItemViewer.vue

@@ -1,14 +1,9 @@
 <template lang="html">
   <div class="item-viewer">
-    <div
+    <property-tags :tags="model.tags" />
-      v-if="tagString"
-      class="tags ma-3"
-    >
-      {{ tagString }}
-    </div>
     <div
       v-if="model.quantity > 1 || model.showIncrement"
-      class="layout column justify-center align-center"
+      class="layout row justify-center align-center wrap"
     >
       <div class="display-1">
         {{ model.quantity }}
@@ -22,9 +17,7 @@
         :value="model.quantity"
         @change="changeQuantity"
       >
-        <svg-icon
+        <v-icon>$vuetify.icons.abacus</v-icon>
-          :shape="getIcon('abacus').shape"
-        />
       </increment-button>
     </div>
     <div class="layout row wrap justify-space-around">
@@ -38,11 +31,12 @@
           align-center
           class="mb-2"
         >
-          <svg-icon
+          <v-icon
-            :shape="getIcon('cash').shape"
             class="mr-2"
             x-large
-          />
+          >
+            $vuetify.icons.cash
+          </v-icon>
           <coin-value
             class="title"
             :value="totalValue"
@@ -52,11 +46,12 @@
           row
           align-center
         >
-          <svg-icon
+          <v-icon
-            :shape="getIcon('two-coins').shape"
             class="mr-2"
             x-large
-          />
+          >
+            $vuetify.icons.two_coins
+          </v-icon>
           <coin-value
             class="title mr-2"
             :value="model.value"
@@ -83,11 +78,12 @@
           <span class="title">
             {{ totalWeight }} lb
           </span>
-          <svg-icon
+          <v-icon
-            :shape="getIcon('injustice').shape"
             class="ml-2"
             x-large
-          />
+          >
+            $vuetify.icons.injustice
+          </v-icon>
         </v-layout>
         <v-layout
           row
@@ -103,11 +99,12 @@
           >
             each
           </span>
-          <svg-icon
+          <v-icon
-            :shape="getIcon('weight').shape"
             class="ml-2"
             x-large
-          />
+          >
+            $vuetify.icons.weight
+          </v-icon>
         </v-layout>
       </div>
     </div>
@@ -135,9 +132,6 @@ export default {
     context: { default: {} }
   },
   computed:{
-    tagString(){
-      return this.model.tags && this.model.tags.join(', ');
-    },
     totalValue(){
       return this.model.value * this.model.quantity;
     },

app/imports/ui/properties/viewers/shared/PropertyTags.vue

@@ -0,0 +1,30 @@
+<template lang="html">
+  <div
+    v-if="tagString"
+    class="tags ma-3 "
+  >
+    {{ tagString }}
+  </div>
+</template>
+
+<script>
+export default {
+  props:{
+    tags: {
+      type: Array,
+      default: () => [],
+    }
+  },
+  computed:{
+    tagString(){
+      return this.tags.join(', ');
+    },
+  }
+}
+</script>
+
+<style lang="css" scoped>
+.tags {
+  font-style: italic;
+}
+</style>

app/imports/ui/properties/viewers/shared/propertyViewerMixin.js

@@ -2,6 +2,7 @@ import PropertyName from '/imports/ui/properties/viewers/shared/PropertyName.vue
 import PropertyVariableName from '/imports/ui/properties/viewers/shared/PropertyVariableName.vue';
 import PropertyField from '/imports/ui/properties/viewers/shared/PropertyField.vue';
 import PropertyDescription from '/imports/ui/properties/viewers/shared/PropertyDescription.vue';
+import PropertyTags from '/imports/ui/properties/viewers/shared/PropertyTags.vue';
 
 const propertyViewerMixin = {
   components: {
@@ -9,6 +10,7 @@ const propertyViewerMixin = {
     PropertyVariableName,
     PropertyField,
     PropertyDescription,
+    PropertyTags,
   },
   props: {
 		model: {

app/imports/ui/router.js

@@ -1,5 +1,4 @@
 import { RouterFactory, nativeScrollBehavior } from 'meteor/akryum:vue-router2';
-import LAUNCH_DATE from '/imports/constants/LAUNCH_DATE.js';
 import { acceptInviteToken } from '/imports/api/users/Invites.js';
 
 // Components
@@ -10,8 +9,7 @@ import Library from '/imports/ui/pages/Library.vue';
 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 CharacterSheetToolbarItems from '/imports/ui/creature/character/CharacterSheetToolbarItems.vue';
+import CharacterSheetToolbar from '/imports/ui/creature/character/CharacterSheetToolbar.vue';
-import CharacterSheetToolbarExtension from '/imports/ui/creature/character/CharacterSheetToolbarExtension.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';
@@ -22,7 +20,6 @@ import InviteSuccess from '/imports/ui/pages/InviteSuccess.vue' ;
 import InviteError from '/imports/ui/pages/InviteError.vue' ;
 import NotImplemented from '/imports/ui/pages/NotImplemented.vue';
 import PatreonLevelTooLow from '/imports/ui/pages/PatreonLevelTooLow.vue';
-import LaunchCountdown from '/imports/ui/pages/LaunchCountdown.vue';
 
 let userSubscription = Meteor.subscribe('user');
 
@@ -91,17 +88,7 @@ function claimInvite(to, from, next){
 }
 
 RouterFactory.configure(factory => {
-  factory.addRoutes([
+  factory.addRoutes([{
-    {
-      path: '/countdown',
-      name: 'Countdown',
-      components: {
-        default: LaunchCountdown,
-      },
-      meta: {
-        title: 'Countdown to Launch',
-      },
-    },{
       path: '/',
       name: 'home',
       components: {
@@ -142,8 +129,7 @@ RouterFactory.configure(factory => {
       path: '/character/:id/:urlName',
       components: {
         default: CharacterSheetPage,
-        toolbarExtension: CharacterSheetToolbarExtension,
+        toolbar: CharacterSheetToolbar,
-        toolbarItems: CharacterSheetToolbarItems,
       },
       meta: {
         title: 'Character Sheet',
@@ -152,8 +138,7 @@ RouterFactory.configure(factory => {
       path: '/character/:id',
       components: {
         default: CharacterSheetPage,
-        toolbarExtension: CharacterSheetToolbarExtension,
+        toolbar: CharacterSheetToolbar,
-        toolbarItems: CharacterSheetToolbarItems,
       },
       meta: {
         title: 'Character Sheet',
@@ -263,13 +248,10 @@ const router = routerFactory.create();
 router.beforeEach((to, from, next) => {
   let user = Meteor.user();
   if (
-    to.path === '/countdown' ||
     to.path === '/sign-in' ||
     (user && user.roles && user.roles.includes('admin'))
   ){
     next();
-  } else if (new Date() < LAUNCH_DATE){
-    next('/countdown');
   } else {
     next();
   }

app/imports/ui/theme.js

@@ -10,7 +10,7 @@ const theme = {
 
 const darkTheme = {
   primary: '#f44336',
-  secondary: '#757575',
+  secondary: '#212121',
   accent: '#f44336',
   error: '#FF6D00',
   warning: '#FFB300',

app/imports/ui/utility/isDarkColor.js

@@ -12,7 +12,7 @@ function hexToRgb(hex) {
         g: parseInt(result[2], 16),
         b: parseInt(result[3], 16)
     } : null;
-};
+}
 
 export default function isDarkColor(hexColor){
   let rgb = hexToRgb(hexColor);
@@ -22,4 +22,4 @@ export default function isDarkColor(hexColor){
     / 1000
   );
   return brightness <= 125;
-};
+}

app/imports/ui/vueSetup.js

@@ -1,20 +1,35 @@
-import Vue from "vue";
+import Vue from 'vue';
-import Vuex from "vuex";
+import Vuetify from 'vuetify';
-import Vuetify from "vuetify";
+import store from '/imports/ui/vuexStore.js';
-import store from "/imports/ui/vuexStore.js";
 import VueMeteorTracker from 'vue-meteor-tracker';
 import AppLayout from '/imports/ui/layouts/AppLayout.vue';
 import ReactiveProvide from 'vue-reactive-provide';
-import router from "/imports/ui/router.js";
+import router from '/imports/ui/router.js';
 import { theme } from '/imports/ui/theme.js';
-import "vuetify/dist/vuetify.min.css";
+import 'vuetify/dist/vuetify.min.css';
 import '/imports/ui/components/global/globalIndex.js';
+import SvgIconByName from '/imports/ui/icons/SvgIconByName.vue';
+import SVG_ICONS from '/imports/constants/SVG_ICONS.js';
+
+let icons = {};
+
+for (const name in SVG_ICONS) {
+  let icon = SVG_ICONS[name];
+  icons[icon.name] = {
+    component: SvgIconByName,
+    props: {
+      name: name,
+    }
+  }
+}
+console.log(icons);
 
 Vue.use(VueMeteorTracker);
 Vue.config.meteor.freeze = true
 Vue.use(Vuetify, {
   theme,
-  iconfont: "md",
+  iconfont: 'md',
+  icons,
 });
 Vue.use(ReactiveProvide, {
   name: 'reactiveProvide', // default value
@@ -27,5 +42,5 @@ Meteor.startup(() => {
     router,
     store,
     ...AppLayout,
-  }).$mount("#app");
+  }).$mount('#app');
 });