|
|
|
@ -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; |
|
|
|
} |
|
|
|
|