Apply Dropdown Styles to various parts (#12814)

* membersModal use the new select component instead of html select

* update dropdown styles on challengeDetail (add task) and on inventory unequip

* change the width to "min-width"

website/client/src/assets/scss/dropdown.scss

@@ -120,7 +120,7 @@
   }
 
   .dropdown-menu.show {
-    width: 100% !important;
+    min-width: 100% !important;
   }
 }
 

website/client/src/components/challenges/challengeDetail.vue

@@ -99,11 +99,12 @@
         <div class="col-12 col-md-6 text-right">
           <span v-if="isLeader || isAdmin">
             <b-dropdown
-              class="create-dropdown"
+              class="create-dropdown select-list"
               :text="$t('addTaskToChallenge')"
               :variant="'success'"
             >
               <b-dropdown-item
+                class="selectListItem"
                 v-for="type in columns"
                 :key="type"
                 @click="createTask(type)"

website/client/src/components/groups/membersModal.vue

@@ -43,32 +43,25 @@
             >
           </div>
           <div class="col">
-            <select
-              class="form-control"
-              @change="changeSortOption($event)"
-            >
-              <option
-                v-for="sortOption in sortOptions"
-                :key="sortOption.value"
-                :value="sortOption.value"
-              >
-                {{ sortOption.text }}
-              </option>
-            </select>
+            <select-list :items="sortOptions"
+                         @select="changeSortOption($event)"
+                         :value="optionEntryBySelectedValue"
+                         key-prop="value">
+              <template v-slot:item="{ item }">
+                <span class="label" v-if="item">{{ item.text }}</span>
+              </template>
+            </select-list>
           </div>
           <div class="col-3">
-            <select
-              class="form-control"
-              @change="changeSortDirection($event)"
-            >
-              <option
-                v-for="sortDirection in sortDirections"
-                :key="sortDirection.value"
-                :value="sortDirection.value"
-              >
-                {{ sortDirection.text }}
-              </option>
-            </select>
+
+            <select-list :items="sortDirections"
+                         @select="changeSortDirection($event)"
+                         :value="directionEntryBySelectedValue"
+                         key-prop="value">
+              <template v-slot:item="{ item }">
+                <span class="label" v-if="item">{{ item.text }}</span>
+              </template>
+            </select-list>
           </div>
         </div>
       </div>
@@ -386,9 +379,11 @@ import blockIcon from '@/assets/svg/block.svg';
 import messageIcon from '@/assets/members/message.svg';
 import starIcon from '@/assets/members/star.svg';
 import dots from '@/assets/svg/dots.svg';
+import SelectList from '@/components/ui/selectList';
 
 export default {
   components: {
+    SelectList,
     MemberDetails,
     removeMemberModal,
     loadingGryphon,
@@ -396,7 +391,11 @@ export default {
   props: ['hideBadge'],
   data () {
     return {
-      sortOption: {},
+      sortOption: {
+        // default sort options
+        value: 'stats.class',
+        direction: 'asc',
+      },
       sortDirty: false,
       selectedPage: 'members',
       members: [],
@@ -509,6 +508,12 @@ export default {
 
       return sortedMembers;
     },
+    optionEntryBySelectedValue () {
+      return this.sortOptions.find(o => o.value === this.sortOption.value);
+    },
+    directionEntryBySelectedValue () {
+      return this.sortDirections.find(o => o.value === this.sortOption.direction);
+    },
   },
   watch: {
     // Watches `searchTerm` and if present, performs a `searchMembers` action
@@ -620,11 +625,11 @@ export default {
       this.$root.$emit('bv::hide::modal', 'members-modal');
     },
     changeSortOption (e) {
-      this.sortOption.value = e.target.value;
+      this.sortOption.value = e.value;
       this.sort();
     },
     changeSortDirection (e) {
-      this.sortOption.direction = e.target.value;
+      this.sortOption.direction = e.value;
       this.sort();
     },
     sort () {

website/client/src/components/inventory/equipment/index.vue

@@ -63,8 +63,6 @@
             :items="groupByItems"
             :value="groupBy"
             class="array-select"
-            :class="{disabled: disabled}"
-            :disabled="disabled"
             :right="true"
             :hide-icon="false"
             :inline-dropdown="false"

website/client/src/components/inventory/equipment/unequipDropdown.vue

@@ -1,5 +1,6 @@
 <template>
   <b-dropdown
+    class="select-list"
     right="right"
     toggle-class="with-icon"
   >
@@ -15,26 +16,31 @@
       >{{ $t('unequip') }}</span>
     </template>
     <b-dropdown-item
+      class="selectListItem"
       @click="unequipBattleGear()"
     >
       {{ $t('battleGear') }}
     </b-dropdown-item>
     <b-dropdown-item
+      class="selectListItem"
       @click="unequipCostume()"
     >
       {{ $t('costume') }}
     </b-dropdown-item>
     <b-dropdown-item
+      class="selectListItem"
       @click="unequipPetMount()"
     >
       {{ $t('petAndMount') }}
     </b-dropdown-item>
     <b-dropdown-item
+      class="selectListItem"
       @click="unequipBackground()"
     >
       {{ $t('background') }}
     </b-dropdown-item>
     <b-dropdown-item
+      class="selectListItem"
       @click="unequipAllItems()"
     >
       {{ $t('allItems') }}
@@ -100,6 +106,14 @@ export default {
 <style lang="scss" scoped>
 @import '~@/assets/scss/colors.scss';
 
+.select-list {
+  ::v-deep {
+    .dropdown-menu {
+      min-width: 8rem; // instead of the normal 10
+    }
+  }
+}
+
 ::v-deep {
   .btn {
     display: flex;