Use embedded property dialog in tree tab. Colors for creature properties

app/imports/api/creature/CreatureProperties.js

@@ -74,6 +74,7 @@ const insertProperty = new ValidatedMethod({
   name: 'CreatureProperties.methods.insert',
 	validate: null,
   run({creatureProperty}) {
+    delete creatureProperty._id;
     assertPropertyEditPermission(creatureProperty, this.userId);
 		let _id = CreatureProperties.insert(creatureProperty);
 		let property = CreatureProperties.findOne(_id);
@@ -81,6 +82,23 @@ const insertProperty = new ValidatedMethod({
   },
 });
 
+const duplicateProperty = new ValidatedMethod({
+  name: 'CreatureProperties.methods.duplicate',
+  validate: new SimpleSchema({
+    _id: {
+      type: String,
+      regEx: SimpleSchema.RegEx.Id,
+    }
+  }).validator(),
+  run({_id}) {
+    let creatureProperty = CreatureProperties.findOne(_id);
+    assertPropertyEditPermission(creatureProperty, this.userId);
+    delete creatureProperty._id;
+		CreatureProperties.insert(creatureProperty);
+    recomputeCreatures(creatureProperty);
+  },
+});
+
 const insertPropertyFromLibraryNode = new ValidatedMethod({
 	name: 'CreatureProperties.methods.insertPropertyFromLibraryNode',
 	validate: new SimpleSchema({
@@ -290,6 +308,7 @@ export default CreatureProperties;
 export {
 	CreaturePropertySchema,
 	insertProperty,
+  duplicateProperty,
 	insertPropertyFromLibraryNode,
 	updateProperty,
 	damageProperty,

app/imports/ui/components/propertyToolbar.vue

@@ -26,6 +26,11 @@
           @input="colorChanged"
         />
         <v-menu
+          v-if="$listeners && (
+            $listeners.move ||
+            $listeners.duplicate ||
+            $listeners.remove
+          )"
           bottom
           left
           transition="slide-y-transition"

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

@@ -48,51 +48,11 @@
           />
         </template>
         <template slot="detail">
-          <div
+          <creature-property-dialog
-            class="flex layout column"
+            embedded
-            style="background-color: inherit; overflow: hidden;"
+            :_id="selected"
-            data-id="selected-node-card"
+            @removed="selected = undefined"
-          >
+          />
-            <v-toolbar
-              dense
-              flat
-              extended
-            >
-              <v-fade-transition mode="out-in">
-                <div
-                  :key="selectedProperty && selectedProperty._id"
-                  class="title"
-                >
-                  <property-icon
-                    :key="selectedProperty && selectedProperty._id"
-                    :type="selectedProperty && selectedProperty.type"
-                    class="mr-2"
-                  />
-                  {{ getPropertyName(selectedProperty && selectedProperty.type) }}
-                </div>
-              </v-fade-transition>
-              <v-spacer />
-              <v-btn
-                v-if="selectedProperty"
-                flat
-                icon
-                @click="editCreatureProperty"
-              >
-                <v-icon>create</v-icon>
-              </v-btn>
-            </v-toolbar>
-            <v-card-text
-              class="flex"
-              style="overflow-y: auto"
-            >
-              <v-fade-transition mode="out-in">
-                <property-viewer
-                  :key="selectedProperty && selectedProperty._id"
-                  :model="selectedProperty"
-                />
-              </v-fade-transition>
-            </v-card-text>
-          </div>
         </template>
       </tree-detail-layout>
     </v-card>
@@ -132,8 +92,7 @@
 <script>
   import TreeDetailLayout from '/imports/ui/components/TreeDetailLayout.vue';
   import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue';
-  import PropertyViewer from '/imports/ui/properties/shared/PropertyViewer.vue';
+  import CreaturePropertyDialog from '/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue';
-  import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
   import LabeledFab from '/imports/ui/components/LabeledFab.vue';
 
   import CreatureProperties, {
@@ -147,8 +106,7 @@
     components: {
       TreeDetailLayout,
       CreaturePropertiesTree,
-      PropertyViewer,
+      CreaturePropertyDialog,
-      PropertyIcon,
       LabeledFab,
     },
     inject: {

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

@@ -1,79 +1,40 @@
 <template lang="html">
   <dialog-base>
-    <template slot="toolbar">
+    <template #replace-toolbar="{flat}">
-      <property-icon
+      <property-toolbar
-        :type="model.type"
+        :model="model"
-        class="mr-2"
+        :editing="editing"
+        :flat="flat"
+        @duplicate="duplicate"
+        @remove="remove"
+        @toggle-editing="editing = !editing"
+        @color-changed="value => change({path: ['color'], value})"
       />
-      <v-toolbar-title>
-        {{ model.name || getPropertyName(model.type) }}
-      </v-toolbar-title>
-      <v-spacer />
-      <v-menu
-        v-if="editing"
-        bottom
-        left
-        transition="slide-y-transition"
-      >
-        <template #activator="{ on }">
-          <v-btn
-            icon
-            v-on="on"
-          >
-            <v-icon>more_vert</v-icon>
-          </v-btn>
-        </template>
-        <v-list>
-          <v-list-tile @click="remove">
-            <v-list-tile-title>
-              Delete <v-icon>delete</v-icon>
-            </v-list-tile-title>
-          </v-list-tile>
-        </v-list>
-      </v-menu>
-      <v-btn
-        icon
-        @click="editing = !editing"
-      >
-        <v-slide-y-transition
-          leave-absolute
-          mode="out-in"
-        >
-          <v-icon
-            v-if="editing"
-            key="doneIcon"
-          >
-            done
-          </v-icon>
-          <v-icon
-            v-else
-            key="createIcon"
-          >
-            create
-          </v-icon>
-        </v-slide-y-transition>
-      </v-btn>
     </template>
     <template v-if="model">
-      <component
+      <v-fade-transition
-        :is="model.type + 'Form'"
+        mode="out-in"
-        v-if="editing"
+      >
-        class="creature-property-form"
+        <component
-        :model="model"
+          :is="model.type + 'Form'"
-        @change="change"
+          v-if="editing"
-        @push="push"
+          class="creature-property-form"
-        @pull="pull"
+          :model="model"
-      />
+          @change="change"
-      <component
+          @push="push"
-        :is="model.type + 'Viewer'"
+          @pull="pull"
-        v-else-if="!editing && $options.components[model.type + 'Viewer']"
+        />
-        class="creature-property-viewer"
+        <component
-        :model="model"
+          :is="model.type + 'Viewer'"
-      />
+          v-else-if="!editing && $options.components[model.type + 'Viewer']"
-      <p v-else>
+          class="creature-property-viewer"
-        This property can't be viewed yet.
+          :model="model"
-      </p>
+        />
-      <template v-if="!editing">
+        <p v-else>
+          This property can't be viewed yet.
+        </p>
+      </v-fade-transition>
+      <template v-if="!editing && !embedded">
         <v-divider />
         <creature-properties-tree
           v-if="!editing"
@@ -83,6 +44,7 @@
       </template>
     </template>
     <div
+      v-if="!embedded"
       slot="actions"
       class="layout row justify-end"
     >
@@ -100,11 +62,13 @@
 import CreatureProperties, {
 	updateProperty,
 	damageProperty,
+  duplicateProperty,
 	pushToProperty,
 	pullFromProperty,
 	softRemoveProperty,
 } from '/imports/api/creature/CreatureProperties.js';
 import Creatures from '/imports/api/creature/Creatures.js';
+import PropertyToolbar from '/imports/ui/components/propertyToolbar.vue';
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import { getPropertyName } from '/imports/constants/PROPERTIES.js';
 import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
@@ -130,10 +94,12 @@ export default {
 		...viewerIndex,
 		PropertyIcon,
 		DialogBase,
+    PropertyToolbar,
 		CreaturePropertiesTree,
 	},
 	props: {
 		_id: String,
+    embedded: Boolean, // This dialog is embedded in a page
 		startInEditTab: Boolean,
 	},
 	data(){ return {
@@ -169,8 +135,26 @@ export default {
   },
 	methods: {
 		getPropertyName,
+    duplicate(){
+      duplicateProperty.call({_id: this._id}, (error) => {
+        if (error) {
+          console.error(error);
+        }
+        if (this.embedded){
+          this.$emit('duplicated');
+        } else {
+          this.$store.dispatch('popDialogStack');
+        }
+      });
+    },
 		change({path, value, ack}){
 			updateProperty.call({_id: this._id, path, value}, (error) =>{
+        if (error) console.warn(error);
+				ack && ack(error && error.reason || error);
+			});
+		},
+    damage({operation, value, ack}){
+			damageProperty.call({_id: this._id, operation, value}, (error) =>{
         if (error) console.warn(error);
 				ack && ack(error && error.reason || error);
 			});