feat: Adjust ui/ux in dropdown property icon and color input and - ME…

…ED-8328 - Meeds-io/MIPs#176 Adjust some ui/ux in dropdown property in options drawer and contact drawer dropdown input: 1- icon and label colors of the dropdowninput in contact information drawer 2- open options drawer once dropdown option switched to true
Meeds-io · Feb 4, 2025 · 5683da7 · 5683da7
1 parent 1f12757
commit 5683da7
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/webapp/src/main/webapp/skin/less/portlet/ProfileContactInformation/Style.less b/webapp/src/main/webapp/skin/less/portlet/ProfileContactInformation/Style.less
@@ -95,7 +95,13 @@
     padding: 10px !important;
     min-height: auto !important;
   }
+
+  .dropdownPropertyInput .v-input__append-inner .v-icon {
+    color: @greyColorLighten1 !important;
+    font-size: @sizeIconDefault !important;
+  }
 }
+
 #quickSearchUsersListDrawer {
   .quickSearchResultExpanded {
     @import "../../common/PeopleList/Style.less";

diff --git a/...vue-apps/profile-contact-information/components/property-type/ProfileDropdownProperty.vue b/...vue-apps/profile-contact-information/components/property-type/ProfileDropdownProperty.vue
@@ -29,16 +29,22 @@
         :items="mappedOptions"
         :ref="`propertyOptions${property.id}`"
         :name="`propertyOptions${property.id}`"
-        :label="$t('profileContactInformation.dropdown.property.choose.label')"
-        class="elevation-0 mt-2 pt-0 no-border"
+        class="elevation-0 mt-2 pt-0 no-border dropdownPropertyInput"
         item-text="translatedValue"
         item-value="id"
+        clear-icon="fas fa-times"
         clearable
         single-line
         solo
         flat
         outlined
-        dense />
+        dense>
+        <template #label>
+          <span class="text-sub-title">
+            {{ $t('profileContactInformation.dropdown.property.choose.label') }}
+          </span>
+        </template>
+      </v-combobox>
       <profile-hide-property-button
         v-if="!multiValued"
         :property="propertyObject" />

diff --git a/...src/main/webapp/vue-apps/profile-settings/components/drawers/ProfileSettingFormDrawer.vue b/...src/main/webapp/vue-apps/profile-settings/components/drawers/ProfileSettingFormDrawer.vue
@@ -478,6 +478,7 @@ export default {
     'setting.dropdownList': function () {
       if (this.isDropdownList) {
         this.setting.propertyType = this.propertyTypes[0];
+        this.openDropdownListDrawer();
       }
     }
   },