Skip to content

Commit

Permalink
Fix mass-uninstall/disable status feedback
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@MythicManiac
MythicManiac committed Jan 25, 2024
1 parent bb7c2af commit e5e8703
Show file tree
Hide file tree
Showing 4 changed files with 59 additions and 44 deletions.
44 changes: 22 additions & 22 deletions src/components/views/LocalModList/DisableModModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
44 changes: 22 additions & 22 deletions src/components/views/LocalModList/UninstallModModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
14 changes: 14 additions & 0 deletions src/css/custom.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
1 change: 1 addition & 0 deletions src/css/scheme/light.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down

0 comments on commit e5e8703

Please sign in to comment.