Merge pull request #1182 from thunderstore-io/mod-modals-status

Fix mod disable/uninstall status indicator
ebkr · Jan 25, 2024 · a98ddc8 · a98ddc8
2 parents 66ac202 + e5e8703
commit a98ddc8
Show file tree

Hide file tree

Showing 9 changed files with 144 additions and 64 deletions.
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
@@ -24,6 +24,10 @@ import { Component, Prop, Watch } from 'vue-property-decorator';
 
 @Component
 export default class Modal extends Vue {
+    /*
+    Prefer using the ModalCard component for future modals as it uses
+    the correct bulma classes for modal cards, which this one does not!
+     */
 
     @Prop({default: false, type: Boolean})
     open!: boolean;

diff --git a/src/components/ModalCard.vue b/src/components/ModalCard.vue
@@ -0,0 +1,43 @@
+<template>
+    <div :class="['modal', {'is-active': isActive}]">
+        <div class="modal-background" @click="closeModal()"/>
+        <div class="modal-card py-4">
+            <header class="modal-card-head">
+                <slot name="header"/>
+            </header>
+            <section class="modal-card-body">
+                <slot name="body"/>
+            </section>
+            <footer class="modal-card-foot">
+                <slot name="footer"/>
+            </footer>
+        </div>
+        <button v-if="canClose" class="modal-close is-large" aria-label="close" @click="closeModal()"/>
+    </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { Component, Prop } from 'vue-property-decorator';
+
+@Component
+export default class ModalCard extends Vue {
+
+    @Prop({default: false, type: Boolean})
+    isActive!: boolean;
+
+    @Prop({default: true, type: Boolean})
+    canClose!: boolean;
+
+    closeModal() {
+        if (this.canClose) {
+            this.$emit('close-modal');
+        }
+    }
+}
+</script>
+
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/components/all.ts b/src/components/all.ts
@@ -2,12 +2,14 @@ import Hero from './Hero.vue';
 import Progress from './Progress.vue';
 import ExpandableCard from './ExpandableCard.vue';
 import Modal from './Modal.vue';
+import ModalCard from './ModalCard.vue';
 import Link from './Link.vue';
 
 export {
     Hero,
     Progress,
     Link,
     ExpandableCard,
-    Modal
+    Modal,
+    ModalCard,
 }
diff --git a/src/components/views/LocalModList.vue b/src/components/views/LocalModList.vue
@@ -418,9 +418,10 @@ import UninstallModModal from './LocalModList/UninstallModModal.vue';
                 const err: Error = e as Error;
                 this.$emit("error", err);
                 LoggerProvider.instance.Log(LogSeverity.ACTION_STOPPED, `${err.name}\n-> ${err.message}`);
+            } finally {
+                this.selectedManifestMod = null;
+                this.modBeingDisabled = null;
             }
-            this.selectedManifestMod = null;
-            this.modBeingDisabled = null;
         }
 
         async performDisable(mods: ManifestV2[]): Promise<R2Error | void> {

diff --git a/src/components/views/LocalModList/AssociatedModsModal.vue b/src/components/views/LocalModList/AssociatedModsModal.vue
@@ -1,10 +1,10 @@
 <script lang="ts">
 import { Vue, Component, Prop } from 'vue-property-decorator';
-import { Modal } from '../../all';
+import { ModalCard } from '../../all';
 import ManifestV2 from '../../../model/ManifestV2';
 
 @Component({
-    components: {Modal}
+    components: {ModalCard}
 })
 export default class AssociatedModsModal extends Vue {
 
@@ -22,8 +22,8 @@ export default class AssociatedModsModal extends Vue {
 }
 </script>
 <template>
-    <Modal :open="true" @close-modal="onClose">
-        <template v-slot:title>
+    <ModalCard :is-active="true" @close-modal="onClose">
+        <template v-slot:header>
             <p class='card-header-title'>
                 Mods associated with {{mod.getName()}}
             </p>
@@ -54,7 +54,7 @@ export default class AssociatedModsModal extends Vue {
                 Done
             </button>
         </template>
-    </Modal>
+    </ModalCard>
 </template>
 
 <style scoped lang="scss">

diff --git a/src/components/views/LocalModList/DisableModModal.vue b/src/components/views/LocalModList/DisableModModal.vue
@@ -1,10 +1,10 @@
 <script lang="ts">
 import { Vue, Component, Prop } from 'vue-property-decorator';
-import { Modal } from '../../all';
+import { ModalCard } from '../../all';
 import ManifestV2 from '../../../model/ManifestV2';
 
 @Component({
-    components: {Modal}
+    components: {ModalCard}
 })
 export default class DisableModModal extends Vue {
 
@@ -28,48 +28,54 @@ export default class DisableModModal extends Vue {
 
     @Prop({required: true, type: Function})
     readonly onDisableExcludeDependents!: (mod: ManifestV2) => void;
+
+    get isLocked(): boolean {
+        return this.modBeingDisabled !== null;
+    }
 }
 </script>
 <template>
-    <Modal :open="true" @close-modal="onClose">
-        <template v-slot:title>
-            <p class='card-header-title'>Disabling
-                {{mod.getName()}}
-            </p>
+    <ModalCard :is-active="true" :can-close="!isLocked" @close-modal="onClose">
+        <template v-slot:header>
+            <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>
             <button class="button is-info"
+                    :disabled="isLocked"
                     @click="onDisableIncludeDependents(mod)">
                 Disable all (recommended)
             </button>
             <button class="button"
+                    :disabled="isLocked"
                     @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>
-    </Modal>
+    </ModalCard>
 </template>
 
 <style scoped lang="scss">

diff --git a/src/components/views/LocalModList/UninstallModModal.vue b/src/components/views/LocalModList/UninstallModModal.vue
@@ -1,10 +1,10 @@
 <script lang="ts">
 import { Vue, Component, Prop } from 'vue-property-decorator';
-import { Modal } from '../../all';
+import { ModalCard } from '../../all';
 import ManifestV2 from '../../../model/ManifestV2';
 
 @Component({
-    components: {Modal}
+    components: {ModalCard}
 })
 export default class UninstallModModal extends Vue {
 
@@ -28,50 +28,54 @@ export default class UninstallModModal extends Vue {
 
     @Prop({required: true, type: Function})
     readonly onUninstallExcludeDependents!: (mod: ManifestV2) => void;
+
+    get isLocked(): boolean {
+        return this.modBeingUninstalled !== null;
+    }
 }
 </script>
 <template>
-    <Modal :open="true" @close-modal="onClose">
-        <template v-slot:title>
-            <p class='card-header-title'>
-                Uninstalling {{mod.getName()}}
-            </p>
+    <ModalCard :is-active="true" :can-close="!isLocked" @close-modal="onClose">
+        <template v-slot:header>
+            <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>
             <button class="button is-info"
-                    :disabled="modBeingUninstalled !== null"
+                    :disabled="isLocked"
                     @click="onUninstallIncludeDependents(mod)">
                 Uninstall all (recommended)
             </button>
             <button class="button"
-                    :disabled="modBeingUninstalled !== null"
+                    :disabled="isLocked"
                     @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>
-    </Modal>
+    </ModalCard>
 </template>
 
 <style scoped lang="scss">

diff --git 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
@@ -48,6 +48,12 @@ $card-header-color: var(--card-header-color, $scheme-text-strong);
 $card-color: var(--card-color, $scheme-text);
 $card-footer-border-top: 1px solid var(--card-footer-border-top, $scheme-border);
 
+$modal-card-body-background-color: var(--modal-card-body-background-color, $scheme-background);
+$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);
 $menu-item-hover-color: var(--menu-item-hover-color, $scheme-text-strong);