feat: Adjust some ui/ux in dropdown property components - MEED-8328 - M…

…eeds-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
Meeds-io · Feb 5, 2025 · 94919d0 · 94919d0
1 parent 17787b9
commit 94919d0
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 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
@@ -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
@@ -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;
     }