From 8d3dc3a16e462eaac653b61b9881c352c179f959 Mon Sep 17 00:00:00 2001 From: Kayla Glick Date: Thu, 26 Jan 2023 23:12:58 -0500 Subject: [PATCH 1/5] temp --- ui/core/components/base_modal.ts | 7 +- ui/core/components/boolean_picker.ts | 5 +- ui/core/components/detailed_results.ts | 37 ++---- .../detailed_results/color_settings.ts | 4 - .../detailed_results/result_component.ts | 6 - .../components/detailed_results/timeline.ts | 2 +- ui/core/components/encounter_picker.ts | 6 +- ui/core/components/exporters.ts | 4 +- ui/core/components/gear_picker.ts | 11 +- ui/core/components/importers.ts | 4 +- ui/core/components/item_swap_picker.ts | 4 +- ui/core/components/list_picker.ts | 2 +- ui/core/components/log_runner.ts | 2 +- ui/core/components/popup.ts | 6 - ui/core/components/saved_data_manager.ts | 4 +- ui/core/components/settings_menu.ts | 2 +- ui/core/components/sim_title_dropdown.ts | 2 +- ui/core/components/stat_weights_action.ts | 4 +- ui/core/individual_sim_ui.ts | 3 +- ui/core/sim_ui.ts | 10 +- ui/detailed_results/index.ts | 11 +- ui/raid/raid_picker.ts | 2 +- ui/raid/raid_sim_ui.ts | 2 +- .../core/components/_detailed_results.scss | 1 - ui/scss/core/components/_gear_picker.scss | 4 +- ui/scss/core/components/_icon_picker.scss | 1 + ui/scss/core/components/_list_picker.scss | 2 +- ui/scss/core/components/_popup.scss | 2 +- .../core/components/_saved_data_manager.scss | 10 ++ ui/scss/core/components/_sim_tab.scss | 2 +- .../core/components/_sim_title_dropdown.scss | 1 + .../detailed_results/_timeline.scss | 4 - ui/scss/core/individual_sim_ui/_shared.scss | 125 +----------------- ui/scss/core/sim_ui/_header.scss | 1 - ui/scss/core/sim_ui/_main.scss | 3 - ui/scss/core/sim_ui/_shared.scss | 14 +- ui/scss/core/sim_ui/_sidebar.scss | 7 +- ui/scss/homepage/_homepage.scss | 1 - ui/scss/index.scss | 9 +- .../_bootstrap_style_overrides.scss} | 40 +++--- ui/scss/{global.scss => shared/_global.scss} | 39 +++++- .../_global_old.scss} | 12 +- ui/scss/shared/_mixins.scss | 47 +++++++ ui/scss/shared/_sim_links.scss | 4 +- .../_variables.scss} | 28 ++-- ui/scss/sims/balance_druid/_sim.scss | 12 +- ui/scss/sims/balance_druid/index.scss | 2 +- ui/scss/sims/deathknight/_sim.scss | 12 +- ui/scss/sims/deathknight/index.scss | 2 +- ui/scss/sims/detailed_results/index.scss | 11 +- ui/scss/sims/elemental_shaman/_sim.scss | 12 +- ui/scss/sims/elemental_shaman/index.scss | 2 +- ui/scss/sims/enhancement_shaman/_sim.scss | 12 +- ui/scss/sims/enhancement_shaman/index.scss | 2 +- ui/scss/sims/feral_druid/_sim.scss | 11 +- ui/scss/sims/feral_druid/index.scss | 2 +- ui/scss/sims/feral_tank_druid/_sim.scss | 11 +- ui/scss/sims/feral_tank_druid/index.scss | 2 +- ui/scss/sims/healing_priest/_sim.scss | 12 +- ui/scss/sims/healing_priest/index.scss | 2 +- ui/scss/sims/holy_paladin/_sim.scss | 12 +- ui/scss/sims/holy_paladin/index.scss | 2 +- ui/scss/sims/hunter/_sim.scss | 12 +- ui/scss/sims/hunter/index.scss | 2 +- ui/scss/sims/mage/_sim.scss | 12 +- ui/scss/sims/mage/index.scss | 2 +- ui/scss/sims/protection_paladin/_sim.scss | 12 +- ui/scss/sims/protection_paladin/index.scss | 2 +- ui/scss/sims/protection_warrior/_sim.scss | 12 +- ui/scss/sims/protection_warrior/index.scss | 2 +- ui/scss/sims/raid/_sim.scss | 10 +- ui/scss/sims/raid/index.scss | 2 +- ui/scss/sims/restoration_druid/_sim.scss | 12 +- ui/scss/sims/restoration_druid/index.scss | 2 +- ui/scss/sims/restoration_shaman/_sim.scss | 12 +- ui/scss/sims/restoration_shaman/index.scss | 2 +- ui/scss/sims/retribution_paladin/_sim.scss | 12 +- ui/scss/sims/retribution_paladin/index.scss | 2 +- ui/scss/sims/rogue/_sim.scss | 12 +- ui/scss/sims/rogue/index.scss | 2 +- ui/scss/sims/shadow_priest/_sim.scss | 12 +- ui/scss/sims/shadow_priest/index.scss | 2 +- ui/scss/sims/smite_priest/_sim.scss | 12 +- ui/scss/sims/smite_priest/index.scss | 2 +- ui/scss/sims/tank_deathknight/_sim.scss | 12 +- ui/scss/sims/tank_deathknight/index.scss | 2 +- ui/scss/sims/warlock/_sim.scss | 12 +- ui/scss/sims/warlock/index.scss | 2 +- ui/scss/sims/warrior/_sim.scss | 12 +- ui/scss/sims/warrior/index.scss | 2 +- 90 files changed, 350 insertions(+), 462 deletions(-) rename ui/scss/{bootstrap_style_overrides.scss => shared/_bootstrap_style_overrides.scss} (76%) rename ui/scss/{global.scss => shared/_global.scss} (53%) rename ui/scss/{global_old.scss => shared/_global_old.scss} (94%) create mode 100644 ui/scss/shared/_mixins.scss rename ui/scss/{variables.scss => shared/_variables.scss} (93%) diff --git a/ui/core/components/base_modal.ts b/ui/core/components/base_modal.ts index 46e8b07e6d..52deee2c6b 100644 --- a/ui/core/components/base_modal.ts +++ b/ui/core/components/base_modal.ts @@ -20,8 +20,8 @@ export class BaseModal extends Component { readonly header: HTMLElement | undefined; readonly body: HTMLElement; - constructor(cssClass: string, config: BaseModalConfig = {}) { - super(document.body, 'modal'); + constructor(parent: HTMLElement, cssClass: string, config: BaseModalConfig = {}) { + super(parent, 'modal'); this.config = {...DEFAULT_CONFIG, ...config}; this.rootElem.classList.add('fade'); @@ -69,7 +69,8 @@ export class BaseModal extends Component { this.rootElem.addEventListener('hide.bs.modal', () => { const modals = this.rootElem.parentElement?.querySelectorAll('.modal') as NodeListOf; const siblingModals = Array.from(modals).filter((e) => e != this.rootElem); - siblingModals[siblingModals.length - 1].style.zIndex = '1055'; + const modalIndex = siblingModals.length - 1 < 0 ? 0 : siblingModals.length - 1; + siblingModals[modalIndex].style.zIndex = '1055'; }); this.modal.show(); diff --git a/ui/core/components/boolean_picker.ts b/ui/core/components/boolean_picker.ts index ba965e8c6b..f83e806f87 100644 --- a/ui/core/components/boolean_picker.ts +++ b/ui/core/components/boolean_picker.ts @@ -16,10 +16,7 @@ export class BooleanPicker extends Input { constructor(parent: HTMLElement, modObject: ModObject, config: BooleanPickerConfig) { super(parent, 'boolean-picker-root', modObject, config); - this.rootElem.classList.add( - config.cssScheme ? `form-check-${config.cssScheme}` : 'form-check', - 'form-check-reverse' - ); + this.rootElem.classList.add('form-check', 'form-check-reverse'); this.inputElem = document.createElement('input'); this.inputElem.type = 'checkbox'; diff --git a/ui/core/components/detailed_results.ts b/ui/core/components/detailed_results.ts index d08ecde68f..d4d340d1fc 100644 --- a/ui/core/components/detailed_results.ts +++ b/ui/core/components/detailed_results.ts @@ -210,49 +210,39 @@ export abstract class DetailedResults extends Component { this.simUI?.sim.settingsChangeEmitter.on(async () => await this.updateSettings()); - const computedStyles = window.getComputedStyle(this.rootElem); - - const colorSettings = { - mainTextColor: computedStyles.getPropertyValue('--main-text-color'), - }; - - Chart.defaults.color = colorSettings.mainTextColor; + Chart.defaults.color = 'white'; this.resultsFilter = new ResultsFilter({ parent: this.rootElem.getElementsByClassName('results-filter')[0] as HTMLElement, resultsEmitter: this.resultsEmitter, - colorSettings: colorSettings, }); (Array.from(this.rootElem.getElementsByClassName('topline-results')) as Array).forEach(toplineResultsDiv => { - new ToplineResults({ parent: toplineResultsDiv, resultsEmitter: this.resultsEmitter, colorSettings: colorSettings }); + new ToplineResults({ parent: toplineResultsDiv, resultsEmitter: this.resultsEmitter }); }); - const castMetrics = new CastMetricsTable({ parent: this.rootElem.getElementsByClassName('cast-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter, colorSettings: colorSettings }); - const meleeMetrics = new MeleeMetricsTable({ parent: this.rootElem.getElementsByClassName('melee-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter, colorSettings: colorSettings }); - const spellMetrics = new SpellMetricsTable({ parent: this.rootElem.getElementsByClassName('spell-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter, colorSettings: colorSettings }); - const healingMetrics = new HealingMetricsTable({ parent: this.rootElem.getElementsByClassName('healing-spell-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter, colorSettings: colorSettings }); - const resourceMetrics = new ResourceMetricsTable({ parent: this.rootElem.getElementsByClassName('resource-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter, colorSettings: colorSettings }); - const playerDamageMetrics = new PlayerDamageMetricsTable({ parent: this.rootElem.getElementsByClassName('player-damage-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter, colorSettings: colorSettings }, this.resultsFilter); + const castMetrics = new CastMetricsTable({ parent: this.rootElem.getElementsByClassName('cast-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter }); + const meleeMetrics = new MeleeMetricsTable({ parent: this.rootElem.getElementsByClassName('melee-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter }); + const spellMetrics = new SpellMetricsTable({ parent: this.rootElem.getElementsByClassName('spell-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter }); + const healingMetrics = new HealingMetricsTable({ parent: this.rootElem.getElementsByClassName('healing-spell-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter }); + const resourceMetrics = new ResourceMetricsTable({ parent: this.rootElem.getElementsByClassName('resource-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter }); + const playerDamageMetrics = new PlayerDamageMetricsTable({ parent: this.rootElem.getElementsByClassName('player-damage-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter }, this.resultsFilter); const buffAuraMetrics = new AuraMetricsTable({ parent: this.rootElem.getElementsByClassName('buff-aura-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter, - colorSettings: colorSettings, }, false); const debuffAuraMetrics = new AuraMetricsTable({ parent: this.rootElem.getElementsByClassName('debuff-aura-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter, - colorSettings: colorSettings, }, true); - const dpsHistogram = new DpsHistogram({ parent: this.rootElem.getElementsByClassName('dps-histogram')[0] as HTMLElement, resultsEmitter: this.resultsEmitter, colorSettings: colorSettings }); + const dpsHistogram = new DpsHistogram({ parent: this.rootElem.getElementsByClassName('dps-histogram')[0] as HTMLElement, resultsEmitter: this.resultsEmitter }); - const dtpsMeleeMetrics = new DtpsMeleeMetricsTable({ parent: this.rootElem.getElementsByClassName('dtps-melee-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter, colorSettings: colorSettings }); + const dtpsMeleeMetrics = new DtpsMeleeMetricsTable({ parent: this.rootElem.getElementsByClassName('dtps-melee-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter }); const timeline = new Timeline({ parent: this.rootElem.getElementsByClassName('timeline')[0] as HTMLElement, cssScheme: cssScheme, resultsEmitter: this.resultsEmitter, - colorSettings: colorSettings, }); document.getElementById('timelineTabTab')?.addEventListener('click', event => timeline.render()); @@ -374,7 +364,7 @@ export class EmbeddedDetailedResults extends DetailedResults { const newTabBtn = document.createElement('div'); newTabBtn.classList.add('detailed-results-controls-div'); - newTabBtn.innerHTML = ``; + newTabBtn.innerHTML = ``; this.rootElem.prepend(newTabBtn); @@ -382,11 +372,10 @@ export class EmbeddedDetailedResults extends DetailedResults { const url = new URL(`${window.location.protocol}//${window.location.host}/${REPO_NAME}/detailed_results/index.html`); url.searchParams.append('cssScheme', simUI.cssScheme); - url.searchParams.append('mainTextColor', computedStyles.getPropertyValue('--main-text-color').trim()); - url.searchParams.append('themeColorBackground', computedStyles.getPropertyValue('--theme-color-background').trim()); - url.searchParams.append('themeColorBackgroundRaw', computedStyles.getPropertyValue('--theme-color-background-raw').trim()); + url.searchParams.append('themeBackgroundColor', computedStyles.getPropertyValue('--theme-background-color').trim()); url.searchParams.append('themeBackgroundImage', computedStyles.getPropertyValue('--theme-background-image').trim()); url.searchParams.append('themeBackgroundOpacity', computedStyles.getPropertyValue('--theme-background-opacity').trim()); + if (simUI.isIndividualSim()) { url.searchParams.append('isIndividualSim', ''); this.rootElem.classList.add('individual-sim'); diff --git a/ui/core/components/detailed_results/color_settings.ts b/ui/core/components/detailed_results/color_settings.ts index 53a479fa96..52c73b504b 100644 --- a/ui/core/components/detailed_results/color_settings.ts +++ b/ui/core/components/detailed_results/color_settings.ts @@ -1,7 +1,3 @@ -export type ColorSettings = { - mainTextColor: string, -}; - export const actionColors: Array = [ '#dd9933', '#67074e', diff --git a/ui/core/components/detailed_results/result_component.ts b/ui/core/components/detailed_results/result_component.ts index 0589468e93..30f4eba8a2 100644 --- a/ui/core/components/detailed_results/result_component.ts +++ b/ui/core/components/detailed_results/result_component.ts @@ -3,8 +3,6 @@ import { SimResult, SimResultFilter } from '../..//proto_utils/sim_result.js'; import { Component } from '../../components/component.js'; import { EventID, TypedEvent } from '../../typed_event.js'; -import { ColorSettings } from './color_settings.js'; - export interface SimResultData { eventID: EventID, result: SimResult, @@ -16,17 +14,13 @@ export interface ResultComponentConfig { rootCssClass?: string, cssScheme?: String | null, resultsEmitter: TypedEvent, - colorSettings: ColorSettings, }; export abstract class ResultComponent extends Component { - private readonly colorSettings: ColorSettings; - private lastSimResult: SimResultData | null; constructor(config: ResultComponentConfig) { super(config.parent, config.rootCssClass || ''); - this.colorSettings = config.colorSettings; this.lastSimResult = null; config.resultsEmitter.on((eventID, resultData) => { diff --git a/ui/core/components/detailed_results/timeline.ts b/ui/core/components/detailed_results/timeline.ts index a023be7311..6feeeb11b2 100644 --- a/ui/core/components/detailed_results/timeline.ts +++ b/ui/core/components/detailed_results/timeline.ts @@ -58,7 +58,7 @@ export class Timeline extends ResultComponent {
Timeline data visualizes only 1 sim iteration. -
Sim 1 Iteration
+
Sim 1 Iteration
- - + +
`; diff --git a/ui/core/components/gear_picker.ts b/ui/core/components/gear_picker.ts index 76e2b53a89..c36d587b57 100644 --- a/ui/core/components/gear_picker.ts +++ b/ui/core/components/gear_picker.ts @@ -29,6 +29,7 @@ import { makeShowMatchingGemsSelector } from './other_inputs.js'; import { Input, InputConfig } from './input.js'; import {ItemSwapGear } from '../proto_utils/gear.js' import { SimUI } from '../sim_ui.js'; +import { BaseModal } from './base_modal.js'; declare var $: any; declare var tippy: any; @@ -401,28 +402,26 @@ interface GearData { changeEvent: TypedEvent, } -class SelectorModal extends Popup { +class SelectorModal extends BaseModal { private readonly simUI: SimUI; private player: Player; private readonly tabsElem: HTMLElement; private readonly contentElem: HTMLElement; constructor(parent: HTMLElement, simUI: SimUI, player: Player, slot: ItemSlot, equippedItem: EquippedItem | null, eligibleItems: Array, eligibleEnchants: Array, gearData: GearData) { - super(parent); + super(parent, 'selector-modal', {header: false}); this.simUI = simUI; this.player = player; window.scrollTo({top: 0}); - this.rootElem.classList.add('selector-modal'); - this.rootElem.innerHTML = ` + this.body.innerHTML = `
`; - this.addCloseButton(); this.tabsElem = this.rootElem.getElementsByClassName('selector-modal-tabs')[0] as HTMLElement; this.contentElem = this.rootElem.getElementsByClassName('selector-modal-tab-content')[0] as HTMLElement; @@ -644,7 +643,7 @@ class SelectorModal extends Popup { >
- +
diff --git a/ui/core/components/importers.ts b/ui/core/components/importers.ts index 7ade26bea9..7bbb77c2a7 100644 --- a/ui/core/components/importers.ts +++ b/ui/core/components/importers.ts @@ -39,11 +39,11 @@ export abstract class Importer extends Popup {
`; if (this.includeFile) { - htmlVal += ` + htmlVal += ` ` } - htmlVal += ` + htmlVal += `
`; diff --git a/ui/core/components/item_swap_picker.ts b/ui/core/components/item_swap_picker.ts index fc66b94a7f..6d73a9a437 100644 --- a/ui/core/components/item_swap_picker.ts +++ b/ui/core/components/item_swap_picker.ts @@ -38,11 +38,11 @@ export class ItemSwapPicker extends Component { let swapButtonFragment = document.createElement('fragment'); swapButtonFragment.innerHTML = ` diff --git a/ui/core/components/list_picker.ts b/ui/core/components/list_picker.ts index 45d7935380..fd898cd1ea 100644 --- a/ui/core/components/list_picker.ts +++ b/ui/core/components/list_picker.ts @@ -41,7 +41,7 @@ export class ListPicker extends Input${config.title}` : '' }
- + `; if (this.config.titleTooltip) diff --git a/ui/core/components/log_runner.ts b/ui/core/components/log_runner.ts index 5db3188f68..024219519d 100644 --- a/ui/core/components/log_runner.ts +++ b/ui/core/components/log_runner.ts @@ -12,7 +12,7 @@ export class LogRunner extends Component { this.rootElem.appendChild(controlBar); const simButton = document.createElement('button'); - simButton.classList.add('log-runner-button', 'btn', `btn-${simUI.cssScheme}`); + simButton.classList.add('log-runner-button', 'btn'); simButton.textContent = 'Sim 1 Iteration'; controlBar.appendChild(simButton); diff --git a/ui/core/components/popup.ts b/ui/core/components/popup.ts index b44789427d..0c4136976f 100644 --- a/ui/core/components/popup.ts +++ b/ui/core/components/popup.ts @@ -4,15 +4,9 @@ import { Component } from './component.js'; declare var $: any; export class Popup extends Component { - constructor(parent: HTMLElement) { super(parent, 'popup'); - const computedStyles = window.getComputedStyle(parent); - this.rootElem.style.setProperty('--main-text-color', computedStyles.getPropertyValue('--main-text-color').trim()); - this.rootElem.style.setProperty('--theme-color-background', computedStyles.getPropertyValue('--theme-color-background').trim()); - this.rootElem.style.setProperty('--theme-color-background-raw', computedStyles.getPropertyValue('--theme-color-background-raw').trim()); - if (parent.closest('.hide-damage-metrics')) { this.rootElem.classList.add('hide-damage-metrics'); } diff --git a/ui/core/components/saved_data_manager.ts b/ui/core/components/saved_data_manager.ts index 9d49cbd455..6ba3a827be 100644 --- a/ui/core/components/saved_data_manager.ts +++ b/ui/core/components/saved_data_manager.ts @@ -92,7 +92,7 @@ export class SavedDataManager extends Component { private makeSavedData(config: SavedDataConfig): SavedData { const dataElemFragment = document.createElement('fragment'); dataElemFragment.innerHTML = ` -
+
${config.name}
`; @@ -212,7 +212,7 @@ export class SavedDataManager extends Component {
- +
`; diff --git a/ui/core/components/settings_menu.ts b/ui/core/components/settings_menu.ts index 02daaebd4e..728cb11730 100644 --- a/ui/core/components/settings_menu.ts +++ b/ui/core/components/settings_menu.ts @@ -36,7 +36,7 @@ export class SettingsMenu extends Popup {
- +
Last used RNG seed:0 diff --git a/ui/core/components/sim_title_dropdown.ts b/ui/core/components/sim_title_dropdown.ts index c81fed552a..f2aa2c66e4 100644 --- a/ui/core/components/sim_title_dropdown.ts +++ b/ui/core/components/sim_title_dropdown.ts @@ -262,7 +262,7 @@ export class SimTitleDropdown extends Component { let label = data.type == 'Raid' ? LaunchStatus[raidSimStatus] : LaunchStatus[simLaunchStatuses[data.index]]; let elem = document.createElement('span'); - elem.classList.add('launch-status-label', 'text-brand'); + elem.classList.add('launch-status-label', 'text-primary'); elem.textContent = label; return elem.outerHTML; diff --git a/ui/core/components/stat_weights_action.ts b/ui/core/components/stat_weights_action.ts index 513aaa3a73..79b603e345 100644 --- a/ui/core/components/stat_weights_action.ts +++ b/ui/core/components/stat_weights_action.ts @@ -54,7 +54,7 @@ class EpWeightsMenu extends Popup { this.rootElem.innerHTML = `
- +
@@ -67,7 +67,7 @@ class EpWeightsMenu extends Popup {
- +

The 'Current EPs' column displays the values currently used by the item pickers to sort items. Use icon above the EPs to use newly calculated EPs.

diff --git a/ui/core/individual_sim_ui.ts b/ui/core/individual_sim_ui.ts index fcf06abfbd..f061834a6a 100644 --- a/ui/core/individual_sim_ui.ts +++ b/ui/core/individual_sim_ui.ts @@ -176,12 +176,13 @@ export abstract class IndividualSimUI extends SimUI { constructor(parentElem: HTMLElement, player: Player, config: IndividualSimUIConfig) { super(parentElem, player.sim, { + cssClass: config.cssClass, cssScheme: config.cssScheme, spec: player.spec, knownIssues: config.knownIssues, launchStatus: simLaunchStatuses[player.spec], }); - this.rootElem.classList.add('individual-sim-ui', config.cssClass); + this.rootElem.classList.add('individual-sim-ui'); this.player = player; this.individualConfig = config; this.raidSimResultsManager = null; diff --git a/ui/core/sim_ui.ts b/ui/core/sim_ui.ts index bf6bb1a433..a9a7d30638 100644 --- a/ui/core/sim_ui.ts +++ b/ui/core/sim_ui.ts @@ -29,6 +29,8 @@ export interface SimWarning { export interface SimUIConfig { // Additional css class to add to the root element. + cssClass: string; + // Scheme used for themeing on a per-class Basis or for other sims cssScheme: string; // The spec, if an individual sim, or null if the raid sim. spec: Spec | null, @@ -39,6 +41,7 @@ export interface SimUIConfig { // Shared UI for all individual sims and the raid sim. export abstract class SimUI extends Component { readonly sim: Sim; + readonly cssClass: string; readonly cssScheme: string; readonly isWithinRaidSim: boolean; @@ -54,11 +57,10 @@ export abstract class SimUI extends Component { readonly iterationsPicker: HTMLElement; readonly simTabContentsContainer: HTMLElement; - private warningsTippy: any; - constructor(parentElem: HTMLElement, sim: Sim, config: SimUIConfig) { super(parentElem, 'sim-ui'); this.sim = sim; + this.cssClass = config.cssClass; this.cssScheme = config.cssScheme; this.isWithinRaidSim = this.rootElem.closest('.within-raid-sim') != null; this.rootElem.innerHTML = simHTML; @@ -68,6 +70,8 @@ export abstract class SimUI extends Component { this.simMain.classList.add('sim-main', 'tab-content'); this.simContentContainer.appendChild(this.simMain); + this.rootElem.classList.add(this.cssClass); + if (!this.isWithinRaidSim) { this.rootElem.classList.add('not-within-raid-sim'); } @@ -152,7 +156,7 @@ export abstract class SimUI extends Component { addAction(name: string, cssClass: string, actFn: () => void) { const button = document.createElement('button'); - button.classList.add('btn', `btn-${this.cssScheme}`, 'w-100', cssClass); + button.classList.add('btn', 'w-100', cssClass); button.textContent = name; button.addEventListener('click', actFn); this.simActionsContainer.appendChild(button); diff --git a/ui/detailed_results/index.ts b/ui/detailed_results/index.ts index 1b5d3ee7e0..89f22b59b3 100644 --- a/ui/detailed_results/index.ts +++ b/ui/detailed_results/index.ts @@ -4,14 +4,9 @@ import { WindowedDetailedResults } from '../core/components/detailed_results.js' Database.get(); const urlParams = new URLSearchParams(window.location.search); -if (urlParams.has('mainTextColor')) { - document.body.style.setProperty('--main-text-color', urlParams.get('mainTextColor')!); -} -if (urlParams.has('themeColorBackground')) { - document.body.style.setProperty('--theme-color-background', urlParams.get('themeColorBackground')!); -} -if (urlParams.has('themeColorBackgroundRaw')) { - document.body.style.setProperty('--theme-color-background-raw', urlParams.get('themeColorBackgroundRaw')!); + +if (urlParams.has('themeBackgroundColor')) { + document.body.style.setProperty('--theme-background-color', urlParams.get('themeBackgroundColor')!); } if (urlParams.has('themeBackgroundImage')) { document.body.style.setProperty('--theme-background-image', urlParams.get('themeBackgroundImage')!); diff --git a/ui/raid/raid_picker.ts b/ui/raid/raid_picker.ts index e771933b18..628f72df87 100644 --- a/ui/raid/raid_picker.ts +++ b/ui/raid/raid_picker.ts @@ -611,7 +611,7 @@ export class PlayerPicker extends Component { class PlayerEditorModal extends BaseModal { constructor(player: Player) { - super('player-editor-modal', { + super(document.body, 'player-editor-modal', { closeButton: {fixed: true, text: false}, header: false }); diff --git a/ui/raid/raid_sim_ui.ts b/ui/raid/raid_sim_ui.ts index cbbe5044c1..76d658abd4 100644 --- a/ui/raid/raid_sim_ui.ts +++ b/ui/raid/raid_sim_ui.ts @@ -48,12 +48,12 @@ export class RaidSimUI extends SimUI { constructor(parentElem: HTMLElement, config: RaidSimConfig) { super(parentElem, new Sim(), { + cssClass: 'raid-sim-ui', cssScheme: 'raid', spec: null, launchStatus: raidSimStatus, knownIssues: (config.knownIssues || []).concat(extraKnownIssues), }); - this.rootElem.classList.add('raid-sim-ui'); this.config = config; this.settingsMuuri = null; diff --git a/ui/scss/core/components/_detailed_results.scss b/ui/scss/core/components/_detailed_results.scss index 3861d032e1..b0cf6ed5e2 100644 --- a/ui/scss/core/components/_detailed_results.scss +++ b/ui/scss/core/components/_detailed_results.scss @@ -103,7 +103,6 @@ } .metrics-table { - color: var(--main-text-color); width: 100%; font-size: 16px; } diff --git a/ui/scss/core/components/_gear_picker.scss b/ui/scss/core/components/_gear_picker.scss index 132ef786b2..8e97a0a962 100644 --- a/ui/scss/core/components/_gear_picker.scss +++ b/ui/scss/core/components/_gear_picker.scss @@ -64,8 +64,8 @@ .item-picker-icon { @include wowhead-background-icon; - width: 64px; - height: 64px; + width: 4rem; + height: 4rem; border: 2px solid dimgray; } diff --git a/ui/scss/core/components/_icon_picker.scss b/ui/scss/core/components/_icon_picker.scss index 86b2df529e..b0e9d27cc9 100644 --- a/ui/scss/core/components/_icon_picker.scss +++ b/ui/scss/core/components/_icon_picker.scss @@ -69,6 +69,7 @@ .dropdown-menu { min-width: unset; background: grey; + border: none; &.show { display: grid; diff --git a/ui/scss/core/components/_list_picker.scss b/ui/scss/core/components/_list_picker.scss index 303ba0ca26..b873c1af08 100644 --- a/ui/scss/core/components/_list_picker.scss +++ b/ui/scss/core/components/_list_picker.scss @@ -31,7 +31,7 @@ &:not(.inline) { padding: map.get($spacers, 3) map.get($spacers, 3) 0 map.get($spacers, 3); - border: 1px solid $primary; + border: 1px solid $link-color; .list-picker-item-header { .list-picker-item-action:first-of-type { diff --git a/ui/scss/core/components/_popup.scss b/ui/scss/core/components/_popup.scss index 908802991f..9f9c357a45 100644 --- a/ui/scss/core/components/_popup.scss +++ b/ui/scss/core/components/_popup.scss @@ -7,7 +7,7 @@ overflow-y: auto; padding: 1rem; background-color: #111218; - border: 1px solid $primary; + border: 1px solid var(--theme-color-primary); border-radius: 6px; max-width: 100%; color: white; diff --git a/ui/scss/core/components/_saved_data_manager.scss b/ui/scss/core/components/_saved_data_manager.scss index 9e29bf358a..20e73973ee 100644 --- a/ui/scss/core/components/_saved_data_manager.scss +++ b/ui/scss/core/components/_saved_data_manager.scss @@ -26,12 +26,22 @@ padding: 0; margin-bottom: $block-spacer; margin-right: $block-spacer; + border: 1px solid var(--theme-color-primary); display: flex; font-size: $content-font-size; transition: $btn-transition; + &:hover:not(.active) { + background: var(--theme-color-primary-dampened); + } + &.disabled { display: none; + } + + &.active { + background-color: var(--theme-color-primary); + color: var(--theme-component-text-color); } .saved-data-set-name { diff --git a/ui/scss/core/components/_sim_tab.scss b/ui/scss/core/components/_sim_tab.scss index 9067e94948..1c4da490c4 100644 --- a/ui/scss/core/components/_sim_tab.scss +++ b/ui/scss/core/components/_sim_tab.scss @@ -10,7 +10,7 @@ } .tab-panel-right { - margin-left: $gap-width * 2; + margin-left: var(--container-padding); display: flex; flex-direction: column; flex: 1; diff --git a/ui/scss/core/components/_sim_title_dropdown.scss b/ui/scss/core/components/_sim_title_dropdown.scss index 98fa918603..601539fc38 100644 --- a/ui/scss/core/components/_sim_title_dropdown.scss +++ b/ui/scss/core/components/_sim_title_dropdown.scss @@ -15,6 +15,7 @@ .dropdown-menu { background: $dropdown-bg; + border: none; z-index: 1500; .dropdown-menu { diff --git a/ui/scss/core/components/detailed_results/_timeline.scss b/ui/scss/core/components/detailed_results/_timeline.scss index 26ea5c084d..4b2720368c 100644 --- a/ui/scss/core/components/detailed_results/_timeline.scss +++ b/ui/scss/core/components/detailed_results/_timeline.scss @@ -47,10 +47,6 @@ $combo-points-color: #ffa07a; 0 0 10px red; } -.timeline-warning-description { - color: var(--main-text-color); -} - .timeline-run-again-button { margin-left: 10px; display: inline-block; diff --git a/ui/scss/core/individual_sim_ui/_shared.scss b/ui/scss/core/individual_sim_ui/_shared.scss index 004d95ff5b..f1b4ad4d91 100644 --- a/ui/scss/core/individual_sim_ui/_shared.scss +++ b/ui/scss/core/individual_sim_ui/_shared.scss @@ -22,7 +22,7 @@ .left-gear-panel { min-width: calc(550px + 2vw); flex: 3; - margin-right: $gap-width * 2; + margin-right: var(--container-padding); } @include media-breakpoint-down(xl) { @@ -57,129 +57,6 @@ } } -// .settings-tab { -// overflow-y: auto; -// } -// .settings-inputs { -// position: relative; -// } -// .settings-section-container { -// position: absolute; -// } - -// .settings-section { -// border: 2px solid var(--main-text-color); -// padding: 4px; -// margin: 5px; -// display: grid; -// transform: none !important; -// } - -// .settings-section>legend { -// padding: 0 10px; -// margin: 0 3px; -// font-weight: 900; -// color: var(--main-text-color); -// font-size: 18px; -// white-space: nowrap; -// border: none; -// width: auto; -// } - -// .settings-section .icon-enum-picker-root { -// margin: 1px; -// } - -// .settings-section .icon-enum-picker-root a { -// height: 46px; -// width: 46px; -// } - -// .settings-bottom-bar { -// margin: 20px; -// display: flex; -// justify-content: space-around; -// align-items: flex-end; -// } - -// .race-section { -// text-align: center; -// } -// .race-section > legend { -// text-align: left; -// } - -// .race-section > div:not(.settings-section-iconrow), .rotation-section > div:not(.settings-section-iconrow), .other-settings-section > div:not(.settings-section-iconrow) { -// display: flex; -// justify-content: space-between; -// align-items: center; -// } - -// .settings-section-iconrow { -// display: flex; -// grid-template-columns: repeat(5, 1fr); -// justify-content: space-evenly; -// flex-wrap: wrap; -// align-items: center; -// } -// .settings-section-iconrow>div { -// margin: auto !important; -// } - -// .buffs-section>div { -// display: grid; -// } -// .buffs-section { -// grid-template-columns: repeat(3, 1fr); -// } - -// .consumes-section>div { -// display: grid; -// } - -// .consumes-row { -// display: flex; -// align-items: center; -// } -// .consumes-row > span { -// margin: 5px; -// } -// .consumes-row-inputs { -// display: flex; -// align-items: center; -// justify-content: space-around; -// flex-grow: 1; -// } -// .consumes-row-inputs > * { -// margin: 2px; -// } - -// .debuffs-section>div { -// display: grid; -// } -// .debuffs-section { -// grid-template-columns: repeat(3, 1fr); -// } - -// .cooldowns-section-container { -// z-index: 1000; -// } - -// .saved-encounter-manager { -// display: inline-block; -// text-align: left; -// } - -// .saved-rotation-manager { -// display: inline-block; -// text-align: center; -// } - -// .saved-settings-manager { -// display: inline-block; -// text-align: right; -// } - .talents-tab-content { display: flex; flex-wrap: wrap; diff --git a/ui/scss/core/sim_ui/_header.scss b/ui/scss/core/sim_ui/_header.scss index 5319c25d51..a4390f0cfb 100644 --- a/ui/scss/core/sim_ui/_header.scss +++ b/ui/scss/core/sim_ui/_header.scss @@ -87,7 +87,6 @@ .dropdown-menu { top: -2px; - border: 1px solid $primary; } } } diff --git a/ui/scss/core/sim_ui/_main.scss b/ui/scss/core/sim_ui/_main.scss index 916a8cb3fe..b6291aacc8 100644 --- a/ui/scss/core/sim_ui/_main.scss +++ b/ui/scss/core/sim_ui/_main.scss @@ -2,9 +2,6 @@ min-width: calc(275px + 1vw); display: flex; flex-flow: column; - background-size: cover; - background-position: center center; - color: var(--main-text-color); .sim-main { height: 80%; diff --git a/ui/scss/core/sim_ui/_shared.scss b/ui/scss/core/sim_ui/_shared.scss index 0337e3da6b..47b56865f6 100644 --- a/ui/scss/core/sim_ui/_shared.scss +++ b/ui/scss/core/sim_ui/_shared.scss @@ -1,6 +1,6 @@ @use "sass:map"; -$sim-header-height: 72px; +$sim-header-height: 4.5rem; td, th { padding: auto; @@ -21,9 +21,11 @@ td, th { width: 100vw; height: 100vh; background-image: - linear-gradient(rgba(var(--theme-color-background-raw), var(--theme-background-opacity)), rgba(var(--theme-color-background-raw), var(--theme-background-opacity))), + linear-gradient( + rgba(var(--theme-background-color), var(--theme-background-opacity)), + rgba(var(--theme-background-color), var(--theme-background-opacity)) + ), var(--theme-background-image); - background-position: center; background-repeat: no-repeat; background-size: cover; z-index: -1; @@ -48,14 +50,14 @@ td, th { border-bottom: 1px solid $border-color; .sim-title-dropdown-root { - height: $sim-header-height - 1px; + height: calc(#{$sim-header-height} - 1px); } } } .sim-content { - padding-left: $gap-width * 2; - padding-right: $gap-width * 2; + padding-left: var(--container-padding); + padding-right: var(--container-padding); flex: 4; z-index: 1; diff --git a/ui/scss/core/sim_ui/_sidebar.scss b/ui/scss/core/sim_ui/_sidebar.scss index 6e50aa5e91..07856317cd 100644 --- a/ui/scss/core/sim_ui/_sidebar.scss +++ b/ui/scss/core/sim_ui/_sidebar.scss @@ -22,8 +22,10 @@ } .sim-sidebar-actions { - padding-left: $gap-width * 2; - padding-right: $gap-width * 2; + padding-left: var(--container-padding); + padding-right: var(--container-padding); + margin-left: $gap-width * -1; + margin-right: $gap-width * -1; display: flex; flex-direction: column; align-items: center; @@ -60,6 +62,7 @@ .sim-sidebar-actions { padding: 0; + margin: 0; } } } diff --git a/ui/scss/homepage/_homepage.scss b/ui/scss/homepage/_homepage.scss index b71527a1dd..455a28a9a2 100644 --- a/ui/scss/homepage/_homepage.scss +++ b/ui/scss/homepage/_homepage.scss @@ -5,7 +5,6 @@ width: 100%; height: 100%; background-image: url("/wotlk/assets/img/wotlk.jpg"); - background-position: center; background-repeat: no-repeat; background-size: cover; z-index: -1; diff --git a/ui/scss/index.scss b/ui/scss/index.scss index b208614036..e63fe3399a 100644 --- a/ui/scss/index.scss +++ b/ui/scss/index.scss @@ -3,7 +3,7 @@ @import "bootstrap/scss/variables"; // Custom Bootstrap theme overrides -@import "variables"; +@import "shared/variables"; // Bootstrap configuration @import "bootstrap/scss/maps"; @@ -34,11 +34,12 @@ @import "./bootstrap/scss/utilities/api"; // Custom styles -@import "./global"; -@import "./global_old"; +@import "shared/mixins"; +@import "shared/global"; +@import "shared/global_old"; // Custom Bootstrap style overrides -@import "./bootstrap_style_overrides"; +@import "shared/bootstrap_style_overrides"; // Import other plugin styles @import "tippy.js/dist/tippy"; diff --git a/ui/scss/bootstrap_style_overrides.scss b/ui/scss/shared/_bootstrap_style_overrides.scss similarity index 76% rename from ui/scss/bootstrap_style_overrides.scss rename to ui/scss/shared/_bootstrap_style_overrides.scss index 7a77799e71..7461c52b11 100644 --- a/ui/scss/bootstrap_style_overrides.scss +++ b/ui/scss/shared/_bootstrap_style_overrides.scss @@ -37,10 +37,24 @@ margin: 0; } } +} + +.form-check-input { + width: $form-check-input-width !important; + height: $form-check-input-width !important; + + &:focus { + box-shadow: 0 0 .25rem var(--bs-primary); + } - .form-check-input { - width: $form-check-input-width !important; - height: $form-check-input-width !important; + &:checked[type="checkbox"] { + background-color: var(--bs-primary); + background-image: var(--bs-form-check-box-bg-image); + } + + &:checked[type="radio"] { + background-color: var(--bs-primary); + background-image: var(--bs-form-check-radio-bg-image); } } @@ -114,31 +128,11 @@ display: none !important; } - @each $color, $value in $class-colors { // Dampened class themes .bg-#{$color}-dampened { background: mix(black, $value, 75); } - - // Class-themed form checks - .form-check-#{$color} { - @extend .form-check; - - .form-check-input:checked[type="checkbox"] { - background-color: $value; - background-image: escape-svg( - url("data:image/svg+xml,") - ); - } - - .form-check-input:checked[type="radio"] { - background-color: $value; - background-image: escape-svg( - url("data:image/svg+xml,") - ); - } - } } @include media-breakpoint-down(xl) { diff --git a/ui/scss/global.scss b/ui/scss/shared/_global.scss similarity index 53% rename from ui/scss/global.scss rename to ui/scss/shared/_global.scss index d999aaecc2..7825c04cb7 100644 --- a/ui/scss/global.scss +++ b/ui/scss/shared/_global.scss @@ -1,5 +1,41 @@ @use "sass:map"; +:root { + --container-padding: 3rem; +} + +@include media-breakpoint-up(xxl) { + :root { + --container-padding: 4rem; + } +} + +@include media-breakpoint-up(1080p) { + :root { + --bs-body-font-size: 16px !important; + } +} + +// // We want to apply only to 1440p monitors, NOT 1080p Ultrawide +// @media (min-width: map.get($grid-breakpoints, 1440p)) and (max-aspect-ratio: 16/9) { +// :root { +// --bs-body-font-size: 20px !important; +// } +// } + +// @include media-breakpoint-up(4k) { +// :root { +// --bs-body-font-size: 32px !important; +// } +// } + +// Use larger padding on 1080p+ ultrawide monitors +@media (min-width: map.get($grid-breakpoints, 1080p)) and (min-aspect-ratio: 17/9) { + :root { + --container-padding: 6rem; + } +} + * { letter-spacing: 1px; } @@ -7,6 +43,7 @@ html { height: 100%; color-scheme: dark; + font-size: var(--bs-body-font-size); } body { @@ -32,7 +69,7 @@ a { color: white; &:hover, &:focus, &.active { - color: $brand-color; + color: $primary; } } } diff --git a/ui/scss/global_old.scss b/ui/scss/shared/_global_old.scss similarity index 94% rename from ui/scss/global_old.scss rename to ui/scss/shared/_global_old.scss index c1e366f089..5bf659aef0 100644 --- a/ui/scss/global_old.scss +++ b/ui/scss/shared/_global_old.scss @@ -1,12 +1,10 @@ :root { --bs-body-font-size: 14px; --bs-gap: 1vw; - --theme-color-background: DarkSlateGrey; - --theme-color-background-raw: 0, 0, 0; + --theme-background-color: DarkSlateGrey; --theme-background-image: linear-gradient(black, black); --theme-background-opacity: 0.9; --main-bg-color: DarkSlateGrey; - --main-text-color: White; --main-secondary-color: Black; --sidebar-text-color: White; --sidebar-highlight-color: Blue; @@ -207,11 +205,3 @@ legend { float: none; width: auto; } - -.dropdown-item { - color: var(--main-text-color); - - &:hover { - color: var(--main-text-color); - } -} diff --git a/ui/scss/shared/_mixins.scss b/ui/scss/shared/_mixins.scss new file mode 100644 index 0000000000..ced0f7fa5b --- /dev/null +++ b/ui/scss/shared/_mixins.scss @@ -0,0 +1,47 @@ +@mixin theme-color($base-color, $opacity, $background-image-url) { + $background-color-hex: mix(black, $base-color, 90); + $interact-color: shade-color($base-color, $btn-hover-bg-shade-amount); + $text-color: color-contrast($base-color); + + --theme-background-color: #{red($background-color-hex), green($background-color-hex), blue($background-color-hex)}; + --theme-background-image: url(#{$background-image-url}); + --theme-background-opacity: #{$opacity}; + + // Primary component color + --theme-color-primary: #{$base-color}; + // Shaded version of the primary color used for things like btn hover + --theme-color-primary-shade: #{shade-color($base-color, $btn-hover-bg-shade-amount)}; + --theme-color-primary-dampened: #{mix(black, $base-color, 75)}; + + // Defines the text color of components using the primary color as a background + --theme-component-text-color: #{color-contrast($base-color)}; + + --bs-primary: #{$base-color}; + --bs-primary-rgb: #{to-rgb($base-color)}; + + .btn { + --bs-btn-bg: #{$base-color}; + --bs-btn-border-color: #{$base-color}; + --bs-btn-color: #{$text-color}; + --bs-btn-hover-bg: #{$interact-color}; + --bs-btn-hover-border-color: #{$interact-color}; + --bs-btn-hover-color: #{$text-color}; + } + + .dropdown-menu { + --bs-dropdown-border-color: #{$base-color}; + --bs-dropdown-border-width: 1px; + } + + .modal { + --bs-modal-border-color: #{$base-color}; + } + + // These are custom variables but parsed SVGs can't use CSS vars so we need to assign them with Sass + --bs-form-check-box-bg-image: #{escape-svg( + url("data:image/svg+xml,") + )}; + --bs-form-check-radio-bg-image: #{escape-svg( + url("data:image/svg+xml,") + )}; +} diff --git a/ui/scss/shared/_sim_links.scss b/ui/scss/shared/_sim_links.scss index da0e5b191c..b6dc8a8d6b 100644 --- a/ui/scss/shared/_sim_links.scss +++ b/ui/scss/shared/_sim_links.scss @@ -13,8 +13,8 @@ align-items: center; .sim-link-icon { - width: 48px; - height: 48px; + width: 3rem; + height: 3rem; margin-right: map.get($spacers, 2); } diff --git a/ui/scss/variables.scss b/ui/scss/shared/_variables.scss similarity index 93% rename from ui/scss/variables.scss rename to ui/scss/shared/_variables.scss index 5b9ee1b2cf..40543d05e0 100644 --- a/ui/scss/variables.scss +++ b/ui/scss/shared/_variables.scss @@ -5,8 +5,6 @@ // individual component pages in the Bootstrap 5.2 docs for relevant variable usage. // Custom theme color mapping -$brand-color: #e0a335; - $death-knight: rgb(194, 46, 70); $druid: rgb(255, 125, 10); $hunter: rgb(171, 212, 115); @@ -25,7 +23,7 @@ $class-colors: ( "mage": $mage, "paladin": $paladin, "priest": $priest, - "raid": $brand-color, + "raid": $primary, "rogue": $rogue, "shaman": $shaman, "warlock": $warlock, @@ -34,22 +32,13 @@ $class-colors: ( $theme-colors: map-merge($theme-colors, $class-colors); -// Theme variable overrides -@if variable-exists(theme) { - $primary: map.get($class-colors, $theme); -} - -@if not variable-exists(theme) { - $primary: $brand-color; -} - +$primary: #e0a335; $success: #1eff00; $quality-uncommon: $success; $quality-rare: #0070dd; $quality-epic: #a335ee; $custom-colors: ( - "brand": $brand-color, "primary": $primary, "quality-epic": $quality-epic, "quality-rare": $quality-rare, @@ -59,6 +48,15 @@ $custom-colors: ( $theme-colors: map-merge($theme-colors, $custom-colors); +$custom-breakpoints: ( + xxxl: 1600px, + 1080p: 1900px, + 1440p: 2500px, + 4k: 3800px, +); + +$grid-breakpoints: map-merge($grid-breakpoints, $custom-breakpoints); + // Custom variables $block-spacer: .75rem; $content-font-size: .75rem; @@ -71,8 +69,8 @@ $wrath-blue: #7FCBD8; // Global Bootstrap variable overrides $body-bg: #15171e; $body-color: white; - $border-color: dimgrey; +$font-size-root: 16px; // This option doesn't seem to be working for some reason. Carets hidden manually instead // $enable-caret: false; @@ -93,6 +91,8 @@ $dropdown-bg: $body-bg; $dropdown-border-width: 0; $dropdown-color: white; $dropdown-link-active-bg: $dropdown-bg; +$dropdown-link-color: white; +$dropdown-link-hover-color: white; $dropdown-link-hover-bg: darken($dropdown-bg, 3); $dropdown-padding-y: 0; diff --git a/ui/scss/sims/balance_druid/_sim.scss b/ui/scss/sims/balance_druid/_sim.scss index 247e1e9d0c..8ba680df13 100644 --- a/ui/scss/sims/balance_druid/_sim.scss +++ b/ui/scss/sims/balance_druid/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'druid'; - // Set color variables which control the site theme. .balance-druid-sim-ui { - --theme-color-background: #1d1510; - --theme-color-background-raw: 29, 21, 16; - --theme-background-image: url('/wotlk/assets/img/balance_druid_background.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $druid, + .95, + '/wotlk/assets/img/balance_druid_background.jpg' + ); } diff --git a/ui/scss/sims/balance_druid/index.scss b/ui/scss/sims/balance_druid/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/balance_druid/index.scss +++ b/ui/scss/sims/balance_druid/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim"; diff --git a/ui/scss/sims/deathknight/_sim.scss b/ui/scss/sims/deathknight/_sim.scss index 7d78de23ae..e29af56d84 100644 --- a/ui/scss/sims/deathknight/_sim.scss +++ b/ui/scss/sims/deathknight/_sim.scss @@ -1,10 +1,8 @@ -$theme: "death-knight"; - // Set color variables which control the site theme. .deathknight-sim-ui { - --theme-color-background: #1d1626; - --theme-color-background-raw: 19, 5, 7; - --theme-background-image: url('/wotlk/assets/img/death_knight_background.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $death-knight, + .95, + '/wotlk/assets/img/death_knight_background.jpg' + ); } diff --git a/ui/scss/sims/deathknight/index.scss b/ui/scss/sims/deathknight/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/deathknight/index.scss +++ b/ui/scss/sims/deathknight/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim"; diff --git a/ui/scss/sims/detailed_results/index.scss b/ui/scss/sims/detailed_results/index.scss index edab9c471b..e0baf247ea 100644 --- a/ui/scss/sims/detailed_results/index.scss +++ b/ui/scss/sims/detailed_results/index.scss @@ -5,15 +5,20 @@ body { background-color: transparent; overflow: auto; max-height: 100vh; - color: var(--main-text-color); + color: white; } body.new-tab { background-image: - linear-gradient(rgba(var(--theme-color-background-raw), var(--theme-background-opacity)), rgba(var(--theme-color-background-raw), var(--theme-background-opacity))), + linear-gradient( + rgba(var(--theme-background-color), var(--theme-background-opacity)), + rgba(var(--theme-background-color), var(--theme-background-opacity)) + ), var(--theme-background-image); + background-repeat: no-repeat; + background-size: cover; .dr-root { - padding: $gap-width $gap-width * 2; + padding: $gap-width var(--container-padding); } } diff --git a/ui/scss/sims/elemental_shaman/_sim.scss b/ui/scss/sims/elemental_shaman/_sim.scss index fd813b8320..74b9a27916 100644 --- a/ui/scss/sims/elemental_shaman/_sim.scss +++ b/ui/scss/sims/elemental_shaman/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'shaman'; - // Set color variables which control the site theme. .elemental-shaman-sim-ui { - --theme-color-background: #181d2d; - --theme-color-background-raw: 24, 29, 45; - --theme-background-image: url('/wotlk/assets/img/elemental_shaman_background.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $shaman, + .95, + '/wotlk/assets/img/elemental_shaman_background.jpg' + ); } diff --git a/ui/scss/sims/elemental_shaman/index.scss b/ui/scss/sims/elemental_shaman/index.scss index 930e69663b..ef880c6169 100644 --- a/ui/scss/sims/elemental_shaman/index.scss +++ b/ui/scss/sims/elemental_shaman/index.scss @@ -1,3 +1,3 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; @import "../../core/components/totem_inputs"; +@import "./sim"; diff --git a/ui/scss/sims/enhancement_shaman/_sim.scss b/ui/scss/sims/enhancement_shaman/_sim.scss index 5e0ec7d646..beba1f480f 100644 --- a/ui/scss/sims/enhancement_shaman/_sim.scss +++ b/ui/scss/sims/enhancement_shaman/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'shaman'; - // Set color variables which control the site theme. .enhancement-shaman-sim-ui { - --theme-color-background: #181d2d; - --theme-color-background-raw: 24, 29, 45; - --theme-background-image: url('/wotlk/assets/img/enhancement_shaman_background.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $shaman, + .95, + '/wotlk/assets/img/enhancement_shaman_background.jpg' + ); } diff --git a/ui/scss/sims/enhancement_shaman/index.scss b/ui/scss/sims/enhancement_shaman/index.scss index 930e69663b..ef880c6169 100644 --- a/ui/scss/sims/enhancement_shaman/index.scss +++ b/ui/scss/sims/enhancement_shaman/index.scss @@ -1,3 +1,3 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; @import "../../core/components/totem_inputs"; +@import "./sim"; diff --git a/ui/scss/sims/feral_druid/_sim.scss b/ui/scss/sims/feral_druid/_sim.scss index bb48328f77..79096fe366 100644 --- a/ui/scss/sims/feral_druid/_sim.scss +++ b/ui/scss/sims/feral_druid/_sim.scss @@ -1,9 +1,8 @@ -$theme: 'druid'; - // Set color variables which control the site theme. .feral-druid-sim-ui { - --theme-color-background: #1d1510; - --theme-color-background-raw: 29, 21, 16; - --theme-background-image: url('/wotlk/assets/img/feral_druid_background.jpg'); - --main-text-color: White; + @include theme-color( + $druid, + .95, + '/wotlk/assets/img/feral_druid_background.jpg' + ); } diff --git a/ui/scss/sims/feral_druid/index.scss b/ui/scss/sims/feral_druid/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/feral_druid/index.scss +++ b/ui/scss/sims/feral_druid/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim"; diff --git a/ui/scss/sims/feral_tank_druid/_sim.scss b/ui/scss/sims/feral_tank_druid/_sim.scss index 46bdcbc092..f78792decc 100644 --- a/ui/scss/sims/feral_tank_druid/_sim.scss +++ b/ui/scss/sims/feral_tank_druid/_sim.scss @@ -1,9 +1,8 @@ -$theme: 'druid'; - // Set color variables which control the site theme. .feral-tank-druid-sim-ui { - --theme-color-background: #1d1510; - --theme-color-background-raw: 29, 21, 16; - --theme-background-image: url('/wotlk/assets/img/feral_druid_tank_background.jpg'); - --main-text-color: White; + @include theme-color( + $druid, + .95, + '/wotlk/assets/img/feral_druid_tank_background.jpg' + ); } diff --git a/ui/scss/sims/feral_tank_druid/index.scss b/ui/scss/sims/feral_tank_druid/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/feral_tank_druid/index.scss +++ b/ui/scss/sims/feral_tank_druid/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim"; diff --git a/ui/scss/sims/healing_priest/_sim.scss b/ui/scss/sims/healing_priest/_sim.scss index 37020e2892..4667b75b9a 100644 --- a/ui/scss/sims/healing_priest/_sim.scss +++ b/ui/scss/sims/healing_priest/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'priest'; - // Set color variables which control the site theme. .healing-priest-sim-ui { - --theme-color-background: #1c1812; - --theme-color-background-raw: 28, 24, 18; - --theme-background-image: url('/wotlk/assets/img/healing_priest_background.jpg'); - --theme-background-opacity: 0.9; - --main-text-color: White; + @include theme-color( + $priest, + .9, + '/wotlk/assets/img/healing_priest_background.jpg' + ); } diff --git a/ui/scss/sims/healing_priest/index.scss b/ui/scss/sims/healing_priest/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/healing_priest/index.scss +++ b/ui/scss/sims/healing_priest/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim"; diff --git a/ui/scss/sims/holy_paladin/_sim.scss b/ui/scss/sims/holy_paladin/_sim.scss index 05398ac174..2c140ae748 100644 --- a/ui/scss/sims/holy_paladin/_sim.scss +++ b/ui/scss/sims/holy_paladin/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'paladin'; - // Set color variables which control the site theme. .holy-paladin-sim-ui { - --theme-color-background: rgb(20, 13, 18); - --theme-color-background-raw: 20, 13, 18; - --theme-background-image: url('/wotlk/assets/img/holy_paladin_background.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $paladin, + .95, + '/wotlk/assets/img/holy_paladin_background.jpg' + ); } diff --git a/ui/scss/sims/holy_paladin/index.scss b/ui/scss/sims/holy_paladin/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/holy_paladin/index.scss +++ b/ui/scss/sims/holy_paladin/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim"; diff --git a/ui/scss/sims/hunter/_sim.scss b/ui/scss/sims/hunter/_sim.scss index 13f2f72a3e..3e375cbca5 100644 --- a/ui/scss/sims/hunter/_sim.scss +++ b/ui/scss/sims/hunter/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'hunter'; - // Set color variables which control the site theme. .hunter-sim-ui { - --theme-color-background: #0c190f; - --theme-color-background-raw: 12, 25, 15; - --theme-background-image: url('/wotlk/assets/img/hunter_background.jpg'); - --theme-background-opacity: 0.9; - --main-text-color: White; + @include theme-color( + $hunter, + .9, + '/wotlk/assets/img/hunter_background.jpg' + ); } diff --git a/ui/scss/sims/hunter/index.scss b/ui/scss/sims/hunter/index.scss index 930e69663b..ef880c6169 100644 --- a/ui/scss/sims/hunter/index.scss +++ b/ui/scss/sims/hunter/index.scss @@ -1,3 +1,3 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; @import "../../core/components/totem_inputs"; +@import "./sim"; diff --git a/ui/scss/sims/mage/_sim.scss b/ui/scss/sims/mage/_sim.scss index aa90c71b8d..bbcd358c01 100644 --- a/ui/scss/sims/mage/_sim.scss +++ b/ui/scss/sims/mage/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'mage'; - // Set color variables which control the site theme. .mage-sim-ui { - --theme-color-background: #101a20; - --theme-color-background-raw: 16, 26, 32; - --theme-background-image: url('/wotlk/assets/img/mage_background.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $mage, + .95, + '/wotlk/assets/img/mage_background.jpg' + ); } diff --git a/ui/scss/sims/mage/index.scss b/ui/scss/sims/mage/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/mage/index.scss +++ b/ui/scss/sims/mage/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim"; diff --git a/ui/scss/sims/protection_paladin/_sim.scss b/ui/scss/sims/protection_paladin/_sim.scss index ec57380742..83a5829528 100644 --- a/ui/scss/sims/protection_paladin/_sim.scss +++ b/ui/scss/sims/protection_paladin/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'paladin'; - // Set color variables which control the site theme. .protection-paladin-sim-ui { - --theme-color-background: rgb(20, 13, 18); - --theme-color-background-raw: 20, 13, 18; - --theme-background-image: url('/wotlk/assets/img/prot_paladin.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $paladin, + .95, + '/wotlk/assets/img/prot_paladin.jpg' + ); } diff --git a/ui/scss/sims/protection_paladin/index.scss b/ui/scss/sims/protection_paladin/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/protection_paladin/index.scss +++ b/ui/scss/sims/protection_paladin/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim"; diff --git a/ui/scss/sims/protection_warrior/_sim.scss b/ui/scss/sims/protection_warrior/_sim.scss index 0d6e5db198..2d2dad26a7 100644 --- a/ui/scss/sims/protection_warrior/_sim.scss +++ b/ui/scss/sims/protection_warrior/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'warrior'; - // Set color variables which control the site theme. .protection-warrior-sim-ui { - --theme-color-background: #1c1408; - --theme-color-background-raw: 28, 20, 8; - --theme-background-image: url('/wotlk/assets/img/protection_warrior_background.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $warrior, + .95, + '/wotlk/assets/img/protection_warrior_background.jpg' + ); } diff --git a/ui/scss/sims/protection_warrior/index.scss b/ui/scss/sims/protection_warrior/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/protection_warrior/index.scss +++ b/ui/scss/sims/protection_warrior/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim"; diff --git a/ui/scss/sims/raid/_sim.scss b/ui/scss/sims/raid/_sim.scss index a7a55e7669..f5dccc0446 100644 --- a/ui/scss/sims/raid/_sim.scss +++ b/ui/scss/sims/raid/_sim.scss @@ -1,8 +1,8 @@ // Set color variables which control the site theme. .raid-sim-ui { - --theme-color-background: #000000; - --theme-color-background-raw: 0, 0, 0; - --theme-background-image: url('/wotlk/assets/img/ulduar.jpg'); - --theme-background-opacity: .8; - --main-text-color: White; + @include theme-color( + $primary, + .9, + '/wotlk/assets/img/ulduar.jpg' + ); } diff --git a/ui/scss/sims/raid/index.scss b/ui/scss/sims/raid/index.scss index c8d5185327..22c0ce6354 100644 --- a/ui/scss/sims/raid/index.scss +++ b/ui/scss/sims/raid/index.scss @@ -1,4 +1,5 @@ @import "../../core/individual_sim_ui/index"; +@import "./sim"; @import "../balance_druid/sim"; @import "../elemental_shaman/sim"; @@ -17,4 +18,3 @@ @import "../warrior/sim"; @import "./raid_sim_ui"; -@import "./sim"; \ No newline at end of file diff --git a/ui/scss/sims/restoration_druid/_sim.scss b/ui/scss/sims/restoration_druid/_sim.scss index aff9ce4a39..6352b09657 100644 --- a/ui/scss/sims/restoration_druid/_sim.scss +++ b/ui/scss/sims/restoration_druid/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'druid'; - // Set color variables which control the site theme. .restoration-druid-sim-ui { - --theme-color-background: #1d1510; - --theme-color-background-raw: 29, 21, 16; - --theme-background-image: url('/wotlk/assets/img/resto_druid_background.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $druid, + .95, + '/wotlk/assets/img/resto_druid_background.jpg' + ); } diff --git a/ui/scss/sims/restoration_druid/index.scss b/ui/scss/sims/restoration_druid/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/restoration_druid/index.scss +++ b/ui/scss/sims/restoration_druid/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim"; diff --git a/ui/scss/sims/restoration_shaman/_sim.scss b/ui/scss/sims/restoration_shaman/_sim.scss index 8d1c139921..cf1b91a38a 100644 --- a/ui/scss/sims/restoration_shaman/_sim.scss +++ b/ui/scss/sims/restoration_shaman/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'shaman'; - // Set color variables which control the site theme. .restoration-shaman-sim-ui { - --theme-color-background: #181d2d; - --theme-color-background-raw: 24, 29, 45; - --theme-background-image: url('/wotlk/assets/img/resto_shaman_background.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $shaman, + .95, + '/wotlk/assets/img/resto_shaman_background.jpg' + ); } diff --git a/ui/scss/sims/restoration_shaman/index.scss b/ui/scss/sims/restoration_shaman/index.scss index 930e69663b..ef880c6169 100644 --- a/ui/scss/sims/restoration_shaman/index.scss +++ b/ui/scss/sims/restoration_shaman/index.scss @@ -1,3 +1,3 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; @import "../../core/components/totem_inputs"; +@import "./sim"; diff --git a/ui/scss/sims/retribution_paladin/_sim.scss b/ui/scss/sims/retribution_paladin/_sim.scss index 8c49378b2b..b0fb0ddc94 100644 --- a/ui/scss/sims/retribution_paladin/_sim.scss +++ b/ui/scss/sims/retribution_paladin/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'paladin'; - // Set color variables which control the site theme. .retribution-paladin-sim-ui { - --theme-color-background: rgb(20, 13, 18); - --theme-color-background-raw: 20, 13, 18; - --theme-background-image: url('/wotlk/assets/img/retribution_paladin.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $paladin, + .95, + '/wotlk/assets/img/retribution_paladin.jpg' + ); } diff --git a/ui/scss/sims/retribution_paladin/index.scss b/ui/scss/sims/retribution_paladin/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/retribution_paladin/index.scss +++ b/ui/scss/sims/retribution_paladin/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim"; diff --git a/ui/scss/sims/rogue/_sim.scss b/ui/scss/sims/rogue/_sim.scss index 82098fd2f1..85df396bcd 100644 --- a/ui/scss/sims/rogue/_sim.scss +++ b/ui/scss/sims/rogue/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'rogue'; - // Set color variables which control the site theme. .rogue-sim-ui { - --theme-color-background: #19190c; - --theme-color-background-raw: 25, 25, 12; - --theme-background-image: url('/wotlk/assets/img/rogue_background.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $rogue, + .95, + '/wotlk/assets/img/rogue_background.jpg' + ); } diff --git a/ui/scss/sims/rogue/index.scss b/ui/scss/sims/rogue/index.scss index 930e69663b..ef880c6169 100644 --- a/ui/scss/sims/rogue/index.scss +++ b/ui/scss/sims/rogue/index.scss @@ -1,3 +1,3 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; @import "../../core/components/totem_inputs"; +@import "./sim"; diff --git a/ui/scss/sims/shadow_priest/_sim.scss b/ui/scss/sims/shadow_priest/_sim.scss index 3dec324be7..fb31f1eaa5 100644 --- a/ui/scss/sims/shadow_priest/_sim.scss +++ b/ui/scss/sims/shadow_priest/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'priest'; - // Set color variables which control the site theme. .shadow-priest-sim-ui { - --theme-color-background: #1d1726; - --theme-color-background-raw: 29, 23, 38; - --theme-background-image: url('/wotlk/assets/img/shadow_priest_background.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $priest, + .95, + '/wotlk/assets/img/shadow_priest_background.jpg' + ); } diff --git a/ui/scss/sims/shadow_priest/index.scss b/ui/scss/sims/shadow_priest/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/shadow_priest/index.scss +++ b/ui/scss/sims/shadow_priest/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim"; diff --git a/ui/scss/sims/smite_priest/_sim.scss b/ui/scss/sims/smite_priest/_sim.scss index 4db00b0cc4..e2cf406f23 100644 --- a/ui/scss/sims/smite_priest/_sim.scss +++ b/ui/scss/sims/smite_priest/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'priest'; - // Set color variables which control the site theme. .smite-priest-sim-ui { - --theme-color-background: #1d1726; - --theme-color-background-raw: 29, 23, 38; - --theme-background-image: url('/wotlk/assets/img/smite_priest_background.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $priest, + .95, + '/wotlk/assets/img/smite_priest_background.jpg' + ); } diff --git a/ui/scss/sims/smite_priest/index.scss b/ui/scss/sims/smite_priest/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/smite_priest/index.scss +++ b/ui/scss/sims/smite_priest/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim"; diff --git a/ui/scss/sims/tank_deathknight/_sim.scss b/ui/scss/sims/tank_deathknight/_sim.scss index 1c8104b117..08a66cdd71 100644 --- a/ui/scss/sims/tank_deathknight/_sim.scss +++ b/ui/scss/sims/tank_deathknight/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'death-knight'; - // Set color variables which control the site theme. .tank-deathknight-sim-ui { - --theme-color-background: #1d1626; - --theme-color-background-raw: 19, 5, 7; - --theme-background-image: url('/wotlk/assets/img/death_knight_background.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $death-knight, + .95, + '/wotlk/assets/img/death_knight_background.jpg' + ); } diff --git a/ui/scss/sims/tank_deathknight/index.scss b/ui/scss/sims/tank_deathknight/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/tank_deathknight/index.scss +++ b/ui/scss/sims/tank_deathknight/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim"; diff --git a/ui/scss/sims/warlock/_sim.scss b/ui/scss/sims/warlock/_sim.scss index 35fb2e4f02..0de08f3d3f 100644 --- a/ui/scss/sims/warlock/_sim.scss +++ b/ui/scss/sims/warlock/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'warlock'; - // Set color variables which control the site theme. .warlock-sim-ui { - --theme-color-background: rgb(24, 18, 27); - --theme-color-background-raw: 24, 18, 27; - --theme-background-image: url('/wotlk/assets/img/warlock_background.jpg'); - --theme-background-opacity: 0.87; - --main-text-color: White; + @include theme-color( + $warlock, + .95, + '/wotlk/assets/img/warlock_background.jpg' + ); } diff --git a/ui/scss/sims/warlock/index.scss b/ui/scss/sims/warlock/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/warlock/index.scss +++ b/ui/scss/sims/warlock/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim"; diff --git a/ui/scss/sims/warrior/_sim.scss b/ui/scss/sims/warrior/_sim.scss index fcfff86859..081d616cc6 100644 --- a/ui/scss/sims/warrior/_sim.scss +++ b/ui/scss/sims/warrior/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'warrior'; - // Set color variables which control the site theme. .warrior-sim-ui { - --theme-color-background: #1e0f0c; - --theme-color-background-raw: 29, 21, 16; - --theme-background-image: url('/wotlk/assets/img/warrior_background.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $warrior, + .95, + '/wotlk/assets/img/warrior_background.jpg' + ); } diff --git a/ui/scss/sims/warrior/index.scss b/ui/scss/sims/warrior/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/warrior/index.scss +++ b/ui/scss/sims/warrior/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim"; From f5b055f1024a0f785a7669b8e0091554bc72aa05 Mon Sep 17 00:00:00 2001 From: Kayla Glick Date: Sat, 28 Jan 2023 16:05:32 -0500 Subject: [PATCH 2/5] working on modals --- ui/core/components/base_modal.ts | 14 +- ui/core/components/detailed_results.ts | 2 +- .../components/detailed_results/timeline.ts | 2 +- ui/core/components/encounter_picker.ts | 4 +- ui/core/components/exporters.ts | 44 +++-- ui/core/components/gear_picker.ts | 18 +- ui/core/components/importers.ts | 51 +++--- ui/core/components/list_picker.ts | 2 +- ui/core/components/log_runner.ts | 2 +- ui/core/components/saved_data_manager.ts | 12 +- ui/core/components/settings_menu.ts | 108 +++++------ ui/core/components/sim_header.ts | 2 +- ui/core/components/sim_title_dropdown.ts | 2 +- ui/core/components/stat_weights_action.ts | 173 ++++++++---------- ui/core/individual_sim_ui.ts | 16 +- ui/core/sim_ui.ts | 2 +- ui/raid/raid_sim_ui.ts | 6 +- ui/scss/core/components/_close_button.scss | 2 +- ui/scss/core/components/_exporters.scss | 30 +-- ui/scss/core/components/_gear_picker.scss | 51 +++--- ui/scss/core/components/_importers.scss | 50 +---- .../core/components/_item_swap_picker.scss | 15 +- ui/scss/core/components/_raid_sim_action.scss | 4 + .../core/components/_saved_data_manager.scss | 38 ++-- ui/scss/core/components/_settings_menu.scss | 42 +---- .../core/components/_stat_weights_action.scss | 139 ++++++-------- ui/scss/core/sim_ui/_header.scss | 4 - .../shared/_bootstrap_style_overrides.scss | 6 +- ui/scss/shared/_global.scss | 17 +- ui/scss/shared/_mixins.scss | 40 ++-- ui/scss/shared/_variables.scss | 8 +- 31 files changed, 393 insertions(+), 513 deletions(-) diff --git a/ui/core/components/base_modal.ts b/ui/core/components/base_modal.ts index 52deee2c6b..5bdc8f871a 100644 --- a/ui/core/components/base_modal.ts +++ b/ui/core/components/base_modal.ts @@ -5,11 +5,13 @@ import { Modal } from 'bootstrap'; type BaseModalConfig = { closeButton?: CloseButtonConfig, + footer?: Boolean, header?: boolean, }; const DEFAULT_CONFIG = { closeButton: {}, + footer: false, header: true, } @@ -19,6 +21,7 @@ export class BaseModal extends Component { readonly modal: Modal; readonly header: HTMLElement | undefined; readonly body: HTMLElement; + readonly footer: HTMLElement | undefined; constructor(parent: HTMLElement, cssClass: string, config: BaseModalConfig = {}) { super(parent, 'modal'); @@ -46,6 +49,12 @@ export class BaseModal extends Component { this.addCloseButton(); + if (this.config.footer) { + this.footer = document.createElement('div'); + this.footer.classList.add('modal-footer'); + container.appendChild(this.footer); + } + this.modal = new Modal(this.rootElem); this.open(); @@ -69,8 +78,9 @@ export class BaseModal extends Component { this.rootElem.addEventListener('hide.bs.modal', () => { const modals = this.rootElem.parentElement?.querySelectorAll('.modal') as NodeListOf; const siblingModals = Array.from(modals).filter((e) => e != this.rootElem); - const modalIndex = siblingModals.length - 1 < 0 ? 0 : siblingModals.length - 1; - siblingModals[modalIndex].style.zIndex = '1055'; + + if (siblingModals.length) + siblingModals[siblingModals.length - 1].style.zIndex = '1055'; }); this.modal.show(); diff --git a/ui/core/components/detailed_results.ts b/ui/core/components/detailed_results.ts index d4d340d1fc..d4ab5340b7 100644 --- a/ui/core/components/detailed_results.ts +++ b/ui/core/components/detailed_results.ts @@ -364,7 +364,7 @@ export class EmbeddedDetailedResults extends DetailedResults { const newTabBtn = document.createElement('div'); newTabBtn.classList.add('detailed-results-controls-div'); - newTabBtn.innerHTML = ``; + newTabBtn.innerHTML = ``; this.rootElem.prepend(newTabBtn); diff --git a/ui/core/components/detailed_results/timeline.ts b/ui/core/components/detailed_results/timeline.ts index 6feeeb11b2..86e6af7461 100644 --- a/ui/core/components/detailed_results/timeline.ts +++ b/ui/core/components/detailed_results/timeline.ts @@ -58,7 +58,7 @@ export class Timeline extends ResultComponent {
Timeline data visualizes only 1 sim iteration. -
Sim 1 Iteration
+
Sim 1 Iteration
-
-
- - -
+ this.header!.insertAdjacentHTML('afterbegin', `
${title}
`); + this.body.innerHTML = ` + + `; + this.footer!.innerHTML = ` + + ${allowDownload ? ` + + ` : '' + } `; - - this.addCloseButton(); this.textElem = this.rootElem.getElementsByClassName('exporter-textarea')[0] as HTMLElement; @@ -41,17 +45,21 @@ export abstract class Exporter extends Popup { alert(data); } else { navigator.clipboard.writeText(data); + const originalContent = clipboardButton.innerHTML; + clipboardButton.style.width = `${clipboardButton.getBoundingClientRect().width.toFixed(3)}px`; + clipboardButton.innerHTML = ` Copied`; + setTimeout(() => { + clipboardButton.innerHTML = originalContent; + }, 1500); } }); - const downloadButton = this.rootElem.getElementsByClassName('download-button')[0] as HTMLElement; if (allowDownload) { + const downloadButton = this.rootElem.getElementsByClassName('download-button')[0] as HTMLElement; downloadButton.addEventListener('click', event => { const data = this.textElem.textContent!; downloadString(data, 'wowsims.json'); }); - } else { - downloadButton.remove(); } } diff --git a/ui/core/components/gear_picker.ts b/ui/core/components/gear_picker.ts index c36d587b57..54948711e8 100644 --- a/ui/core/components/gear_picker.ts +++ b/ui/core/components/gear_picker.ts @@ -21,7 +21,6 @@ import { import { Component } from './component.js'; import { FiltersMenu } from './filters_menu.js'; -import { Popup } from './popup.js'; import { makePhaseSelector } from './other_inputs.js'; import { makeShow1hWeaponsSelector } from './other_inputs.js'; import { makeShow2hWeaponsSelector } from './other_inputs.js'; @@ -31,7 +30,6 @@ import {ItemSwapGear } from '../proto_utils/gear.js' import { SimUI } from '../sim_ui.js'; import { BaseModal } from './base_modal.js'; -declare var $: any; declare var tippy: any; declare var WowSim: any; @@ -409,21 +407,17 @@ class SelectorModal extends BaseModal { private readonly contentElem: HTMLElement; constructor(parent: HTMLElement, simUI: SimUI, player: Player, slot: ItemSlot, equippedItem: EquippedItem | null, eligibleItems: Array, eligibleEnchants: Array, gearData: GearData) { - super(parent, 'selector-modal', {header: false}); + super(parent, 'selector-modal', {header: true}); this.simUI = simUI; this.player = player; window.scrollTo({top: 0}); - this.body.innerHTML = ` -
    -
-
-
- `; + this.header!.insertAdjacentHTML('afterbegin', `
    `); + this.body.innerHTML = `
    ` - this.tabsElem = this.rootElem.getElementsByClassName('selector-modal-tabs')[0] as HTMLElement; - this.contentElem = this.rootElem.getElementsByClassName('selector-modal-tab-content')[0] as HTMLElement; + this.tabsElem = this.rootElem.querySelector('.selector-modal-tabs') as HTMLElement; + this.contentElem = this.rootElem.querySelector('.selector-modal-tab-content') as HTMLElement; this.setData(slot, equippedItem, eligibleItems, eligibleEnchants, gearData); } @@ -643,7 +637,7 @@ class SelectorModal extends BaseModal { >
    - +
    diff --git a/ui/core/components/importers.ts b/ui/core/components/importers.ts index 7bbb77c2a7..f365d38d2e 100644 --- a/ui/core/components/importers.ts +++ b/ui/core/components/importers.ts @@ -1,4 +1,3 @@ -import { Popup } from './popup'; import { IndividualSimUI } from '../individual_sim_ui'; import { SimUI } from '../sim_ui'; import { TypedEvent } from '../typed_event'; @@ -16,41 +15,39 @@ import { Database } from '../proto_utils/database'; import { classNames, nameToClass, nameToRace, nameToProfession } from '../proto_utils/names'; import { classGlyphsConfig, talentSpellIdsToTalentString } from '../talents/factory'; import { GlyphConfig } from '../talents/glyphs_picker'; +import { BaseModal } from './base_modal'; -export abstract class Importer extends Popup { +export abstract class Importer extends BaseModal { protected readonly textElem: HTMLTextAreaElement; protected readonly descriptionElem: HTMLElement; protected readonly importButton: HTMLButtonElement; private readonly includeFile: boolean; constructor(parent: HTMLElement, simUI: SimUI, title: string, includeFile: boolean) { - super(parent); + super(parent, 'importer', {footer: true}); this.includeFile = includeFile; const uploadInputId = 'upload-input-' + title.toLowerCase().replaceAll(' ', '-'); - this.rootElem.classList.add('importer'); - let htmlVal = ` - ${title} -
    -
    -
    - -
    -
    + this.header!.insertAdjacentHTML('afterbegin', `
    ${title}
    `); + this.body.innerHTML = ` +
    + `; - if (this.includeFile) { - htmlVal += ` - - ` - } - htmlVal += ` -
    + this.footer!.innerHTML = ` + ${this.includeFile ? ` + + + ` : '' + } + `; - this.rootElem.innerHTML = htmlVal - - this.addCloseButton(); - this.textElem = this.rootElem.getElementsByClassName('importer-textarea')[0] as HTMLTextAreaElement; this.descriptionElem = this.rootElem.getElementsByClassName('import-description')[0] as HTMLElement; @@ -127,12 +124,8 @@ export class IndividualJsonImporter extends Importer { this.simUI = simUI; this.descriptionElem.innerHTML = ` -

    - Import settings from a JSON text file, which can be created using the JSON Export feature of this site. -

    -

    - To import, paste the JSON text below and click, 'Import'. -

    +

    Import settings from a JSON file, which can be created using the JSON Export feature.

    +

    To import, upload the file or paste the text below, then click, 'Import'.

    `; } diff --git a/ui/core/components/list_picker.ts b/ui/core/components/list_picker.ts index fd898cd1ea..5f529d4956 100644 --- a/ui/core/components/list_picker.ts +++ b/ui/core/components/list_picker.ts @@ -41,7 +41,7 @@ export class ListPicker extends Input${config.title}` : '' }
    - + `; if (this.config.titleTooltip) diff --git a/ui/core/components/log_runner.ts b/ui/core/components/log_runner.ts index 024219519d..95d900f756 100644 --- a/ui/core/components/log_runner.ts +++ b/ui/core/components/log_runner.ts @@ -12,7 +12,7 @@ export class LogRunner extends Component { this.rootElem.appendChild(controlBar); const simButton = document.createElement('button'); - simButton.classList.add('log-runner-button', 'btn'); + simButton.classList.add('log-runner-button', 'btn', 'btn-primary'); simButton.textContent = 'Sim 1 Iteration'; controlBar.appendChild(simButton); diff --git a/ui/core/components/saved_data_manager.ts b/ui/core/components/saved_data_manager.ts index 6ba3a827be..dd9e6c00ff 100644 --- a/ui/core/components/saved_data_manager.ts +++ b/ui/core/components/saved_data_manager.ts @@ -108,7 +108,13 @@ export class SavedDataManager extends Component { if (!config.isPreset) { let deleteFragment = document.createElement('fragment'); deleteFragment.innerHTML = ` - + `; @@ -116,6 +122,8 @@ export class SavedDataManager extends Component { const deleteButton = deleteFragment.children[0] as HTMLElement; dataElem.appendChild(deleteButton); + Tooltip.getOrCreateInstance(deleteButton); + deleteButton.addEventListener('click', event => { event.stopPropagation(); const shouldDelete = confirm(`Delete saved ${this.config.label} '${config.name}'?`); @@ -212,7 +220,7 @@ export class SavedDataManager extends Component {
    - +
    `; diff --git a/ui/core/components/settings_menu.ts b/ui/core/components/settings_menu.ts index 728cb11730..9ed4d13ec8 100644 --- a/ui/core/components/settings_menu.ts +++ b/ui/core/components/settings_menu.ts @@ -1,69 +1,53 @@ -import { Class } from '../proto/common.js'; -import { EquipmentSpec } from '../proto/common.js'; -import { ItemSpec } from '../proto/common.js'; -import { Race } from '../proto/common.js'; -import { Spec } from '../proto/common.js'; -import { Stat } from '../proto/common.js'; import { SimUI } from '../sim_ui.js'; -import { IndividualSimUI } from '../individual_sim_ui.js'; import { Sim } from '../sim.js'; -import { Player } from '../player.js'; -import { classNames, nameToClass, nameToRace, statNames } from '../proto_utils/names.js'; -import { talentSpellIdsToTalentString } from '../talents/factory.js'; import { EventID, TypedEvent } from '../typed_event.js'; import { wowheadSupportedLanguages } from '../constants/lang.js'; import { BooleanPicker } from '../components/boolean_picker.js'; import { EnumPicker } from '../components/enum_picker.js'; import { NumberPicker } from '../components/number_picker.js'; -import { getEnumValues } from '../utils.js'; +import { BaseModal } from './base_modal.js'; +import { Tooltip } from 'bootstrap'; -import { Popup } from './popup.js'; - -declare var $: any; -declare var tippy: any; - -export class SettingsMenu extends Popup { +export class SettingsMenu extends BaseModal { private readonly simUI: SimUI; constructor(parent: HTMLElement, simUI: SimUI) { - super(parent); - this.rootElem.classList.add('settings-menu'); + super(parent, 'settings-menu', {footer: true}); this.simUI = simUI; - this.rootElem.innerHTML = ` -
    - OPTIONS -
    -
    -
    - + this.header!.insertAdjacentHTML('afterbegin', `
    Options
    `); + this.body.innerHTML = ` +
    +
    -
    - Last used RNG seed:0 +
    + Last used RNG seed: 0
    -
    -
    -
    -
    -
    +
    +
    +
    `; - this.addCloseButton(); + this.footer!.innerHTML = ` + + ` const restoreDefaultsButton = this.rootElem.getElementsByClassName('restore-defaults-button')[0] as HTMLElement; + Tooltip.getOrCreateInstance(restoreDefaultsButton); restoreDefaultsButton.addEventListener('click', event => { this.simUI.applyDefaults(TypedEvent.nextEventID()); }); - tippy(restoreDefaultsButton, { - 'content': 'Restores all default settings (gear, consumes, buffs, talents, EP weights, etc).', - 'allowHTML': true, - }); const fixedRngSeed = this.rootElem.getElementsByClassName('fixed-rng-seed')[0] as HTMLElement; new NumberPicker(fixedRngSeed, this.simUI.sim, { label: 'Fixed RNG Seed', labelTooltip: 'Seed value for the random number generator used during sims, or 0 to use different randomness each run. Use this to share exact sim results or for debugging.', + extraCssClasses: ['mb-0'], changedEvent: (sim: Sim) => sim.fixedRngSeedChangeEmitter, getValue: (sim: Sim) => sim.getFixedRngSeed(), setValue: (eventID: EventID, sim: Sim, newValue: number) => { @@ -75,30 +59,6 @@ export class SettingsMenu extends Popup { lastUsedRngSeed.textContent = String(this.simUI.sim.getLastUsedRngSeed()); this.simUI.sim.lastUsedRngSeedChangeEmitter.on(() => lastUsedRngSeed.textContent = String(this.simUI.sim.getLastUsedRngSeed())); - const showThreatMetrics = this.rootElem.getElementsByClassName('show-threat-metrics-picker')[0] as HTMLElement; - new BooleanPicker(showThreatMetrics, this.simUI.sim, { - label: 'Show Threat/Tank Options', - labelTooltip: 'Shows all options and metrics relevant to tanks, like TPS/DTPS.', - inline: true, - changedEvent: (sim: Sim) => sim.showThreatMetricsChangeEmitter, - getValue: (sim: Sim) => sim.getShowThreatMetrics(), - setValue: (eventID: EventID, sim: Sim, newValue: boolean) => { - sim.setShowThreatMetrics(eventID, newValue); - }, - }); - - const showExperimental = this.rootElem.getElementsByClassName('show-experimental-picker')[0] as HTMLElement; - new BooleanPicker(showExperimental, this.simUI.sim, { - label: 'Show Experimental', - labelTooltip: 'Shows experimental options, if there are any active experiments.', - inline: true, - changedEvent: (sim: Sim) => sim.showExperimentalChangeEmitter, - getValue: (sim: Sim) => sim.getShowExperimental(), - setValue: (eventID: EventID, sim: Sim, newValue: boolean) => { - sim.setShowExperimental(eventID, newValue); - }, - }); - const language = this.rootElem.getElementsByClassName('language-picker')[0] as HTMLElement; const langs = Object.keys(wowheadSupportedLanguages); const defaultLang = langs.indexOf('en'); @@ -122,5 +82,29 @@ export class SettingsMenu extends Popup { }); // Refresh page after language change, to apply the changes. languagePicker.changeEmitter.on(() => setTimeout(() => location.reload(), 100)); + + const showThreatMetrics = this.rootElem.getElementsByClassName('show-threat-metrics-picker')[0] as HTMLElement; + new BooleanPicker(showThreatMetrics, this.simUI.sim, { + label: 'Show Threat/Tank Options', + labelTooltip: 'Shows all options and metrics relevant to tanks, like TPS/DTPS.', + inline: true, + changedEvent: (sim: Sim) => sim.showThreatMetricsChangeEmitter, + getValue: (sim: Sim) => sim.getShowThreatMetrics(), + setValue: (eventID: EventID, sim: Sim, newValue: boolean) => { + sim.setShowThreatMetrics(eventID, newValue); + }, + }); + + const showExperimental = this.rootElem.getElementsByClassName('show-experimental-picker')[0] as HTMLElement; + new BooleanPicker(showExperimental, this.simUI.sim, { + label: 'Show Experimental', + labelTooltip: 'Shows experimental options, if there are any active experiments.', + inline: true, + changedEvent: (sim: Sim) => sim.showExperimentalChangeEmitter, + getValue: (sim: Sim) => sim.getShowExperimental(), + setValue: (eventID: EventID, sim: Sim, newValue: boolean) => { + sim.setShowExperimental(eventID, newValue); + }, + }); } } diff --git a/ui/core/components/sim_header.ts b/ui/core/components/sim_header.ts index 27f13d04c4..5d654f64be 100644 --- a/ui/core/components/sim_header.ts +++ b/ui/core/components/sim_header.ts @@ -249,7 +249,7 @@ export class SimHeader extends Component { icon: "fas fa-cog fa-lg", tooltip: "Show Sim Options", classes: 'sim-options', - onclick: () => new SettingsMenu(this.rootElem, this.simUI) + onclick: () => new SettingsMenu(this.simUI.rootElem, this.simUI) }) } diff --git a/ui/core/components/sim_title_dropdown.ts b/ui/core/components/sim_title_dropdown.ts index f2aa2c66e4..c81fed552a 100644 --- a/ui/core/components/sim_title_dropdown.ts +++ b/ui/core/components/sim_title_dropdown.ts @@ -262,7 +262,7 @@ export class SimTitleDropdown extends Component { let label = data.type == 'Raid' ? LaunchStatus[raidSimStatus] : LaunchStatus[simLaunchStatuses[data.index]]; let elem = document.createElement('span'); - elem.classList.add('launch-status-label', 'text-primary'); + elem.classList.add('launch-status-label', 'text-brand'); elem.textContent = label; return elem.outerHTML; diff --git a/ui/core/components/stat_weights_action.ts b/ui/core/components/stat_weights_action.ts index 79b603e345..a1d6bc2695 100644 --- a/ui/core/components/stat_weights_action.ts +++ b/ui/core/components/stat_weights_action.ts @@ -1,26 +1,24 @@ -import { StatWeightsRequest, StatWeightsResult, StatWeightValues, ProgressMetrics } from '../proto/api.js'; +import { StatWeightsResult, StatWeightValues, ProgressMetrics } from '../proto/api.js'; import { ItemSlot } from '../proto/common.js'; import { GemColor } from '../proto/common.js'; import { Profession } from '../proto/common.js'; import { Stat, PseudoStat, UnitStats } from '../proto/common.js'; import { Stats, UnitStat } from '../proto_utils/stats.js'; import { Gear } from '../proto_utils/gear.js'; -import { getClassStatName, statOrder, pseudoStatOrder, pseudoStatNames } from '../proto_utils/names.js'; +import { getClassStatName } from '../proto_utils/names.js'; import { IndividualSimUI } from '../individual_sim_ui.js'; import { EventID, TypedEvent } from '../typed_event.js'; import { Player } from '../player.js'; import { stDevToConf90 } from '../utils.js'; import { BooleanPicker } from '../components/boolean_picker.js'; import { NumberPicker } from '../components/number_picker.js'; -import { ResultsViewer } from '../components/results_viewer.js'; -import { combinations, combinationsWithDups, permutations, getEnumValues, maxIndex, sum } from '../utils.js'; -import { - UIGem as Gem, -} from '../proto/ui.js'; +import { combinationsWithDups, permutations, sum } from '../utils.js'; +import { UIGem as Gem } from '../proto/ui.js'; import * as Gems from '../proto_utils/gems.js'; -import { Popup } from './popup.js'; +import { BaseModal } from './base_modal.js'; +import { Tooltip } from 'bootstrap'; declare var tippy: any; @@ -30,12 +28,10 @@ export function addStatWeightsAction(simUI: IndividualSimUI, epStats: Array }); } -class EpWeightsMenu extends Popup { +class EpWeightsMenu extends BaseModal { private readonly simUI: IndividualSimUI; - private readonly tableContainer: HTMLElement; + private readonly table: HTMLElement; private readonly tableBody: HTMLElement; - private readonly tableHeader: HTMLElement; - private readonly resultsViewer: ResultsViewer; private statsType: string; private epStats: Array; @@ -43,36 +39,29 @@ class EpWeightsMenu extends Popup { private epReferenceStat: Stat; constructor(simUI: IndividualSimUI, epStats: Array, epPseudoStats: Array, epReferenceStat: Stat) { - super(simUI.rootElem); + super(simUI.rootElem, 'ep-weights-menu', {footer: true}); this.simUI = simUI; this.statsType = 'ep'; this.epStats = epStats; this.epPseudoStats = epPseudoStats; this.epReferenceStat = epReferenceStat; - this.rootElem.classList.add('ep-weights-menu'); - this.rootElem.innerHTML = ` -
    -
    - -
    -
    -
    -
    -
    + this.header?.insertAdjacentHTML('afterbegin', '
    Calculate Stat Weights
    '); + this.body.innerHTML = ` +
    +
    -
    -
    - +
    -

    The 'Current EPs' column displays the values currently used by the item pickers to sort items. Use icon above the EPs to use newly calculated EPs.

    -
    +

    The 'Current EP' column displays the values currently used by the item pickers to sort items.
    + Use the icon above the EPs to use newly calculated EPs.

    +
    - + + +
    Stat @@ -130,25 +119,41 @@ class EpWeightsMenu extends Popup { e"ap an>
    `; + this.footer!.innerHTML = ` + + + `; - this.tableContainer = this.rootElem.getElementsByClassName('ep-weights-table')[0] as HTMLElement; - this.tableBody = this.rootElem.querySelector('#ep-tbody') as HTMLElement; - this.tableHeader = this.rootElem.querySelector('#ep-tbody > tr') as HTMLElement; - - const resultsViewerElem = this.rootElem.getElementsByClassName('ep-weights-results')[0] as HTMLElement; - this.resultsViewer = new ResultsViewer(resultsViewerElem); + this.table = this.rootElem.querySelector('.results-ep-table') as HTMLElement; + this.tableBody = this.rootElem.querySelector('.results-ep-table tbody') as HTMLElement; const updateType = () => { if (this.statsType == 'ep') { - this.tableContainer.classList.remove('stats-type-weight'); - this.tableContainer.classList.add('stats-type-ep'); + this.table.classList.remove('stats-type-weight'); + this.table.classList.add('stats-type-ep'); } else { - this.tableContainer.classList.add('stats-type-weight'); - this.tableContainer.classList.remove('stats-type-ep'); + this.table.classList.add('stats-type-weight'); + this.table.classList.remove('stats-type-ep'); } }; @@ -160,14 +165,28 @@ class EpWeightsMenu extends Popup { selectElem.value = this.statsType; updateType(); + const optimizeGemsButton = this.rootElem.getElementsByClassName('optimize-gems')[0] as HTMLElement; + Tooltip.getOrCreateInstance(optimizeGemsButton); + optimizeGemsButton.addEventListener('click', async event => { + const previousContents = optimizeGemsButton.innerHTML; + optimizeGemsButton.classList.add('disabled'); + optimizeGemsButton.style.width = `${optimizeGemsButton.getBoundingClientRect().width.toFixed(3)}px`; + optimizeGemsButton.innerHTML = ` Running`; + await this.optimizeGems(TypedEvent.nextEventID()); + optimizeGemsButton.innerHTML = previousContents; + optimizeGemsButton.classList.remove('disabled'); + }); + const calcButton = this.rootElem.getElementsByClassName('calc-weights')[0] as HTMLElement; calcButton.addEventListener('click', async event => { - this.resultsViewer.setPending(); + const previousContents = calcButton.innerHTML; + calcButton.classList.add('disabled'); + calcButton.style.width = `${calcButton.getBoundingClientRect().width.toFixed(3)}px`; + calcButton.innerHTML = ` Running`; const iterations = this.simUI.sim.getIterations(); - const result = await this.simUI.player.computeStatWeights(TypedEvent.nextEventID(), this.epStats, this.epPseudoStats, this.epReferenceStat, (progress: ProgressMetrics) => { - this.setSimProgress(progress); - }); - this.resultsViewer.hideAll(); + const result = await this.simUI.player.computeStatWeights(TypedEvent.nextEventID(), this.epStats, this.epPseudoStats, this.epReferenceStat, (progress: ProgressMetrics) => {}); + calcButton.innerHTML = previousContents; + calcButton.classList.remove('disabled'); this.simUI.prevEpIterations = iterations; this.simUI.prevEpSimResult = result; this.updateTable(iterations, result); @@ -205,49 +224,20 @@ class EpWeightsMenu extends Popup { label: 'Show All Stats', inline: true, changedEvent: () => new TypedEvent(), - getValue: () => this.tableContainer.classList.contains('show-all-stats'), + getValue: () => this.table.classList.contains('show-all-stats'), setValue: (eventID: EventID, menu: EpWeightsMenu, newValue: boolean) => { if (newValue) { - this.tableContainer.classList.add('show-all-stats'); + this.table.classList.add('show-all-stats'); } else { - this.tableContainer.classList.remove('show-all-stats'); + this.table.classList.remove('show-all-stats'); } - this.applyAlternatingColors(); }, }); this.updateTable(this.simUI.prevEpIterations || 1, this.getPrevSimResult()); - - const optimizeGemsButton = this.rootElem.getElementsByClassName('optimize-gems')[0] as HTMLElement; - tippy(optimizeGemsButton, { - 'content': ` -

    WARNING: This feature is experimental, and will not always produce the most optimal gems especially when interacting with soft/hard stat caps.

    -

    Optimizes equipped gems to maximize EP, based on the values in Current EP.

    -

    Does not change the meta gem, but ensures that its condition is met. Uses JC gems if Jewelcrafting is a selected profession.

    - `, - 'allowHTML': true, - }); - optimizeGemsButton.addEventListener('click', event => this.optimizeGems(TypedEvent.nextEventID())); - - this.addCloseButton(); - } - - setSimProgress(progress: ProgressMetrics) { - this.resultsViewer.setContent(` -
    -
    ${progress.completedSims} / ${progress.totalSims}
    simulations complete
    -
    - ${progress.completedIterations} / ${progress.totalIterations}
    iterations complete -
    -
    -`); } private updateTable(iterations: number, result: StatWeightsResult) { - this.tableHeader.remove(); - this.tableBody.innerHTML = ''; - this.tableBody.appendChild(this.tableHeader); - EpWeightsMenu.epUnitStats.forEach(stat => { const row = this.makeTableRow(stat, iterations, result); if ((stat.isStat() && !this.epStats.includes(stat.getStat())) || (stat.isPseudoStat() && !this.epPseudoStats.includes(stat.getPseudoStat()))) { @@ -255,16 +245,23 @@ class EpWeightsMenu extends Popup { } this.tableBody.appendChild(row); }); - - this.applyAlternatingColors(); } - private makeTableRow(stat: UnitStat, iterations: number, result: StatWeightsResult): HTMLElement { const row = document.createElement('tr'); const makeWeightAndEpCellHtml = (statWeights: StatWeightValues, className: string): string => { return ` - ${stat.getProtoValue(statWeights.weights!).toFixed(2)}${stDevToConf90(stat.getProtoValue(statWeights.weightsStdev!), iterations).toFixed(2)} - ${stat.getProtoValue(statWeights.epValues!).toFixed(2)}${stDevToConf90(stat.getProtoValue(statWeights.epValuesStdev!), iterations).toFixed(2)} + + ${stat.getProtoValue(statWeights.weights!).toFixed(2)} + + (${stDevToConf90(stat.getProtoValue(statWeights.weightsStdev!), iterations).toFixed(2)}) + + + + ${stat.getProtoValue(statWeights.epValues!).toFixed(2)} + + (${stDevToConf90(stat.getProtoValue(statWeights.epValuesStdev!), iterations).toFixed(2)}) + + `; }; row.innerHTML = ` @@ -290,18 +287,6 @@ class EpWeightsMenu extends Popup { return row; } - private applyAlternatingColors() { - (Array.from(this.tableBody.childNodes) as Array) - .filter(row => window.getComputedStyle(row).getPropertyValue('display') != 'none') - .forEach((row, i) => { - if (i % 2 == 0) { - row.classList.remove('odd'); - } else { - row.classList.add('odd'); - } - }); - } - private getPrevSimResult(): StatWeightsResult { return this.simUI.prevEpSimResult || StatWeightsResult.create({ dps: { @@ -331,7 +316,7 @@ class EpWeightsMenu extends Popup { }); } - private optimizeGems(eventID: EventID) { + private async optimizeGems(eventID: EventID) { // Replace 0 weights with a very tiny value, so we always prefer to take free stats even if the user gave a 0 weight. let epWeights = this.simUI.player.getEpWeights(); epWeights = new Stats(epWeights.asArray().map(w => w == 0 ? 1e-8 : w)); diff --git a/ui/core/individual_sim_ui.ts b/ui/core/individual_sim_ui.ts index f061834a6a..b3ebd79cbf 100644 --- a/ui/core/individual_sim_ui.ts +++ b/ui/core/individual_sim_ui.ts @@ -508,14 +508,14 @@ export abstract class IndividualSimUI extends SimUI { } private addTopbarComponents() { - this.simHeader.addImportLink('JSON', parent => new Importers.IndividualJsonImporter(parent, this), true); - this.simHeader.addImportLink('80U', parent => new Importers.Individual80UImporter(parent, this), true); - this.simHeader.addImportLink('Addon', parent => new Importers.IndividualAddonImporter(parent, this), true); - - this.simHeader.addExportLink('Link', parent => new Exporters.IndividualLinkExporter(parent, this), false); - this.simHeader.addExportLink('JSON', parent => new Exporters.IndividualJsonExporter(parent, this), true); - this.simHeader.addExportLink('80U EP', parent => new Exporters.Individual80UEPExporter(parent, this), false); - this.simHeader.addExportLink('Pawn EP', parent => new Exporters.IndividualPawnEPExporter(parent, this), false); + this.simHeader.addImportLink('JSON', (parent) => new Importers.IndividualJsonImporter(this.rootElem, this), true); + this.simHeader.addImportLink('80U', (parent) => new Importers.Individual80UImporter(this.rootElem, this), true); + this.simHeader.addImportLink('Addon', (parent) => new Importers.IndividualAddonImporter(this.rootElem, this), true); + + this.simHeader.addExportLink('Link', (parent) => new Exporters.IndividualLinkExporter(this.rootElem, this), false); + this.simHeader.addExportLink('JSON', (parent) => new Exporters.IndividualJsonExporter(this.rootElem, this), true); + this.simHeader.addExportLink('80U EP', (parent) => new Exporters.Individual80UEPExporter(this.rootElem, this), false); + this.simHeader.addExportLink('Pawn EP', (parent) => new Exporters.IndividualPawnEPExporter(this.rootElem, this), false); } applyDefaults(eventID: EventID) { diff --git a/ui/core/sim_ui.ts b/ui/core/sim_ui.ts index a9a7d30638..264eb34cda 100644 --- a/ui/core/sim_ui.ts +++ b/ui/core/sim_ui.ts @@ -156,7 +156,7 @@ export abstract class SimUI extends Component { addAction(name: string, cssClass: string, actFn: () => void) { const button = document.createElement('button'); - button.classList.add('btn', 'w-100', cssClass); + button.classList.add('btn', 'btn-primary', 'w-100', cssClass); button.textContent = name; button.addEventListener('click', actFn); this.simActionsContainer.appendChild(button); diff --git a/ui/raid/raid_sim_ui.ts b/ui/raid/raid_sim_ui.ts index 76d658abd4..ad4616927f 100644 --- a/ui/raid/raid_sim_ui.ts +++ b/ui/raid/raid_sim_ui.ts @@ -110,10 +110,10 @@ export class RaidSimUI extends SimUI { } private addTopbarComponents() { - this.simHeader.addImportLink('JSON', parent => new ImportExport.RaidJsonImporter(parent, this)); - this.simHeader.addImportLink('WCL', parent => new ImportExport.RaidWCLImporter(parent, this)); + this.simHeader.addImportLink('JSON', (parent) => new ImportExport.RaidJsonImporter(this.rootElem, this)); + this.simHeader.addImportLink('WCL', (parent) => new ImportExport.RaidWCLImporter(this.rootElem, this)); - this.simHeader.addExportLink('JSON', parent => new ImportExport.RaidJsonExporter(parent, this)); + this.simHeader.addExportLink('JSON', (parent) => new ImportExport.RaidJsonExporter(this.rootElem, this)); } private addRaidTab() { diff --git a/ui/scss/core/components/_close_button.scss b/ui/scss/core/components/_close_button.scss index 874e1c7b97..ecad4a4754 100644 --- a/ui/scss/core/components/_close_button.scss +++ b/ui/scss/core/components/_close_button.scss @@ -1,5 +1,5 @@ .close-button { - top: $modal-inner-padding; + top: $modal-inner-padding * 1.5; right: $modal-inner-padding; white-space: nowrap; z-index: 1; diff --git a/ui/scss/core/components/_exporters.scss b/ui/scss/core/components/_exporters.scss index 639f60c84a..aebae6007b 100644 --- a/ui/scss/core/components/_exporters.scss +++ b/ui/scss/core/components/_exporters.scss @@ -1,27 +1,7 @@ -@import "./popup"; - -// TODO: Clean up - .exporter { - text-align: center; -} - -.exporter-title { - display: block; - font-size: 24px; - font-weight: bold; - margin: 10px; -} - -.exporter-textarea { - width: 100%; - height: 40vh; - resize: none; -} - -.exporter .actions-row { - display: flex; - align-items: center; - justify-content: space-around; - padding: 10px; + .exporter-textarea { + width: 100%; + height: 40vh; + resize: none; + } } diff --git a/ui/scss/core/components/_gear_picker.scss b/ui/scss/core/components/_gear_picker.scss index 8e97a0a962..deb33f4f39 100644 --- a/ui/scss/core/components/_gear_picker.scss +++ b/ui/scss/core/components/_gear_picker.scss @@ -3,21 +3,6 @@ @import "./filters_menu"; @import "./popup"; -.item-swap-picker-root { - .picker-group { - align-items: center; - justify-content: flex-end; - - &> * { - margin-bottom: 0 !important; - } - - &> :last-child { - margin-right: 0; - } - } -} - .gear-picker-root { display: flex; flex-wrap: wrap; @@ -107,17 +92,33 @@ cursor: pointer; } -.selector-modal-tab-content { - .selector-modal-tab-pane { - padding: 0; - - .selector-modal-tab-content-header { - margin: map.get($spacers, 3) 0; - display: flex; - align-items: center; +.selector-modal { + .modal-header { + padding-bottom: 0; + border-bottom: none; - &> *:not(:last-child) { - margin-right: map.get($spacers, 2); + .nav-tabs { + width: 100%; + } + } + + .selector-modal-tab-content { + .selector-modal-tab-pane { + padding: 0; + + .selector-modal-tab-content-header { + margin-bottom: map.get($spacers, 3); + display: flex; + + &> *:not(:last-child) { + margin-right: map.get($spacers, 2); + } + + input, select { + padding-top: $btn-padding-y; + padding-bottom: $btn-padding-y; + font-size: $btn-font-size; + } } } } diff --git a/ui/scss/core/components/_importers.scss b/ui/scss/core/components/_importers.scss index 488f16b98e..cee04bf672 100644 --- a/ui/scss/core/components/_importers.scss +++ b/ui/scss/core/components/_importers.scss @@ -1,49 +1,9 @@ @import "./popup"; -// TODO: Clean up - .importer { - text-align: center; -} - -.importer-title { - display: block; - font-size: 24px; - font-weight: bold; - margin: 10px; -} - -.import-description { - text-align: left; - padding: 5px; -} - -.importer-textarea { - width: 100%; - height: 40vh; - resize: none; -} -.importer-textarea.small-textarea { - height: 1rem; -} - -.importer-button { - cursor: pointer; -} - -.importer-button:disabled { - cursor: wait; - background-color: gray; - color: white; -} - -.importer-upload-input { - display: none !important; -} - -.importer .actions-row { - display: flex; - align-items: center; - justify-content: space-around; - padding: 10px; + .importer-textarea { + width: 100%; + height: 40vh; + resize: none; + } } diff --git a/ui/scss/core/components/_item_swap_picker.scss b/ui/scss/core/components/_item_swap_picker.scss index cda3887969..fd0952bc47 100644 --- a/ui/scss/core/components/_item_swap_picker.scss +++ b/ui/scss/core/components/_item_swap_picker.scss @@ -1,7 +1,20 @@ @use "sass:map"; .item-swap-picker-root { + .picker-group { + align-items: center; + justify-content: flex-end; + + &> * { + margin-bottom: 0 !important; + } + + &> :last-child { + margin-right: 0; + } + } + .input-root:not(:last-child) { margin-right: map.get($spacers, 1); } -} \ No newline at end of file +} diff --git a/ui/scss/core/components/_raid_sim_action.scss b/ui/scss/core/components/_raid_sim_action.scss index 5a30c838ad..e61f072a87 100644 --- a/ui/scss/core/components/_raid_sim_action.scss +++ b/ui/scss/core/components/_raid_sim_action.scss @@ -7,6 +7,10 @@ .results-sim { text-align: center; + .results-metric { + text-align: left; + } + .results-sim-dps .topline-result-avg:after { content: " DPS"; } diff --git a/ui/scss/core/components/_saved_data_manager.scss b/ui/scss/core/components/_saved_data_manager.scss index 20e73973ee..133bb2477f 100644 --- a/ui/scss/core/components/_saved_data_manager.scss +++ b/ui/scss/core/components/_saved_data_manager.scss @@ -26,22 +26,27 @@ padding: 0; margin-bottom: $block-spacer; margin-right: $block-spacer; - border: 1px solid var(--theme-color-primary); + border: 1px solid var(--bs-primary); display: flex; font-size: $content-font-size; + font-weight: normal; transition: $btn-transition; + &.active { + background-color: var(--bs-primary); + + .saved-data-set-name, + .saved-data-set-delete { + color: var(--theme-component-text-color); + } + } + &:hover:not(.active) { - background: var(--theme-color-primary-dampened); + background: var(--bs-primary-dampened); } &.disabled { display: none; - } - - &.active { - background-color: var(--theme-color-primary); - color: var(--theme-component-text-color); } .saved-data-set-name { @@ -56,25 +61,6 @@ } } -@each $color, $value in $theme-colors { - .saved-data-set-chip-#{$color} { - @extend .saved-data-set-chip; - border: 1px solid $value; - - &.active { - @extend .text-bg-#{$color}; - - .saved-data-set-name, .saved-data-set-delete { - color: color-contrast($value); - } - } - - &:hover:not(.active) { - background: rgba($value, .2); - } - } -} - @include media-breakpoint-down(xxl) { .saved-data-manager-root { .saved-data-create-container { diff --git a/ui/scss/core/components/_settings_menu.scss b/ui/scss/core/components/_settings_menu.scss index d02fc8d930..17b787bd1f 100644 --- a/ui/scss/core/components/_settings_menu.scss +++ b/ui/scss/core/components/_settings_menu.scss @@ -1,43 +1,5 @@ -@use "sass:map"; - -@import "./popup"; - .settings-menu { - .menu-title { - text-align: center; - margin: 20px; - font-size: 24px; - } - - .menu-content { - margin: 20px; - display: flex; - flex-wrap: wrap; - justify-content: space-evenly; - overflow-y: auto; - max-height: 80vh; - - .settings-menu-content-left { - margin-right: 2 * map.get($spacers, 3); - flex: 1; - } - - .settings-menu-content-right { - flex: 1; - } - - .restore-defaults-button { - margin-bottom: $block-spacer; - } - - .fixed-rng-seed { - .input-root { - margin-bottom: 0; - } - } - - .last-used-rng-seed-container { - margin-bottom: $block-spacer; - } + .fixed-rng-seed-container { + margin-bottom: $block-spacer; } } diff --git a/ui/scss/core/components/_stat_weights_action.scss b/ui/scss/core/components/_stat_weights_action.scss index b61d892985..8d7e4f208c 100644 --- a/ui/scss/core/components/_stat_weights_action.scss +++ b/ui/scss/core/components/_stat_weights_action.scss @@ -1,32 +1,62 @@ @use "sass:map"; -.ep-weights-header { - display: flex; -} - -.ep-weights-actions { - display: flex; - flex-direction: column; - justify-content: space-around; - width: 50%; -} -.ep-weights-actions > * { - margin: 10px 20px; -} - -.ep-weights-results { - position: relative; - width: 50%; - min-height: 150px; -} -.ep-weights-results .results-viewer { - @include vertical-horizontal-center; -} +.ep-weights-menu { + .ep-weights-options { + margin-bottom: $block-spacer; + } -.stats-controls-row { - display: flex; - justify-content: space-around; - margin: 10px; + .results-ep-table-container { + max-height: 50vh; + overflow-y: auto; + + .results-ep-table { + width: 100%; + + &.stats-type-ep .type-weight, + &.stats-type-weight .type-ep, + &:not(.show-all-stats) .non-ep-stat { + display: none; + } + + th, td { + padding-top: map.get($spacers, 2); + padding-bottom: map.get($spacers, 2); + + &:not(:last-child) { + padding-right: map.get($spacers, 3); + } + + &[class*="type-"] { + text-align: right; + } + } + + th { + position: sticky; + top: 0; + background: $body-bg; + text-align: left; + + &::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 1px; + background-color: $border-color; + } + } + + .input-root { + margin-bottom: 0; + } + + .results-stdev { + font-size: .625rem; + } + } + } } .show-all-stats-container .boolean-picker-root { @@ -37,63 +67,6 @@ } } -.ep-weights-table { - max-height: 50vh; - overflow-y: auto; -} - -.results-ep-table { - margin: auto; - color: white; -} - -.ep-weights-table:not(.show-all-stats) .non-ep-stat { - display: none; -} - .results-ep-table .col-action { margin-left: map.get($spacers, 1); } - -.results-ep-table td, .results-ep-table th { - padding: 2px 20px; - white-space: nowrap; -} - -.results-ep-table td { - text-align: right; - font-size: 14px; -} -.results-ep-table td input { - text-align: right; -} - -.results-ep-table th { - text-align: center; - font-size: 16px; - font-weight: 700; - white-space: nowrap; -} - -.results-ep-table td:nth-child(1) { - text-align: left; - font-size: 16px; - font-weight: 700; -} - -.stdev-cell span:nth-child(2) { - text-align: left; - font-size: 12px; - font-weight: 700; -} -.stdev-cell span:nth-child(2):before { - content: " \00b1"; - padding: 1px; -} - -.stats-type-ep .type-weight { - display: none; -} -.stats-type-weight .type-ep { - display: none; -} diff --git a/ui/scss/core/sim_ui/_header.scss b/ui/scss/core/sim_ui/_header.scss index a4390f0cfb..f89fb0128b 100644 --- a/ui/scss/core/sim_ui/_header.scss +++ b/ui/scss/core/sim_ui/_header.scss @@ -57,10 +57,6 @@ .warnings { margin-top: math.div($nav-link-padding-y, 2); margin-bottom: math.div($nav-link-padding-y, 2); - text-shadow: - 0 0 10px $danger, - 0 0 10px $danger, - 0 0 10px $danger; } .known-issues { diff --git a/ui/scss/shared/_bootstrap_style_overrides.scss b/ui/scss/shared/_bootstrap_style_overrides.scss index 7461c52b11..1d82c1e135 100644 --- a/ui/scss/shared/_bootstrap_style_overrides.scss +++ b/ui/scss/shared/_bootstrap_style_overrides.scss @@ -68,11 +68,15 @@ .modal { .modal-dialog { - .modal-header { + .modal-header, + .modal-footer { padding-left: 0; padding-right: 0; margin-left: $modal-header-padding-x; margin-right: $modal-header-padding-x; + } + + .modal-header { align-items: flex-start; } } diff --git a/ui/scss/shared/_global.scss b/ui/scss/shared/_global.scss index 7825c04cb7..6d19e69287 100644 --- a/ui/scss/shared/_global.scss +++ b/ui/scss/shared/_global.scss @@ -74,13 +74,17 @@ a { } } +hr { + border-top: 1px solid; + border-bottom: 1px solid; +} + label { font-weight: bold; } -hr { - border-top: 1px solid; - border-bottom: 1px solid; +p { + margin-bottom: $block-spacer; } .dragto:not(.dragfrom) { @@ -91,6 +95,13 @@ hr { display: none !important; } +.warnings { + text-shadow: + 0 0 10px $danger, + 0 0 10px $danger, + 0 0 10px $danger; +} + [contenteditable="true"]:active, [contenteditable="true"]:focus { border:none; diff --git a/ui/scss/shared/_mixins.scss b/ui/scss/shared/_mixins.scss index ced0f7fa5b..cdbe2e1e94 100644 --- a/ui/scss/shared/_mixins.scss +++ b/ui/scss/shared/_mixins.scss @@ -1,36 +1,40 @@ @mixin theme-color($base-color, $opacity, $background-image-url) { $background-color-hex: mix(black, $base-color, 90); - $interact-color: shade-color($base-color, $btn-hover-bg-shade-amount); + $hover-color: shade-color($base-color, $btn-hover-bg-shade-amount); + $interact-color: shade-color($base-color, $btn-active-bg-shade-amount); $text-color: color-contrast($base-color); + // Used to style the SimUI background --theme-background-color: #{red($background-color-hex), green($background-color-hex), blue($background-color-hex)}; --theme-background-image: url(#{$background-image-url}); --theme-background-opacity: #{$opacity}; - // Primary component color - --theme-color-primary: #{$base-color}; - // Shaded version of the primary color used for things like btn hover - --theme-color-primary-shade: #{shade-color($base-color, $btn-hover-bg-shade-amount)}; - --theme-color-primary-dampened: #{mix(black, $base-color, 75)}; - // Defines the text color of components using the primary color as a background --theme-component-text-color: #{color-contrast($base-color)}; + // Override Bootstrap primary variables --bs-primary: #{$base-color}; --bs-primary-rgb: #{to-rgb($base-color)}; - .btn { - --bs-btn-bg: #{$base-color}; - --bs-btn-border-color: #{$base-color}; - --bs-btn-color: #{$text-color}; - --bs-btn-hover-bg: #{$interact-color}; - --bs-btn-hover-border-color: #{$interact-color}; - --bs-btn-hover-color: #{$text-color}; - } + // Custom variants we use for styling some components + --bs-primary-dampened: #{mix(black, $base-color, 75)}; + + .btn-primary { + --bs-btn-bg: #{$base-color}; + --bs-btn-border-color: #{$base-color}; + --bs-btn-color: #{$text-color}; + + --bs-btn-hover-bg: #{$hover-color}; + --bs-btn-hover-border-color: #{$hover-color}; + --bs-btn-hover-color: #{$text-color}; + + --bs-btn-active-bg: #{$interact-color}; + --bs-btn-active-border-color: #{$interact-color}; + --bs-btn-active-color: #{$text-color}; - .dropdown-menu { - --bs-dropdown-border-color: #{$base-color}; - --bs-dropdown-border-width: 1px; + --bs-btn-disabled-bg: #{mix(gray, $base-color, 50)}; + --bs-btn-disabled-border-color: #{mix(gray, $base-color, 50)}; + --bs-btn-disabled-color: #{$text-color}; } .modal { diff --git a/ui/scss/shared/_variables.scss b/ui/scss/shared/_variables.scss index 40543d05e0..e2722f4b36 100644 --- a/ui/scss/shared/_variables.scss +++ b/ui/scss/shared/_variables.scss @@ -32,14 +32,14 @@ $class-colors: ( $theme-colors: map-merge($theme-colors, $class-colors); -$primary: #e0a335; +$brand: #e0a335; $success: #1eff00; $quality-uncommon: $success; $quality-rare: #0070dd; $quality-epic: #a335ee; $custom-colors: ( - "primary": $primary, + "brand": $brand, "quality-epic": $quality-epic, "quality-rare": $quality-rare, "quality-uncommon": $quality-uncommon, @@ -71,6 +71,7 @@ $body-bg: #15171e; $body-color: white; $border-color: dimgrey; $font-size-root: 16px; +$grid-gutter-width: .75rem; // This option doesn't seem to be working for some reason. Carets hidden manually instead // $enable-caret: false; @@ -131,6 +132,7 @@ $input-font-size: $content-font-size; $modal-content-bg: $body-bg; $modal-content-border-color: $link-color; $modal-header-border-color: $border-color; +$modal-footer-margin-between: 0px; $navbar-dark-color: white; $navbar-dark-hover-color: $primary; @@ -140,6 +142,8 @@ $navbar-padding-y: 0; $nav-link-font-size: .875rem; $nav-link-padding-y: map.get($spacers, 3); $nav-link-transition: $link-transition; + +$nav-tabs-border-color: $border-color; $nav-tabs-link-active-bg: transparent; $nav-tabs-link-active-color: white; From f56c21be96d8286ebfe2471cb21b302f94ccb31c Mon Sep 17 00:00:00 2001 From: Kayla Glick Date: Sat, 28 Jan 2023 22:12:43 -0500 Subject: [PATCH 3/5] more modal work --- ui/core/components/base_modal.ts | 20 ++++++++- ui/core/components/encounter_picker.ts | 6 +-- ui/core/components/exporters.ts | 3 +- ui/core/components/filters_menu.ts | 30 ++++---------- ui/core/components/gear_picker.ts | 2 +- ui/core/components/importers.ts | 3 +- ui/core/components/list_picker.ts | 2 +- ui/core/components/settings_menu.ts | 3 +- ui/core/components/stat_weights_action.ts | 25 ++++++----- ui/scss/core/components/_filters_menu.scss | 41 +++---------------- .../core/components/_stat_weights_action.scss | 4 ++ 11 files changed, 55 insertions(+), 84 deletions(-) diff --git a/ui/core/components/base_modal.ts b/ui/core/components/base_modal.ts index 5bdc8f871a..b0b59890fb 100644 --- a/ui/core/components/base_modal.ts +++ b/ui/core/components/base_modal.ts @@ -3,16 +3,26 @@ import { Component } from './component'; import { Modal } from 'bootstrap'; +type ModalSize = 'sm' | 'md' | 'lg' | 'xl'; + type BaseModalConfig = { closeButton?: CloseButtonConfig, - footer?: Boolean, + // Whether or not to add a modal-footer element + footer?: boolean, + // Whether or not to add a modal-header element header?: boolean, + // Specify the size of the modal + size?: ModalSize, + // A title for the modal + title?: string | null, }; const DEFAULT_CONFIG = { closeButton: {}, footer: false, header: true, + size: 'lg' as ModalSize, + title: null, } export class BaseModal extends Component { @@ -27,9 +37,11 @@ export class BaseModal extends Component { super(parent, 'modal'); this.config = {...DEFAULT_CONFIG, ...config}; + const modalSizeKlass = this.config.size && this.config.size != 'md' ? `modal-${this.config.size}` : ''; + this.rootElem.classList.add('fade'); this.rootElem.innerHTML = ` -
    +
    @@ -41,6 +53,10 @@ export class BaseModal extends Component { this.header = document.createElement('div'); this.header.classList.add('modal-header'); container.appendChild(this.header); + + if (this.config.title) { + this.header.insertAdjacentHTML('afterbegin', `
    ${this.config.title}
    `); + } } this.body = document.createElement('div'); diff --git a/ui/core/components/encounter_picker.ts b/ui/core/components/encounter_picker.ts index edcbafb5bc..a4c013fcba 100644 --- a/ui/core/components/encounter_picker.ts +++ b/ui/core/components/encounter_picker.ts @@ -139,10 +139,8 @@ class AdvancedEncounterModal extends BaseModal { this.addHeader(); this.body.innerHTML = ` -
    -
    -
    -
    +
    +
    `; const header = this.rootElem.getElementsByClassName('encounter-header')[0] as HTMLElement; diff --git a/ui/core/components/exporters.ts b/ui/core/components/exporters.ts index 90d5e938a0..b6069ca069 100644 --- a/ui/core/components/exporters.ts +++ b/ui/core/components/exporters.ts @@ -16,9 +16,8 @@ export abstract class Exporter extends BaseModal { private readonly textElem: HTMLElement; constructor(parent: HTMLElement, simUI: SimUI, title: string, allowDownload: boolean) { - super(parent, 'exporter', {footer: true}); + super(parent, 'exporter', {title: title, footer: true}); - this.header!.insertAdjacentHTML('afterbegin', `
    ${title}
    `); this.body.innerHTML = ` `; diff --git a/ui/core/components/filters_menu.ts b/ui/core/components/filters_menu.ts index 2295760a56..62110fa2fd 100644 --- a/ui/core/components/filters_menu.ts +++ b/ui/core/components/filters_menu.ts @@ -20,26 +20,13 @@ import { BooleanPicker } from './boolean_picker.js'; import { NumberPicker } from './number_picker.js'; import { Popup } from './popup.js'; import { Input } from './input.js'; +import { BaseModal } from './base_modal.js'; declare var tippy: any; -export class FiltersMenu extends Popup { - private readonly contentElem: HTMLElement; - +export class FiltersMenu extends BaseModal { constructor(rootElem: HTMLElement, player: Player, slot: ItemSlot) { - super(rootElem); - - this.rootElem.classList.add('filters-menu'); - this.rootElem.innerHTML = ` -
    - FILTERS -
    -
    -
    - `; - this.addCloseButton(); - - this.contentElem = this.rootElem.getElementsByClassName('menu-content')[0] as HTMLElement; + super(rootElem, 'filters-menu', {size: 'md', title: 'Filters'}); if (Player.ARMOR_SLOTS.includes(slot)) { const maxArmorType = classToMaxArmorType[player.getClass()]; @@ -72,11 +59,9 @@ export class FiltersMenu extends Popup { const weaponTypeSection = this.newSection('Weapon Type'); weaponTypeSection.classList.add('filters-menu-section-bool-list'); const weaponTypes = classToEligibleWeaponTypes[player.getClass()].map(ewt => ewt.weaponType); - const weaponTypesGroup = Input.newGroupContainer(); - weaponTypeSection.appendChild(weaponTypesGroup); weaponTypes.forEach(weaponType => { - new BooleanPicker(weaponTypesGroup, player.sim, { + new BooleanPicker(weaponTypeSection, player.sim, { label: weaponTypeNames[weaponType], inline: true, changedEvent: (sim: Sim) => sim.filtersChangeEmitter, @@ -155,13 +140,12 @@ export class FiltersMenu extends Popup { private newSection(name: string): HTMLElement { const section = document.createElement('div'); section.classList.add('menu-section'); - this.contentElem.appendChild(section); + this.body.appendChild(section); section.innerHTML = `
    - ${name} -
    -
    +
    ${name}
    +
    `; return section.getElementsByClassName('menu-section-content')[0] as HTMLElement; } diff --git a/ui/core/components/gear_picker.ts b/ui/core/components/gear_picker.ts index 54948711e8..4caf6a3f24 100644 --- a/ui/core/components/gear_picker.ts +++ b/ui/core/components/gear_picker.ts @@ -407,7 +407,7 @@ class SelectorModal extends BaseModal { private readonly contentElem: HTMLElement; constructor(parent: HTMLElement, simUI: SimUI, player: Player, slot: ItemSlot, equippedItem: EquippedItem | null, eligibleItems: Array, eligibleEnchants: Array, gearData: GearData) { - super(parent, 'selector-modal', {header: true}); + super(parent, 'selector-modal'); this.simUI = simUI; this.player = player; diff --git a/ui/core/components/importers.ts b/ui/core/components/importers.ts index f365d38d2e..3f6aa8e8bd 100644 --- a/ui/core/components/importers.ts +++ b/ui/core/components/importers.ts @@ -24,11 +24,10 @@ export abstract class Importer extends BaseModal { private readonly includeFile: boolean; constructor(parent: HTMLElement, simUI: SimUI, title: string, includeFile: boolean) { - super(parent, 'importer', {footer: true}); + super(parent, 'importer', {title: title, footer: true}); this.includeFile = includeFile; const uploadInputId = 'upload-input-' + title.toLowerCase().replaceAll(' ', '-'); - this.header!.insertAdjacentHTML('afterbegin', `
    ${title}
    `); this.body.innerHTML = `
    diff --git a/ui/core/components/list_picker.ts b/ui/core/components/list_picker.ts index 5f529d4956..501d382115 100644 --- a/ui/core/components/list_picker.ts +++ b/ui/core/components/list_picker.ts @@ -105,7 +105,7 @@ export class ListPicker extends Input - ${this.config.itemLabel && !this.config.inlineMenuBar ? `
    ${this.config.itemLabel}
    ` : ''} + ${this.config.itemLabel && !this.config.inlineMenuBar ? `
    ${this.config.itemLabel} ${this.itemPickerPairs.length + 1}
    ` : ''} diff --git a/ui/core/components/settings_menu.ts b/ui/core/components/settings_menu.ts index 9ed4d13ec8..219b86d883 100644 --- a/ui/core/components/settings_menu.ts +++ b/ui/core/components/settings_menu.ts @@ -12,10 +12,9 @@ export class SettingsMenu extends BaseModal { private readonly simUI: SimUI; constructor(parent: HTMLElement, simUI: SimUI) { - super(parent, 'settings-menu', {footer: true}); + super(parent, 'settings-menu', {title: "Options", footer: true}); this.simUI = simUI; - this.header!.insertAdjacentHTML('afterbegin', `
    Options
    `); this.body.innerHTML = `
    diff --git a/ui/core/components/stat_weights_action.ts b/ui/core/components/stat_weights_action.ts index a1d6bc2695..e17d567b3a 100644 --- a/ui/core/components/stat_weights_action.ts +++ b/ui/core/components/stat_weights_action.ts @@ -20,8 +20,6 @@ import * as Gems from '../proto_utils/gems.js'; import { BaseModal } from './base_modal.js'; import { Tooltip } from 'bootstrap'; -declare var tippy: any; - export function addStatWeightsAction(simUI: IndividualSimUI, epStats: Array, epPseudoStats: Array|undefined, epReferenceStat: Stat) { simUI.addAction('Stat Weights', 'ep-weights-action', () => { new EpWeightsMenu(simUI, epStats, epPseudoStats || [], epReferenceStat); @@ -63,7 +61,7 @@ class EpWeightsMenu extends BaseModal { - +
    StatStats DPS Weight @@ -194,14 +192,17 @@ class EpWeightsMenu extends BaseModal { const colActionButtons = Array.from(this.rootElem.getElementsByClassName('col-action')) as Array; const makeUpdateWeights = (button: HTMLElement, labelTooltip: string, tooltip: string, weightsFunc: () => UnitStats|undefined) => { - tippy(button.previousElementSibling, { - 'content': labelTooltip, - 'allowHTML': true, - }); - tippy(button, { - 'content': tooltip, - 'allowHTML': true, - }); + const label = button.previousElementSibling as HTMLElement; + label!.setAttribute('data-bs-toggle', 'tooltip'); + label!.setAttribute('data-bs-title', labelTooltip); + label!.setAttribute('data-bs-html', 'true'); + button.setAttribute('data-bs-toggle', 'tooltip'); + button.setAttribute('data-bs-title', tooltip); + button.setAttribute('data-bs-html', 'true'); + + Tooltip.getOrCreateInstance(label); + Tooltip.getOrCreateInstance(button); + button.addEventListener('click', event => { this.simUI.player.setEpWeights(TypedEvent.nextEventID(), Stats.fromProto(weightsFunc())); }); @@ -238,6 +239,8 @@ class EpWeightsMenu extends BaseModal { } private updateTable(iterations: number, result: StatWeightsResult) { + this.tableBody.innerHTML = ``; + EpWeightsMenu.epUnitStats.forEach(stat => { const row = this.makeTableRow(stat, iterations, result); if ((stat.isStat() && !this.epStats.includes(stat.getStat())) || (stat.isPseudoStat() && !this.epPseudoStats.includes(stat.getPseudoStat()))) { diff --git a/ui/scss/core/components/_filters_menu.scss b/ui/scss/core/components/_filters_menu.scss index 50bd6b44f8..35a15ae7fa 100644 --- a/ui/scss/core/components/_filters_menu.scss +++ b/ui/scss/core/components/_filters_menu.scss @@ -1,42 +1,11 @@ .filters-menu { - .menu-title, .menu-section:not(:last-child) { margin-bottom: map.get($spacers, 3); } -} - -.filters-menu .menu-section { - width: 100%; - border: 1px solid white; - border-radius: 10px; - padding: 5px; -} -.filters-menu .menu-section-header { - margin-left: 10px; - font-size: 16px; - font-weight: bold; -} - -.filters-menu-section-bool-list { - display: flex; - justify-content: space-evenly; - align-items: center; - flex-wrap: wrap; -} -.filters-menu-section-bool-list > * { - margin: 5px 20px; -} -.filters-menu-section-bool-list .boolean-picker-input { - width: 15px; -} - -.filters-menu-section-number-list { - display: flex; - justify-content: space-evenly; - align-items: center; - flex-wrap: wrap; -} -.filters-menu-section-number-list > * { - margin: 5px 20px; + [class*="filters-menu-section-"] { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: $modal-inner-padding; + } } diff --git a/ui/scss/core/components/_stat_weights_action.scss b/ui/scss/core/components/_stat_weights_action.scss index 8d7e4f208c..2d40bb8d98 100644 --- a/ui/scss/core/components/_stat_weights_action.scss +++ b/ui/scss/core/components/_stat_weights_action.scss @@ -48,6 +48,10 @@ } } + tbody tr { + border-bottom: 1px solid $border-color; + } + .input-root { margin-bottom: 0; } From 5515e79f7dbaa1fee919b5756085bbdb8b3591cf Mon Sep 17 00:00:00 2001 From: Kayla Glick Date: Sun, 29 Jan 2023 23:56:18 -0500 Subject: [PATCH 4/5] finishing up modals --- ui/core/components/base_modal.ts | 11 +++++ ui/core/components/filters_menu.ts | 6 +-- ui/core/components/gear_picker.ts | 2 +- ui/core/components/popup.ts | 37 ----------------- ui/core/components/stat_weights_action.ts | 30 +++++++------- ui/core/talents/glyphs_picker.ts | 24 ++++------- ui/index.html | 6 +-- ui/scss/core/components/_close_button.scss | 12 +++++- ui/scss/core/components/_gear_picker.scss | 1 - ui/scss/core/components/_importers.scss | 2 - ui/scss/core/components/_popup.scss | 20 --------- .../core/components/_stat_weights_action.scss | 41 +++++++------------ ui/scss/core/talents/_glyphs_picker.scss | 2 - ui/scss/homepage/_homepage.scss | 2 +- ui/scss/index.scss | 3 +- .../shared/_bootstrap_style_overrides.scss | 9 +++- ui/scss/shared/_global.scss | 2 +- ui/scss/shared/_modal.scss | 30 ++++++++++++++ ui/scss/shared/_variables.scss | 7 +++- 19 files changed, 112 insertions(+), 135 deletions(-) delete mode 100644 ui/core/components/popup.ts delete mode 100644 ui/scss/core/components/_popup.scss create mode 100644 ui/scss/shared/_modal.scss diff --git a/ui/core/components/base_modal.ts b/ui/core/components/base_modal.ts index b0b59890fb..e500a474c2 100644 --- a/ui/core/components/base_modal.ts +++ b/ui/core/components/base_modal.ts @@ -11,6 +11,9 @@ type BaseModalConfig = { footer?: boolean, // Whether or not to add a modal-header element header?: boolean, + // Whether or not to allow modal contents to extend past the screen height. + // When true, the modal is fixed to the screen height and body contents will scroll. + scrollContents?: boolean, // Specify the size of the modal size?: ModalSize, // A title for the modal @@ -21,6 +24,7 @@ const DEFAULT_CONFIG = { closeButton: {}, footer: false, header: true, + scrollContents: false, size: 'lg' as ModalSize, title: null, } @@ -29,6 +33,7 @@ export class BaseModal extends Component { readonly config: BaseModalConfig; readonly modal: Modal; + readonly dialog: HTMLElement; readonly header: HTMLElement | undefined; readonly body: HTMLElement; readonly footer: HTMLElement | undefined; @@ -47,6 +52,12 @@ export class BaseModal extends Component { `; + this.dialog = this.rootElem.querySelector('.modal-dialog') as HTMLElement; + + if (this.config.scrollContents) { + this.dialog.classList.add('modal-overflow-scroll'); + } + const container = this.rootElem.querySelector('.modal-content') as HTMLElement; if (this.config.header) { diff --git a/ui/core/components/filters_menu.ts b/ui/core/components/filters_menu.ts index 62110fa2fd..5e66ed4f4b 100644 --- a/ui/core/components/filters_menu.ts +++ b/ui/core/components/filters_menu.ts @@ -13,17 +13,13 @@ import { } from '../proto_utils/utils.js'; import { Player } from '../player.js'; import { Sim } from '../sim.js'; -import { EventID, TypedEvent } from '../typed_event.js'; +import { EventID } from '../typed_event.js'; import { getEnumValues } from '../utils.js'; import { BooleanPicker } from './boolean_picker.js'; import { NumberPicker } from './number_picker.js'; -import { Popup } from './popup.js'; -import { Input } from './input.js'; import { BaseModal } from './base_modal.js'; -declare var tippy: any; - export class FiltersMenu extends BaseModal { constructor(rootElem: HTMLElement, player: Player, slot: ItemSlot) { super(rootElem, 'filters-menu', {size: 'md', title: 'Filters'}); diff --git a/ui/core/components/gear_picker.ts b/ui/core/components/gear_picker.ts index 4caf6a3f24..d702486f16 100644 --- a/ui/core/components/gear_picker.ts +++ b/ui/core/components/gear_picker.ts @@ -674,7 +674,7 @@ class SelectorModal extends BaseModal { const filtersButton = tabContent.getElementsByClassName('selector-modal-filters-button')[0] as HTMLElement; if (FiltersMenu.anyFiltersForSlot(slot)) { - filtersButton.addEventListener('click', () => new FiltersMenu(this.rootElem, this.player, slot)); + filtersButton.addEventListener('click', () => new FiltersMenu(this.simUI.rootElem, this.player, slot)); } else { filtersButton.style.display = 'none'; } diff --git a/ui/core/components/popup.ts b/ui/core/components/popup.ts deleted file mode 100644 index 0c4136976f..0000000000 --- a/ui/core/components/popup.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { CloseButton } from './close_button.js'; -import { Component } from './component.js'; - -declare var $: any; - -export class Popup extends Component { - constructor(parent: HTMLElement) { - super(parent, 'popup'); - - if (parent.closest('.hide-damage-metrics')) { - this.rootElem.classList.add('hide-damage-metrics'); - } - if (parent.closest('.hide-threat-metrics')) { - this.rootElem.classList.add('hide-threat-metrics'); - } - if (parent.closest('.hide-healing-metrics')) { - this.rootElem.classList.add('hide-healing-metrics'); - } - - $(this.rootElem).bPopup({ - onClose: () => { - this.rootElem.remove(); - this.dispose(); - }, - }); - } - - protected addCloseButton() { - new CloseButton(this.rootElem, () => this.close()); - } - - close() { - $(this.rootElem).bPopup().close(); - this.rootElem.remove(); - this.dispose(); - } -} diff --git a/ui/core/components/stat_weights_action.ts b/ui/core/components/stat_weights_action.ts index e17d567b3a..8761a5342a 100644 --- a/ui/core/components/stat_weights_action.ts +++ b/ui/core/components/stat_weights_action.ts @@ -35,9 +35,10 @@ class EpWeightsMenu extends BaseModal { private epStats: Array; private epPseudoStats: Array; private epReferenceStat: Stat; + private showAllStats: boolean = false; constructor(simUI: IndividualSimUI, epStats: Array, epPseudoStats: Array, epReferenceStat: Stat) { - super(simUI.rootElem, 'ep-weights-menu', {footer: true}); + super(simUI.rootElem, 'ep-weights-menu', {footer: true, scrollContents: true}); this.simUI = simUI; this.statsType = 'ep'; this.epStats = epStats; @@ -47,21 +48,21 @@ class EpWeightsMenu extends BaseModal { this.header?.insertAdjacentHTML('afterbegin', '
    Calculate Stat Weights
    '); this.body.innerHTML = `
    -
    +
    -
    +

    The 'Current EP' column displays the values currently used by the item pickers to sort items.
    Use the     icon above the EPs to use newly calculated EPs.

    -
    +
    - +
    StatsStat DPS Weight @@ -225,13 +226,10 @@ class EpWeightsMenu extends BaseModal { label: 'Show All Stats', inline: true, changedEvent: () => new TypedEvent(), - getValue: () => this.table.classList.contains('show-all-stats'), + getValue: () => this.showAllStats, setValue: (eventID: EventID, menu: EpWeightsMenu, newValue: boolean) => { - if (newValue) { - this.table.classList.add('show-all-stats'); - } else { - this.table.classList.remove('show-all-stats'); - } + this.showAllStats = newValue; + this.updateTable(this.simUI.prevEpIterations || 1, this.getPrevSimResult()); }, }); @@ -242,10 +240,14 @@ class EpWeightsMenu extends BaseModal { this.tableBody.innerHTML = ``; EpWeightsMenu.epUnitStats.forEach(stat => { - const row = this.makeTableRow(stat, iterations, result); - if ((stat.isStat() && !this.epStats.includes(stat.getStat())) || (stat.isPseudoStat() && !this.epPseudoStats.includes(stat.getPseudoStat()))) { - row.classList.add('non-ep-stat'); + // Don't show extra stats when 'Show all stats' is not selected + if ((!this.showAllStats && ( + stat.isStat() && !this.epStats.includes(stat.getStat())) || + (stat.isPseudoStat() && !this.epPseudoStats.includes(stat.getPseudoStat())) + )) { + return; } + const row = this.makeTableRow(stat, iterations, result); this.tableBody.appendChild(row); }); } diff --git a/ui/core/talents/glyphs_picker.ts b/ui/core/talents/glyphs_picker.ts index ba79254b1d..8d4d83df48 100644 --- a/ui/core/talents/glyphs_picker.ts +++ b/ui/core/talents/glyphs_picker.ts @@ -1,18 +1,14 @@ -import { EquippedItem } from '../proto_utils/equipped_item.js'; -import { Stats } from '../proto_utils/stats.js'; import { Glyphs } from '../proto/common.js'; import { ItemQuality } from '../proto/common.js'; import { ActionId } from '../proto_utils/action_id.js'; import { setItemQualityCssClass } from '../css_utils.js'; import { Player } from '../player.js'; import { EventID, TypedEvent } from '../typed_event.js'; -import { formatDeltaTextElem, stringComparator } from '../utils.js'; +import { stringComparator } from '../utils.js'; import { Component } from '../components/component.js'; import { Input } from '../components/input.js'; -import { Popup } from '../components/popup.js'; - -declare var $: any; +import { BaseModal } from '../components/base_modal.js'; export type GlyphConfig = { name: string, @@ -137,20 +133,16 @@ class GlyphPicker extends Input, number> { } } -class GlyphSelectorModal extends Popup { - +class GlyphSelectorModal extends BaseModal { constructor(parent: HTMLElement, glyphPicker: GlyphPicker, glyphOptions: Array) { - super(parent); + super(parent, 'glyph-modal', {title: 'Glyphs'}); - this.rootElem.classList.add('selector-modal'); - this.rootElem.classList.add('glyph-modal'); - this.rootElem.innerHTML = ` -
    - + this.body.innerHTML = ` +
    +
      - `; - this.addCloseButton(); + `; const listElem = this.rootElem.getElementsByClassName('selector-modal-list')[0] as HTMLElement; diff --git a/ui/index.html b/ui/index.html index 2325712cd5..3fa7d1d5a6 100644 --- a/ui/index.html +++ b/ui/index.html @@ -29,13 +29,13 @@

      Wrath of the Lich King

      -       +

       

       - +

       

       - + Support our devs diff --git a/ui/scss/core/components/_close_button.scss b/ui/scss/core/components/_close_button.scss index ecad4a4754..ede7852593 100644 --- a/ui/scss/core/components/_close_button.scss +++ b/ui/scss/core/components/_close_button.scss @@ -1,10 +1,18 @@ .close-button { - top: $modal-inner-padding * 1.5; - right: $modal-inner-padding; white-space: nowrap; z-index: 1; &> i { vertical-align: middle; } + + &.position-absolute { + top: $modal-inner-padding * 1.5; + right: $modal-inner-padding; + } + + &.position-sticky { + top: calc(var(--bs-modal-margin) + 1rem); + right: calc(2.5vw + 1px + 1rem); + } } diff --git a/ui/scss/core/components/_gear_picker.scss b/ui/scss/core/components/_gear_picker.scss index deb33f4f39..a97e067479 100644 --- a/ui/scss/core/components/_gear_picker.scss +++ b/ui/scss/core/components/_gear_picker.scss @@ -1,7 +1,6 @@ @use "sass:map"; @import "./filters_menu"; -@import "./popup"; .gear-picker-root { display: flex; diff --git a/ui/scss/core/components/_importers.scss b/ui/scss/core/components/_importers.scss index cee04bf672..f99b7cfdbd 100644 --- a/ui/scss/core/components/_importers.scss +++ b/ui/scss/core/components/_importers.scss @@ -1,5 +1,3 @@ -@import "./popup"; - .importer { .importer-textarea { width: 100%; diff --git a/ui/scss/core/components/_popup.scss b/ui/scss/core/components/_popup.scss deleted file mode 100644 index 9f9c357a45..0000000000 --- a/ui/scss/core/components/_popup.scss +++ /dev/null @@ -1,20 +0,0 @@ -@use "sass:map"; - -.popup { - @include vertical-horizontal-center; - min-width: 50%; - max-height: 98vh; - overflow-y: auto; - padding: 1rem; - background-color: #111218; - border: 1px solid var(--theme-color-primary); - border-radius: 6px; - max-width: 100%; - color: white; - - .close-button { - position: absolute; - top: map.get($spacers, 3); - right: map.get($spacers, 3); - } -} diff --git a/ui/scss/core/components/_stat_weights_action.scss b/ui/scss/core/components/_stat_weights_action.scss index 2d40bb8d98..a6af06b9e1 100644 --- a/ui/scss/core/components/_stat_weights_action.scss +++ b/ui/scss/core/components/_stat_weights_action.scss @@ -6,50 +6,39 @@ } .results-ep-table-container { - max-height: 50vh; - overflow-y: auto; - .results-ep-table { width: 100%; &.stats-type-ep .type-weight, - &.stats-type-weight .type-ep, - &:not(.show-all-stats) .non-ep-stat { + &.stats-type-weight .type-ep { display: none; } th, td { - padding-top: map.get($spacers, 2); - padding-bottom: map.get($spacers, 2); - - &:not(:last-child) { - padding-right: map.get($spacers, 3); - } - &[class*="type-"] { text-align: right; } } th { - position: sticky; - top: 0; - background: $body-bg; + padding-top: map.get($spacers, 2); + padding-bottom: map.get($spacers, 2); + padding-right: map.get($spacers, 2); text-align: left; + } - &::after { - content: ""; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 1px; - background-color: $border-color; + tbody { + tr:nth-child(even) { + background-color: $table-row-even-bg; } - } - tbody tr { - border-bottom: 1px solid $border-color; + tr:nth-child(odd) { + background-color: $table-row-odd-bg; + } + + td { + padding: $table-cell-padding; + } } .input-root { diff --git a/ui/scss/core/talents/_glyphs_picker.scss b/ui/scss/core/talents/_glyphs_picker.scss index 6c8e72c7e1..1228f5ccc8 100644 --- a/ui/scss/core/talents/_glyphs_picker.scss +++ b/ui/scss/core/talents/_glyphs_picker.scss @@ -1,5 +1,3 @@ -@import "../components/popup"; - .glyphs-picker-root { display: flex; flex-direction: column; diff --git a/ui/scss/homepage/_homepage.scss b/ui/scss/homepage/_homepage.scss index 455a28a9a2..9e3216d793 100644 --- a/ui/scss/homepage/_homepage.scss +++ b/ui/scss/homepage/_homepage.scss @@ -38,7 +38,7 @@ .wowsims-title { @extend .display-1; @extend .fw-bold; - color: $primary; + color: $brand; margin: 0; } } diff --git a/ui/scss/index.scss b/ui/scss/index.scss index e63fe3399a..99b6f6af76 100644 --- a/ui/scss/index.scss +++ b/ui/scss/index.scss @@ -33,10 +33,11 @@ // Bootstrap Utilities API @import "./bootstrap/scss/utilities/api"; -// Custom styles +// Custom shared styles @import "shared/mixins"; @import "shared/global"; @import "shared/global_old"; +@import "shared/modal"; // Custom Bootstrap style overrides @import "shared/bootstrap_style_overrides"; diff --git a/ui/scss/shared/_bootstrap_style_overrides.scss b/ui/scss/shared/_bootstrap_style_overrides.scss index 1d82c1e135..31cf11b8f5 100644 --- a/ui/scss/shared/_bootstrap_style_overrides.scss +++ b/ui/scss/shared/_bootstrap_style_overrides.scss @@ -72,13 +72,18 @@ .modal-footer { padding-left: 0; padding-right: 0; - margin-left: $modal-header-padding-x; - margin-right: $modal-header-padding-x; + margin-left: $modal-header-padding; + margin-right: $modal-header-padding; } .modal-header { align-items: flex-start; } + + .modal-body { + display: flex; + flex-direction: column; + } } } diff --git a/ui/scss/shared/_global.scss b/ui/scss/shared/_global.scss index 6d19e69287..d1d468b005 100644 --- a/ui/scss/shared/_global.scss +++ b/ui/scss/shared/_global.scss @@ -69,7 +69,7 @@ a { color: white; &:hover, &:focus, &.active { - color: $primary; + color: $brand; } } } diff --git a/ui/scss/shared/_modal.scss b/ui/scss/shared/_modal.scss new file mode 100644 index 0000000000..b940a5ab23 --- /dev/null +++ b/ui/scss/shared/_modal.scss @@ -0,0 +1,30 @@ +@use "sass:math"; + +.modal { + .modal-dialog { + &.modal-overflow-scroll { + .modal-content { + max-height: calc(100vh - (2 * var(--bs-modal-margin))); + } + + .modal-body { + overflow: scroll; + } + } + } + + .modal-scroll-table { + flex: 1; + overflow-y: scroll; + padding-left: var(--bs-modal-padding); + padding-right: var(--bs-modal-padding); + margin-left: calc(var(--bs-modal-padding) * -1); + margin-right: calc(var(--bs-modal-padding) * -1); + + th { + position: sticky; + top: 0; + background: $body-bg; + } + } +} diff --git a/ui/scss/shared/_variables.scss b/ui/scss/shared/_variables.scss index e2722f4b36..af6e08783c 100644 --- a/ui/scss/shared/_variables.scss +++ b/ui/scss/shared/_variables.scss @@ -59,11 +59,14 @@ $grid-breakpoints: map-merge($grid-breakpoints, $custom-breakpoints); // Custom variables $block-spacer: .75rem; +$table-cell-padding: .5rem; $content-font-size: .75rem; $gap-width: 1.5rem; $gap-width-sm: .5rem; $link-danger-color: #ef9eaa; $link-warning-color: #faf07f; +$table-row-even-bg: #202128; +$table-row-odd-bg: #2d2f35; $wrath-blue: #7FCBD8; // Global Bootstrap variable overrides @@ -131,8 +134,10 @@ $input-font-size: $content-font-size; $modal-content-bg: $body-bg; $modal-content-border-color: $link-color; -$modal-header-border-color: $border-color; $modal-footer-margin-between: 0px; +$modal-header-border-color: $border-color; +$modal-header-padding: 1.25rem; +$modal-inner-padding: 1.25rem; $navbar-dark-color: white; $navbar-dark-hover-color: $primary; From 35857a849f5e13f8ef7032c9ad077b842f8c7b5f Mon Sep 17 00:00:00 2001 From: Kayla Glick Date: Mon, 30 Jan 2023 00:48:49 -0500 Subject: [PATCH 5/5] remove bpopup --- ui/index_template.html | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/index_template.html b/ui/index_template.html index 2dceef5089..b6d1c3e3ad 100644 --- a/ui/index_template.html +++ b/ui/index_template.html @@ -12,7 +12,6 @@ -