Dark mode now with 20% more dark

Character toolbar now correctly uses dark and light text where appropriate
Character sheet toolbars now match the color of the character
2020-05-31 22:25:04 +02:00 · 2020-05-31 22:22:42 +02:00 · 2020-05-31 22:16:38 +02:00 · 2020-05-31 21:03:45 +02:00 · 2020-05-31 19:18:49 +02:00 · 2020-05-31 19:00:32 +02:00
34 changed files with 683 additions and 238 deletions
--- a/app/imports/api/creature/Creatures.js
+++ b/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, {
-			$set: {[path.join('.')]: value},
-		});
+    if (value === undefined || value === null){
+      Creatures.update(_id, {
+        $unset: {[path.join('.')]: 1},
+      });
+    } else {
+      Creatures.update(_id, {
+        $set: {[path.join('.')]: value},
+      });
+    }
  },
 });

--- a/app/imports/api/creature/computation/recomputeCreature.js
+++ b/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);
--- a/app/imports/api/properties/Containers.js
+++ b/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 };
--- a/app/imports/constants/PROPERTIES.js
+++ b/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'
  },
 });
--- a/app/imports/constants/SVG_ICONS.js
+++ b/app/imports/constants/SVG_ICONS.js
--- a/app/imports/ui/components/ColorPicker.vue
+++ b/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>
--- a/app/imports/ui/components/IconSearch.vue
+++ b/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>
--- a/app/imports/ui/components/ToolbarCard.vue
+++ b/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" />
--- a/app/imports/ui/components/global/IconPicker.vue
+++ b/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;
--- a/app/imports/ui/components/global/SvgIcon.vue
+++ b/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>
--- a/app/imports/ui/components/propertyToolbar.vue
+++ b/app/imports/ui/components/propertyToolbar.vue
@@ -2,6 +2,7 @@
  <v-toolbar
    :color="color || 'secondary'"
    :dark="isDark"
+    :light="!isDark"
    :flat="flat"
  >
    <property-icon
--- a/app/imports/ui/creature/CreatureFormDialog.vue
+++ b/app/imports/ui/creature/CreatureFormDialog.vue
@@ -1,8 +1,15 @@
 <template lang="html">
-  <dialog-base>
-    <v-toolbar-title slot="toolbar">
-      Creature Form Dialog
-    </v-toolbar-title>
+  <dialog-base :color="model.color">
+    <template slot="toolbar">
+      <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) =>{
-				ack && ack(error && error.reason || error);
+			updateCreature.call({_id: this._id, path, value}, (error) =>{
+        if (error){
+          if(ack){
+            ack(error && error.reason || error)
+          } else {
+            console.error(error)
+          }
+        } else if (ack) {
+          ack();
+        }
 			});
 		},
 	}
--- a/app/imports/ui/creature/character/CharacterSheetToolbar.vue
+++ b/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>
--- a/app/imports/ui/creature/character/CharacterSheetToolbarItems.vue
+++ b/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: {
--- a/app/imports/ui/creature/character/characterSheetTabs/InventoryTab.vue
+++ b/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"
--- a/app/imports/ui/creature/creatureProperties/CreaturePropertyInsertForm.vue
+++ b/app/imports/ui/creature/creatureProperties/CreaturePropertyInsertForm.vue
@@ -1,8 +1,18 @@
 <template lang="html">
-  <dialog-base :override-back-button="() => $emit('back')">
-    <v-toolbar-title slot="toolbar">
-      Add {{ propertyName }}
-    </v-toolbar-title>
+  <dialog-base
+    :override-back-button="() => $emit('back')"
+    :color="model.color"
+  >
+    <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: {
--- a/app/imports/ui/dialogStack/DialogBase.vue
+++ b/app/imports/ui/dialogStack/DialogBase.vue
@@ -10,6 +10,7 @@
      <v-toolbar
        :color="computedColor"
        :dark="isDark"
+        :light="!isDark"
        class="base-dialog-toolbar"
        :flat="!offsetTop"
      >
--- a/app/imports/ui/icons/IconAdmin.vue
+++ b/app/imports/ui/icons/IconAdmin.vue
@@ -40,6 +40,9 @@
      searchString: '',
      testIcon: undefined,
    }},
+    mounted(){
+      console.log(this.$vuetify);
+    },
    methods: {
      fileChanged (file) {
        importIcons(file);
--- a/app/imports/ui/icons/SvgIconByName.vue
+++ b/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>
--- a/app/imports/ui/layouts/AppLayout.vue
+++ b/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>

--- a/app/imports/ui/layouts/Sidebar.vue
+++ b/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
--- a/app/imports/ui/library/LibraryAndNode.vue
+++ b/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: {
--- a/app/imports/ui/library/LibraryNodeInsertForm.vue
+++ b/app/imports/ui/library/LibraryNodeInsertForm.vue
@@ -1,8 +1,18 @@
 <template lang="html">
-  <dialog-base :override-back-button="() => $emit('back')">
-    <v-toolbar-title slot="toolbar">
-      Add {{ propertyName }}
-    </v-toolbar-title>
+  <dialog-base
+    :override-back-button="() => $emit('back')"
+    :color="model.color"
+  >
+    <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: {
--- a/app/imports/ui/properties/components/persona/NoteCard.vue
+++ b/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-title class="title">
-			{{model.name}}
-		</v-card-title>
-		<v-card-text>
-			<property-description :value="model.description"/>
-		</v-card-text>
-	</v-card>
+  <v-card
+    :color="model.color"
+    :data-id="model._id"
+    hover
+    :dark="model.color && isDark"
+    :light="model.color && !isDark"
+    @click="clickProperty(model._id)"
+  >
+    <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', {
--- a/app/imports/ui/properties/forms/ContainerForm.vue
+++ b/app/imports/ui/properties/forms/ContainerForm.vue
@@ -1,11 +1,22 @@
 <template lang="html">
  <div class="attribute-form">
-    <text-field
-      label="Name"
-      :value="model.name"
-      :error-messages="errors.name"
-      @change="change('name', ...arguments)"
-    />
+    <div class="layout row justify-space-between wrap">
+      <text-field
+        label="Name"
+        :value="model.name"
+        :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
-        label="Carried"
-        :value="model.carried"
-        :error-messages="errors.carried"
-        @change="change('carried', ...arguments)"
-      />
-      <smart-switch
-        label="Contents are weightless"
-        :value="model.contentsWeightless"
-        :error-messages="errors.contentsWeightless"
-        @change="change('contentsWeightless', ...arguments)"
-      />
+      <div class="layout row justify-center">
+        <div>
+          <smart-switch
+            label="Contents are weightless"
+            :value="model.contentsWeightless"
+            :error-messages="errors.contentsWeightless"
+            @change="change('contentsWeightless', ...arguments)"
+          />
+        </div>
+      </div>
    </form-section>
  </div>
 </template>
--- a/app/imports/ui/properties/forms/ItemForm.vue
+++ b/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)"
--- a/app/imports/ui/properties/viewers/ContainerViewer.vue
+++ b/app/imports/ui/properties/viewers/ContainerViewer.vue
@@ -1,26 +1,48 @@
 <template lang="html">
  <div class="container-viewer">
-    <property-name :value="model.name" />
-    <div
-      v-if="!model.carried"
-      class="caption"
-    >
-      Not carried
+    <property-tags :tags="model.tags" />
+    <div class="layout row wrap justify-space-around">
+      <div
+        v-if="model.value !== undefined"
+        class="mr-3 my-3"
+      >
+        <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>
--- a/app/imports/ui/properties/viewers/ItemViewer.vue
+++ b/app/imports/ui/properties/viewers/ItemViewer.vue
@@ -1,14 +1,9 @@
 <template lang="html">
  <div class="item-viewer">
-    <div
-      v-if="tagString"
-      class="tags ma-3"
-    >
-      {{ tagString }}
-    </div>
+    <property-tags :tags="model.tags" />
    <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
-          :shape="getIcon('abacus').shape"
-        />
+        <v-icon>$vuetify.icons.abacus</v-icon>
      </increment-button>
    </div>
    <div class="layout row wrap justify-space-around">
@@ -38,11 +31,12 @@
          align-center
          class="mb-2"
        >
-          <svg-icon
-            :shape="getIcon('cash').shape"
+          <v-icon
            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
-            :shape="getIcon('two-coins').shape"
+          <v-icon
            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
-            :shape="getIcon('injustice').shape"
+          <v-icon
            class="ml-2"
            x-large
-          />
+          >
+            $vuetify.icons.injustice
+          </v-icon>
        </v-layout>
        <v-layout
          row
@@ -103,11 +99,12 @@
          >
            each
          </span>
-          <svg-icon
-            :shape="getIcon('weight').shape"
+          <v-icon
            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;
    },
--- a/app/imports/ui/properties/viewers/shared/PropertyTags.vue
+++ b/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>
--- a/app/imports/ui/properties/viewers/shared/propertyViewerMixin.js
+++ b/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: {
--- a/app/imports/ui/router.js
+++ b/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 CharacterSheetToolbarExtension from '/imports/ui/creature/character/CharacterSheetToolbarExtension.vue';
+import CharacterSheetToolbar from '/imports/ui/creature/character/CharacterSheetToolbar.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([
-    {
-      path: '/countdown',
-      name: 'Countdown',
-      components: {
-        default: LaunchCountdown,
-      },
-      meta: {
-        title: 'Countdown to Launch',
-      },
-    },{
+  factory.addRoutes([{
      path: '/',
      name: 'home',
      components: {
@@ -142,8 +129,7 @@ RouterFactory.configure(factory => {
      path: '/character/:id/:urlName',
      components: {
        default: CharacterSheetPage,
-        toolbarExtension: CharacterSheetToolbarExtension,
-        toolbarItems: CharacterSheetToolbarItems,
+        toolbar: CharacterSheetToolbar,
      },
      meta: {
        title: 'Character Sheet',
@@ -152,8 +138,7 @@ RouterFactory.configure(factory => {
      path: '/character/:id',
      components: {
        default: CharacterSheetPage,
-        toolbarExtension: CharacterSheetToolbarExtension,
-        toolbarItems: CharacterSheetToolbarItems,
+        toolbar: CharacterSheetToolbar,
      },
      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();
  }
--- a/app/imports/ui/theme.js
+++ b/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',
--- a/app/imports/ui/utility/isDarkColor.js
+++ b/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;
-};
+}
--- a/app/imports/ui/vueSetup.js
+++ b/app/imports/ui/vueSetup.js
@@ -1,20 +1,35 @@
-import Vue from "vue";
-import Vuex from "vuex";
-import Vuetify from "vuetify";
-import store from "/imports/ui/vuexStore.js";
+import Vue from 'vue';
+import Vuetify from 'vuetify';
+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');
 });
Author	SHA1	Message	Date
Stefan Zermatten	21b823f85c	Dark mode now with 20% more dark	2020-05-31 22:25:04 +02:00
Stefan Zermatten	4631579181	Character toolbar now correctly uses dark and light text where appropriate	2020-05-31 22:22:42 +02:00
Stefan Zermatten	edf3920e84	Character sheet toolbars now match the color of the character	2020-05-31 22:16:38 +02:00
Stefan Zermatten	fb91fd12df	Set up custom icons for most properties	2020-05-31 21:03:45 +02:00
Stefan Zermatten	19f4735412	Icon search field now focuses when the menu is opened	2020-05-31 19:18:49 +02:00
Stefan Zermatten	fb2f1efa72	Property insert forms now have color selectors	2020-05-31 19:00:32 +02:00
Stefan Zermatten	f7ee09470e	Improved container and item forms and viewers	2020-05-31 18:50:00 +02:00
Stefan Zermatten	a5c42fea19	Made custom svg icons work anywhere a regular icon would work	2020-05-31 18:49:46 +02:00
Stefan Zermatten	8f81614294	Weight and value are no longer required on containers	2020-05-31 15:59:37 +02:00
Stefan Zermatten	c56cebc652	Fixed dark/light font color swapping not working in dark mode	2020-05-31 15:58:21 +02:00
Stefan Zermatten	d24fb5661d	re-enabled computation on client side for optimistic UI	2020-05-30 23:56:55 +02:00