From 7d311195ee9b9c076a6b52d23d69d8dcff4e976b Mon Sep 17 00:00:00 2001
From: Jimmy Tanagra <jcode@tanagra.id.au>
Date: Fri, 16 Feb 2024 04:19:30 +1000
Subject: [PATCH] Globally align smart-select value with other input values

Signed-off-by: Jimmy Tanagra <jcode@tanagra.id.au>
---
 .../org.openhab.ui/web/src/components/app.vue    | 16 ++++++++++++++++
 .../web/src/components/item/item-form.vue        | 15 ++-------------
 .../web/src/components/tags/semantics-picker.vue |  6 +++---
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/components/app.vue b/bundles/org.openhab.ui/web/src/components/app.vue
index 193aa9c951..ed9e70ca46 100644
--- a/bundles/org.openhab.ui/web/src/components/app.vue
+++ b/bundles/org.openhab.ui/web/src/components/app.vue
@@ -239,7 +239,23 @@
   // --f7-list-item-media-margin 24px
   // --f7-list-item-padding-horizontal 32px
   // --f7-list-chevron-icon-color var(--f7-color-blue-tint) !important
+</style>
 
+<style lang="stylus">
+// align smart select popup list item with input fields of f7-list-input elements
+a.item-link.smart-select
+  .item-content
+    .item-inner
+      .item-title
+        // f7-input-item uses 35% for the item-title,
+        // but since their item-inner has less padding (16px vs 31px) on the left side, add those 15px difference
+        min-width calc(35% + 0.35*15px) !important
+      .item-after
+        width 100%
+        margin 0
+        padding 0
+        margin-left 8px
+        color var(--f7-input-text-color)
 </style>
 
 <script>
diff --git a/bundles/org.openhab.ui/web/src/components/item/item-form.vue b/bundles/org.openhab.ui/web/src/components/item/item-form.vue
index 0175601e38..764cb5a9e4 100644
--- a/bundles/org.openhab.ui/web/src/components/item/item-form.vue
+++ b/bundles/org.openhab.ui/web/src/components/item/item-form.vue
@@ -11,7 +11,7 @@
       </f7-list-group>
       <f7-list-group v-if="itemType && !hideType">
         <!-- Type -->
-        <f7-list-item v-if="itemType && !hideType" title="Type" class="align-popup-list-item" :disabled="!editable" :key="'type-' + itemType" smart-select :smart-select-params="{searchbar: true, openIn: 'popup', closeOnSelect: true}">
+        <f7-list-item v-if="itemType && !hideType" title="Type" :disabled="!editable" :key="'type-' + itemType" smart-select :smart-select-params="{searchbar: true, openIn: 'popup', closeOnSelect: true}">
           <select name="select-type" @change="item.type = $event.target.value">
             <option v-for="t in types.ItemTypes" :key="t" :value="t" :selected="t === itemType">
               {{ t }}
@@ -19,7 +19,7 @@
           </select>
         </f7-list-item>
         <!-- Dimensions -->
-        <f7-list-item v-if="dimensions.length && !hideType && itemType === 'Number'" title="Dimension" class="align-popup-list-item" :disabled="!editable" :key="'dimension-' + itemDimension" smart-select :smart-select-params="{searchbar: true, openIn: 'popup', closeOnSelect: true}">
+        <f7-list-item v-if="dimensions.length && !hideType && itemType === 'Number'" title="Dimension" :disabled="!editable" :key="'dimension-' + itemDimension" smart-select :smart-select-params="{searchbar: true, openIn: 'popup', closeOnSelect: true}">
           <select name="select-dimension" @change="setDimension($event.target.value)">
             <option key="" value="Number" :selected="itemDimension === ''" />
             <option v-for="d in dimensions" :key="d.name" :value="d.name" :selected="d.name === itemDimension">
@@ -83,17 +83,6 @@
     display inherit !important
   .item-title
     font-weight inherit !important
-.align-popup-list-item
-  .item-title
-    // f7-input-item uses 35% for the item-title,
-    // but since their item-inner has less padding (16px vs 31px) on the left side, add those 15px difference
-    min-width calc(35% + 0.35*15px)
-  .item-after
-    width 100%
-    margin 0
-    padding 0
-    margin-left 8px
-    color var(--f7-input-text-color)
 </style>
 
 <script>
diff --git a/bundles/org.openhab.ui/web/src/components/tags/semantics-picker.vue b/bundles/org.openhab.ui/web/src/components/tags/semantics-picker.vue
index d77ad7c184..f03dd9c5a6 100644
--- a/bundles/org.openhab.ui/web/src/components/tags/semantics-picker.vue
+++ b/bundles/org.openhab.ui/web/src/components/tags/semantics-picker.vue
@@ -1,6 +1,6 @@
 <template>
   <f7-list inline-labels no-hairlines-md v-if="show">
-    <f7-list-item :disabled="!editable" title="Semantic Class" class="align-popup-list-item" :key="'class-' + semanticClass" smart-select :smart-select-params="{view: $f7.view.main, searchbar: true, openIn: 'popup', closeOnSelect: true, scrollToSelectedItem: true}">
+    <f7-list-item :disabled="!editable" title="Semantic Class" :key="'class-' + semanticClass" smart-select :smart-select-params="{view: $f7.view.main, searchbar: true, openIn: 'popup', closeOnSelect: true, scrollToSelectedItem: true}">
       <select name="select-semantics-class" @change="update('class', $event.target.value)">
         <option v-if="!hideNone" value="">
           None
@@ -22,8 +22,8 @@
         </optgroup>
       </select>
     </f7-list-item>
-    <f7-list-item v-if="currentSemanticType && !hideType" :disabled="!editable" title="Semantic Type" class="align-popup-list-item" :after="currentSemanticType" />
-    <f7-list-item v-if="currentSemanticType === 'Point'" :disabled="!editable" title="Semantic Property" class="align-popup-list-item" :key="'property-' + semanticProperty" smart-select :smart-select-params="{view: $f7.view.main, searchbar: true, openIn: 'popup', closeOnSelect: true, scrollToSelectedItem: true}">
+    <f7-list-item v-if="currentSemanticType && !hideType" :disabled="!editable" title="Semantic Type" :after="currentSemanticType" />
+    <f7-list-item v-if="currentSemanticType === 'Point'" :disabled="!editable" title="Semantic Property" :key="'property-' + semanticProperty" smart-select :smart-select-params="{view: $f7.view.main, searchbar: true, openIn: 'popup', closeOnSelect: true, scrollToSelectedItem: true}">
       <select name="select-semantics-property" :value="semanticProperty" @change="update('property', $event.target.value)">
         <option :value="''">
           None