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

View File

@ -3,6 +3,22 @@
padding: 0; 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 { dd {
text-overflow: ellipsis; text-overflow: ellipsis;
word-wrap: nowrap; word-wrap: nowrap;

View File

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