add better indication that stuff is happening

This commit is contained in:
Henry Jameson 2023-11-01 21:53:50 +02:00
parent c99390e864
commit b6a4b62058
3 changed files with 29 additions and 1 deletions

View File

@ -4,6 +4,7 @@ import IntegerSetting from '../helpers/integer_setting.vue'
import StringSetting from '../helpers/string_setting.vue'
import GroupSetting from '../helpers/group_setting.vue'
import Popover from 'src/components/popover/popover.vue'
import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
import SharedComputedObject from '../helpers/shared_computed_object.js'
import { library } from '@fortawesome/fontawesome-svg-core'
@ -22,12 +23,18 @@ const FrontendsTab = {
defaultSource: 'admin'
}
},
data () {
return {
working: false
}
},
components: {
BooleanSetting,
ChoiceSetting,
IntegerSetting,
StringSetting,
GroupSetting,
PanelLoading,
Popover
},
created () {
@ -60,7 +67,11 @@ const FrontendsTab = {
const { name } = frontend
const payload = { name, ref }
this.working = true
this.$store.state.api.backendInteractor.installFrontend({ payload })
.finally(() => {
this.working = false
})
.then(async (response) => {
this.$store.dispatch('loadFrontendsStuff')
if (response.error) {

View File

@ -3,6 +3,22 @@
padding: 0;
}
.relative {
position: relative;
}
.overlay {
position: absolute;
background: var(--bg);
// fix buttons showing through
z-index: 2;
opacity: 0.9;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
dd {
text-overflow: ellipsis;
word-wrap: nowrap;

View File

@ -24,7 +24,8 @@
</ul>
</li>
</ul>
<div class="setting-list">
<div class="setting-list relative">
<PanelLoading class="overlay" v-if="working"/>
<h3>{{ $t('admin_dash.frontend.available_frontends') }}</h3>
<ul class="cards-list">
<li