Merge pull request #3514 from wowsims/small-ui-tweaks

Various small UI tweaks
wowsims · Aug 21, 2023 · 52cc1f5 · 52cc1f5
2 parents 3a5a610 + fab319c
commit 52cc1f5
Show file tree

Hide file tree

Showing 15 changed files with 124 additions and 114 deletions.
diff --git a/ui/core/components/detailed_results.ts b/ui/core/components/detailed_results.ts
@@ -26,7 +26,7 @@ import { RaidSimResultsManager } from './raid_sim_action';
 declare var Chart: any;
 
 const layoutHTML = `
-<div class="dr-root">
+<div class="dr-root dr-no-results">
 	<div class="dr-toolbar">
 		<div class="results-filter"></div>
 		<div class="tabs-filler"></div>
@@ -134,6 +134,9 @@ const layoutHTML = `
 		</ul>
 	</div>
 	<div class="tab-content">
+		<div id="noResultsTab" class="tab-pane dr-tab-content fade active show">
+			Run a simulation to view results
+		</div>
 		<div id="damageTab" class="tab-pane dr-tab-content damage-content fade active show">
 			<div class="dr-row topline-results">
 			</div>
@@ -329,8 +332,10 @@ export abstract class DetailedResults extends Component {
 	private updateResults() {
 		const eventID = TypedEvent.nextEventID();
 		if (this.currentSimResult == null) {
+			this.rootElem.querySelector('.dr-root')?.classList.add('dr-no-results');
 			this.resultsEmitter.emit(eventID, null);
 		} else {
+			this.rootElem.querySelector('.dr-root')?.classList.remove('dr-no-results');
 			this.resultsEmitter.emit(eventID, {
 				eventID: eventID,
 				result: this.currentSimResult,
@@ -408,7 +413,10 @@ export class EmbeddedDetailedResults extends DetailedResults {
 
 		const newTabBtn = document.createElement('div');
 		newTabBtn.classList.add('detailed-results-controls-div');
-		newTabBtn.innerHTML = `<button class="detailed-results-new-tab-button btn btn-primary">View in Separate Tab</button>`;
+		newTabBtn.innerHTML = `
+			<button class="detailed-results-new-tab-button btn btn-primary">View in Separate Tab</button>
+			<button class="detailed-results-1-iteration-button btn btn-primary">Sim 1 Iteration</button>
+		`;
 
 		this.rootElem.prepend(newTabBtn);
 
@@ -422,7 +430,7 @@ export class EmbeddedDetailedResults extends DetailedResults {
 			this.rootElem.classList.add('individual-sim');
 		}
 
-		const newTabButton = this.rootElem.getElementsByClassName('detailed-results-new-tab-button')[0] as HTMLButtonElement;
+		const newTabButton = this.rootElem.querySelector('.detailed-results-new-tab-button') as HTMLButtonElement;
 		newTabButton.addEventListener('click', event => {
 			if (this.tabWindow == null || this.tabWindow.closed) {
 				this.tabWindow = window.open(url.href, 'Detailed Results');
@@ -437,6 +445,11 @@ export class EmbeddedDetailedResults extends DetailedResults {
 			}
 		});
 
+		const simButton = this.rootElem.querySelector('.detailed-results-1-iteration-button') as HTMLButtonElement;
+		simButton.addEventListener('click', () => {
+			(window.opener || window.parent)!.postMessage('runOnce', '*');
+		});
+
 		simResultsManager.currentChangeEmitter.on(async () => {
 			const runData = simResultsManager.getRunData();
 			if (runData) {

diff --git a/ui/core/components/detailed_results/log_runner.ts b/ui/core/components/detailed_results/log_runner.ts
@@ -1,10 +1,8 @@
 import { ResultComponent, ResultComponentConfig, SimResultData } from './result_component.js';
 
 const layoutHTML = `
-	<div class="log-runner-control-bar">
-		<button class="log-runner-button btn btn-primary">Sim 1 Iteration</button>
+	<div class="log-runner-logs">
 	</div>
-	<div class="log-runner-logs"></div>
 `
 export class LogRunner extends ResultComponent {
 	private logsContainer: HTMLElement;
@@ -15,13 +13,6 @@ export class LogRunner extends ResultComponent {
 
 		this.rootElem.innerHTML = layoutHTML
 		this.logsContainer = this.rootElem.querySelector('.log-runner-logs') as HTMLElement;
-
-		const simButton = this.rootElem.querySelector('.log-runner-button') as HTMLElement;
-
-		// Needs to support
-		simButton.addEventListener('click', () => {
-			(window.opener || window.parent)!.postMessage('runOnce', '*');
-		});
 	}
 
 	onSimResult(resultData: SimResultData): void {

diff --git a/ui/core/components/detailed_results/results_filter.ts b/ui/core/components/detailed_results/results_filter.ts
@@ -44,6 +44,7 @@ export class ResultsFilter extends ResultComponent {
 		this.targetFilter = new UnitPicker(this.rootElem, this.currentFilter, {
 			extraCssClasses: [
 				'target-filter-root',
+				'd-none',
 			],
 			changedEvent: (_filterData: FilterData) => this.changeEmitter,
 			sourceToValue: (src: UnitReference|undefined) => this.refToValue(src),
@@ -64,6 +65,7 @@ export class ResultsFilter extends ResultComponent {
 	onSimResult(resultData: SimResultData) {
 		this.playerFilter.setOptions(this.getUnitOptions(resultData.eventID, resultData.result, true));
 		this.targetFilter.setOptions(this.getUnitOptions(resultData.eventID, resultData.result, false));
+		this.targetFilter.rootElem.classList.remove('d-none');
 	}
 
 	setPlayer(eventID: EventID, newPlayer: number | null) {

diff --git a/ui/core/components/detailed_results/timeline.ts b/ui/core/components/detailed_results/timeline.ts
@@ -54,10 +54,9 @@ export class Timeline extends ResultComponent {
 
 		this.rootElem.innerHTML = `
 		<div class="timeline-disclaimer">
-			<span class="timeline-warning fa fa-exclamation-triangle"></span>
+			<span class="warning wanings fa fa-exclamation-triangle fa-xl me-2"></span>
 			<span class="timeline-warning-description">Timeline data visualizes only 1 sim iteration.</span>
-			<div class="timeline-run-again-button btn btn-primary">Sim 1 Iteration</div>
-			<select class="timeline-chart-picker">
+			<select class="timeline-chart-picker form-select">
 				<option class="rotation-option" value="rotation">Rotation</option>
 				<option class="dps-option" value="dps">DPS</option>
 				<option class="threat-option" value="threat">Threat</option>
@@ -78,11 +77,6 @@ export class Timeline extends ResultComponent {
 		</div>
 		`;
 
-		const runAgainButton = this.rootElem.getElementsByClassName('timeline-run-again-button')[0] as HTMLElement;
-		runAgainButton.addEventListener('click', () => {
-			(window.opener || window.parent)!.postMessage('runOnce', '*');
-		});
-
 		this.chartPicker = this.rootElem.getElementsByClassName('timeline-chart-picker')[0] as HTMLSelectElement;
 		this.chartPicker.addEventListener('change', () => {
 			if (this.chartPicker.value == 'rotation') {

diff --git a/ui/core/components/individual_sim_ui/apl_helpers.ts b/ui/core/components/individual_sim_ui/apl_helpers.ts
@@ -374,7 +374,7 @@ export class APLPickerBuilder<T> extends Input<Player<any>, T> {
 			},
 		}, () => builder.getSourceValue())
 
-		if (field === 'vals') {
+		if (field === 'vals' || field === 'actions') {
 			picker.rootElem.classList.add('apl-picker-builder-multi')
 		}
 

diff --git a/ui/core/components/individual_sim_ui/apl_rotation_picker.ts b/ui/core/components/individual_sim_ui/apl_rotation_picker.ts
@@ -230,7 +230,7 @@ class APLListItemPicker extends Input<Player<any>, APLListItem> {
 
 function makeListItemWarnings(itemHeaderElem: HTMLElement, player: Player<any>, getWarnings: (player: Player<any>) => Array<string>) {
 	const warningsElem = ListPicker.makeActionElem('apl-warnings', 'Warnings', 'fa-exclamation-triangle');
-	warningsElem.classList.add('warnings', 'link-warning');
+	warningsElem.classList.add('warning', 'link-warning');
 	warningsElem.setAttribute('data-bs-html', 'true');
 	const warningsTooltip = Tooltip.getOrCreateInstance(warningsElem, {
 		customClass: 'dropdown-tooltip',

diff --git a/ui/core/components/results_viewer.ts b/ui/core/components/results_viewer.ts
@@ -89,7 +89,7 @@ export class ResultsViewer extends Component {
 			parent: this.warningElem,
 			icon: 'fas fa-exclamation-triangle fa-3x',
 			tooltip: "<ul class='text-start ps-3 mb-0'></ul>",
-			classes: 'warnings link-warning'
+			classes: 'warning link-warning'
 		}).children[0] as HTMLElement;
 	}
 
@@ -126,12 +126,12 @@ export class ResultsViewer extends Component {
 
 	setPending() {
 		this.contentElem.style.display = 'none';
-		this.pendingElem.style.display = 'initial';
+		this.pendingElem.style.display = 'block';
 	}
 
 	setContent(innerHTML: string) {
 		this.contentElem.innerHTML = innerHTML;
-		this.contentElem.style.display = 'initial';
+		this.contentElem.style.display = 'block';
 		this.pendingElem.style.display = 'none';
 	}
 }
diff --git a/ui/core/components/stat_weights_action.ts b/ui/core/components/stat_weights_action.ts
@@ -229,7 +229,7 @@ class EpWeightsMenu extends BaseModal {
 				class="btn btn-primary optimize-gems experimental me-2"
 				data-bs-toggle="tooltip"
 				data-bs-title="
-					<p><span class='warnings link-warning'><i class='fa fa-exclamation-triangle'></i> WARNING</span> This feature is experimental, and will not always produce the most optimal gems especially when interacting with soft/hard stat caps.</p>
+					<p><span class='warning link-warning'><i class='fa fa-exclamation-triangle'></i> WARNING</span> This feature is experimental, and will not always produce the most optimal gems especially when interacting with soft/hard stat caps.</p>
 					<p>Optimizes equipped gems to maximize EP, based on the values in <b>Current EP</b>.</p>
 					<p class='mb-0'>Does not change the meta gem, but ensures that its condition is met. Uses JC gems if Jewelcrafting is a selected profession.</p>
 				"

diff --git a/ui/scss/core/components/_bulk.scss b/ui/scss/core/components/_bulk.scss
@@ -168,10 +168,8 @@
       flex-direction: row;
     }
   }
-}
 
-.results-sim {
-  margin-top: 5px;
-  flex: 2;
-  margin-right: 2px;
+  .results-sim {
+    margin-right: map-get($spacers, 3);
+  }
 }
diff --git a/ui/scss/core/components/_detailed_results.scss b/ui/scss/core/components/_detailed_results.scss
@@ -16,7 +16,12 @@
 }
 
 .detailed-results-controls-div {
-	padding-bottom: calc(var(--bs-gap) / 2);
+	display: flex;
+	margin-bottom: $block-spacer;
+
+	.detailed-results-new-tab-button {
+		margin-right: $block-spacer;
+	}
 }
 
 .all-players .single-player-only {
@@ -42,6 +47,18 @@
 	display: flex;
 	flex-direction: column;
 
+	&.dr-no-results {
+		.dr-row {
+			display: none;
+		}
+	}
+
+	&:not(.dr-no-results) {
+		#noResultsTab {
+			display: none;
+		}
+	}
+
 	> {
 		.tab-content {
 			padding-top: 1rem;
@@ -101,6 +118,14 @@
 	}
 }
 
+#noResultsTab {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: calc(map-get($spacers, 3) * 2);
+	font-size: 1rem;
+}
+
 .results-filter {
 	display: flex !important;
 	align-items: center;

diff --git a/ui/scss/core/components/detailed_results/_timeline.scss b/ui/scss/core/components/detailed_results/_timeline.scss
@@ -36,25 +36,17 @@ $combo-points-color: #ffa07a;
 }
 
 .timeline-disclaimer {
-	padding-right: 20px;
-}
-
-.timeline-warning {
-	color: yellow;
-	margin: 0 10px;
-	text-shadow:
-			0 0 10px red,
-			0 0 10px red;
-}
+	display: flex;
+	align-items: center;
 
-.timeline-run-again-button {
-	margin-left: 10px;
-	display: inline-block;
-	cursor: pointer;
+	.timeline-chart-picker {
+		width: 8rem;
+		margin-left: auto;
+	}
 }
 
-.timeline-chart-picker {
-	float: right;
+.timeline-warning {
+	margin-right: map-get($spacers, 2);
 }
 
 .timeline-plots-container {

diff --git a/ui/scss/core/sim_ui/_header.scss b/ui/scss/core/sim_ui/_header.scss
@@ -92,11 +92,6 @@
 		.sim-toolbar-item {
 			transition: $link-transition;
 
-			.warnings {
-				margin-top: math.div($nav-link-padding-y, 2);
-				margin-bottom: math.div($nav-link-padding-y, 2);
-			}
-
 			.known-issues {
 				color: #ef9eaa;
 			}

diff --git a/ui/scss/shared/_global.scss b/ui/scss/shared/_global.scss
@@ -107,13 +107,6 @@ p {
   }
 }
 
-.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/_global_old.scss b/ui/scss/shared/_global_old.scss
@@ -28,51 +28,6 @@
 
 $sim-transitions: .2s ease-in;
 
-@mixin vertical-center {
-  margin: 0;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-@mixin horizontal-center {
-  margin: 0;
-  position: absolute;
-  left: auto;
-	right: auto;
-}
-
-@mixin vertical-horizontal-center {
-  margin: 0 !important;
-  position: absolute !important;
-  top: 50% !important;
-  left: 50% !important;
-  transform: translate(-50%, -50%) !important;
-}
-
-@mixin vertical-bottom {
-  position: absolute;
-  bottom: 0;
-}
-
-@mixin horizontal-left {
-  position: absolute;
-  left: 0;
-}
-
-@mixin horizontal-right {
-  position: absolute;
-  right: 0;
-}
-
-@mixin screen-vertical-horizontal-center {
-  margin: 0;
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) !important;
-}
-
 .loader {
   border: 16px solid #f3f3f3; /* Light grey */
   border-top: 16px solid #3498db; /* Blue */
@@ -87,14 +42,6 @@ $sim-transitions: .2s ease-in;
   100% { transform: rotate(360deg); }
 }
 
-@mixin wowhead-background-icon {
-  background-repeat: no-repeat;
-  background-size: cover;
-  position: relative;
-  cursor: pointer;
-  display: inline-block;
-}
-
 .dropdown-root {
 	position: relative;
 	display: inline-block !important;
@@ -134,16 +81,23 @@ $sim-transitions: .2s ease-in;
 .positive {
 	color: $success !important;
 }
+
 .negative {
 	color: red !important;
 }
 
 .safe {
 	color: $success;
 }
+
 .warning {
 	color: yellow;
+	text-shadow:
+    0 0 map-get($spacers, 2) $danger,
+    0 0 map-get($spacers, 2) $danger,
+    0 0 map-get($spacers, 2) $danger;
 }
+
 .danger {
 	color: red;
 }