Private/dv/desktop view/issue/124/improve current selection indicator…

… single
zammad · Apr 17, 2024 · 9373ebf · 9373ebf
1 parent bed2262
commit 9373ebf
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 33 deletions.
diff --git a/app/frontend/apps/desktop/components/CommonSelect/CommonSelect.vue b/app/frontend/apps/desktop/components/CommonSelect/CommonSelect.vue
@@ -385,6 +385,7 @@ const duration = VITE_TEST_MODE ? undefined : { enter: 300, leave: 200 }
                   value: '',
                   disabled: true,
                 }"
+                no-selection-indicator
               />
               <slot name="footer" />
             </div>

diff --git a/app/frontend/apps/desktop/components/CommonSelect/CommonSelectItem.vue b/app/frontend/apps/desktop/components/CommonSelect/CommonSelectItem.vue
@@ -17,6 +17,7 @@ const props = defineProps<{
   noLabelTranslate?: boolean
   filter?: string
   optionIconComponent?: ConcreteComponent
+  noSelectionIndicator?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -71,7 +72,7 @@ const OptionIconComponent = props.optionIconComponent
     @keypress.enter.prevent="select(option)"
   >
     <CommonIcon
-      v-if="multiple"
+      v-if="multiple && !noSelectionIndicator"
       :class="{
         'fill-gray-100 group-hover:fill-black group-focus:fill-white dark:fill-neutral-400 dark:group-hover:fill-white':
           !option.disabled,
@@ -80,7 +81,18 @@ const OptionIconComponent = props.optionIconComponent
       size="xs"
       decorative
       :name="selected ? 'check-square' : 'square'"
-      class="shrink-0"
+      class="m-0.5 shrink-0"
+    />
+    <CommonIcon
+      v-else-if="!noSelectionIndicator"
+      class="shrink-0 fill-gray-100 group-hover:fill-black group-focus:fill-white dark:fill-neutral-400 dark:group-hover:fill-white"
+      :class="{
+        invisible: !selected,
+        'fill-stone-200 dark:fill-neutral-500': option.disabled,
+      }"
+      decorative
+      size="tiny"
+      name="check2"
     />
     <OptionIconComponent v-if="optionIconComponent" :option="option" />
     <CommonIcon
@@ -115,16 +127,5 @@ const OptionIconComponent = props.optionIconComponent
         >– {{ heading }}</span
       >
     </span>
-    <CommonIcon
-      v-if="!multiple"
-      class="shrink-0 fill-stone-200 group-hover:fill-black group-focus:fill-white dark:fill-neutral-500 dark:group-hover:fill-white"
-      :class="{
-        invisible: !selected,
-        'fill-gray-100 dark:fill-neutral-400': option.disabled,
-      }"
-      decorative
-      size="tiny"
-      name="check2"
-    />
   </div>
 </template>
diff --git a/app/frontend/apps/desktop/components/CommonSelect/__tests__/CommonSelect.spec.ts b/app/frontend/apps/desktop/components/CommonSelect/__tests__/CommonSelect.spec.ts
@@ -194,6 +194,6 @@ describe('CommonSelect.vue', () => {
     const option = view.getByRole('option')
 
     expect(option).toHaveTextContent('foo (1) – bar (2)')
-    expect(option.children[0]).toHaveAttribute('title', 'foo (1) – bar (2)')
+    expect(option.children[1]).toHaveAttribute('title', 'foo (1) – bar (2)')
   })
 })
diff --git a/app/frontend/apps/desktop/components/Form/fields/FieldSelect/__tests__/FieldSelect.spec.ts b/app/frontend/apps/desktop/components/Form/fields/FieldSelect/__tests__/FieldSelect.spec.ts
@@ -649,12 +649,12 @@ describe('Form - Field - Select - Options', () => {
 
     selectOptions.forEach((selectOption) => {
       if (selectOption.textContent === 'Ítem D') {
-        expect(selectOption.children[0].children[0]).toHaveTextContent('Ítem')
+        expect(selectOption.children[1].children[0]).toHaveTextContent('Ítem')
       } else {
-        expect(selectOption.children[0].children[0]).toHaveTextContent('Item')
+        expect(selectOption.children[1].children[0]).toHaveTextContent('Item')
       }
 
-      expect(selectOption.children[0].children[0]).toHaveClasses([
+      expect(selectOption.children[1].children[0]).toHaveClasses([
         'bg-blue-600',
         'dark:bg-blue-900',
       ])

diff --git a/...tend/apps/desktop/components/Form/fields/FieldTreeSelect/FieldTreeSelectInputDropdown.vue b/...tend/apps/desktop/components/Form/fields/FieldTreeSelect/FieldTreeSelectInputDropdown.vue
@@ -507,6 +507,7 @@ const duration = VITE_TEST_MODE ? undefined : { enter: 300, leave: 200 }
                     disabled: true,
                   } as MatchedFlatSelectOption
                 "
+                no-selection-indicator
               />
               <slot name="footer" />
             </div>

diff --git a/.../apps/desktop/components/Form/fields/FieldTreeSelect/FieldTreeSelectInputDropdownItem.vue b/.../apps/desktop/components/Form/fields/FieldTreeSelect/FieldTreeSelectInputDropdownItem.vue
@@ -16,6 +16,7 @@ const props = defineProps<{
   multiple?: boolean
   noLabelTranslate?: boolean
   filter?: string
+  noSelectionIndicator?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -69,7 +70,7 @@ const goToNextPage = (option: FlatSelectOption, noFocus?: boolean) => {
     @keypress.enter.prevent="select(option)"
   >
     <CommonIcon
-      v-if="multiple"
+      v-if="multiple && !noSelectionIndicator"
       :class="{
         'fill-gray-100 group-hover:fill-black group-focus:fill-white dark:fill-neutral-400 dark:group-hover:fill-white':
           !option.disabled,
@@ -78,7 +79,18 @@ const goToNextPage = (option: FlatSelectOption, noFocus?: boolean) => {
       size="xs"
       decorative
       :name="selected ? 'check-square' : 'square'"
-      class="shrink-0"
+      class="m-0.5 shrink-0"
+    />
+    <CommonIcon
+      v-else-if="!noSelectionIndicator"
+      class="shrink-0 fill-gray-100 group-hover:fill-black group-focus:fill-white dark:fill-neutral-400 dark:group-hover:fill-white"
+      :class="{
+        invisible: !selected,
+        'fill-stone-200 dark:fill-neutral-500': option.disabled,
+      }"
+      decorative
+      size="tiny"
+      name="check2"
     />
     <CommonIcon
       v-if="option.icon"
@@ -111,17 +123,6 @@ const goToNextPage = (option: FlatSelectOption, noFocus?: boolean) => {
     >
       {{ label }}
     </span>
-    <CommonIcon
-      v-if="!multiple"
-      class="shrink-0 fill-stone-200 group-hover:fill-black group-focus:fill-white dark:fill-neutral-500 dark:group-hover:fill-white"
-      :class="{
-        invisible: !selected,
-        'fill-gray-100 dark:fill-neutral-400': option.disabled,
-      }"
-      decorative
-      size="tiny"
-      name="check2"
-    />
     <div
       v-if="option.hasChildren && !filter"
       class="group/nav -me-2 shrink-0 flex-nowrap items-center justify-center gap-x-2.5 rounded-[5px] p-2.5 hover:bg-blue-800 group-focus:hover:bg-blue-600 dark:group-focus:hover:bg-blue-900"

diff --git a/...end/apps/desktop/components/Form/fields/FieldTreeSelect/__tests__/FieldTreeSelect.spec.ts b/...end/apps/desktop/components/Form/fields/FieldTreeSelect/__tests__/FieldTreeSelect.spec.ts
@@ -1211,12 +1211,12 @@ describe('Form - Field - TreeSelect - Features', () => {
 
     selectOptions.forEach((selectOption) => {
       if (selectOption.textContent === 'Ítem C') {
-        expect(selectOption.children[0].children[0]).toHaveTextContent('Ítem')
+        expect(selectOption.children[1].children[0]).toHaveTextContent('Ítem')
       } else {
-        expect(selectOption.children[0].children[0]).toHaveTextContent('Item')
+        expect(selectOption.children[1].children[0]).toHaveTextContent('Item')
       }
 
-      expect(selectOption.children[0].children[0]).toHaveClasses([
+      expect(selectOption.children[1].children[0]).toHaveClasses([
         'bg-blue-600',
         'dark:bg-blue-900',
       ])