Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use NcActions component for NcAvatar #4017

Merged
merged 1 commit into from May 10, 2023
Merged

Use NcActions component for NcAvatar #4017

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
14 changes: 12 additions & 2 deletions src/components/NcActions/NcActions.vue
View file
Open in desktop
Expand Up @@ -603,6 +603,17 @@ export default {
default: false,
},

/**
* This disables the internal open management,
* so the actions menu only respects the `open` prop.
* This is e.g. necessary for the NcAvatar component
* to only open the actions menu after loading it's entries has finished.
*/
manualOpen: {
type: Boolean,
default: false,
},

/**
* Force the actions to display in a three dot menu
*/
Expand Down Expand Up @@ -717,7 +728,6 @@ export default {
},

emits: [
'update:open',
'open',
'update:open',
'close',
Expand Down Expand Up @@ -809,7 +819,6 @@ export default {
this.$emit('close')

// close everything
this.opened = false
this.focusIndex = 0

// focus back the menu button
Expand Down Expand Up @@ -1074,6 +1083,7 @@ export default {
placement: this.placement,
boundary: this.boundariesElement,
container: this.container,
...this.manualOpen && { triggers: [] },
popoverBaseClass: 'action-item__popper',
},
on: {
Expand Down
93 changes: 50 additions & 43 deletions src/components/NcAvatar/NcAvatar.vue
View file
Open in desktop
Expand Up @@ -112,15 +112,16 @@ export default {
v-click-outside="closeMenu"
:class="{
'avatardiv--unknown': userDoesNotExist,
'avatardiv--with-menu': hasMenu
'avatardiv--with-menu': hasMenu,
'avatardiv--with-menu-loading': contactsMenuLoading
}"
:title="tooltip"
:style="avatarStyle"
class="avatardiv popovermenu-wrapper"
:tabindex="hasMenu ? '0' : undefined"
:aria-label="avatarAriaLabel"
:role="hasMenu ? 'button' : undefined"
v-on="hasMenu ? { click: toggleMenu } : {}"
@click="toggleMenu"
@keydown.enter="toggleMenu">
<!-- @slot Icon slot -->
<slot name="icon">
Expand All @@ -133,20 +134,32 @@ export default {
</slot>

<!-- Contact menu -->
<NcPopover v-if="hasMenu"
placement="auto"
:container="menuContainer"
:shown="contactsMenuOpenState"
@after-show="handlePopoverAfterShow"
@after-hide="handlePopoverAfterHide">
<NcPopoverMenu ref="popoverMenu" :menu="menu" />
<template #trigger>
<!-- We show a button if the menu is not loaded yet. -->
<NcButton v-if="hasMenu && menu.length==0"
raimund-schluessler marked this conversation as resolved.
Show resolved Hide resolved
:aria-label="t('Open contact menu')"
type="tertiary-no-background"
class="action-item action-item__menutoggle">
<template #icon>
<NcLoadingIcon v-if="contactsMenuLoading" />
<DotsHorizontal v-else
:size="20"
class="icon-more" />
<DotsHorizontal v-else :size="20" />
</template>
</NcButton>
<NcActions v-else-if="hasMenu"
force-menu
manual-open
type="tertiary-no-background"
:container="menuContainer"
:open="contactsMenuOpenState">
<NcActionLink v-for="(item, key) in menu"
:key="key"
:href="item.href"
:icon="item.icon">
{{ item.text }}
</NcActionLink>
<template v-if="contactsMenuLoading" #icon>
<NcLoadingIcon />
</template>
</NcPopover>
</NcActions>

<!-- Avatar status -->
<div v-if="showUserStatusIconOnAvatar" class="avatardiv__user-status avatardiv__user-status--icon">
Expand All @@ -168,8 +181,9 @@ export default {
</template>

<script>
import NcPopover from '../NcPopover/index.js'
import NcPopoverMenu from '../NcPopoverMenu/index.js'
import NcActions from '../NcActions/index.js'
import NcActionLink from '../NcActionLink/index.js'
import NcButton from '../NcButton/index.js'
import NcLoadingIcon from '../NcLoadingIcon/index.js'
import usernameToColor from '../../functions/usernameToColor/index.js'
import { userStatus } from '../../mixins/index.js'
Expand Down Expand Up @@ -215,9 +229,10 @@ export default {
},
components: {
DotsHorizontal,
NcActions,
NcActionLink,
NcButton,
NcLoadingIcon,
NcPopover,
NcPopoverMenu,
},
mixins: [userStatus],
props: {
Expand Down Expand Up @@ -333,15 +348,6 @@ export default {
default: false,
},

/**
* Choose the avatar menu alignment.
* Possible values are `left`, `center`, `right`.
*/
menuPosition: {
type: String,
default: 'center',
},

/**
* Selector for the popover menu container
*/
Expand Down Expand Up @@ -467,7 +473,7 @@ export default {
return {
href: item.hyperlink,
icon: item.icon,
longtext: item.title,
text: item.title,
}
})

Expand Down Expand Up @@ -531,16 +537,7 @@ export default {
},

methods: {
handlePopoverAfterShow() {
const links = this.$refs.popoverMenu.$el.getElementsByTagName('a')
if (links.length) {
links[0].focus()
}
},
handlePopoverAfterHide() {
// bring focus back to the trigger
this.$refs.main.focus()
},
t,
handleUserStatusUpdated(state) {
if (this.user === state.userId) {
this.userStatus = {
Expand Down Expand Up @@ -710,28 +707,38 @@ export default {

&--with-menu {
cursor: pointer;
:deep(.v-popper) {
.action-item {
position: absolute;
top: 0;
left: 0;
}
.icon-more {
:deep(.action-item__menutoggle) {
cursor: pointer;
opacity: 0;
}
&:focus,
&:hover {
.icon-more {
&:hover,
&#{&}-loading {
raimund-schluessler marked this conversation as resolved.
Show resolved Hide resolved
raimund-schluessler marked this conversation as resolved.
Show resolved Hide resolved
:deep(.action-item__menutoggle) {
opacity: 1;
}
img {
opacity: 0.3;
}
}
.icon-more,
:deep(.action-item__menutoggle),
img {
transition: opacity var(--animation-quick);
}
:deep() {
.button-vue,
.button-vue__icon {
height: var(--size);
min-height: var(--size);
width: var(--size) !important;
min-width: var(--size);
}
}
Comment on lines +733 to +741
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add a size/small prop to NcButtoninstead of deep internal classes overrides?

}

.avatardiv__initials-wrapper {
Expand Down