From 2c6cd7d243a6eccbd9e484c42eebb55fcc1e9f78 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Tue, 16 May 2023 19:28:32 +0200
Subject: [PATCH] Created smart toggles for limited choice fields

---
 .../ui/components/global/SmartToggle.vue      |  70 +++++++
 .../ui/components/global/globalIndex.js       |   2 +
 .../client/ui/properties/forms/ActionForm.vue |  14 +-
 .../ui/properties/forms/AdjustmentForm.vue    |  71 ++-----
 .../ui/properties/forms/AttributeForm.vue     | 187 ++++++++++--------
 .../client/ui/properties/forms/BuffForm.vue   |  21 +-
 .../properties/forms/shared/IconColorMenu.vue |   2 -
 .../viewers/shared/OutlinedInput.vue          |   6 +
 8 files changed, 216 insertions(+), 157 deletions(-)
 create mode 100644 app/imports/client/ui/components/global/SmartToggle.vue

diff --git a/app/imports/client/ui/components/global/SmartToggle.vue b/app/imports/client/ui/components/global/SmartToggle.vue
new file mode 100644
index 00000000..afbfff70
--- /dev/null
+++ b/app/imports/client/ui/components/global/SmartToggle.vue
@@ -0,0 +1,70 @@
+<template lang="html">
+  <outlined-input
+    :name="label"
+    class="mb-6 pt-1"
+  >
+    <v-btn-toggle
+      v-bind="$attrs"
+      mandatory
+      tile
+      group
+      :value="safeValue"
+      color="accent"
+      style="flex-wrap: wrap;"
+    >
+      <v-btn
+        v-for="(option, i) in options"
+        :key="`toggle-option-${i}`"
+        :value="option.value"
+        :disabled="isDisabled || (clickedValue != option.value && loading)"
+        :plain="clickedValue != option.value && loading"
+        :loading="clickedValue == option.value && loading"
+        height="42"
+        v-on="(value == option.value) ? {} : { click() { click(option.value) } }"
+      >
+        {{ option.name }}
+      </v-btn>
+    </v-btn-toggle>
+    <v-expand-transition>
+      <div
+        v-if="errors.length"
+        class="pa-2 error--text"
+      >
+        {{ errors.join('\n\n') }}
+      </div>
+    </v-expand-transition>
+  </outlined-input>
+</template>
+
+<script lang="js">
+import SmartInput from '/imports/client/ui/components/global/SmartInputMixin.js';
+import OutlinedInput from '/imports/client/ui/properties/viewers/shared/OutlinedInput.vue';
+
+export default {
+  components: {
+    OutlinedInput,
+  },
+  mixins: [SmartInput],
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    options: {
+      type: Array,
+      default: () => [],
+    }
+  },
+  data() {
+    return {
+      clickedValue: undefined,
+    };
+  },
+  methods: {
+    click(val) {
+      this.clickedValue = val;
+      this.change(val);
+    },
+  }
+};
+</script>
diff --git a/app/imports/client/ui/components/global/globalIndex.js b/app/imports/client/ui/components/global/globalIndex.js
index f7e48b3e..abcd848d 100644
--- a/app/imports/client/ui/components/global/globalIndex.js
+++ b/app/imports/client/ui/components/global/globalIndex.js
@@ -10,6 +10,7 @@ import SmartBtn from '/imports/client/ui/components/global/SmartBtn.vue';
 import SmartCombobox from '/imports/client/ui/components/global/SmartCombobox.vue';
 import SmartCheckbox from '/imports/client/ui/components/global/SmartCheckbox.vue';
 import SmartSwitch from '/imports/client/ui/components/global/SmartSwitch.vue';
+import SmartToggle from '/imports/client/ui/components/global/SmartToggle.vue';
 import SvgIcon from '/imports/client/ui/components/global/SvgIcon.vue';
 import SmartSlider from '/imports/client/ui/components/global/SmartSlider.vue';
 
@@ -24,4 +25,5 @@ Vue.component('SmartCombobox', SmartCombobox);
 Vue.component('SmartCheckbox', SmartCheckbox);
 Vue.component('SmartSlider', SmartSlider);
 Vue.component('SmartSwitch', SmartSwitch);
+Vue.component('SmartToggle', SmartToggle);
 Vue.component('SvgIcon', SvgIcon);
diff --git a/app/imports/client/ui/properties/forms/ActionForm.vue b/app/imports/client/ui/properties/forms/ActionForm.vue
index 63b316fe..33137670 100644
--- a/app/imports/client/ui/properties/forms/ActionForm.vue
+++ b/app/imports/client/ui/properties/forms/ActionForm.vue
@@ -63,19 +63,21 @@
       />
     </v-slide-x-transition>
 
-    <smart-select
-      label="Target"
-      style="flex-basis: 300px;"
-      :items="targetOptions"
+    <smart-toggle
+      label="Target creature"
       :value="model.target"
+      :options="[
+        {name: 'Single Target', value: 'singleTarget'},
+        {name: 'Multiple Targets', value: 'multipleTargets'},
+        {name: 'Self', value: 'self'},
+      ]"
       :error-messages="errors.target"
-      :menu-props="{auto: true, lazy: true}"
       @change="change('target', ...arguments)"
     />
 
     <inline-computation-field
       label="Summary"
-      hint="This will appear in the action card in the character sheet, summarise what the action does"
+      hint="This will appear in the action card in the character sheet, summarize what the action does"
       :model="model.summary"
       :error-messages="errors.summary"
       @change="({path, value, ack}) =>
diff --git a/app/imports/client/ui/properties/forms/AdjustmentForm.vue b/app/imports/client/ui/properties/forms/AdjustmentForm.vue
index 74d7a34c..bc23b958 100644
--- a/app/imports/client/ui/properties/forms/AdjustmentForm.vue
+++ b/app/imports/client/ui/properties/forms/AdjustmentForm.vue
@@ -34,11 +34,14 @@
         cols="12"
         md="6"
       >
-        <smart-select
+        <smart-toggle
           label="Operation"
           hint="Should the attribute be damaged by the amount, or set to the amount"
-          :items="adjustmentOps"
           :value="model.operation"
+          :options="[
+            { name: 'Damage', value: 'increment' },
+            { name: 'Set', value: 'set' },
+          ]"
           :error-messages="errors.operation"
           @change="change('operation', ...arguments)"
         />
@@ -47,14 +50,14 @@
         cols="12"
         md="6"
       >
-        <smart-select
-          v-if="parentTarget !== 'self'"
-          label="Target"
-          :hint="targetOptionHint"
-          :items="targetOptions"
+        <smart-toggle
+          label="Target creature"
           :value="model.target"
+          :options="[
+            {name: 'Action Target', value: 'target'},
+            {name: 'Self', value: 'self'},
+          ]"
           :error-messages="errors.target"
-          :menu-props="{auto: true, lazy: true}"
           @change="change('target', ...arguments)"
         />
       </v-col>
@@ -85,58 +88,10 @@ import propertyFormMixin from '/imports/client/ui/properties/forms/shared/proper
 
 export default {
   mixins: [propertyFormMixin, attributeListMixin],
-  props: {
-    parentTarget: {
-      type: String,
-      default: undefined,
-    },
-  },
   data() {
     return {
-      adjustmentOps: [
-        { text: 'Damage', value: 'increment' },
-        { text: 'Set', value: 'set' },
-      ],
-      damageHint: 'The amount of damage to apply to the selected stat, can be a calculation or roll. Negative values will restore the selected from previous damage. If the operation is set, this is the final value of the stat instead.',
-      setHint: 'The value of the stat after applying this adjustment. The stat\'s value can\'t exceed its total',
-    }
-  },
-  computed: {
-    targetOptions() {
-      if (this.parentTarget === 'singleTarget') {
-        return [
-          {
-            text: 'Self',
-            value: 'self',
-          }, {
-            text: 'Target',
-            value: 'every',
-          },
-        ];
-      } else {
-        return [
-          {
-            text: 'Self',
-            value: 'self',
-          }, {
-            text: 'Target',
-            value: 'target',
-          },
-        ];
-      }
-    },
-    targetOptionHint() {
-      let hints = {
-        self: 'The damage will be applied to the character\'s own attribute when taking the action',
-        target: 'The damage will be applied to the target of the action',
-        each: 'The damage will be rolled separately for each of the targets of the action',
-        every: 'The damage will be rolled once and applied to each of the targets of the action',
-      };
-      if (this.parentTarget === 'singleTarget') {
-        hints.each = hints.target;
-        hints.every = hints.target;
-      }
-      return hints[this.model.target];
+      damageHint: 'The amount of damage to apply, negative values will heal',
+      setHint: 'The value to set the stat to',
     }
   },
 }
diff --git a/app/imports/client/ui/properties/forms/AttributeForm.vue b/app/imports/client/ui/properties/forms/AttributeForm.vue
index 238d097b..84829058 100644
--- a/app/imports/client/ui/properties/forms/AttributeForm.vue
+++ b/app/imports/client/ui/properties/forms/AttributeForm.vue
@@ -79,90 +79,115 @@
           v-if="model.attributeType === 'healthBar'"
           name="Health Bar"
         >
-          <div
-            class="d-flex flex-wrap align-center justify-start"
-          >
-            <div class="text-subtitle-1">
-              Damaged Colors:
+          <div class="d-flex flex-column align-center mb-4">
+            <div class="text-caption mb-4">
+              Damaged Colors
             </div>
-            <outlined-input
-              name="Half"
-              class="mb-4 ml-2"
+            <div
+              class="d-flex flex-wrap align-center justify-start"
             >
-              <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>
+              <outlined-input
+                name="Half"
+                class="mb-4"
+              >
+                <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>
           </div>
-          <v-layout
-            wrap
-            class="mt-4"
-          >
-            <text-field
-              label="Damage order"
-              type="number"
-              style="max-width: 300px;"
-              hint="Lower ordered health bars will take damage before higher ordered ones"
-              class="mr-4"
-              :disabled="model.healthBarNoDamage"
-              :value="model.healthBarDamageOrder"
-              :error-messages="errors.healthBarDamageOrder"
-              @change="change('healthBarDamageOrder', ...arguments)"
-            />
-            <smart-switch
-              label="Ignore damage"
-              class="mr-4"
-              :value="model.healthBarNoDamage"
-              :error-messages="errors.healthBarNoDamage"
-              @change="change('healthBarNoDamage', ...arguments)"
-            />
-            <smart-switch
-              label="Prevent damage overflow"
-              :value="model.healthBarNoDamageOverflow"
-              :error-messages="errors.healthBarNoDamageOverflow"
-              @change="change('healthBarNoDamageOverflow', ...arguments)"
-            />
-          </v-layout>
-          <v-layout wrap>
-            <text-field
-              label="Healing order"
-              type="number"
-              style="max-width: 300px;"
-              hint="Lower ordered health bars will take healing before higher ordered ones"
-              class="mr-4"
-              :disabled="model.healthBarNoHealing"
-              :value="model.healthBarHealingOrder"
-              :error-messages="errors.healthBarHealingOrder"
-              @change="change('healthBarHealingOrder', ...arguments)"
-            />
-            <smart-switch
-              label="Ignore healing"
-              class="mr-4"
-              :value="model.healthBarNoHealing"
-              :error-messages="errors.healthBarNoHealing"
-              @change="change('healthBarNoHealing', ...arguments)"
-            />
-            <smart-switch
-              label="Prevent healing overflow"
-              :value="model.healthBarNoHealingOverflow"
-              :error-messages="errors.healthBarNoHealingOverflow"
-              @change="change('healthBarNoHealingOverflow', ...arguments)"
-            />
-          </v-layout>
+          <v-row dense>
+            <v-col
+              cols="12"
+              md="4"
+            >
+              <text-field
+                label="Damage order"
+                type="number"
+                hint="Lower ordered health bars will take damage before higher ordered ones"
+                :disabled="model.healthBarNoDamage"
+                :value="model.healthBarDamageOrder"
+                :error-messages="errors.healthBarDamageOrder"
+                @change="change('healthBarDamageOrder', ...arguments)"
+              />
+            </v-col>
+            <v-col
+              cols="12"
+              md="4"
+              sm="6"
+            >
+              <smart-switch
+                label="Ignore damage"
+                :value="model.healthBarNoDamage"
+                :error-messages="errors.healthBarNoDamage"
+                @change="change('healthBarNoDamage', ...arguments)"
+              />
+            </v-col>
+            <v-col
+              cols="12"
+              md="4"
+              sm="6"
+            >
+              <smart-switch
+                label="Prevent damage overflow"
+                :value="model.healthBarNoDamageOverflow"
+                :error-messages="errors.healthBarNoDamageOverflow"
+                @change="change('healthBarNoDamageOverflow', ...arguments)"
+              />
+            </v-col>
+            <v-col
+              cols="12"
+              md="4"
+            >
+              <text-field
+                label="Healing order"
+                type="number"
+                hint="Lower ordered health bars will take healing before higher ordered ones"
+                :disabled="model.healthBarNoHealing"
+                :value="model.healthBarHealingOrder"
+                :error-messages="errors.healthBarHealingOrder"
+                @change="change('healthBarHealingOrder', ...arguments)"
+              />
+            </v-col>
+            <v-col
+              cols="12"
+              md="4"
+              sm="6"
+            >
+              <smart-switch
+                label="Ignore healing"
+                :value="model.healthBarNoHealing"
+                :error-messages="errors.healthBarNoHealing"
+                @change="change('healthBarNoHealing', ...arguments)"
+              />
+            </v-col>
+            <v-col
+              cols="12"
+              md="4"
+              sm="6"
+            >
+              <smart-switch
+                label="Prevent healing overflow"
+                :value="model.healthBarNoHealingOverflow"
+                :error-messages="errors.healthBarNoHealingOverflow"
+                @change="change('healthBarNoHealingOverflow', ...arguments)"
+              />
+            </v-col>
+          </v-row>
         </form-section>
       </v-expand-transition>
       <form-section name="Damage">
diff --git a/app/imports/client/ui/properties/forms/BuffForm.vue b/app/imports/client/ui/properties/forms/BuffForm.vue
index 87b30123..871c8dda 100644
--- a/app/imports/client/ui/properties/forms/BuffForm.vue
+++ b/app/imports/client/ui/properties/forms/BuffForm.vue
@@ -18,16 +18,17 @@
         $emit('change', {path: ['duration', ...path], value, ack})"
     />
     -->
-    <v-expand-transition>
-      <smart-select
-        v-if="!model.applied"
-        label="Target"
-        :items="targetOptions"
-        :value="model.target"
-        :error-messages="errors.target"
-        :menu-props="{auto: true, lazy: true}"
-        @change="change('target', ...arguments)"
-      />
+    <smart-toggle
+      v-if="!model.applied"
+      label="Target creature"
+      :value="model.target"
+      :options="[
+        {name: 'Action Target', value: 'target'},
+        {name: 'Self', value: 'self'},
+      ]"
+      :error-messages="errors.target"
+      @change="change('target', ...arguments)"
+    />
     </v-expand-transition>
     <form-sections>
       <form-section
diff --git a/app/imports/client/ui/properties/forms/shared/IconColorMenu.vue b/app/imports/client/ui/properties/forms/shared/IconColorMenu.vue
index 15c52266..824f645c 100644
--- a/app/imports/client/ui/properties/forms/shared/IconColorMenu.vue
+++ b/app/imports/client/ui/properties/forms/shared/IconColorMenu.vue
@@ -28,14 +28,12 @@
 </template>
 
 <script lang="js">
-  import PropertyIcon from '/imports/client/ui/properties/shared/PropertyIcon.vue';
   import ColorPicker from '/imports/client/ui/components/ColorPicker.vue';
   import OutlinedInput from '/imports/client/ui/properties/viewers/shared/OutlinedInput.vue';
 
   export default {
     components: {
       OutlinedInput,
-      PropertyIcon,
       ColorPicker,
     },
     props: {
diff --git a/app/imports/client/ui/properties/viewers/shared/OutlinedInput.vue b/app/imports/client/ui/properties/viewers/shared/OutlinedInput.vue
index 4beee6bc..1b82bf6b 100644
--- a/app/imports/client/ui/properties/viewers/shared/OutlinedInput.vue
+++ b/app/imports/client/ui/properties/viewers/shared/OutlinedInput.vue
@@ -49,4 +49,10 @@ export default {
 .outlined-input.theme--dark:not(.no-hover):hover {
   border-color: #fff;
 }
+.outlined-input .name {
+  color: rgba(0,0,0,.6);
+}
+.outlined-input.theme--dark .name {
+  color: rgba(255,255,255,.7);
+}
 </style>