From 340c27270ab44580f1be3b0dc77a2268a908965d Mon Sep 17 00:00:00 2001
From: Helmi Akermi <70575401+hakermi@users.noreply.github.com>
Date: Tue, 4 Feb 2025 13:41:48 +0100
Subject: [PATCH] feat: Adjust some ui/ux in dropdown property components -
 MEED-8328 - Meeds-io/MIPs#171 (#4400)

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
---
 .../portlet/ProfileContactInformation/Style.less   |  6 ++++++
 .../property-type/ProfileDropdownProperty.vue      | 12 +++++++++---
 .../drawers/ProfileSettingFormDrawer.vue           | 14 ++++++++------
 3 files changed, 23 insertions(+), 9 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
index a0b45691de9..e5a293fe2b7 100644
--- 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/webapp/src/main/webapp/vue-apps/profile-contact-information/components/property-type/ProfileDropdownProperty.vue b/webapp/src/main/webapp/vue-apps/profile-contact-information/components/property-type/ProfileDropdownProperty.vue
index aff103f6dc5..2aad9749e99 100644
--- a/webapp/src/main/webapp/vue-apps/profile-contact-information/components/property-type/ProfileDropdownProperty.vue
+++ b/webapp/src/main/webapp/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/webapp/src/main/webapp/vue-apps/profile-settings/components/drawers/ProfileSettingFormDrawer.vue b/webapp/src/main/webapp/vue-apps/profile-settings/components/drawers/ProfileSettingFormDrawer.vue
index d94517b1d98..80e9382de2a 100644
--- a/webapp/src/main/webapp/vue-apps/profile-settings/components/drawers/ProfileSettingFormDrawer.vue
+++ b/webapp/src/main/webapp/vue-apps/profile-settings/components/drawers/ProfileSettingFormDrawer.vue
@@ -262,7 +262,8 @@
                         :disabled="saving || isUserType"
                         :ripple="false"
                         color="primary"
-                        class="align-center my-auto" />
+                        class="align-center my-auto"
+                        @change="openDropdownListDrawerOnSwitch"/>
                     </div>
                   </v-list-item-action>
                 </v-list-item>
@@ -468,11 +469,7 @@ export default {
         const areEqualsLabels = this.initialLabels.length === newItems.length && this.initialLabels.every((item, index) => {
           return item.id === newItems[index].id && item.label === newItems[index].label && item.language === newItems[index].language;
         });
-        if (!areEqualsLabels) {
-          this.areLabelsChanged = true;
-        } else {
-          this.areLabelsChanged = false;
-        }
+        this.areLabelsChanged = !areEqualsLabels;
       },
     },
     'setting.dropdownList': function () {
@@ -621,6 +618,11 @@ export default {
     openDropdownListDrawer() {
       this.$emit('open-dropdown-list', this.setting);
     },
+    openDropdownListDrawerOnSwitch() {
+      if (this.isDropdownList) {
+        this.openDropdownListDrawer()
+      }
+    },
     settingTranslationUpdated(translationsUpdated) {
       this.translationsUpdated = translationsUpdated;
     }