From e5e87039247f19fcdc5acb9dd443b628e4c5b8aa Mon Sep 17 00:00:00 2001
From: Mythic <mythic@thunderstore.io>
Date: Thu, 25 Jan 2024 07:45:32 +0200
Subject: [PATCH] Fix mass-uninstall/disable status feedback

The uninstall/disable progress status indicator is overflowing outside
of the modal and mostly not visible. This commit moves it to the modal
body in such a way that it's always visible when intended.
---
 .../views/LocalModList/DisableModModal.vue    | 44 +++++++++----------
 .../views/LocalModList/UninstallModModal.vue  | 44 +++++++++----------
 src/css/custom.scss                           | 14 ++++++
 src/css/scheme/light.scss                     |  1 +
 4 files changed, 59 insertions(+), 44 deletions(-)

diff --git a/src/components/views/LocalModList/DisableModModal.vue b/src/components/views/LocalModList/DisableModModal.vue
index d6b6ccb83..ff0fe7bc9 100644
--- a/src/components/views/LocalModList/DisableModModal.vue
+++ b/src/components/views/LocalModList/DisableModModal.vue
@@ -37,27 +37,30 @@ export default class DisableModModal extends Vue {
 <template>
     <ModalCard :is-active="true" :can-close="!isLocked" @close-modal="onClose">
         <template v-slot:header>
-            <p class='card-header-title'>Disabling
-                {{mod.getName()}}
-            </p>
+            <p class="modal-card-title">Disabling {{mod.getName()}}</p>
         </template>
         <template v-slot:body>
-            <div class='notification is-warning'>
-                <p>
-                    Other mods depend on this mod. Select <strong>Disable all</strong>
-                    to disable dependent mods, otherwise they may cause errors.
-                </p>
-            </div>
-            <p>Mods to be disabled:</p>
-            <br/>
-            <div>
-                <ul class="list">
-                    <li class="list-item">{{mod.getName()}}</li>
-                    <li class="list-item" v-for='(key, index) in dependantsList'
-                        :key='`dependant-${index}`'>
-                        {{key.getName()}}
-                    </li>
-                </ul>
+            <div class="max-height-100 is-flex is-flex-direction-column">
+                <div class='notification is-warning'>
+                    <p>
+                        Other mods depend on this mod. Select <strong>Disable all</strong>
+                        to disable dependent mods, otherwise they may cause errors.
+                    </p>
+                </div>
+                <h3 class="subtitle mb-3">Mods to be disabled</h3>
+                <div class="is-flex-shrink-1 overflow-auto code-snippet">
+                    <ul class="list">
+                        <li class="list-item">{{mod.getName()}}</li>
+                        <li class="list-item" v-for='(key, index) in dependantsList'
+                            :key='`dependant-${index}`'>
+                            {{key.getName()}}
+                        </li>
+                    </ul>
+                </div>
+                <div v-if="isLocked" class="mt-3">
+                    <h3 class="subtitle mb-3">Disabling {{modBeingDisabled}}</h3>
+                    <progress class="progress is-small is-info"/>
+                </div>
             </div>
         </template>
         <template v-slot:footer>
@@ -71,9 +74,6 @@ export default class DisableModModal extends Vue {
                     @click="onDisableExcludeDependents(mod)">
                 Disable {{mod.getName()}} only
             </button>
-            <span v-if="modBeingDisabled" class="tag is-warning margin-top--1rem margin-left">
-                Disabling {{ modBeingDisabled }}
-            </span>
         </template>
     </ModalCard>
 </template>
diff --git a/src/components/views/LocalModList/UninstallModModal.vue b/src/components/views/LocalModList/UninstallModModal.vue
index 0a16c21c7..658b68122 100644
--- a/src/components/views/LocalModList/UninstallModModal.vue
+++ b/src/components/views/LocalModList/UninstallModModal.vue
@@ -37,27 +37,30 @@ export default class UninstallModModal extends Vue {
 <template>
     <ModalCard :is-active="true" :can-close="!isLocked" @close-modal="onClose">
         <template v-slot:header>
-            <p class='card-header-title'>
-                Uninstalling {{mod.getName()}}
-            </p>
+            <p class='modal-card-title'>Uninstalling {{mod.getName()}}</p>
         </template>
         <template v-slot:body>
-            <div class='notification is-warning'>
-                <p>
-                    Other mods depend on this mod. Select <strong>Uninstall all</strong>
-                    to uninstall dependent mods, otherwise they may cause errors.
-                </p>
-            </div>
-            <p>Mods to be uninstalled:</p>
-            <br/>
-            <div>
-                <ul class="list">
-                    <li class="list-item">{{mod.getName()}}</li>
-                    <li class="list-item" v-for='(key, index) in dependantsList'
-                        :key='`dependant-${index}`'>
-                        {{key.getName()}}
-                    </li>
-                </ul>
+            <div class="max-height-100 is-flex is-flex-direction-column">
+                <div class='notification is-warning'>
+                    <p>
+                        Other mods depend on this mod. Select <strong>Uninstall all</strong>
+                        to uninstall dependent mods, otherwise they may cause errors.
+                    </p>
+                </div>
+                <h3 class="subtitle mb-3">Mods to be uninstalled</h3>
+                <div class="is-flex-shrink-1 overflow-auto code-snippet">
+                    <ul class="list">
+                        <li class="list-item">{{mod.getName()}}</li>
+                        <li class="list-item" v-for='(key, index) in dependantsList'
+                            :key='`dependant-${index}`'>
+                            {{key.getName()}}
+                        </li>
+                    </ul>
+                </div>
+                <div v-if="isLocked" class="mt-3">
+                    <h3 class="subtitle mb-3">Uninstalling {{modBeingUninstalled}}</h3>
+                    <progress class="progress is-small is-info"/>
+                </div>
             </div>
         </template>
         <template v-slot:footer>
@@ -71,9 +74,6 @@ export default class UninstallModModal extends Vue {
                     @click="onUninstallExcludeDependents(mod)">
                 Uninstall {{mod.getName()}} only
             </button>
-            <span v-if="modBeingUninstalled" class="tag is-warning margin-top--1rem margin-left">
-                Uninstalling {{ modBeingUninstalled }}
-            </span>
         </template>
     </ModalCard>
 </template>
diff --git a/src/css/custom.scss b/src/css/custom.scss
index 56f9b7022..57056666b 100644
--- a/src/css/custom.scss
+++ b/src/css/custom.scss
@@ -467,3 +467,17 @@ code {
     height: 40px;
     align-items: center;
 }
+
+.max-height-100 {
+    max-height: 100%;
+}
+
+.overflow-auto {
+    overflow: auto;
+}
+
+.code-snippet {
+    padding: 4px 4px 4px 8px;
+    border-radius: 8px;
+    background-color: rgba(0, 0, 0, 0.15);
+}
diff --git a/src/css/scheme/light.scss b/src/css/scheme/light.scss
index 6fac2e2bb..32f4e0d1c 100644
--- a/src/css/scheme/light.scss
+++ b/src/css/scheme/light.scss
@@ -52,6 +52,7 @@ $modal-card-body-background-color: var(--modal-card-body-background-color, $sche
 $modal-card-head-background-color: var(--modal-card-head-background-color, $scheme-background);
 $modal-card-head-border-bottom: 1px solid var(--modal-card-head-border-bottom, $scheme-border);
 $modal-card-foot-border-top: 1px solid var(--modal-card-foot-border-top, $scheme-border);
+$modal-card-title-color: var(--modal-card-title-color, $scheme-text);
 
 $menu-item-color: var(--menu-item-color, $scheme-text);
 $menu-item-hover-background-color: var(--menu-item-hover-background-color, #f5f5f5);