update dropdowns to use the updated / styled components (#12758)

* update dropdowns to use the updated / styled components

* update colors / behavior for colors

* remove class binding

website/client/src/assets/scss/button.scss

@@ -154,6 +154,10 @@
   }
 }
 
+.show > .btn-secondary.dropdown-toggle:not(.btn-success):not(:disabled):not(.disabled) {
+  --icon-color: #{$purple-300};
+}
+
 .btn-danger {
   background: $maroon-100;
   border: 1px solid transparent;

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

@@ -6,7 +6,7 @@
 }
 
 .dropdown-toggle:hover {
-  --caret-color: #{$purple-200};
+  --caret-color: #{$purple-300};
 }
 
 .dropdown.show > .dropdown-toggle:not(.btn-success) {
@@ -15,7 +15,7 @@
   box-shadow: none;
 
   &::after {
-    --caret-color: #{$purple-200};
+    --caret-color: #{$purple-300};
   }
 }
 
@@ -55,10 +55,14 @@
 
 
   &:active, &:hover, &:focus, &.active {
-    background-color: rgba($purple-600, 0.25) !important;
+    background-color: inherit !important;
     color: $purple-300 !important;
   }
 
+  &:hover {
+    background-color: rgba($purple-600, 0.25) !important;
+  }
+
   &.dropdown-inactive {
     cursor: default;
 
@@ -126,7 +130,10 @@
   height: 32px;
 
   &:active, &:hover, &:focus, &.active {
-    background-color: rgba($purple-600, 0.25);
     color: $purple-300;
   }
+
+  &:hover {
+    background-color: rgba($purple-600, 0.25);
+  }
 }

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

@@ -53,23 +53,22 @@
           />
 
           <span class="dropdown-label">{{ $t('groupBy2') }}</span>
-          <b-dropdown
+
-            :text="$t(groupBy === 'type' ? 'equipmentType' : 'class')"
+          <select-list
-            right="right"
+            :items="groupByItems"
+            :value="groupBy"
+            class="array-select"
+            :class="{disabled: disabled}"
+            :disabled="disabled"
+            :right="true"
+            :hide-icon="false"
+            :inline-dropdown="false"
+            @select="groupBy = $event"
           >
-            <b-dropdown-item
+            <template v-slot:item="{ item }">
-              :active="groupBy === 'type'"
+              <span class="label">{{ groupByLabel(item) }}</span>
-              @click="groupBy = 'type'"
+            </template>
-            >
+          </select-list>
-              {{ $t('equipmentType') }}
-            </b-dropdown-item>
-            <b-dropdown-item
-              :active="groupBy === 'class'"
-              @click="groupBy = 'class'"
-            >
-              {{ $t('class') }}
-            </b-dropdown-item>
-          </b-dropdown>
 
           <span class="divider"></span>
           <unequip-dropdown />
@@ -311,6 +310,7 @@ import Checkbox from '@/components/ui/checkbox';
 import UnequipDropdown from '@/components/inventory/equipment/unequipDropdown';
 import EquipBadge from '@/components/ui/equipBadge';
 import SelectTranslatedArray from '@/components/tasks/modal-controls/selectTranslatedArray';
+import SelectList from '@/components/ui/selectList';
 
 const sortGearTypes = ['sortByName', 'sortByCon', 'sortByPer', 'sortByStr', 'sortByInt'];
 
@@ -325,6 +325,7 @@ const sortGearTypeMap = {
 export default {
   name: 'Equipment',
   components: {
+    SelectList,
     SelectTranslatedArray,
     EquipBadge,
     UnequipDropdown,
@@ -344,6 +345,9 @@ export default {
       searchText: null,
       searchTextThrottled: null,
       costumeMode: false,
+      groupByItems: [
+        'type', 'class',
+      ],
       groupBy: 'type', // or 'class'
       gearTypesToStrings: Object.freeze({ // TODO use content.itemList?
         weapon: i18n.t('weaponCapitalized'),
@@ -575,6 +579,13 @@ export default {
         CONSTANTS.drawerStateValues.DRAWER_CLOSED,
       );
     },
+    groupByLabel (type) {
+      switch (type) {
+        case 'type': return i18n.t('equipmentType');
+        case 'class': return i18n.t('class');
+        default: return '';
+      }
+    },
   },
 };
 </script>

website/client/src/components/shops/quests/index.vue

@@ -122,19 +122,14 @@
       <div class="clearfix">
         <div class="float-right">
           <span class="dropdown-label">{{ $t('sortBy') }}</span>
-          <b-dropdown
+          <select-translated-array
-            :text="$t(selectedSortItemsBy)"
+              :right="true"
-            right="right"
+              :value="selectedSortItemsBy"
-          >
+              :items="sortItemsBy"
-            <b-dropdown-item
+              :inline-dropdown="false"
-              v-for="sort in sortItemsBy"
+              class="inline"
-              :key="sort"
+              @select="selectedSortItemsBy = $event"
-              :active="selectedSortItemsBy === sort"
+          />
-              @click="selectedSortItemsBy = sort"
-            >
-              {{ $t(sort) }}
-            </b-dropdown-item>
-          </b-dropdown>
         </div>
       </div>
       <!-- eslint-disable vue/no-use-v-if-with-v-for -->
@@ -474,10 +469,12 @@ import QuestInfo from './questInfo.vue';
 import shops from '@/../../common/script/libs/shops';
 
 import isPinned from '@/../../common/script/libs/isPinned';
+import SelectTranslatedArray from '@/components/tasks/modal-controls/selectTranslatedArray';
 
 
 export default {
   components: {
+    SelectTranslatedArray,
     ShopItem,
     Item,
     CountBadge,

website/client/src/components/shops/seasonal/index.vue

@@ -138,19 +138,14 @@
         </h2>
         <div class="float-right">
           <span class="dropdown-label">{{ $t('sortBy') }}</span>
-          <b-dropdown
+          <select-translated-array
-            :text="$t(selectedSortItemsBy)"
+            :right="true"
-            right="right"
+            :value="selectedSortItemsBy"
-          >
+            :items="sortItemsBy"
-            <b-dropdown-item
+            :inline-dropdown="false"
-              v-for="sort in sortItemsBy"
+            class="inline"
-              :key="sort"
+            @select="selectedSortItemsBy = $event"
-              :active="selectedSortItemsBy === sort"
+          />
-              @click="selectedSortItemsBy = sort"
-            >
-              {{ $t(sort) }}
-            </b-dropdown-item>
-          </b-dropdown>
         </div>
       </div>
       <div
@@ -394,9 +389,11 @@ import getOfficialPinnedItems from '@/../../common/script/libs/getOfficialPinned
 import i18n from '@/../../common/script/i18n';
 
 import shops from '@/../../common/script/libs/shops';
+import SelectTranslatedArray from '@/components/tasks/modal-controls/selectTranslatedArray';
 
 export default {
   components: {
+    SelectTranslatedArray,
     Checkbox,
     PinBadge,
     ShopItem,

website/client/src/components/shops/timeTravelers/index.vue

@@ -78,19 +78,15 @@
         class="clearfix"
       >
         <div class="float-right">
-          <span class="dropdown-label">{{ $t('sortBy') }}</span><b-dropdown
+          <span class="dropdown-label">{{ $t('sortBy') }}</span>
-            :text="$t(selectedSortItemsBy)"
+          <select-translated-array
-            right="right"
+              :right="true"
-          >
+              :value="selectedSortItemsBy"
-            <b-dropdown-item
+              :items="sortItemsBy"
-              v-for="sort in sortItemsBy"
+              :inline-dropdown="false"
-              :key="sort"
+              class="inline"
-              :active="selectedSortItemsBy === sort"
+              @select="selectedSortItemsBy = $event"
-              @click="selectedSortItemsBy = sort"
+          />
-            >
-              {{ $t(sort) }}
-            </b-dropdown-item>
-          </b-dropdown>
         </div>
       </div>
       <!-- eslint-disable vue/no-use-v-if-with-v-for -->
@@ -301,9 +297,11 @@ import isPinned from '@/../../common/script/libs/isPinned';
 import shops from '@/../../common/script/libs/shops';
 
 import pinUtils from '@/mixins/pinUtils';
+import SelectTranslatedArray from '@/components/tasks/modal-controls/selectTranslatedArray';
 
 export default {
   components: {
+    SelectTranslatedArray,
     ShopItem,
     Item,
     ItemRows,

website/client/src/components/ui/filterDropdown.vue

@@ -1,35 +1,31 @@
 <template>
   <span>
     <span class="dropdown-label">{{ label }}</span>
-    <b-dropdown right="right">
+    <select-list :items="items"
-      <span
+                 :value="selectedItem"
-        slot="button-content"
+                 class="array-select inline"
-        :class="{'dropdown-icon-item': withIcon}"
+                 :right="true"
-      >
+                 key-prop="id"
-        <slot
+                 :hide-icon="false"
-          name="item"
+                 :inline-dropdown="false"
-          :item="selectedItem"
+                 @select="selectItem($event)">
-        ></slot>
+      <template v-slot:item="{ item }">
-      </span>
-      <b-dropdown-item
-        v-for="item in items"
-        :key="item.id"
-        :active="selectedItem.id === item.id"
-        @click="selectItem(item)"
-      >
         <span :class="{'dropdown-icon-item': withIcon}">
            <slot
             name="item"
             :item="item"
           ></slot>
         </span>
-      </b-dropdown-item>
+      </template>
-    </b-dropdown>
+    </select-list>
   </span>
 </template>
 
 <script>
+import SelectList from '@/components/ui/selectList';
+
 export default {
+  components: { SelectList },
   props: {
     label: String,
     items: Array,