Browse Source

fix(core): bring back Account menu loading indicator

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>
pull/52537/head
skjnldsv 7 months ago
parent
commit
506afad862
  1. 31
      core/src/components/AccountMenu/AccountMenuEntry.vue

31
core/src/components/AccountMenu/AccountMenuEntry.vue

@ -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…
Cancel
Save