diff options
author | Julius Härtl <jus@bitgrid.net> | 2019-06-21 16:52:42 +0300 |
---|---|---|
committer | Julius Härtl <jus@bitgrid.net> | 2019-06-21 16:52:42 +0300 |
commit | f1318e792486df2e30a91efcbf26efb0919c5440 (patch) | |
tree | a5edcf17fbe8d63dc0424ba8ea2991ca9c29f52c /src/components/SessionList.vue | |
parent | 77bce145fecdfc4156762a13beaab50509eb17f8 (diff) |
Add tooltip to editor list
Signed-off-by: Julius Härtl <jus@bitgrid.net>
Diffstat (limited to 'src/components/SessionList.vue')
-rw-r--r-- | src/components/SessionList.vue | 15 |
1 files changed, 14 insertions, 1 deletions
diff --git a/src/components/SessionList.vue b/src/components/SessionList.vue index 84995d96f..204919415 100644 --- a/src/components/SessionList.vue +++ b/src/components/SessionList.vue @@ -22,7 +22,7 @@ <template> <div class="session-list"> - <div class="avatar-list" @click="popoverVisible=!popoverVisible"> + <div v-tooltip.left="editorsTooltip" class="avatar-list" @click="popoverVisible=!popoverVisible"> <div v-if="sessionsPopover.length > 0" class="avatardiv icon-more" /> <avatar v-for="session in sessionsVisible" :key="session.id" :url="avatarUrl(session)" :disable-tooltip="true" :style="sessionStyle(session)" @@ -35,6 +35,7 @@ <script> import Avatar from 'nextcloud-vue/dist/Components/Avatar' import PopoverMenu from 'nextcloud-vue/dist/Components/PopoverMenu' +import Tooltip from 'nextcloud-vue/dist/Directives/Tooltip' const COLLABORATOR_IDLE_TIME = 10 const COLLABORATOR_DISCONNECT_TIME = 30 @@ -45,6 +46,9 @@ export default { Avatar, PopoverMenu }, + directives: { + tooltip: Tooltip + }, props: { sessions: { type: Object, @@ -58,6 +62,14 @@ export default { } }, computed: { + editorsTooltip() { + if (this.sessionsPopover.length > 0) { + let first = this.activeSessions.slice(0, 3).map((session) => session.guestName ? session.guestName : session.displayName).join(', ') + let others = this.activeSessions.slice(3).length + return first + ' ' + n('text', 'and %n other editor', 'and %n other editors', others) + } + return this.activeSessions.slice(0, 3).map((session) => session.guestName ? session.guestName : session.displayName).join(', ') + }, avatarUrl() { return (session) => { const user = !session.guestName ? session.userId : session.guestName @@ -137,6 +149,7 @@ export default { height: 32px; opacity: .5; background-color: var(--color-background-dark) !important; + cursor: pointer; } } } |