Form overhaul: Action form

app/imports/client/ui/components/global/TextField.vue

@@ -16,6 +16,9 @@
     <template #append>
       <slot name="value" />
     </template>
+    <template #prepend>
+      <slot name="prepend" />
+    </template>
   </v-text-field>
 </template>
 

app/imports/client/ui/properties/PropertyForm.vue

@@ -94,7 +94,7 @@
             <smart-combobox
               label="Library Tags"
               multiple
-              chips
+              small-chips
               deletable-chips
               hint="Used to let slots find this property in a library"
               :value="model.tags"
@@ -105,7 +105,7 @@
       </form-section>
     </component>
     <v-divider
-      class="mb-4"
+      class="mt-10 mb-8"
     />
     <v-row>
       <v-col
@@ -114,7 +114,7 @@
         <smart-combobox
           label="Tags"
           multiple
-          chips
+          small-chips
           deletable-chips
           hint="Tags let other properties target this property with interactions"
           :value="model.tags"
@@ -134,7 +134,7 @@
         <outlined-input
           name="Child properties"
           style="width: 100%"
-          class="pa-2"
+          class="pa-2 no-hover"
         >
           <creature-properties-tree
             style="width: 100%;"
@@ -255,4 +255,4 @@ export default {
     },
   },
 }
-</script>
+</script>

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

@@ -1,33 +1,44 @@
 <template lang="html">
   <div class="action-form">
-    <v-row
-      justify="center"
-      class="mb-3"
-    >
-      <v-col cols="12">
-        <icon-color-menu
-          :model="model"
-          :errors="errors"
-          @change="e => $emit('change', e)"
-        />
-      </v-col>
-    </v-row>
     <v-row dense>
       <v-col
         cols="12"
-        md="6"
+        md="8"
       >
-        <text-field
+        <v-slide-x-transition mode="out-in">
-          ref="focusFirst"
+          <v-switch
-          label="Name"
+            v-if="!isAttack"
-          :value="model.name"
+            class="ml-4"
-          :error-messages="errors.name"
+            label="Attack roll"
-          @change="change('name', ...arguments)"
+            :value="attackSwitch"
-        />
+            @change="e => attackSwitch = e"
+          />
+          <computed-field
+            v-else
+            label="To Hit"
+            prefix="1d20 + "
+            hint="The bonus to attack if this action has an attack roll"
+            :model="model.attackRoll"
+            :error-messages="errors.attackRoll"
+            @change="({path, value, ack}) =>
+              $emit('change', {path: ['attackRoll', ...path], value, ack})"
+          >
+            <template #prepend>
+              <v-btn
+                :disabled="!!(model.attackRoll && model.attackRoll.calculation)"
+                icon
+                style="margin-top: -12px;"
+                @click="attackSwitch = false"
+              >
+                <v-icon>mdi-close</v-icon>
+              </v-btn>
+            </template>
+          </computed-field>
+        </v-slide-x-transition>
       </v-col>
       <v-col
         cols="12"
-        md="6"
+        md="4"
       >
         <smart-select
           label="Action type"
@@ -52,24 +63,15 @@
       />
     </v-slide-x-transition>
 
-    <v-slide-x-transition mode="out-in">
+    <smart-select
-      <v-switch
+      label="Target"
-        v-if="!isAttack"
+      style="flex-basis: 300px;"
-        label="Attack roll"
+      :items="targetOptions"
-        :value="attackSwitch"
+      :value="model.target"
-        @change="e => attackSwitch = e"
+      :error-messages="errors.target"
-      />
+      :menu-props="{auto: true, lazy: true}"
-      <computed-field
+      @change="change('target', ...arguments)"
-        v-else
+    />
-        label="To Hit"
-        prefix="1d20 + "
-        hint="The bonus to attack if this action has an attack roll"
-        :model="model.attackRoll"
-        :error-messages="errors.attackRoll"
-        @change="({path, value, ack}) =>
-          $emit('change', {path: ['attackRoll', ...path], value, ack})"
-      />
-    </v-slide-x-transition>
 
     <inline-computation-field
       label="Summary"
@@ -90,12 +92,6 @@
     />
 
     <form-sections>
-      <form-section
-        v-if="$slots.children"
-        name="Children"
-      >
-        <slot name="children" />
-      </form-section>
       <form-section name="Resources Consumed">
         <resources-form
           :model="model.resources"
@@ -104,25 +100,7 @@
           @pull="({path, ack}) => $emit('pull', {path: ['resources', ...path], ack})"
         />
       </form-section>
-      <form-section name="Advanced">
+      <form-section name="Limit Uses">
-        <smart-combobox
-          label="Tags"
-          multiple
-          chips
-          deletable-chips
-          hint="Used to let slots find this property in a library, should otherwise be left blank"
-          :value="model.tags"
-          @change="change('tags', ...arguments)"
-        />
-        <smart-select
-          label="Target"
-          style="flex-basis: 300px;"
-          :items="targetOptions"
-          :value="model.target"
-          :error-messages="errors.target"
-          :menu-props="{auto: true, lazy: true}"
-          @change="change('target', ...arguments)"
-        />
         <v-row dense>
           <v-col
             cols="12"
@@ -152,18 +130,6 @@
               @change="change('usesUsed', ...arguments)"
             />
           </v-col>
-          <v-col
-            cols="12"
-            sm="6"
-            md="4"
-          >
-            <smart-switch
-              label="Don't show in log"
-              :value="model.silent"
-              :error-messages="errors.silent"
-              @change="change('silent', ...arguments)"
-            />
-          </v-col>
         </v-row>
         <reset-selector
           hint="When number of uses used should be reset to zero"
@@ -172,6 +138,15 @@
           @change="change('reset', ...arguments)"
         />
       </form-section>
+      <form-section name="Log">
+        <smart-switch
+          label="Don't show in log"
+          class="ml-4 mt-0 mb-4"
+          :value="model.silent"
+          :error-messages="errors.silent"
+          @change="change('silent', ...arguments)"
+        />
+      </form-section>
       <slot />
     </form-sections>
   </div>
@@ -180,13 +155,11 @@
 <script lang="js">
 import ResourcesForm from '/imports/client/ui/properties/forms/ResourcesForm.vue';
 import propertyFormMixin from '/imports/client/ui/properties/forms/shared/propertyFormMixin.js';
-import IconColorMenu from '/imports/client/ui/properties/forms/shared/IconColorMenu.vue';
 import ResetSelector from '/imports/client/ui/components/ResetSelector.vue';
 
 export default {
   components: {
     ResourcesForm,
-    IconColorMenu,
     ResetSelector,
   },
   mixins: [propertyFormMixin],

app/imports/client/ui/properties/forms/shared/ComputedField.vue

@@ -11,6 +11,9 @@
       >
         {{ model.value }}
       </template>
+      <template #prepend>
+        <slot name="prepend" />
+      </template>
     </text-field>
     <calculation-error-list :errors="errorList" />
   </div>

app/imports/client/ui/properties/forms/shared/FormSections.vue

@@ -1,6 +1,6 @@
 <template lang="html">
   <v-expansion-panels
-    popout
+    accordion
     multiple
   >
     <slot />

app/imports/client/ui/properties/viewers/shared/OutlinedInput.vue

@@ -43,10 +43,10 @@ export default {
 .outlined-input.theme--dark {
   border-color: rgba(255,255,255,.24);
 }
-.outlined-input.theme--light:hover {
+.outlined-input.theme--light:not(.no-hover):hover {
   border-color: rgba(0,0,0,.86);
 }
-.outlined-input.theme--dark:hover {
+.outlined-input.theme--dark:not(.no-hover):hover {
   border-color: #fff;
 }
 </style>