Clean up the UI for EP ratios and make sure they only show when multi…

…ple EP columns are visible.
wowsims · Apr 12, 2023 · 95c9515 · 95c9515
1 parent 16591e7
commit 95c9515
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 4 deletions.
diff --git a/ui/core/components/stat_weights_action.ts b/ui/core/components/stat_weights_action.ts
@@ -115,15 +115,15 @@ class EpWeightsMenu extends BaseModal {
  <i class="fa fa-copy"></i>
  </a>
  </th>
- <th>
+ <th style="text-align: center;">
  <span>Current EP</span>
  <a href="javascript:void(0)" role="button" class="col-action">
  <i class="fas fa-arrows-rotate"></i>
  </a>
  </th>
  </tr>
- <tr>
- <th>Ratio</th>
+ <tr class="ep-ratios">
+ <td>EP Ratio</td>
  <td class="damage-metrics type-ratio type-weight">
  </td>
  <td class="damage-metrics type-ratio type-ep">
@@ -140,7 +140,7 @@ class EpWeightsMenu extends BaseModal {
  </td>
  <td class="threat-metrics type-ratio type-ep">
  </td>
- <td>
+ <td style="text-align: center; vertical-align: middle;">
  <button class="btn btn-primary compute-ep">
  <i class="fas fa-calculator"></i>
  Compute EP

diff --git a/ui/core/sim_ui.ts b/ui/core/sim_ui.ts
@@ -109,6 +109,25 @@ export abstract class SimUI extends Component {
  updateShowHealingMetrics();
  this.sim.showHealingMetricsChangeEmitter.on(updateShowHealingMetrics);
 
+ const updateShowEpRatios = () => {
+ // Threat metrics *always* shows multiple columns, so
+ // always show ratios when they are shown
+ if (this.sim.getShowThreatMetrics()) {
+ this.rootElem.classList.remove('hide-ep-ratios');
+ // This case doesn't currently happen, but who knows
+ // what the future holds...
+ } else if (this.sim.getShowDamageMetrics() && this.sim.getShowHealingMetrics()) {
+ this.rootElem.classList.remove('hide-ep-ratios');
+ } else {
+ this.rootElem.classList.add('hide-ep-ratios');
+ }
+ };
+
+ updateShowEpRatios();
+ this.sim.showDamageMetricsChangeEmitter.on(updateShowEpRatios);
+ this.sim.showHealingMetricsChangeEmitter.on(updateShowEpRatios);
+ this.sim.showThreatMetricsChangeEmitter.on(updateShowEpRatios);
+
  const updateShowExperimental = () => {
  if (this.sim.getShowExperimental())
  this.rootElem.classList.remove('hide-experimental');

diff --git a/ui/scss/core/components/_stat_weights_action.scss b/ui/scss/core/components/_stat_weights_action.scss
@@ -52,6 +52,23 @@
  text-align: left;
  }
 
+ .ep-ratios {
+ background-color: $table-row-even-bg;
+
+ td {
+ padding: $table-cell-padding;
+ }
+
+ .input-root {
+ align-items: flex-end;
+ }
+
+ input {
+ text-align: right;
+ width: 65%;
+ }
+ }
+
  tbody {
  tr:nth-child(even) {
  background-color: $table-row-even-bg; 

diff --git a/ui/scss/core/sim_ui/_shared.scss b/ui/scss/core/sim_ui/_shared.scss
@@ -104,6 +104,10 @@ td, th {
 .hide-in-front-of-target .in-front-of-target {
  display: none !important;
 }
+
+.hide-ep-ratios .ep-ratios {
+ display: none !important;
+}
 // END TODO
 
 @include media-breakpoint-down(lg) {