diff --git a/proto/ui.proto b/proto/ui.proto index b847b98c19..44d4e7970b 100644 --- a/proto/ui.proto +++ b/proto/ui.proto @@ -241,7 +241,7 @@ enum RaidFilterOption { RaidNaxxramas = 3456; } -// Next tag: 22 +// Next tag: 24 message DatabaseFilters { repeated ArmorType armor_types = 1; repeated WeaponType weapon_types = 2; @@ -249,6 +249,8 @@ message DatabaseFilters { repeated SourceFilterOption sources = 17; repeated RaidFilterOption raids = 18; UIItem.FactionRestriction faction_restriction = 19; + int32 min_ilvl = 22; + int32 max_ilvl = 23; double min_mh_weapon_speed = 4; double max_mh_weapon_speed = 5; diff --git a/ui/core/components/filters_menu.ts b/ui/core/components/gear_picker/filters_menu.tsx similarity index 83% rename from ui/core/components/filters_menu.ts rename to ui/core/components/gear_picker/filters_menu.tsx index 4745ee281f..1e26535398 100644 --- a/ui/core/components/filters_menu.ts +++ b/ui/core/components/gear_picker/filters_menu.tsx @@ -1,15 +1,15 @@ -import { Player } from '../player.js'; -import { ArmorType, ItemSlot } from '../proto/common.js'; -import { SourceFilterOption, UIItem_FactionRestriction } from '../proto/ui.js'; -import { armorTypeNames, rangedWeaponTypeNames, sourceNames, weaponTypeNames } from '../proto_utils/names.js'; -import { canDualWield, classToEligibleRangedWeaponTypes, classToEligibleWeaponTypes, classToMaxArmorType } from '../proto_utils/utils.js'; -import { Sim } from '../sim.js'; -import { EventID } from '../typed_event.js'; -import { getEnumValues } from '../utils.js'; -import { BaseModal } from './base_modal.js'; -import { BooleanPicker } from './boolean_picker.js'; -import { EnumPicker } from './enum_picker.js'; -import { NumberPicker } from './number_picker.js'; +import { Player } from '../../player.js'; +import { ArmorType, ItemSlot } from '../../proto/common.js'; +import { SourceFilterOption, UIItem_FactionRestriction } from '../../proto/ui.js'; +import { armorTypeNames, rangedWeaponTypeNames, sourceNames, weaponTypeNames } from '../../proto_utils/names.js'; +import { canDualWield, classToEligibleRangedWeaponTypes, classToEligibleWeaponTypes, classToMaxArmorType } from '../../proto_utils/utils.js'; +import { Sim } from '../../sim.js'; +import { EventID } from '../../typed_event.js'; +import { getEnumValues } from '../../utils.js'; +import { BaseModal } from '../base_modal.jsx'; +import { BooleanPicker } from '../boolean_picker.js'; +import { EnumPicker } from '../enum_picker.js'; +import { NumberPicker } from '../number_picker.js'; const factionRestrictionsToLabels: Record = { [UIItem_FactionRestriction.UNSPECIFIED]: 'None', @@ -21,11 +21,42 @@ export class FiltersMenu extends BaseModal { constructor(rootElem: HTMLElement, player: Player, slot: ItemSlot) { super(rootElem, 'filters-menu', { size: 'md', title: 'Filters' }); - let section = this.newSection('Factions'); + const generalSection = this.newSection('General'); - new EnumPicker(section, player.sim, { + const ilvlFiltersContainer = (
) as HTMLElement; + generalSection.appendChild(ilvlFiltersContainer); + + new NumberPicker(ilvlFiltersContainer, player.sim, { + id: 'filters-min-ilvl', + label: 'Min ILvl', + showZeroes: false, + changedEvent: sim => sim.filtersChangeEmitter, + getValue: (sim: Sim) => sim.getFilters().minIlvl, + setValue: (eventID: EventID, sim: Sim, newValue: number) => { + const newFilters = sim.getFilters(); + newFilters.minIlvl = newValue; + sim.setFilters(eventID, newFilters); + }, + }); + + ilvlFiltersContainer.appendChild(-); + + new NumberPicker(ilvlFiltersContainer, player.sim, { + id: 'filters-max-ilvl', + label: 'Max ILvl', + showZeroes: false, + changedEvent: sim => sim.filtersChangeEmitter, + getValue: (sim: Sim) => sim.getFilters().maxIlvl, + setValue: (eventID: EventID, sim: Sim, newValue: number) => { + const newFilters = sim.getFilters(); + newFilters.maxIlvl = newValue; + sim.setFilters(eventID, newFilters); + }, + }); + + new EnumPicker(generalSection, player.sim, { id: 'filters-faction-restriction', - extraCssClasses: ['w-50'], + label: 'Faction Restrictions', values: [UIItem_FactionRestriction.UNSPECIFIED, UIItem_FactionRestriction.ALLIANCE_ONLY, UIItem_FactionRestriction.HORDE_ONLY].map(restriction => { return { name: factionRestrictionsToLabels[restriction], @@ -41,11 +72,11 @@ export class FiltersMenu extends BaseModal { }, }); - section = this.newSection('Source'); - section.classList.add('filters-menu-section-bool-list'); + const sourceSection = this.newSection('Source'); + sourceSection.classList.add('filters-menu-section-bool-list'); const sources = Sim.ALL_SOURCES.filter(s => s != SourceFilterOption.SourceUnknown); sources.forEach(source => { - new BooleanPicker(section, player.sim, { + new BooleanPicker(sourceSection, player.sim, { id: `filters-source-${source}`, label: sourceNames.get(source), inline: true, diff --git a/ui/core/components/gear_picker/gear_picker.tsx b/ui/core/components/gear_picker/gear_picker.tsx index 2804b3db9e..3e861b8028 100644 --- a/ui/core/components/gear_picker/gear_picker.tsx +++ b/ui/core/components/gear_picker/gear_picker.tsx @@ -66,6 +66,7 @@ export class ItemRenderer extends Component { readonly iconElem: HTMLAnchorElement; readonly nameElem: HTMLAnchorElement; + readonly ilvlElem: HTMLSpanElement; readonly enchantElem: HTMLAnchorElement; readonly runeElem: HTMLAnchorElement; @@ -75,12 +76,14 @@ export class ItemRenderer extends Component { const iconElem = ref(); const nameElem = ref(); + const ilvlElem = ref(); const enchantElem = ref(); const runeElem = ref(); const sce = ref(); this.rootElem.appendChild( <>
+
@@ -94,6 +97,7 @@ export class ItemRenderer extends Component { this.iconElem = iconElem.value!; this.nameElem = nameElem.value!; + this.ilvlElem = ilvlElem.value!; this.enchantElem = enchantElem.value!; this.runeElem = runeElem.value!; } @@ -111,6 +115,7 @@ export class ItemRenderer extends Component { this.runeElem.classList.add('hide'); this.iconElem.style.backgroundImage = ''; + this.nameElem.innerText = ''; this.enchantElem.innerText = ''; this.runeElem.innerText = ''; @@ -118,6 +123,7 @@ export class ItemRenderer extends Component { update(newItem: EquippedItem) { this.nameElem.textContent = newItem.item.name; + this.ilvlElem.textContent = newItem.item.ilvl.toString(); if (newItem.randomSuffix) { this.nameElem.textContent += ' ' + newItem.randomSuffix.name; diff --git a/ui/core/components/gear_picker/item_list.tsx b/ui/core/components/gear_picker/item_list.tsx index b544e8fb94..04db27ea4f 100644 --- a/ui/core/components/gear_picker/item_list.tsx +++ b/ui/core/components/gear_picker/item_list.tsx @@ -18,10 +18,10 @@ import { Sim } from '../../sim'; import { SimUI } from '../../sim_ui'; import { EventID, TypedEvent } from '../../typed_event'; import { formatDeltaTextElem } from '../../utils'; -import { FiltersMenu } from '../filters_menu'; import { makeShow1hWeaponsSelector, makeShow2hWeaponsSelector, makeShowEPValuesSelector } from '../other_inputs'; import Toast from '../toast'; import { Clusterize } from '../virtual_scroll/clusterize'; +import { FiltersMenu } from './filters_menu'; import { SelectorModalTabs } from './selector_modal'; export interface ItemData { diff --git a/ui/scss/core/components/_gear_picker.scss b/ui/scss/core/components/_gear_picker.scss deleted file mode 100644 index 4ae483cab7..0000000000 --- a/ui/scss/core/components/_gear_picker.scss +++ /dev/null @@ -1,377 +0,0 @@ -@import './filters_menu'; -:root { - --ilvl-cell-width: 3rem; - --source-cell-width: 16rem; - --ep-cell-width: 4rem; - --icon-cell-width: 2rem; -} - -.gear-picker-root { - &:not(.gear-picker-root-bulk) { - display: grid; - gap: var(--section-spacer); - grid-template-columns: 1fr 1fr; - - @include media-breakpoint-down(sm) { - grid-template-columns: 1fr; - } - } - - .gear-picker-left { - .item-picker-root { - flex-direction: row; - text-align: left; - - // Add space to separate weapon categories - &:nth-child(6) { - margin-bottom: calc(var(--spacer-3) * 2); - } - } - } - - .gear-picker-right { - .item-picker-root { - flex-direction: row-reverse; - @include media-breakpoint-down(md) { - flex-direction: row; - } - - .item-picker-labels-container { - align-items: flex-end; - text-align: right; - @include media-breakpoint-down(md) { - align-items: flex-start; - } - } - } - } -} - -.item-picker-root { - display: flex; - - &:not(:last-child) { - margin-bottom: var(--block-spacer); - } - - .item-picker-labels-container { - padding: var(--spacer-2); - padding-bottom: 0; - flex: 1; - display: flex; - flex-direction: column; - align-items: flex-start; - - .item-picker-name, - .item-picker-enchant, - .item-picker-rune { - letter-spacing: normal; - - .gear-picker-right & { - text-align: right; - @include media-breakpoint-down(md) { - text-align: left; - } - } - } - - .item-picker-name { - color: var(--bs-white); - font-size: var(--h6-font-size); - } - .item-picker-enchant { - color: var(--bs-uncommon); - font-size: var(--content-font-size); - } - .item-picker-rune { - color: var(--bs-brand); - font-size: var(--content-font-size); - } - } - - .item-picker-rune-container { - @include vertical-top; - @include horizontal-right; - display: flex; - justify-content: center; - - .item-picker-rune-icon { - width: 1.75rem; - height: 1.75rem; - } - } -} - -.item-picker-icon-wrapper { - position: relative; - width: 4rem; - height: 4rem; - border: var(--border-default); - - @include media-breakpoint-down(lg) { - width: 3rem; - height: 3rem; - } -} - -.item-picker-icon { - @include wowhead-background-icon; - height: 100%; - width: 100%; - - .item-picker-labels-container { - align-items: flex-start; - text-align: left; - } -} - -.gear-picker-modal-slots { - // Without this the slots are not clickable - pointer-events: auto; - display: flex; - flex-direction: column; - align-items: flex-end; - margin-right: -1px; - z-index: 1; - @include media-breakpoint-down(sm) { - display: none; - } - - .item-picker-icon-wrapper { - width: var(--icon-size-md); - height: var(--icon-size-md); - border-color: var(--bs-modal-border-color); - - &.active { - width: calc(var(--icon-size-md) + var(--spacer-2)); - height: calc(var(--icon-size-md) + var(--spacer-2)); - border-width: 2px; - border-right: 0; - } - - &:nth-child(6), - &:nth-child(14) { - // Spacing between ragdoll sections - margin-bottom: var(--spacer-3); - } - - &:not(:first-child) { - margin-top: -1px; - } - } -} - -.selector-modal { - .selector-modal-title { - margin-bottom: 0; - } - - .modal-header { - padding-bottom: 0; - - .selector-modal-tabs { - border-bottom: 0; - } - } -} - -.selector-modal-tab-content { - .selector-modal-tab-pane { - padding: 0; - - .selector-modal-filters { - margin-bottom: var(--bs-modal-padding); - display: flex; - align-items: center; - - & > *:not(:last-child) { - margin-right: var(--spacer-2); - } - - input, - select { - padding-top: var(--btn-padding-y); - padding-bottom: var(--btn-padding-y); - font-size: var(--btn-font-size); - } - } - } -} - -.selector-modal-search { - max-width: 12rem; -} - -.selector-modal-phase-selector { - min-width: 7rem; - - .phase-selector { - margin-bottom: 0; - } -} - -.selector-modal-remove-button { - margin-left: auto; -} - -.selector-modal-list-labels { - display: flex; - padding-right: var(--spacer-2); - margin-right: var(--spacer-3); - margin-bottom: var(--spacer-2); - font-size: 1.125rem; - justify-content: space-between; // Ensures labels are evenly spaced - gap: var(--spacer-3); - - @include media-breakpoint-down(xl) { - margin-right: 0; - } - - .item-label { - flex: 1; - margin-right: var(--spacer-2); - } - .ilvl-label { - width: var(--ilvl-cell-width); - } - .source-label { - width: var(--source-cell-width); - } - .ep-label { - width: var(--ep-cell-width); - display: flex; - align-items: center; - float: right; - } - - .favorite-label, - .compare-label { - width: var(--icon-cell-width); - } -} - -.selector-modal-list { - width: 100%; - height: 65vh; - overflow-y: scroll; - overflow-x: hidden; - padding: 0; - margin-bottom: 0; - - &.hide-ep { - .selector-modal-list-item-ep { - display: none; - } - } -} - -// TODO: Move all of these to a shared file, as they're used in other places too -.selector-modal-list-item { - padding: var(--spacer-2); - display: flex; - align-items: center; - background-color: var(--bs-gray-900); - gap: var(--spacer-3); - - &:nth-child(2n) { - background: var(--bs-table-row-even-bg); - } - - &:nth-child(2n + 1) { - background: var(--bs-table-row-odd-bg); - } - - &:hover { - background: var(--bs-gray-800); - } - - &.active { - .selector-modal-list-item-icon { - outline: 2px solid var(--bs-success); - } - } - .selector-modal-list-item-link { - display: flex; - align-items: center; - } - - .selector-modal-list-label-cell { - flex: 1; - display: flex; - align-items: center; - } - - .selector-modal-list-item-icon { - @include wowhead-background-icon; - width: 3rem; - height: 3rem; - border: var(--border-default); - } - - .selector-modal-list-item-name { - font-size: 1.125rem; - margin-left: var(--spacer-2); - letter-spacing: normal; - font-weight: normal; - cursor: pointer; - } -} - -.selector-modal-list-item-ilvl-container { - width: var(--ilvl-cell-width); -} - -.selector-modal-list-item-source-container { - width: var(--source-cell-width); -} - -.selector-modal-list-item-favorite, -.selector-modal-list-item-compare { - width: var(--icon-cell-width); -} - -.selector-modal-list-item-ep { - width: var(--ep-cell-width); - display: flex; - align-items: center; - - & > span { - display: inline-block; - color: var(--bs-white); - text-align: right; - } - - .selector-modal-list-item-ep-delta { - margin-left: var(--spacer-1); - font-size: 0.8rem; - } -} - -// All of these icon widths are the original image sizes. They're too small that scaling them up looks horrible. -.item-source-icon-drop { - // Original image is 12 x 16 but for nice alignment add 2px padding for a total width of 16px - width: 16px; - height: 16px; - padding: 0 2px; -} - -.item-source-icon-vendor { - width: 16px; - height: 16px; -} - -.item-source-icon-profession { - width: 16px; - height: 16px; -} - -.item-source-icon-quest { - width: 16px; - height: 16px; -} - -.item-source-icon-alliance, -.item-source-icon-horde { - width: 15px; - height: 15px; -} diff --git a/ui/scss/core/components/gear_picker/_filters_menu.scss b/ui/scss/core/components/gear_picker/_filters_menu.scss new file mode 100644 index 0000000000..9e0b1acdbe --- /dev/null +++ b/ui/scss/core/components/gear_picker/_filters_menu.scss @@ -0,0 +1,38 @@ +.filters-menu { + .menu-section { + display: flex; + @include media-breakpoint-down(sm) { + display: block; + } + + &:not(:last-child) { + margin-bottom: var(--spacer-3); + } + + .menu-section-header { + flex: 1; + } + + .menu-section-content { + flex: 3; + + .ilvl-filters { + display: grid; + grid-template-columns: 1fr 0 1fr; + grid-column-gap: var(--bs-modal-padding); + + .ilvl-filters-separator { + display: flex; + align-items: center; + justify-content: center; + } + } + + &[class*='filters-menu-section-'] { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: var(--bs-modal-padding); + } + } + } +} diff --git a/ui/scss/core/components/gear_picker/_gear_picker.scss b/ui/scss/core/components/gear_picker/_gear_picker.scss new file mode 100644 index 0000000000..3476cf1a72 --- /dev/null +++ b/ui/scss/core/components/gear_picker/_gear_picker.scss @@ -0,0 +1,163 @@ +.gear-picker-root { + &:not(.gear-picker-root-bulk) { + display: grid; + gap: var(--section-spacer); + grid-template-columns: 1fr 1fr; + + @include media-breakpoint-down(sm) { + grid-template-columns: 1fr; + } + } + + .gear-picker-left { + .item-picker-root { + flex-direction: row; + text-align: left; + + // Add space to separate weapon categories + &:nth-child(6) { + margin-bottom: calc(var(--spacer-3) * 2); + } + } + } + + .gear-picker-right { + .item-picker-root { + flex-direction: row-reverse; + @include media-breakpoint-down(md) { + flex-direction: row; + } + + .item-picker-labels-container { + align-items: flex-end; + text-align: right; + @include media-breakpoint-down(md) { + align-items: flex-start; + } + } + } + } +} + +.item-picker-root { + display: flex; + + &:not(:last-child) { + margin-bottom: var(--block-spacer); + } + + .item-picker-ilvl { + position: absolute; + padding-left: 1px; + background: var(--bs-black-alpha-50); + font-size: var(--content-font-size); + z-index: 1; + pointer-events: none; + } + + .item-picker-labels-container { + padding: var(--spacer-2); + padding-bottom: 0; + flex: 1; + display: flex; + flex-direction: column; + align-items: flex-start; + + .item-picker-name, + .item-picker-enchant, + .item-picker-rune { + letter-spacing: normal; + + .gear-picker-right & { + text-align: right; + @include media-breakpoint-down(md) { + text-align: left; + } + } + } + + .item-picker-name { + color: var(--bs-white); + font-size: var(--h6-font-size); + } + .item-picker-enchant { + color: var(--bs-uncommon); + font-size: var(--content-font-size); + } + .item-picker-rune { + color: var(--bs-brand); + font-size: var(--content-font-size); + } + } + + .item-picker-rune-container { + @include vertical-top; + @include horizontal-right; + display: flex; + justify-content: center; + + .item-picker-rune-icon { + width: 1.75rem; + height: 1.75rem; + } + } +} + +.item-picker-icon-wrapper { + position: relative; + width: 4rem; + height: 4rem; + border: var(--border-default); + + @include media-breakpoint-down(lg) { + width: 3rem; + height: 3rem; + } +} + +.item-picker-icon { + @include wowhead-background-icon; + height: 100%; + width: 100%; + + .item-picker-labels-container { + align-items: flex-start; + text-align: left; + } +} + +.gear-picker-modal-slots { + // Without this the slots are not clickable + pointer-events: auto; + display: flex; + flex-direction: column; + align-items: flex-end; + margin-right: -1px; + z-index: 1; + @include media-breakpoint-down(sm) { + display: none; + } + + .item-picker-icon-wrapper { + width: var(--icon-size-md); + height: var(--icon-size-md); + border-color: var(--bs-modal-border-color); + + &.active { + width: calc(var(--icon-size-md) + var(--spacer-2)); + height: calc(var(--icon-size-md) + var(--spacer-2)); + border-width: 2px; + border-right: 0; + } + + &:nth-child(6), + &:nth-child(14) { + // Spacing between ragdoll sections + margin-bottom: var(--spacer-3); + } + + &:not(:first-child) { + margin-top: -1px; + } + } +} diff --git a/ui/scss/core/components/gear_picker/_item_list.scss b/ui/scss/core/components/gear_picker/_item_list.scss new file mode 100644 index 0000000000..4847e48e32 --- /dev/null +++ b/ui/scss/core/components/gear_picker/_item_list.scss @@ -0,0 +1,183 @@ +:root { + --ilvl-cell-width: 3rem; + --source-cell-width: 16rem; + --ep-cell-width: 4rem; + --icon-cell-width: 2rem; +} + +.selector-modal-search { + max-width: 12rem; +} + +.selector-modal-phase-selector { + min-width: 7rem; + + .phase-selector { + margin-bottom: 0; + } +} + +.selector-modal-remove-button { + margin-left: auto; +} + +.selector-modal-list-labels { + display: flex; + padding-right: var(--spacer-2); + margin-right: var(--spacer-3); + margin-bottom: var(--spacer-2); + font-size: 1.125rem; + justify-content: space-between; // Ensures labels are evenly spaced + gap: var(--spacer-3); + + @include media-breakpoint-down(xl) { + margin-right: 0; + } + + .item-label { + flex: 1; + margin-right: var(--spacer-2); + } + .ilvl-label { + width: var(--ilvl-cell-width); + } + .source-label { + width: var(--source-cell-width); + } + .ep-label { + width: var(--ep-cell-width); + display: flex; + align-items: center; + float: right; + } + + .favorite-label, + .compare-label { + width: var(--icon-cell-width); + } +} + +.selector-modal-list { + width: 100%; + height: 65vh; + overflow-y: scroll; + overflow-x: hidden; + padding: 0; + margin-bottom: 0; + + &.hide-ep { + .selector-modal-list-item-ep { + display: none; + } + } +} + +.selector-modal-list-item { + padding: var(--spacer-2); + display: flex; + align-items: center; + background-color: var(--bs-gray-900); + gap: var(--spacer-3); + + &:nth-child(2n) { + background: var(--bs-table-row-even-bg); + } + + &:nth-child(2n + 1) { + background: var(--bs-table-row-odd-bg); + } + + &:hover { + background: var(--bs-gray-800); + } + + &.active { + .selector-modal-list-item-icon { + outline: 2px solid var(--bs-success); + } + } + .selector-modal-list-item-link { + display: flex; + align-items: center; + } + + .selector-modal-list-label-cell { + flex: 1; + display: flex; + align-items: center; + } + + .selector-modal-list-item-icon { + @include wowhead-background-icon; + width: 3rem; + height: 3rem; + border: var(--border-default); + } + + .selector-modal-list-item-name { + font-size: 1.125rem; + margin-left: var(--spacer-2); + letter-spacing: normal; + font-weight: normal; + cursor: pointer; + } +} + +.selector-modal-list-item-ilvl-container { + width: var(--ilvl-cell-width); +} + +.selector-modal-list-item-source-container { + width: var(--source-cell-width); +} + +.selector-modal-list-item-favorite, +.selector-modal-list-item-compare { + width: var(--icon-cell-width); +} + +.selector-modal-list-item-ep { + width: var(--ep-cell-width); + display: flex; + align-items: center; + + & > span { + display: inline-block; + color: var(--bs-white); + text-align: right; + } + + .selector-modal-list-item-ep-delta { + margin-left: var(--spacer-1); + font-size: 0.8rem; + } +} + +// All of these icon widths are the original image sizes. They're too small that scaling them up looks horrible. +.item-source-icon-drop { + // Original image is 12 x 16 but for nice alignment add 2px padding for a total width of 16px + width: 16px; + height: 16px; + padding: 0 2px; +} + +.item-source-icon-vendor { + width: 16px; + height: 16px; +} + +.item-source-icon-profession { + width: 16px; + height: 16px; +} + +.item-source-icon-quest { + width: 16px; + height: 16px; +} + +.item-source-icon-alliance, +.item-source-icon-horde { + width: 15px; + height: 15px; +} diff --git a/ui/scss/core/components/gear_picker/_selector_modal.scss b/ui/scss/core/components/gear_picker/_selector_modal.scss new file mode 100644 index 0000000000..0a83ee289e --- /dev/null +++ b/ui/scss/core/components/gear_picker/_selector_modal.scss @@ -0,0 +1,36 @@ +.selector-modal { + .selector-modal-title { + margin-bottom: 0; + } + + .modal-header { + padding-bottom: 0; + + .selector-modal-tabs { + border-bottom: 0; + } + } +} + +.selector-modal-tab-content { + .selector-modal-tab-pane { + padding: 0; + + .selector-modal-filters { + margin-bottom: var(--bs-modal-padding); + display: flex; + align-items: center; + + & > *:not(:last-child) { + margin-right: var(--spacer-2); + } + + input, + select { + padding-top: var(--btn-padding-y); + padding-bottom: var(--btn-padding-y); + font-size: var(--btn-font-size); + } + } + } +} diff --git a/ui/scss/core/components/gear_picker/index.scss b/ui/scss/core/components/gear_picker/index.scss new file mode 100644 index 0000000000..f5a0fb0886 --- /dev/null +++ b/ui/scss/core/components/gear_picker/index.scss @@ -0,0 +1,4 @@ +@import './filters_menu'; +@import './gear_picker'; +@import './item_list'; +@import './selector_modal'; diff --git a/ui/scss/core/components/individual_sim_ui/_gear_tab.scss b/ui/scss/core/components/individual_sim_ui/_gear_tab.scss new file mode 100644 index 0000000000..8a2a6c14f6 --- /dev/null +++ b/ui/scss/core/components/individual_sim_ui/_gear_tab.scss @@ -0,0 +1,7 @@ +#gear-tab { + .tab-pane-content-container { + .gear-tab-left { + grid-template-columns: auto; + } + } +} diff --git a/ui/scss/core/individual_sim_ui/index.scss b/ui/scss/core/individual_sim_ui/index.scss index b22f930093..65a429f9c4 100644 --- a/ui/scss/core/individual_sim_ui/index.scss +++ b/ui/scss/core/individual_sim_ui/index.scss @@ -26,6 +26,7 @@ @import '../components/stat_weights_action'; @import '../components/unit_picker'; +@import '../components/individual_sim_ui/gear_tab'; @import '../components/individual_sim_ui/bulk_tab'; @import '../components/individual_sim_ui/settings_tab'; @import '../components/individual_sim_ui/rotation_tab'; diff --git a/ui/scss/shared/_variables.scss b/ui/scss/shared/_variables.scss index 872db976df..2220706562 100644 --- a/ui/scss/shared/_variables.scss +++ b/ui/scss/shared/_variables.scss @@ -9,9 +9,11 @@ ////////////////////////// // Custom theme color mapping +$expansion: #f94119; $brand: #e0a335; $success: #1eff00; +$death-knight: rgb(194, 46, 70); $druid: rgb(255, 125, 10); $hunter: rgb(171, 212, 115); $mage: rgb(105, 204, 240); @@ -23,23 +25,35 @@ $warlock: rgb(148, 130, 201); $warrior: rgb(199, 156, 110); $class-colors: ( - 'druid': $druid, - 'hunter': $hunter, - 'mage': $mage, - 'paladin': $paladin, - 'priest': $priest, - 'raid': $brand, - 'rogue': $rogue, - 'shaman': $shaman, - 'warlock': $warlock, - 'warrior': $warrior, + death-knight: $death-knight, + druid: $druid, + hunter: $hunter, + mage: $mage, + paladin: $paladin, + priest: $priest, + raid: $brand, + rogue: $rogue, + shaman: $shaman, + warlock: $warlock, + warrior: $warrior, ); +$theme-colors: map-merge($theme-colors, $class-colors); $custom-colors: ( - 'brand': $brand, - 'primary': $primary, - 'success': $success, + expansion: $expansion, + brand: $brand, + primary: $primary, + success: $success, + off-white: #f0f0f0, +); +$theme-colors: map-merge($theme-colors, $custom-colors); + +$custom-alpha: ( + black-alpha-30: rgba($black, 0.3), + black-alpha-50: rgba($black, 0.5), + gray-800-alpha-50: rgba($gray-800, 0.5), ); +$theme-colors: map-merge($theme-colors, $custom-alpha); $custom-breakpoints: ( xxxl: 1600px, @@ -276,7 +290,7 @@ $form-check-input-focus-border: $input-focus-border-color; $form-check-input-focus-box-shadow: 0 0 0.25rem $primary; $form-check-input-checked-bg-color: $primary; $form-check-input-checked-bg-image: url("data:image/svg+xml,"); -$form-check-input-checked-border-color: $primary; +$form-check-input-checked-border-color: var(--bs-primary); $form-check-padding-start: $form-check-input-width; $form-label-margin-bottom: 0.25rem;