Improved actions UI, Actions (including spells) can now have icons

app/imports/ui/properties/components/actions/ActionCard.vue

@@ -11,7 +11,7 @@
           icon
           outline
           style="margin-left: -4px; font-size: 18px;"
-          color="primary"
+          :color="model.color || 'primary'"
           :loading="doActionLoading"
           :disabled="model.insufficientResources || !context.editPermission"
           @click.stop="doAction"
@@ -19,9 +19,10 @@
           <template v-if="attack && !rollBonusTooLong">
             {{ rollBonus }}
           </template>
-          <v-icon v-else>
-            {{ actionTypeIcon }}
-          </v-icon>
+          <property-icon
+            v-else
+            :model="model"
+          />
         </v-btn>
       </div>
       <div
@@ -95,6 +96,7 @@ import TreeNodeView from '/imports/ui/properties/treeNodeViews/TreeNodeView.vue'
 import AttributeConsumedView from '/imports/ui/properties/components/actions/AttributeConsumedView.vue';
 import ItemConsumedView from '/imports/ui/properties/components/actions/ItemConsumedView.vue';
 import PropertyDescription from '/imports/ui/properties/viewers/shared/PropertyDescription.vue';
+import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
 
 export default {
   components: {
@@ -102,6 +104,7 @@ export default {
     AttributeConsumedView,
     ItemConsumedView,
     PropertyDescription,
+    PropertyIcon,
   },
   inject: {
     context: {

app/imports/ui/properties/components/actions/AttributeConsumedView.vue

@@ -12,7 +12,7 @@
     <div
       class="text-no-wrap text-truncate"
     >
-      {{ model.statName }}
+      {{ model.statName || model.variableName }}
     </div>
   </div>
 </template>

app/imports/ui/properties/components/actions/ItemConsumedView.vue

@@ -6,8 +6,10 @@
     }"
   >
     <v-menu
+      v-if="context.creature"
       transition="slide-y-transition"
       lazy
+      :disabled="!context.editPermission"
     >
       <template #activator="{ on }">
         <div
@@ -15,7 +17,7 @@
           style="height: 100%;"
           :class="{
             'error--text': insufficient,
-            'clickable': context.editPermission,
+            'clickable': context.creature && context.editPermission,
             'left-pad': leftPad,
           }"
           v-on="on"
@@ -60,6 +62,23 @@
         :item-consumed="model"
       />
     </v-menu>
+    <div
+      v-else
+      class="layout row align-center justify-start"
+      :class="{'left-pad': leftPad}"
+    >
+      <div
+        class="mr-2"
+        style="width: 24px; text-align: center;"
+      >
+        {{ model.quantity }}
+      </div>
+      <div
+        class="text-no-wrap text-truncate"
+      >
+        [{{ model.tag }}]
+      </div>
+    </div>
   </div>
 </template>
 

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

@@ -1,5 +1,13 @@
 <template lang="html">
   <div :class="attackForm ? 'attack-form' : 'action-form'">
+    <div class="layout column align-center">
+      <icon-picker
+        label="Icon"
+        :value="model.icon"
+        :error-messages="errors.icon"
+        @change="change('icon', ...arguments)"
+      />
+    </div>
     <text-field
       ref="focusFirst"
       label="Name"

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

@@ -15,11 +15,12 @@
     </div>
     <div class="layout row align-center justify-space-around">
       <v-btn
+        v-if="context.creature"
         flat
         outline
         style="font-size: 18px;"
         class="ma-2"
-        color="primary"
+        :color="model.color || 'primary'"
         :icon="!rollBonusTooLong"
         :loading="doActionLoading"
         :disabled="model.insufficientResources || !context.editPermission"
@@ -28,16 +29,35 @@
         <template v-if="attack">
           {{ rollBonus }}
         </template>
-        <v-icon v-else>
-          {{ actionTypeIcon }}
-        </v-icon>
+        <property-icon
+          v-else
+          :model="model"
+        />
       </v-btn>
+      <div
+        v-else-if="attack"
+        style="font-size: 18px;"
+        class="ma-2"
+      >
+        <code>{{ model.rollBonus }}</code>
+        <span
+          class="mx-1"
+          style="font-size: 14px"
+        >to hit</span>
+      </div>
       <div v-if="model.uses">
         <span
+          v-if="context.creature"
           class="uses mx-2"
         >
           {{ usesLeft }}/{{ model.usesResult }} uses
         </span>
+        <span v-else>
+          <code>{{ model.uses }}</code>
+          <span class="mx-1">
+            uses
+          </span>
+        </span>
         <span
           v-if="reset"
           class="mx-2"
@@ -55,6 +75,13 @@
         </v-btn>
       </div>
     </div>
+    <v-subheader
+      v-if="model.resources.attributesConsumed.length ||
+        model.resources.itemsConsumed.length"
+      style="height: 32px"
+    >
+      Resources
+    </v-subheader>
     <attribute-consumed-view
       v-for="attributeConsumed in model.resources.attributesConsumed"
       :key="attributeConsumed._id"
@@ -91,12 +118,14 @@ import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
 import doAction from '/imports/api/creature/actions/doAction.js';
 import AttributeConsumedView from '/imports/ui/properties/components/actions/AttributeConsumedView.vue';
 import ItemConsumedView from '/imports/ui/properties/components/actions/ItemConsumedView.vue';
+import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
 import { updateProperty } from '/imports/api/creature/CreatureProperties.js';
 
 export default {
   components: {
     AttributeConsumedView,
     ItemConsumedView,
+    PropertyIcon,
   },
   mixins: [propertyViewerMixin],
   props: {