Pro 6974 update UI fields (#4836)

* Reworks micro style for color input, range input, select input. * Allows to pass modifiers to `AposSchema` for each field types that will override `modifiers` prop that is applied to all fields. * Adds new slot info to `AposInputWrapper` to add stuff on the right of the label.
apostrophecms · Jan 22, 2025 · 7a8c136 · 7a8c136
1 parent 36b606d
commit 7a8c136
Show file tree

Hide file tree

Showing 11 changed files with 221 additions and 83 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,6 +19,8 @@
 ### Changes
 
 * The `pickerOptions` sub property of a color field's configuration has been merged with it's parent `options` object.
+* Reworks `inline` and `micro` UI of some fields (color, range, select). Improve global inline style.
+* Makes the range input being a number all the time instead of a string that we convert manually.
 
 ## 4.11.2 (2024-12-29)
 

diff --git a/modules/@apostrophecms/asset/lib/globalIcons.js b/modules/@apostrophecms/asset/lib/globalIcons.js
@@ -61,8 +61,8 @@ module.exports = {
   'format-list-numbered-icon': 'FormatListNumbered',
   'format-quote-close-icon': 'FormatQuoteClose',
   'format-strikethrough-variant-icon': 'FormatStrikethroughVariant',
-  'format-superscript-icon': 'FormatSuperscript',
   'format-subscript-icon': 'FormatSubscript',
+  'format-superscript-icon': 'FormatSuperscript',
   'format-text-icon': 'FormatText',
   'format-underline-icon': 'FormatUnderline',
   'help-circle-icon': 'HelpCircle',
@@ -122,5 +122,6 @@ module.exports = {
   'unfold-more-horizontal-icon': 'UnfoldMoreHorizontal',
   'video-icon': 'Video',
   'view-column-icon': 'ViewColumn',
+  'water-off-icon': 'WaterOff',
   'web-icon': 'Web'
 };
diff --git a/modules/@apostrophecms/color-field/ui/apos/components/AposInputColor.vue b/modules/@apostrophecms/color-field/ui/apos/components/AposInputColor.vue
@@ -8,6 +8,13 @@
   >
     <template #body>
       <div class="apos-input-color">
+        <AposColorInfo
+          v-if="isInline"
+          class="apos-input-color__info apos-input-color__info--inline"
+          :value="next"
+          :is-micro="isMicro"
+          @clear="clear"
+        />
         <div class="apos-input-color__ui">
           <AposContextMenu
             :button="buttonOptions"
@@ -24,26 +31,27 @@
             />
           </AposContextMenu>
         </div>
-        <div class="apos-input-color__info" data-apos-test="colorInfo">
-          {{ valueLabel }}
-          <AposButton
-            v-if="next"
-            type="quiet"
-            label="apostrophe:clear"
-            class="apos-input-color__clear"
-            :modifiers="['no-motion']"
-            @click="clear"
-          />
-        </div>
+        <AposColorInfo
+          v-if="!isInline"
+          class="apos-input-color__info"
+          :value="next"
+          :is-micro="isMicro"
+          @clear="clear"
+        />
       </div>
     </template>
   </AposInputWrapper>
 </template>
 
 <script>
 import AposInputColorLogic from '../logic/AposInputColor';
+import AposColorInfo from '../lib/AposColorInfo.vue';
+
 export default {
   name: 'AposInputColor',
+  components: {
+    AposColorInfo
+  },
   mixins: [ AposInputColorLogic ]
 };
 </script>
@@ -54,16 +62,13 @@ export default {
     align-items: center;
   }
 
-  .apos-input-color__clear {
-    margin-left: 10px;
-  }
-
   .apos-input-color__info {
-    @include type-base;
+    margin-left: 15px;
 
-    & {
-      margin-left: 15px;
-      color: var(--a-text-primary);
+    &--inline {
+      margin-right: 5px;
+      margin-left: 0;
     }
   }
+
 </style>
diff --git a/modules/@apostrophecms/color-field/ui/apos/lib/AposColorInfo.vue b/modules/@apostrophecms/color-field/ui/apos/lib/AposColorInfo.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="apos-color-info" data-apos-test="colorInfo">
+    <span v-if="!isMicro">
+      {{ label }}
+    </span>
+    <AposButton
+      v-if="!isMicro && value"
+      type="quiet"
+      :label="'apostrophe:clear'"
+      class="apos-color-info__clear-btn"
+      :modifiers="['no-motion']"
+      @click="emit('clear')"
+    />
+    <AposIndicator
+      v-else-if="value"
+      class="apos-color-info__clear-icon"
+      icon="water-off-icon"
+      @click="emit('clear')"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  value: {
+    type: String,
+    default: null
+  },
+  isMicro: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const label = computed(() => props.value || 'None Selected');
+const emit = defineEmits([ 'clear' ]);
+</script>
+
+<style lang="scss">
+  .apos-color-info {
+    @include type-base;
+
+    & {
+      color: var(--a-text-primary);
+    }
+  }
+
+  .apos-color-info__clear-btn {
+    margin-left: 10px;
+  }
+
+  .apos-color-info__clear-icon {
+    cursor: pointer;
+    color: var(--a-base-2);
+
+    &:hover {
+      color: var(--a-primary);
+    }
+  }
+</style>
diff --git a/modules/@apostrophecms/color-field/ui/apos/logic/AposInputColor.js b/modules/@apostrophecms/color-field/ui/apos/logic/AposInputColor.js
@@ -16,6 +16,12 @@ export default {
     };
   },
   computed: {
+    isMicro() {
+      return this.modifiers.includes('micro');
+    },
+    isInline() {
+      return this.modifiers.includes('inline');
+    },
     pickerValue() {
       return this.next || this.defaultValue;
     },
@@ -33,13 +39,6 @@ export default {
     options() {
       return this.field?.options || {};
     },
-    valueLabel() {
-      if (this.next) {
-        return this.next;
-      } else {
-        return 'None Selected';
-      }
-    },
     classList() {
       return [
         'apos-input-wrapper',

diff --git a/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue b/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue
@@ -6,20 +6,38 @@
     :uid="uid"
     :display-options="displayOptions"
   >
+    <template v-if="isMicro" #info>
+      <div
+        class="apos-range__value"
+        aria-hidden="true"
+      >
+        <AposIndicator
+          v-if="isSet"
+          class="apos-range__clear"
+          icon="close-icon"
+          @click="unset"
+        />
+        <div class="apos-range__value-input">
+          <span v-if="isSet">
+            {{ valueLabel }}
+          </span>
+        </div>
+      </div>
+    </template>
     <template #body>
       <div class="apos-input-wrapper">
         <div v-apos-tooltip="tooltip" class="apos-range">
           <input
             :id="uid"
-            v-model="next"
+            v-model.number="next"
             type="range"
             :min="field.min"
             :max="field.max"
             :step="field.step"
             class="apos-range__input"
             :disabled="field.readOnly"
           >
-          <div class="apos-range__scale">
+          <div v-if="!isMicro" class="apos-range__scale">
             <span>
               <span class="apos-sr-only">
                 {{ $t('apostrophe:minLabel') }}
@@ -35,6 +53,7 @@
           </div>
         </div>
         <div
+          v-if="!isMicro"
           class="apos-range__value"
           aria-hidden="true"
           :class="{'apos-is-unset': !isSet}"
@@ -80,14 +99,39 @@ export default {
       pointer-events: none;
     }
 
-    .apos-range__clear {
-      margin-left: 5px;
+    .apos-field--micro & {
+      display: flex;
+      padding-top: 0;
+      min-width: auto;
+    }
+  }
+
+  .apos-range__value-input {
+    display: inline-flex;
+    box-sizing: border-box;
+    align-items: center;
+    padding: 5px 0 5px 5px;
+    border-radius: 5px;
+    min-height: 25px;
+  }
+
+  .apos-range__clear {
+    margin-left: 5px;
+
+    .apos-field--micro & {
+      cursor: pointer;
+      margin-right: 5px;
+      margin-left: 0;
     }
   }
 
   .apos-range {
     flex-grow: 1;
     margin-right: 20px;
+
+    .apos-field--micro & {
+      margin-right: 0;
+    }
   }
 
   .apos-range__scale {
@@ -121,6 +165,10 @@ export default {
         color: var(--a-text-primary);
       }
     }
+
+    .apos-field--micro {
+      margin: 0;
+    }
   }
 
   .apos-range__input[disabled] {