Form overhaul: Attribute form

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

@@ -77,18 +77,37 @@
       <v-expand-transition>
         <form-section
           v-if="model.attributeType === 'healthBar'"
-          name="Health Bar Settings"
+          name="Health Bar"
         >
-          <color-picker
+          <div
-            :value="model.healthBarColorMid"
+            class="d-flex flex-wrap align-center justify-start"
-            label="Half-filled color"
+          >
-            @input="value => $emit('change', {path: ['healthBarColorMid'], value})"
+            <div class="text-subtitle-1">
-          />
+              Damaged Colors:
-          <color-picker
+            </div>
-            :value="model.healthBarColorLow"
+            <outlined-input
-            label="Empty color"
+              name="Half"
-            @input="value => $emit('change', {path: ['healthBarColorLow'], value})"
+              class="mb-4 ml-2"
-          />
+            >
+              <color-picker
+                :value="model.healthBarColorMid"
+                :width="54"
+                :height="54"
+                @input="value => $emit('change', {path: ['healthBarColorMid'], value})"
+              />
+            </outlined-input>
+            <outlined-input
+              name="Empty"
+              class="mb-4 ml-2"
+            >
+              <color-picker
+                :value="model.healthBarColorLow"
+                :width="54"
+                :height="54"
+                @input="value => $emit('change', {path: ['healthBarColorLow'], value})"
+              />
+            </outlined-input>
+          </div>
           <v-layout
             wrap
             class="mt-4"
@@ -146,118 +165,106 @@
           </v-layout>
         </form-section>
       </v-expand-transition>
-      <form-section
+      <form-section name="Damage">
-        v-if="$slots.children"
+        <v-row dense>
-        name="Children"
+          <v-col
-      >
+            cols="12"
-        <slot name="children" />
+            md="6"
-      </form-section>
-
-      <form-section name="Advanced">
-        <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)"
-        />
-        <div class="layout column align-center">
-          <v-row dense>
-            <v-col
-              cols="12"
-              sm="6"
-              md="4"
-            >
-              <smart-switch
-                v-if="model.attributeType !== 'hitDice'"
-                label="Allow decimal values"
-                class="mx-4"
-                :value="model.decimal"
-                :error-messages="errors.decimal"
-                @change="change('decimal', ...arguments)"
-              />
-            </v-col>
-            <v-col
-              cols="12"
-              sm="6"
-              md="4"
-            >
-              <smart-switch
-                label="Can be damaged into negative values"
-                class="mx-4"
-                :value="model.ignoreLowerLimit"
-                :error-messages="errors.ignoreLowerLimit"
-                @change="change('ignoreLowerLimit', ...arguments)"
-              />
-            </v-col>
-            <v-col
-              cols="12"
-              sm="6"
-              md="4"
-            >
-              <smart-switch
-                label="Can be incremented above total"
-                class="mx-4"
-                :value="model.ignoreUpperLimit"
-                :error-messages="errors.ignoreUpperLimit"
-                @change="change('ignoreUpperLimit', ...arguments)"
-              />
-            </v-col>
-            <v-col
-              cols="12"
-              sm="6"
-              md="4"
-            >
-              <smart-switch
-                label="Hide when total is zero"
-                class="mx-4"
-                :value="model.hideWhenTotalZero"
-                :error-messages="errors.hideWhenTotalZero"
-                @change="change('hideWhenTotalZero', ...arguments)"
-              />
-            </v-col>
-            <v-col
-              cols="12"
-              sm="6"
-              md="4"
-            >
-              <smart-switch
-                label="Hide when value is zero"
-                class="mx-4"
-                :value="model.hideWhenValueZero"
-                :error-messages="errors.hideWhenValueZero"
-                @change="change('hideWhenValueZero', ...arguments)"
-              />
-            </v-col>
-          </v-row>
-          <div
-            class="layout justify-center"
-            style="align-self: stretch;"
           >
             <text-field
               label="Damage"
               type="number"
               class="damage-field text-center"
-              style="max-width: 300px;"
+              hint="Damage reduces the attribute's final value"
-              hint="The attribute's final value is reduced by this amount. Attribute damage can increase this value until it matches the attribute's computed value. Should mostly be left blank."
               :disabled="!context.isLibraryForm"
               :value="model.damage"
               :error-messages="errors.damage"
               @change="change('damage', ...arguments)"
             />
-          </div>
+          </v-col>
-        </div>
+          <v-col
-        <div class="layout wrap">
+            cols="12"
-          <reset-selector
+            md="6"
-            v-if="model.attributeType !== 'hitDice'"
+          >
-            hint="When damage should be reset to zero"
+            <reset-selector
-            :value="model.reset"
+              v-if="model.attributeType !== 'hitDice'"
-            :error-messages="errors.reset"
+              hint="When damage should be reset to zero"
-            @change="change('reset', ...arguments)"
+              :value="model.reset"
-          />
+              :error-messages="errors.reset"
-        </div>
+              @change="change('reset', ...arguments)"
+            />
+          </v-col>
+        </v-row>
+      </form-section>
+      <form-section name="Behavior"> 
+        <v-row dense>
+          <v-col
+            cols="12"
+            sm="6"
+            md="4"
+          >
+            <smart-switch
+              v-if="model.attributeType !== 'hitDice'"
+              label="Allow decimal values"
+              class="mx-4"
+              :value="model.decimal"
+              :error-messages="errors.decimal"
+              @change="change('decimal', ...arguments)"
+            />
+          </v-col>
+          <v-col
+            cols="12"
+            sm="6"
+            md="4"
+          >
+            <smart-switch
+              label="Can be damaged into negative values"
+              class="mx-4"
+              :value="model.ignoreLowerLimit"
+              :error-messages="errors.ignoreLowerLimit"
+              @change="change('ignoreLowerLimit', ...arguments)"
+            />
+          </v-col>
+          <v-col
+            cols="12"
+            sm="6"
+            md="4"
+          >
+            <smart-switch
+              label="Can be incremented above total"
+              class="mx-4"
+              :value="model.ignoreUpperLimit"
+              :error-messages="errors.ignoreUpperLimit"
+              @change="change('ignoreUpperLimit', ...arguments)"
+            />
+          </v-col>
+          <v-col
+            cols="12"
+            sm="6"
+            md="4"
+          >
+            <smart-switch
+              label="Hide when total is zero"
+              class="mx-4"
+              :value="model.hideWhenTotalZero"
+              :error-messages="errors.hideWhenTotalZero"
+              @change="change('hideWhenTotalZero', ...arguments)"
+            />
+          </v-col>
+          <v-col
+            cols="12"
+            sm="6"
+            md="4"
+          >
+            <smart-switch
+              label="Hide when value is zero"
+              class="mx-4"
+              :value="model.hideWhenValueZero"
+              :error-messages="errors.hideWhenValueZero"
+              @change="change('hideWhenValueZero', ...arguments)"
+            />
+          </v-col>
+        </v-row>
       </form-section>
       <slot />
     </form-sections>
@@ -270,11 +277,13 @@ import FormSections from '/imports/client/ui/properties/forms/shared/FormSection
 import propertyFormMixin from '/imports/client/ui/properties/forms/shared/propertyFormMixin.js';
 import ColorPicker from '/imports/client/ui/components/ColorPicker.vue';
 import ResetSelector from '/imports/client/ui/components/ResetSelector.vue';
+import OutlinedInput from '/imports/client/ui/properties/viewers/shared/OutlinedInput.vue';
 
 export default {
   components: {
     FormSection,
     FormSections,
+    OutlinedInput,
     ColorPicker,
     ResetSelector,
   },