ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

session list: minor visual improvements

Browse Source 
Signed-off-by: chandi Langecker <git@chandi.it>
This commit is contained in:
chandi Langecker
2022-09-26 23:25:32 +02:00
parent 6684730dd7
commit c82a5a1228
2 changed files with 27 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Controls.vue
View File

@@ -40,8 +40,8 @@
</p> </p>
</div> </div>
<div class="board-actions"> <div class="board-actions">
<SessionList v-if="isNotifyPushEnabled && board && board.activeSessions" <SessionList v-if="isNotifyPushEnabled && presentUsers.length"
:sessions="board.activeSessions" /> :sessions="presentUsers" />
<div v-if="searchQuery || true" class="deck-search"> <div v-if="searchQuery || true" class="deck-search">
<input type="search" <input type="search"
class="icon-search" class="icon-search"
@@ -292,6 +292,11 @@ export default {
labelsSorted() { labelsSorted() {
return [...this.board.labels].sort((a, b) => (a.title < b.title) ? -1 : 1) return [...this.board.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
}, },
presentUsers() {
if (!this.board) return []
// get user object including displayname from the list of all users with acces
return this.board.users.filter((user) => this.board.activeSessions.includes(user.uid))
},
}, },
watch: { watch: {
board(current, previous) { board(current, previous) {

41
src/components/SessionList.vue
View File

@@ -20,31 +20,30 @@
* --> * -->
<template> <template>
<div class="session-list"> <div v-tooltip.bottom="t('text', 'Currently present people')"
<button slot="trigger" class="avatar-list">
v-tooltip.bottom="t('text', 'Active people')" <div v-for="session in sessionsVisible"
class="avatar-list"> :key="session.uid"
<div v-for="session in sessionsVisible" class="avatar-wrapper"
:key="session" :style="sessionAvatarStyle">
class="avatar-wrapper" <NcAvatar :user="session.uid"
:style="sessionAvatarStyle"> :display-name="session.displayname"
<Avatar :user="session" :disable-menu="true"
:disable-menu="true" :show-user-status="false"
:show-user-status="false" :disable-tooltip="true"
:disable-tooltip="true" :size="size" />
:size="size" /> </div>
</div>
</button>
</div> </div>
</template> </template>
<script> <script>
import { Avatar, Tooltip } from '@nextcloud/vue' import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
export default { export default {
name: 'SessionList', name: 'SessionList',
components: { components: {
Avatar, NcAvatar,
}, },
directives: { directives: {
tooltip: Tooltip, tooltip: Tooltip,
@@ -75,14 +74,14 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.session-list {
.avatar-list {
min-height: 44px;
align-items: center;
padding-left: 0.5em; padding-left: 0.5em;
padding-right: 0.5em; padding-right: 0.5em;
}
.avatar-list {
border: none; border: none;
background-color: var(--color-main-background); background-color: var(--color-main-background);
padding: 0;
margin: 0; margin: 0;
padding-left: 6px; padding-left: 6px;
display: inline-flex; display: inline-flex;