Improve layout and info for filter import modal

src/components/modals/ImportFilterModal.vue

@@ -67,6 +67,10 @@ export default {
     // Hide effarig if it hasn't been unlocked yet
     availableTypes() {
       return ALCHEMY_BASIC_GLYPH_TYPES.filter(t => !GlyphTypes.locked.map(e => e.id).includes(t));
+    },
+    settingTooltipText() {
+      return `Mouseover each box for more details. ✔ and ✘ symbols denote an effect
+        selected/unselected for Specified Effect mode.`;
     }
   },
   mounted() {
@@ -117,7 +121,9 @@ export default {
         <br>
         <b>Rejected Glyphs:</b> {{ trashStr }}
         <br>
-        <u><b>Type-specific Settings</b></u>
+        <u><b>Type-specific Settings</b></u> <span :ach-tooltip="settingTooltipText">
+          <i class="fas fa-question-circle" />
+        </span>
         <br>
         <ImportFilterSingleType
           v-for="type in availableTypes"
@@ -147,5 +153,6 @@ export default {
 .c-single-type {
   left: 0;
   text-align: left;
+  padding: 0.5rem;
 }
 </style>

src/components/modals/ImportFilterSingleType.vue

@@ -54,14 +54,16 @@ export default {
       if (oldVal === newVal) return applyFn(oldVal);
       return `${applyFn(oldVal)}➜${applyFn(newVal)}`;
     },
-    effectBox(effectEntry) {
-      if (effectEntry.oldReq && effectEntry.newReq) return "☑";
-      if (!effectEntry.oldReq && effectEntry.newReq) return "⊕";
-      if (effectEntry.oldReq && !effectEntry.newReq) return "⊖";
-      return "☒";
-    },
     effectScoreStr(effectEntry) {
-      return this.changedValue(effectEntry.oldScore, effectEntry.newScore, formatInt);
+      const fullStr = (isSelected, value) => {
+        const check = isSelected ? "✔" : "✘";
+        return `${check}${formatInt(value)}`;
+      };
+      const oldStr = fullStr(effectEntry.oldReq, effectEntry.oldScore);
+      const newStr = fullStr(effectEntry.neReq, effectEntry.newScore);
+
+      if (effectEntry.oldScore === effectEntry.newScore) return oldStr;
+      return `${oldStr}➜${newStr}`;
     },
     topLevelClassObject(key) {
       return {
@@ -74,6 +76,9 @@ export default {
         "o-cell": true,
         "o-cell--changed": effectEntry.oldReq !== effectEntry.newReq || effectEntry.oldScore !== effectEntry.newScore,
       };
+    },
+    getEffectDesc(effectEntry) {
+      return GlyphEffects.all.find(e => e.bitmaskIndex === effectEntry.bitmaskIndex && e.isGenerated).genericDesc;
     }
   },
 };
@@ -87,18 +92,21 @@ export default {
         <span
           class="c-rarity"
           :class="topLevelClassObject('rarity')"
+          ach-tooltip="Setting for Rarity Threshold and Specified Effect"
         >
           {{ rarityStr }}
         </span>
         <span
           class="c-effects-count"
           :class="topLevelClassObject('effectCount')"
+          ach-tooltip="Number of effects in Specified Effect"
         >
-          Specified Effects: {{ effectStr }}
+          Minimum Effects: {{ effectStr }}
         </span>
         <span
           class="c-target-score"
           :class="topLevelClassObject('score')"
+          ach-tooltip="Threshold for Effect Score"
         >
           Score: {{ scoreStr }}
         </span>
@@ -110,22 +118,24 @@ export default {
           :key="effect.bitmaskIndex"
           class="c-single-score"
           :class="effectClassObject(effect)"
+          :ach-tooltip="getEffectDesc(effect)"
         >
-          {{ effectBox(effect) }} {{ effectScoreStr(effect) }}
+          {{ effectScoreStr(effect) }}
         </span>
       </span>
-      <br>
       <span
         v-if="effectData.length > 4"
-        class="c-single-row"
+        class="c-single-row c-second-row"
       >
+        <br>
         <span
           v-for="effect in effectData.slice(4)"
           :key="effect.bitmaskIndex"
           class="c-single-score o-cell"
           :class="effectClassObject(effect)"
+          :ach-tooltip="getEffectDesc(effect)"
         >
-          {{ effectBox(effect) }} {{ effectScoreStr(effect) }}
+          {{ effectScoreStr(effect) }}
         </span>
       </span>
     </span>
@@ -140,7 +150,11 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin: -2rem 0 0 3rem;
+  margin: -2.15rem 0 0 3rem;
+}
+
+.c-second-row {
+  margin: 0 0 0 -9rem;
 }
 
 .o-cell {
@@ -152,22 +166,22 @@ export default {
 }
 
 .o-cell--changed {
-  background-color: var(--color-good);
+  background-color: var(--color-accent);
 }
 
 .c-rarity {
-  width: 8rem;
+  width: 10rem;
 }
 
 .c-effects-count {
-  width: 22rem;
+  width: 20rem;
 }
 
 .c-target-score {
-  width: 15rem;
+  width: 18rem;
 }
 
 .c-single-score {
-  width: 10rem;
+  width: 12rem;
 }
 </style>