From b4b7f10d3b49d77a89533218462ae58530859963 Mon Sep 17 00:00:00 2001 From: Kayla Glick Date: Mon, 18 Mar 2024 21:06:27 -0400 Subject: [PATCH] update boolean picker styles --- ui/core/components/boolean_picker.ts | 7 +- ui/core/components/encounter_picker.ts | 183 +++++++----- .../individual_sim_ui/settings_tab.ts | 104 ++++--- .../core/components/_encounter_picker.scss | 13 +- .../shared/_bootstrap_style_overrides.scss | 281 +++++++++--------- 5 files changed, 311 insertions(+), 277 deletions(-) diff --git a/ui/core/components/boolean_picker.ts b/ui/core/components/boolean_picker.ts index 2b2c861d6c..4b7e056fa6 100644 --- a/ui/core/components/boolean_picker.ts +++ b/ui/core/components/boolean_picker.ts @@ -15,16 +15,17 @@ export class BooleanPicker extends Input { constructor(parent: HTMLElement, modObject: ModObject, config: BooleanPickerConfig) { super(parent, 'boolean-picker-root', modObject, config); - this.rootElem.classList.add('form-check', 'form-check-reverse'); + this.rootElem.classList.add('form-check'); this.inputElem = document.createElement('input'); this.inputElem.type = 'checkbox'; this.inputElem.classList.add('boolean-picker-input', 'form-check-input'); if (config.reverse) { - this.rootElem.prepend(this.inputElem); - } else { + this.rootElem.classList.add('form-check-reverse'); this.rootElem.appendChild(this.inputElem); + } else { + this.rootElem.prepend(this.inputElem); } this.init(); diff --git a/ui/core/components/encounter_picker.ts b/ui/core/components/encounter_picker.ts index fec0b4633e..fd320c2fbb 100644 --- a/ui/core/components/encounter_picker.ts +++ b/ui/core/components/encounter_picker.ts @@ -1,33 +1,23 @@ -import { - InputType, - MobType, - SpellSchool, - Stat, - Target as TargetProto, - TargetInput, - Target, -} from '../proto/common.js'; -import { Encounter } from '../encounter.js'; -import { Raid } from '../raid.js'; -import { EventID, TypedEvent } from '../typed_event.js'; import { BooleanPicker } from '../components/boolean_picker.js'; import { EnumPicker } from '../components/enum_picker.js'; import { ListItemPickerConfig, ListPicker } from '../components/list_picker.js'; import { NumberPicker } from '../components/number_picker.js'; -import { Stats } from '../proto_utils/stats.js'; -import { isHealingSpec, isTankSpec } from '../proto_utils/utils.js'; -import { statNames } from '../proto_utils/names.js'; - -import { Component } from './component.js'; - import * as Mechanics from '../constants/mechanics.js'; +import { Encounter } from '../encounter.js'; import { IndividualSimUI } from '../individual_sim_ui.js'; +import { InputType, MobType, SpellSchool, Stat, Target, Target as TargetProto, TargetInput } from '../proto/common.js'; +import { statNames } from '../proto_utils/names.js'; +import { Stats } from '../proto_utils/stats.js'; +import { isHealingSpec, isTankSpec } from '../proto_utils/utils.js'; +import { Raid } from '../raid.js'; import { SimUI } from '../sim_ui.js'; -import { Input } from './input.js'; +import { EventID, TypedEvent } from '../typed_event.js'; import { BaseModal } from './base_modal.js'; +import { Component } from './component.js'; +import { Input } from './input.js'; export interface EncounterPickerConfig { - showExecuteProportion: boolean, + showExecuteProportion: boolean; } export class EncounterPicker extends Component { @@ -44,14 +34,14 @@ export class EncounterPicker extends Component { extraCssClasses: ['damage-metrics', 'npc-picker'], label: 'NPC', labelTooltip: 'Selects a preset NPC configuration.', - values: [ - { name: 'Custom', value: -1 }, - ].concat(presetTargets.map((pe, i) => { - return { - name: pe.path, - value: i, - }; - })), + values: [{ name: 'Custom', value: -1 }].concat( + presetTargets.map((pe, i) => { + return { + name: pe.path, + value: i, + }; + }), + ), changedEvent: (encounter: Encounter) => encounter.changeEmitter, getValue: (encounter: Encounter) => presetTargets.findIndex(pe => equalTargetsIgnoreInputs(encounter.primaryTarget, pe.target)), setValue: (eventID: EventID, encounter: Encounter, newValue: number) => { @@ -127,11 +117,13 @@ export class EncounterPicker extends Component { } // Transfer Target Inputs from target Id if they dont match (possible when custom AI is selected) - let targetIndex = presetTargets.findIndex(pe => modEncounter.primaryTarget.id == pe.target?.id); - let targetInputs = presetTargets[targetIndex]?.target?.targetInputs || []; + const targetIndex = presetTargets.findIndex(pe => modEncounter.primaryTarget.id == pe.target?.id); + const targetInputs = presetTargets[targetIndex]?.target?.targetInputs || []; - if (targetInputs.length != modEncounter.primaryTarget.targetInputs.length - || modEncounter.primaryTarget.targetInputs.some((ti, i) => ti.label != targetInputs[i].label)) { + if ( + targetInputs.length != modEncounter.primaryTarget.targetInputs.length || + modEncounter.primaryTarget.targetInputs.some((ti, i) => ti.label != targetInputs[i].label) + ) { modEncounter.primaryTarget.targetInputs = targetInputs; modEncounter.targetsChangeEmitter.emit(TypedEvent.nextEventID()); } @@ -187,7 +179,12 @@ class AdvancedEncounterModal extends BaseModal { }, newItem: () => Encounter.defaultTargetProto(), copyItem: (oldItem: TargetProto) => TargetProto.clone(oldItem), - newItemPicker: (parent: HTMLElement, listPicker: ListPicker, index: number, config: ListItemPickerConfig) => new TargetPicker(parent, encounter, index, config), + newItemPicker: ( + parent: HTMLElement, + listPicker: ListPicker, + index: number, + config: ListItemPickerConfig, + ) => new TargetPicker(parent, encounter, index, config), }); } @@ -197,14 +194,14 @@ class AdvancedEncounterModal extends BaseModal { new EnumPicker(this.header as HTMLElement, this.encounter, { label: 'Encounter', extraCssClasses: ['encounter-picker', 'mb-0', 'pe-2'], - values: [ - { name: 'Custom', value: -1 }, - ].concat(presetEncounters.map((pe, i) => { - return { - name: pe.path, - value: i, - }; - })), + values: [{ name: 'Custom', value: -1 }].concat( + presetEncounters.map((pe, i) => { + return { + name: pe.path, + value: i, + }; + }), + ), changedEvent: (encounter: Encounter) => encounter.changeEmitter, getValue: (encounter: Encounter) => presetEncounters.findIndex(pe => encounter.matchesPreset(pe)), setValue: (eventID: EventID, encounter: Encounter, newValue: number) => { @@ -240,7 +237,7 @@ class TargetPicker extends Input { } constructor(parent: HTMLElement, encounter: Encounter, targetIndex: number, config: ListItemPickerConfig) { - super(parent, 'target-picker-root', encounter, config) + super(parent, 'target-picker-root', encounter, config); this.encounter = encounter; this.targetIndex = targetIndex; @@ -259,14 +256,14 @@ class TargetPicker extends Input { extraCssClasses: ['npc-picker'], label: 'NPC', labelTooltip: 'Selects a preset NPC configuration.', - values: [ - { name: 'Custom', value: -1 }, - ].concat(presetTargets.map((pe, i) => { - return { - name: pe.path, - value: i, - }; - })), + values: [{ name: 'Custom', value: -1 }].concat( + presetTargets.map((pe, i) => { + return { + name: pe.path, + value: i, + }; + }), + ), changedEvent: () => encounter.targetsChangeEmitter, getValue: () => presetTargets.findIndex(pe => equalTargetsIgnoreInputs(this.getTarget(), pe.target)), setValue: (eventID: EventID, _: null, newValue: number) => { @@ -284,14 +281,14 @@ class TargetPicker extends Input {

Determines the target\'s ability rotation.

Note that most rotations are not yet implemented.

`, - values: [ - { name: 'None', value: 0 }, - ].concat(presetTargets.map(pe => { - return { - name: pe.path, - value: pe.target!.id, - }; - })), + values: [{ name: 'None', value: 0 }].concat( + presetTargets.map(pe => { + return { + name: pe.path, + value: pe.target!.id, + }; + }), + ), changedEvent: () => encounter.targetsChangeEmitter, getValue: () => this.getTarget().id, setValue: (eventID: EventID, _: null, newValue: number) => { @@ -333,7 +330,8 @@ class TargetPicker extends Input { this.tankIndexPicker = new EnumPicker(section1, null, { extraCssClasses: ['threat-metrics'], label: 'Tanked By', - labelTooltip: 'Determines which player in the raid this enemy will attack. If no player is assigned to the specified tank slot, this enemy will not attack.', + labelTooltip: + 'Determines which player in the raid this enemy will attack. If no player is assigned to the specified tank slot, this enemy will not attack.', values: [ { name: 'None', value: -1 }, { name: 'Main Tank', value: 0 }, @@ -403,6 +401,7 @@ class TargetPicker extends Input { label: 'Dual Wield', labelTooltip: 'Uses 2 separate weapons to attack.', inline: true, + reverse: true, changedEvent: () => encounter.targetsChangeEmitter, getValue: () => this.getTarget().dualWield, setValue: (eventID: EventID, _: null, newValue: boolean) => { @@ -412,8 +411,10 @@ class TargetPicker extends Input { }); this.dwMissPenaltyPicker = new BooleanPicker(section3, null, { label: 'DW Miss Penalty', - labelTooltip: 'Enables the Dual Wield Miss Penalty (+19% chance to miss) if dual wielding. Bosses in Hyjal/BT/SWP usually have this disabled to stop tanks from avoidance stacking.', + labelTooltip: + 'Enables the Dual Wield Miss Penalty (+19% chance to miss) if dual wielding. Bosses in Hyjal/BT/SWP usually have this disabled to stop tanks from avoidance stacking.', inline: true, + reverse: true, changedEvent: () => encounter.targetsChangeEmitter, getValue: () => this.getTarget().dualWieldPenalty, setValue: (eventID: EventID, _: null, newValue: boolean) => { @@ -426,6 +427,7 @@ class TargetPicker extends Input { label: 'Parry Haste', labelTooltip: 'Whether this enemy will gain parry haste when parrying attacks.', inline: true, + reverse: true, changedEvent: () => encounter.targetsChangeEmitter, getValue: () => this.getTarget().parryHaste, setValue: (eventID: EventID, _: null, newValue: boolean) => { @@ -454,8 +456,9 @@ class TargetPicker extends Input { }); this.suppressDodgePicker = new BooleanPicker(section3, null, { label: 'Chill of the Throne', - labelTooltip: 'Reduces the chance for this enemy\'s attacks to be dodged by 20%. Active in Icecrown Citadel.', + labelTooltip: "Reduces the chance for this enemy's attacks to be dodged by 20%. Active in Icecrown Citadel.", inline: true, + reverse: true, changedEvent: () => encounter.targetsChangeEmitter, getValue: () => this.getTarget().suppressDodge, setValue: (eventID: EventID, _: null, newValue: boolean) => { @@ -488,7 +491,8 @@ class TargetPicker extends Input { stats: this.statPickers .map(picker => picker.getInputValue()) .map((statValue, i) => new Stats().withStat(ALL_TARGET_STATS[i].stat, statValue)) - .reduce((totalStats, curStats) => totalStats.add(curStats)).asArray(), + .reduce((totalStats, curStats) => totalStats.add(curStats)) + .asArray(), targetInputs: this.targetInputPickers.getInputValue(), }); } @@ -525,8 +529,14 @@ class TargetInputPicker extends Input { return this.encounter.targets[this.targetIndex].targetInputs[this.targetInputIndex] || TargetInput.create(); } - constructor(parent: HTMLElement, encounter: Encounter, targetIndex: number, targetInputIndex: number, config: ListItemPickerConfig) { - super(parent, 'target-input-picker-root', encounter, config) + constructor( + parent: HTMLElement, + encounter: Encounter, + targetIndex: number, + targetInputIndex: number, + config: ListItemPickerConfig, + ) { + super(parent, 'target-input-picker-root', encounter, config); this.encounter = encounter; this.targetIndex = targetIndex; this.targetInputIndex = targetInputIndex; @@ -584,7 +594,7 @@ class TargetInputPicker extends Input { } function addEncounterFieldPickers(rootElem: HTMLElement, encounter: Encounter, showExecuteProportion: boolean) { - let durationGroup = Input.newGroupContainer(); + const durationGroup = Input.newGroupContainer(); rootElem.appendChild(durationGroup); new NumberPicker(durationGroup, encounter, { @@ -595,53 +605,67 @@ function addEncounterFieldPickers(rootElem: HTMLElement, encounter: Encounter, s setValue: (eventID: EventID, encounter: Encounter, newValue: number) => { encounter.setDuration(eventID, newValue); }, - enableWhen: (obj) => { return !encounter.getUseHealth() }, + enableWhen: obj => { + return !encounter.getUseHealth(); + }, }); new NumberPicker(durationGroup, encounter, { label: 'Duration +/-', - labelTooltip: 'Adds a random amount of time, in seconds, between [value, -1 * value] to each sim iteration. For example, setting Duration to 180 and Duration +/- to 10 will result in random durations between 170s and 190s.', + labelTooltip: + 'Adds a random amount of time, in seconds, between [value, -1 * value] to each sim iteration. For example, setting Duration to 180 and Duration +/- to 10 will result in random durations between 170s and 190s.', changedEvent: (encounter: Encounter) => encounter.changeEmitter, getValue: (encounter: Encounter) => encounter.getDurationVariation(), setValue: (eventID: EventID, encounter: Encounter, newValue: number) => { encounter.setDurationVariation(eventID, newValue); }, - enableWhen: (obj) => { return !encounter.getUseHealth() }, + enableWhen: obj => { + return !encounter.getUseHealth(); + }, }); if (showExecuteProportion) { - let executeGroup = Input.newGroupContainer(); + const executeGroup = Input.newGroupContainer(); executeGroup.classList.add('execute-group'); rootElem.appendChild(executeGroup); new NumberPicker(executeGroup, encounter, { label: 'Execute Duration 20 (%)', - labelTooltip: 'Percentage of the total encounter duration, for which the targets will be considered to be in execute range (< 20% HP) for the purpose of effects like Warrior Execute or Mage Molten Fury.', + labelTooltip: + 'Percentage of the total encounter duration, for which the targets will be considered to be in execute range (< 20% HP) for the purpose of effects like Warrior Execute or Mage Molten Fury.', changedEvent: (encounter: Encounter) => encounter.changeEmitter, getValue: (encounter: Encounter) => encounter.getExecuteProportion20() * 100, setValue: (eventID: EventID, encounter: Encounter, newValue: number) => { encounter.setExecuteProportion20(eventID, newValue / 100); }, - enableWhen: (obj) => { return !encounter.getUseHealth() }, + enableWhen: obj => { + return !encounter.getUseHealth(); + }, }); new NumberPicker(executeGroup, encounter, { label: 'Execute Duration 25 (%)', - labelTooltip: 'Percentage of the total encounter duration, for which the targets will be considered to be in execute range (< 25% HP) for the purpose of effects like Warlock\'s Drain Soul.', + labelTooltip: + "Percentage of the total encounter duration, for which the targets will be considered to be in execute range (< 25% HP) for the purpose of effects like Warlock's Drain Soul.", changedEvent: (encounter: Encounter) => encounter.changeEmitter, getValue: (encounter: Encounter) => encounter.getExecuteProportion25() * 100, setValue: (eventID: EventID, encounter: Encounter, newValue: number) => { encounter.setExecuteProportion25(eventID, newValue / 100); }, - enableWhen: (obj) => { return !encounter.getUseHealth() }, + enableWhen: obj => { + return !encounter.getUseHealth(); + }, }); new NumberPicker(executeGroup, encounter, { label: 'Execute Duration 35 (%)', - labelTooltip: 'Percentage of the total encounter duration, for which the targets will be considered to be in execute range (< 35% HP) for the purpose of effects like Warrior Execute or Mage Molten Fury.', + labelTooltip: + 'Percentage of the total encounter duration, for which the targets will be considered to be in execute range (< 35% HP) for the purpose of effects like Warrior Execute or Mage Molten Fury.', changedEvent: (encounter: Encounter) => encounter.changeEmitter, getValue: (encounter: Encounter) => encounter.getExecuteProportion35() * 100, setValue: (eventID: EventID, encounter: Encounter, newValue: number) => { encounter.setExecuteProportion35(eventID, newValue / 100); }, - enableWhen: (obj) => { return !encounter.getUseHealth() }, + enableWhen: obj => { + return !encounter.getUseHealth(); + }, }); } } @@ -657,7 +681,12 @@ function makeTargetInputsPicker(parent: HTMLElement, encounter: Encounter, targe }, newItem: () => TargetInput.create(), copyItem: (oldItem: TargetInput) => TargetInput.clone(oldItem), - newItemPicker: (parent: HTMLElement, listPicker: ListPicker, index: number, config: ListItemPickerConfig) => new TargetInputPicker(parent, encounter, targetIndex, index, config), + newItemPicker: ( + parent: HTMLElement, + listPicker: ListPicker, + index: number, + config: ListItemPickerConfig, + ) => new TargetInputPicker(parent, encounter, targetIndex, index, config), hideUi: true, }); } @@ -674,7 +703,7 @@ function equalTargetsIgnoreInputs(target1: TargetProto | undefined, target2: Tar return TargetProto.equals(target1, modTarget2); } -const ALL_TARGET_STATS: Array<{ stat: Stat, tooltip: string, extraCssClasses: Array }> = [ +const ALL_TARGET_STATS: Array<{ stat: Stat; tooltip: string; extraCssClasses: Array }> = [ { stat: Stat.StatHealth, tooltip: '', extraCssClasses: [] }, { stat: Stat.StatArmor, tooltip: '', extraCssClasses: [] }, { stat: Stat.StatArcaneResistance, tooltip: '', extraCssClasses: [] }, diff --git a/ui/core/components/individual_sim_ui/settings_tab.ts b/ui/core/components/individual_sim_ui/settings_tab.ts index 78f678105a..568ee2236d 100644 --- a/ui/core/components/individual_sim_ui/settings_tab.ts +++ b/ui/core/components/individual_sim_ui/settings_tab.ts @@ -1,36 +1,26 @@ import * as Tooltips from '../../constants/tooltips.js'; import { Encounter } from '../../encounter'; -import { IndividualSimUI, InputSection } from "../../individual_sim_ui"; -import { - Consumes, - Debuffs, - HealingModel, - IndividualBuffs, - ItemSwap, - PartyBuffs, - Profession, - RaidBuffs, - Spec, -} from "../../proto/common"; -import { SavedEncounter, SavedSettings } from "../../proto/ui"; -import { professionNames, raceNames } from "../../proto_utils/names"; -import { specToEligibleRaces } from "../../proto_utils/utils"; -import { EventID, TypedEvent } from "../../typed_event"; -import { getEnumValues } from "../../utils"; -import { BooleanPicker } from "../boolean_picker"; -import { ContentBlock } from "../content_block"; +import { IndividualSimUI, InputSection } from '../../individual_sim_ui'; +import { Consumes, Debuffs, HealingModel, IndividualBuffs, ItemSwap, PartyBuffs, Profession, RaidBuffs, Spec } from '../../proto/common'; +import { SavedEncounter, SavedSettings } from '../../proto/ui'; +import { professionNames, raceNames } from '../../proto_utils/names'; +import { specToEligibleRaces } from '../../proto_utils/utils'; +import { EventID, TypedEvent } from '../../typed_event'; +import { getEnumValues } from '../../utils'; +import { BooleanPicker } from '../boolean_picker'; +import { ContentBlock } from '../content_block'; import { EncounterPicker } from '../encounter_picker.js'; -import { EnumPicker } from "../enum_picker"; +import { EnumPicker } from '../enum_picker'; import * as IconInputs from '../icon_inputs.js'; -import { Input } from "../input"; +import { Input } from '../input'; import * as BuffDebuffInputs from '../inputs/buffs_debuffs'; -import { relevantStatOptions } from "../inputs/stat_options"; -import { ItemSwapPicker } from "../item_swap_picker"; -import { MultiIconPicker } from "../multi_icon_picker"; -import { NumberPicker } from "../number_picker"; -import { SavedDataManager } from "../saved_data_manager"; -import { SimTab } from "../sim_tab"; -import { ConsumesPicker } from "./consumes_picker"; +import { relevantStatOptions } from '../inputs/stat_options'; +import { ItemSwapPicker } from '../item_swap_picker'; +import { MultiIconPicker } from '../multi_icon_picker'; +import { NumberPicker } from '../number_picker'; +import { SavedDataManager } from '../saved_data_manager'; +import { SimTab } from '../sim_tab'; +import { ConsumesPicker } from './consumes_picker'; export class SettingsTab extends SimTab { protected simUI: IndividualSimUI; @@ -91,7 +81,7 @@ export class SettingsTab extends SimTab { private buildEncounterSettings() { const contentBlock = new ContentBlock(this.column1, 'encounter-settings', { - header: { title: 'Encounter' } + header: { title: 'Encounter' }, }); new EncounterPicker(contentBlock.bodyElement, this.simUI.sim.encounter, this.simUI.individualConfig.encounterPicker, this.simUI); @@ -100,7 +90,7 @@ export class SettingsTab extends SimTab { private buildPlayerSettings() { const column = this.column1; const contentBlock = new ContentBlock(column, 'player-settings', { - header: { title: 'Player' } + header: { title: 'Player' }, }); const playerIconGroup = Input.newGroupContainer(); @@ -110,7 +100,7 @@ export class SettingsTab extends SimTab { this.configureIconSection( playerIconGroup, this.simUI.individualConfig.playerIconInputs.map(iconInput => IconInputs.buildIconInput(playerIconGroup, this.simUI.player, iconInput)), - true + true, ); const races = specToEligibleRaces[this.simUI.player.spec]; @@ -172,28 +162,26 @@ export class SettingsTab extends SimTab { private buildConsumesSection() { const column = this.simUI.isWithinRaidSim ? this.column3 : this.column2; const contentBlock = new ContentBlock(column, 'consumes-settings', { - header: { title: 'Consumables' } + header: { title: 'Consumables' }, }); new ConsumesPicker(contentBlock.bodyElement, this, this.simUI); } private buildOtherSettings() { - const settings = this.simUI.individualConfig.otherInputs?.inputs.filter(inputs => - !inputs.extraCssClasses?.includes('within-raid-sim-hide') || true - ) + const settings = this.simUI.individualConfig.otherInputs?.inputs.filter(inputs => !inputs.extraCssClasses?.includes('within-raid-sim-hide') || true); const swapSlots = this.simUI.individualConfig.itemSwapSlots || []; if (settings.length > 0 || swapSlots.length > 0) { const contentBlock = new ContentBlock(this.column2, 'other-settings', { - header: { title: 'Other' } + header: { title: 'Other' }, }); if (settings.length > 0) { this.configureInputSection(contentBlock.bodyElement, this.simUI.individualConfig.otherInputs); contentBlock.bodyElement.querySelectorAll('.input-root').forEach(elem => { elem.classList.add('input-inline'); - }) + }); } if (swapSlots.length > 0) { @@ -206,7 +194,7 @@ export class SettingsTab extends SimTab { private buildBuffsSettings() { const contentBlock = new ContentBlock(this.column3, 'buffs-settings', { - header: { title: 'Raid Buffs', tooltip: Tooltips.BUFFS_SECTION } + header: { title: 'Raid Buffs', tooltip: Tooltips.BUFFS_SECTION }, }); const buffOptions = relevantStatOptions(BuffDebuffInputs.RAID_BUFFS_CONFIG, this.simUI); @@ -217,30 +205,40 @@ export class SettingsTab extends SimTab { const miscBuffOptions = relevantStatOptions(BuffDebuffInputs.RAID_BUFFS_MISC_CONFIG, this.simUI); if (miscBuffOptions.length > 0) { - new MultiIconPicker(contentBlock.bodyElement, this.simUI.player, { - inputs: miscBuffOptions.map(option => option.config), - label: 'Misc', - }, this.simUI); + new MultiIconPicker( + contentBlock.bodyElement, + this.simUI.player, + { + inputs: miscBuffOptions.map(option => option.config), + label: 'Misc', + }, + this.simUI, + ); } } private buildDebuffsSettings() { const contentBlock = new ContentBlock(this.column3, 'debuffs-settings', { - header: { title: 'Debuffs', tooltip: Tooltips.DEBUFFS_SECTION } + header: { title: 'Debuffs', tooltip: Tooltips.DEBUFFS_SECTION }, }); const debuffOptions = relevantStatOptions(BuffDebuffInputs.DEBUFFS_CONFIG, this.simUI); this.configureIconSection( contentBlock.bodyElement, - debuffOptions.map(options => options.picker && new options.picker(contentBlock.bodyElement, this.simUI.player, options.config as any, this.simUI)) + debuffOptions.map(options => options.picker && new options.picker(contentBlock.bodyElement, this.simUI.player, options.config as any, this.simUI)), ); - const miscDebuffOptions = relevantStatOptions(BuffDebuffInputs.DEBUFFS_MISC_CONFIG, this.simUI) + const miscDebuffOptions = relevantStatOptions(BuffDebuffInputs.DEBUFFS_MISC_CONFIG, this.simUI); if (miscDebuffOptions.length) { - new MultiIconPicker(contentBlock.bodyElement, this.simUI.player, { - inputs: miscDebuffOptions.map(options => options.config), - label: 'Misc', - }, this.simUI); + new MultiIconPicker( + contentBlock.bodyElement, + this.simUI.player, + { + inputs: miscDebuffOptions.map(options => options.config), + label: 'Misc', + }, + this.simUI, + ); } } @@ -300,7 +298,7 @@ export class SettingsTab extends SimTab { simUI.player.setInFrontOfTarget(eventID, newSettings.inFrontOfTarget); simUI.player.setDistanceFromTarget(eventID, newSettings.distanceFromTarget); simUI.player.setHealingModel(eventID, newSettings.healingModel || HealingModel.create()); - simUI.player.setNibelungAverageCasts(eventID, newSettings.nibelungAverageCasts) + simUI.player.setNibelungAverageCasts(eventID, newSettings.nibelungAverageCasts); }); }, changeEmitters: [ @@ -333,12 +331,12 @@ export class SettingsTab extends SimTab { if (inputConfig.type == 'number') { new NumberPicker(sectionElem, this.simUI.player, inputConfig); } else if (inputConfig.type == 'boolean') { - new BooleanPicker(sectionElem, this.simUI.player, { ...inputConfig }); + new BooleanPicker(sectionElem, this.simUI.player, { ...inputConfig, reverse: true }); } else if (inputConfig.type == 'enum') { new EnumPicker(sectionElem, this.simUI.player, inputConfig); } }); - }; + } private configureIconSection(sectionElem: HTMLElement, iconPickers: Array, adjustColumns?: boolean) { if (iconPickers.length == 0) { @@ -350,5 +348,5 @@ export class SettingsTab extends SimTab { sectionElem.style.gridTemplateColumns = `repeat(${Math.ceil(iconPickers.length / 2)}, 1fr)`; } } - }; + } } diff --git a/ui/scss/core/components/_encounter_picker.scss b/ui/scss/core/components/_encounter_picker.scss index 3b5c924a7f..8037183b8c 100644 --- a/ui/scss/core/components/_encounter_picker.scss +++ b/ui/scss/core/components/_encounter_picker.scss @@ -1,8 +1,8 @@ -@use "sass:map"; +@use 'sass:map'; -@import "./enum_picker"; -@import "./list_picker"; -@import "./number_picker"; +@import './enum_picker'; +@import './list_picker'; +@import './number_picker'; .encounter-picker-root { display: flex; @@ -15,7 +15,7 @@ } .advanced-button { - min-width: calc(50% - .5rem); + min-width: calc(50% - 0.5rem); } } @@ -46,6 +46,7 @@ .target-picker-root { display: flex; + flex-direction: row; .target-picker-section { width: 33.33%; @@ -103,7 +104,7 @@ .target-picker-root { .target-picker-section { width: 100%; - + margin-right: 0; } } diff --git a/ui/scss/shared/_bootstrap_style_overrides.scss b/ui/scss/shared/_bootstrap_style_overrides.scss index 33a5f8c3a6..13ce604755 100644 --- a/ui/scss/shared/_bootstrap_style_overrides.scss +++ b/ui/scss/shared/_bootstrap_style_overrides.scss @@ -1,4 +1,4 @@ -@use "sass:map"; +@use 'sass:map'; @font-face { font-family: SimDefaultFont; @@ -12,199 +12,204 @@ } :root { - --bs-body-font-family: SimDefaultFont; - --bs-body-line-height: 1.25; + --bs-body-font-family: SimDefaultFont; + --bs-body-line-height: 1.25; } .container { - height: 100%; - display: flex; + height: 100%; + display: flex; } .dropdown-menu { - &[data-bs-popper] { - margin: 0 !important; - } + &[data-bs-popper] { + margin: 0 !important; + } } .form-check { - padding: 0; + justify-content: flex-start !important; - &.form-check-reverse { - text-align: left; + &.form-check-reverse { + justify-content: space-between !important; - .form-check-input { - margin: 0; - } - } + .form-label { + margin-left: 0; + text-align: left; + } + } + + .form-label { + margin-left: map-get($spacers, 1); + } } .form-check-input { - width: $form-check-input-width !important; - height: $form-check-input-width !important; + width: $form-check-input-width !important; + height: $form-check-input-width !important; - &:focus { - box-shadow: 0 0 .25rem var(--bs-primary); - } + &:focus { + box-shadow: 0 0 0.25rem var(--bs-primary); + } - &:checked[type="checkbox"] { - background-color: var(--bs-primary); - background-image: var(--bs-form-check-box-bg-image); - } + &: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); - } + &:checked[type='radio'] { + background-color: var(--bs-primary); + background-image: var(--bs-form-check-radio-bg-image); + } } .link-warning { - color: $link-warning-color !important; + color: $link-warning-color !important; } .link-danger { - color: $link-danger-color !important; + color: $link-danger-color !important; } .link-success { - color: $success !important; + color: $success !important; } .modal { - .modal-dialog { - .modal-header, - .modal-footer { - padding-left: 0; - padding-right: 0; - margin-left: $modal-header-padding; - margin-right: $modal-header-padding; - } - - .modal-header { - align-items: flex-start; - } - - .modal-body { - display: flex; - flex-direction: column; - } - } + .modal-dialog { + .modal-header, + .modal-footer { + padding-left: 0; + padding-right: 0; + margin-left: $modal-header-padding; + margin-right: $modal-header-padding; + } + + .modal-header { + align-items: flex-start; + } + + .modal-body { + display: flex; + flex-direction: column; + } + } } .navbar { - .navbar-toggler { - border: 0; - box-shadow: none; - color: white; - } + .navbar-toggler { + border: 0; + box-shadow: none; + color: white; + } - .nav-link { - display: flex; - align-items: center; - white-space: nowrap; - } + .nav-link { + display: flex; + align-items: center; + white-space: nowrap; + } } .nav-tabs { - .nav-item { - display: flex; - align-items: center; - - .nav-link { - height: 100%; - margin-bottom: 0; - border: 0; - display: flex; - align-items: center; - font-weight: bold; - white-space: nowrap; - - &.active { - position: relative; - - &::after { - content: ""; - position: absolute; - height: 2px; - background: $nav-tabs-link-active-color; - bottom: 0; - left: 0; - right: 0; - } - } - } - } + .nav-item { + display: flex; + align-items: center; + + .nav-link { + height: 100%; + margin-bottom: 0; + border: 0; + display: flex; + align-items: center; + font-weight: bold; + white-space: nowrap; + + &.active { + position: relative; + + &::after { + content: ''; + position: absolute; + height: 2px; + background: $nav-tabs-link-active-color; + bottom: 0; + left: 0; + right: 0; + } + } + } + } } .tooltip { - .tooltip-inner { - border: 1px solid $link-color; - } + .tooltip-inner { + border: 1px solid $link-color; + } } .popover-arrow, .tooltip-arrow { - display: none !important; + display: none !important; } @each $color, $value in $class-colors { - // Dampened class themes - .bg-#{$color}-dampened { - background: mix(black, $value, 75%); - } + // Dampened class themes + .bg-#{$color}-dampened { + background: mix(black, $value, 75%); + } } @include media-breakpoint-down(xl) { - .tooltip { - --bs-tooltip-max-width: #{$tooltip-max-width-lg}; - } + .tooltip { + --bs-tooltip-max-width: #{$tooltip-max-width-lg}; + } } @include media-breakpoint-down(lg) { - .container { - width: 100%; - max-width: 100%; - margin-left: 0; - margin-right: 0; - } + .container { + width: 100%; + max-width: 100%; + margin-left: 0; + margin-right: 0; + } } @include media-breakpoint-down(md) { - .navbar { - .navbar-collapse { - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - padding: 1rem; - background: rgba(0,0,0,.9); - z-index: 1000; - - .navbar-nav { - position: relative; - align-items: flex-start; - - .navbar-toggler { - position: absolute; - top: 0; - right: 0; - } - - .nav-link { - padding-bottom: map-get($spacers, 3); - - &:first-of-type { - padding-top: map-get($spacers, 2); - } - } - } - } - } + .navbar { + .navbar-collapse { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + padding: 1rem; + background: rgba(0, 0, 0, 0.9); + z-index: 1000; + + .navbar-nav { + position: relative; + align-items: flex-start; + + .navbar-toggler { + position: absolute; + top: 0; + right: 0; + } + + .nav-link { + padding-bottom: map-get($spacers, 3); + + &:first-of-type { + padding-top: map-get($spacers, 2); + } + } + } + } + } } @include media-breakpoint-down(md) { - .tooltip { - --bs-tooltip-max-width: #{$tooltip-max-width-sm}; - } + .tooltip { + --bs-tooltip-max-width: #{$tooltip-max-width-sm}; + } }