mirror of
https://github.com/nextcloud/server.git
synced 2026-05-28 04:32:30 -04:00
fix(core): bring back Account menu loading indicator
Signed-off-by: skjnldsv <skjnldsv@protonmail.com>
This commit is contained in:
parent
c4f071a577
commit
506afad862
1 changed files with 20 additions and 11 deletions
|
|
@ -11,28 +11,30 @@
|
|||
compact
|
||||
:href="href"
|
||||
:name="name"
|
||||
target="_self">
|
||||
target="_self"
|
||||
@click="onClick">
|
||||
<template #icon>
|
||||
<img class="account-menu-entry__icon"
|
||||
<NcLoadingIcon v-if="loading" :size="20" class="account-menu-entry__loading" />
|
||||
<slot v-else-if="$scopedSlots.icon" name="icon" />
|
||||
<img v-else
|
||||
class="account-menu-entry__icon"
|
||||
:class="{ 'account-menu-entry__icon--active': active }"
|
||||
:src="iconSource"
|
||||
alt="">
|
||||
</template>
|
||||
<template v-if="loading" #indicator>
|
||||
<NcLoadingIcon />
|
||||
</template>
|
||||
</NcListItem>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { loadState } from '@nextcloud/initial-state'
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
import NcListItem from '@nextcloud/vue/components/NcListItem'
|
||||
import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
|
||||
|
||||
const versionHash = loadState('core', 'versionHash', '')
|
||||
|
||||
export default {
|
||||
export default defineComponent({
|
||||
name: 'AccountMenuEntry',
|
||||
|
||||
components: {
|
||||
|
|
@ -55,11 +57,11 @@ export default {
|
|||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
default: false,
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
|
||||
|
|
@ -76,11 +78,12 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
handleClick() {
|
||||
onClick(e) {
|
||||
this.loading = true
|
||||
this.$emit('click', e)
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -96,6 +99,12 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
&__loading {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin: calc((var(--default-clickable-area) - 20px) / 2); // 20px icon size
|
||||
}
|
||||
|
||||
:deep(.list-item-content__main) {
|
||||
width: fit-content;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue