Skip to content

Commit f6022fb

Browse files
mejo-mejo-
authored
Merge pull request #7186 from nextcloud/backport/7184/stable31
[stable31] chore(SessionList): Migrate to NcButton and MDI icon
2 parents 140f037 + 4de245b commit f6022fb

1 file changed

Lines changed: 190 additions & 197 deletions

File tree

‎src/components/Editor/SessionList.vue‎

Lines changed: 190 additions & 197 deletions
Original file line numberDiff line numberDiff line change
@@ -1,197 +1,190 @@
1-
<!--
2-
- SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
3-
- SPDX-License-Identifier: AGPL-3.0-or-later
4-
-->
5-
6-
<template>
7-
<NcPopover class="session-list" placement="bottom">
8-
<template #trigger="{ attrs }">
9-
<div>
10-
<button :title="label"
11-
:aria-label="label"
12-
class="avatar-list"
13-
v-bind="attrs">
14-
<div class="avatardiv icon-group" />
15-
<AvatarWrapper v-for="session in sessionsVisible"
16-
:key="session.id"
17-
:session="session"
18-
:size="30" />
19-
</button>
20-
</div>
21-
</template>
22-
<template #default>
23-
<div class="session-menu">
24-
<slot name="lastSaved" />
25-
<ul>
26-
<slot />
27-
<li v-for="session in participantsPopover"
28-
:key="session.id"
29-
:style="avatarStyle(session)">
30-
<AvatarWrapper :session="session" :size="36" />
31-
<span class="session-label">
32-
{{
33-
session.userId ? session.displayName : (session.guestName ? session.guestName : t('text', 'Guest'))
34-
}}
35-
</span>
36-
<span v-if="session.userId === null" class="guest-label">({{ t('text', 'guest') }})</span>
37-
</li>
38-
<li>
39-
<NcCheckboxRadioSwitch :checked="isFullWidth" @update:checked="onWidthToggle">
40-
{{ t('text', 'Full width editor') }}
41-
</NcCheckboxRadioSwitch>
42-
</li>
43-
</ul>
44-
</div>
45-
</template>
46-
</NcPopover>
47-
</template>
48-
49-
<script>
50-
import { NcCheckboxRadioSwitch, NcPopover } from '@nextcloud/vue'
51-
import AvatarWrapper from './AvatarWrapper.vue'
52-
import { COLLABORATOR_DISCONNECT_TIME, COLLABORATOR_IDLE_TIME } from '../../services/SyncService.js'
53-
import { loadState } from '@nextcloud/initial-state'
54-
import axios from '@nextcloud/axios'
55-
import { generateUrl } from '@nextcloud/router'
56-
57-
export default {
58-
name: 'SessionList',
59-
components: {
60-
AvatarWrapper,
61-
NcPopover,
62-
NcCheckboxRadioSwitch,
63-
},
64-
props: {
65-
sessions: {
66-
type: Object,
67-
default: () => {
68-
return {}
69-
},
70-
},
71-
},
72-
data() {
73-
const isFullWidth = loadState('text', 'is_full_width_editor', false)
74-
return {
75-
myName: '',
76-
isFullWidth,
77-
}
78-
},
79-
computed: {
80-
label() {
81-
return t('text', 'Active people')
82-
},
83-
participantsPopover() {
84-
if (this.currentSession?.guestName) {
85-
return this.participantsWithoutCurrent
86-
}
87-
return this.participants
88-
},
89-
participantsWithoutCurrent() {
90-
return this.participants.filter((session) => !session.isCurrent)
91-
},
92-
participants() {
93-
return Object.values(this.sessions).filter((session) =>
94-
session.lastContact > Date.now() / 1000 - COLLABORATOR_DISCONNECT_TIME
95-
&& (session.userId !== null || session.guestName !== null),
96-
).sort((a, b) => a.lastContact < b.lastContact)
97-
},
98-
currentSession() {
99-
return Object.values(this.sessions).find((session) => session.isCurrent)
100-
},
101-
avatarStyle() {
102-
return (session) => {
103-
return {
104-
opacity: session.lastContact > Date.now() / 1000 - COLLABORATOR_IDLE_TIME ? 1 : 0.5,
105-
}
106-
}
107-
},
108-
sessionsVisible() {
109-
return this.participantsWithoutCurrent.slice(0, 3)
110-
},
111-
},
112-
methods: {
113-
onWidthToggle(checked) {
114-
this.isFullWidth = checked
115-
this.$emit('editor-width-change', checked ? '100%' : '80ch')
116-
117-
axios.post(generateUrl('/apps/text/settings'), {
118-
key: 'is_full_width_editor',
119-
value: checked ? '1' : '0',
120-
})
121-
},
122-
},
123-
}
124-
</script>
125-
126-
<style scoped lang="scss">
127-
.session-list {
128-
height: var(--default-clickable-area);
129-
}
130-
131-
.avatar-list {
132-
border: none;
133-
background-color: var(--color-main-background);
134-
padding: 0;
135-
margin: 0;
136-
padding-left: 3px;
137-
display: inline-flex;
138-
flex-direction: row-reverse;
139-
140-
.avatar-wrapper {
141-
margin: 0 -12px 0 0;
142-
z-index: 1;
143-
border-radius: 50%;
144-
overflow: hidden;
145-
box-sizing: content-box !important;
146-
height: calc(var(--default-clickable-area) - 4px);
147-
width: calc(var(--default-clickable-area) - 4px);
148-
}
149-
150-
.icon-more, .icon-group, .icon-settings-dark {
151-
width: var(--default-clickable-area);
152-
height: var(--default-clickable-area);
153-
margin: 0 3px 0 0;
154-
155-
&:hover {
156-
background-color: var(--color-background-hover);
157-
}
158-
}
159-
}
160-
161-
.session-menu {
162-
max-width: 280px;
163-
padding-top: 6px;
164-
padding-bottom: 6px;
165-
166-
ul li {
167-
align-items: center;
168-
display: flex;
169-
padding: 6px;
170-
171-
.avatar-wrapper {
172-
height: 36px;
173-
width: 36px;
174-
margin-right: 6px;
175-
}
176-
177-
.session-label {
178-
padding-right: 3px;
179-
}
180-
181-
.guest-label {
182-
padding-left: 3px;
183-
color: var(--color-text-maxcontrast);
184-
}
185-
}
186-
}
187-
188-
label {
189-
display: block;
190-
margin: 8px;
191-
}
192-
193-
.hint {
194-
margin: 8px;
195-
color: var(--color-text-maxcontrast);
196-
}
197-
</style>
1+
<!--
2+
- SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
3+
- SPDX-License-Identifier: AGPL-3.0-or-later
4+
-->
5+
6+
<template>
7+
<NcPopover class="session-list" placement="bottom">
8+
<template #trigger="{ attrs }">
9+
<div>
10+
<NcButton :title="label"
11+
:aria-label="label"
12+
type="tertiary"
13+
class="avatar-list"
14+
v-bind="attrs">
15+
<template #icon>
16+
<AccountMultipleIcon :size="20" />
17+
<AvatarWrapper v-for="session in sessionsVisible"
18+
:key="session.id"
19+
:session="session"
20+
:size="28" />
21+
</template>
22+
</NcButton>
23+
</div>
24+
</template>
25+
<template #default>
26+
<div class="session-menu">
27+
<slot name="lastSaved" />
28+
<ul>
29+
<slot />
30+
<li v-for="session in participantsPopover"
31+
:key="session.id"
32+
:style="avatarStyle(session)">
33+
<AvatarWrapper :session="session" :size="36" />
34+
<span class="session-label">
35+
{{
36+
session.userId ? session.displayName : (session.guestName ? session.guestName : t('text', 'Guest'))
37+
}}
38+
</span>
39+
<span v-if="session.userId === null" class="guest-label">({{ t('text', 'guest') }})</span>
40+
</li>
41+
<li>
42+
<NcCheckboxRadioSwitch :checked="isFullWidth" @update:checked="onWidthToggle">
43+
{{ t('text', 'Full width editor') }}
44+
</NcCheckboxRadioSwitch>
45+
</li>
46+
</ul>
47+
</div>
48+
</template>
49+
</NcPopover>
50+
</template>
51+
52+
<script>
53+
import { NcButton, NcCheckboxRadioSwitch, NcPopover } from '@nextcloud/vue'
54+
import AccountMultipleIcon from 'vue-material-design-icons/AccountMultiple.vue'
55+
import AvatarWrapper from './AvatarWrapper.vue'
56+
import { COLLABORATOR_DISCONNECT_TIME, COLLABORATOR_IDLE_TIME } from '../../services/SyncService.js'
57+
import { loadState } from '@nextcloud/initial-state'
58+
import axios from '@nextcloud/axios'
59+
import { generateUrl } from '@nextcloud/router'
60+
61+
export default {
62+
name: 'SessionList',
63+
components: {
64+
AccountMultipleIcon,
65+
AvatarWrapper,
66+
NcButton,
67+
NcPopover,
68+
NcCheckboxRadioSwitch,
69+
},
70+
props: {
71+
sessions: {
72+
type: Object,
73+
default: () => {
74+
return {}
75+
},
76+
},
77+
},
78+
data() {
79+
const isFullWidth = loadState('text', 'is_full_width_editor', false)
80+
return {
81+
myName: '',
82+
isFullWidth,
83+
}
84+
},
85+
computed: {
86+
label() {
87+
return t('text', 'Active people')
88+
},
89+
participantsPopover() {
90+
if (this.currentSession?.guestName) {
91+
return this.participantsWithoutCurrent
92+
}
93+
return this.participants
94+
},
95+
participantsWithoutCurrent() {
96+
return this.participants.filter((session) => !session.isCurrent)
97+
},
98+
participants() {
99+
return Object.values(this.sessions).filter((session) =>
100+
session.lastContact > Date.now() / 1000 - COLLABORATOR_DISCONNECT_TIME
101+
&& (session.userId !== null || session.guestName !== null),
102+
).sort((a, b) => a.lastContact < b.lastContact)
103+
},
104+
currentSession() {
105+
return Object.values(this.sessions).find((session) => session.isCurrent)
106+
},
107+
avatarStyle() {
108+
return (session) => {
109+
return {
110+
opacity: session.lastContact > Date.now() / 1000 - COLLABORATOR_IDLE_TIME ? 1 : 0.5,
111+
}
112+
}
113+
},
114+
sessionsVisible() {
115+
return this.participantsWithoutCurrent.slice(0, 3)
116+
},
117+
},
118+
methods: {
119+
onWidthToggle(checked) {
120+
this.isFullWidth = checked
121+
this.$emit('editor-width-change', checked ? '100%' : '80ch')
122+
123+
axios.post(generateUrl('/apps/text/settings'), {
124+
key: 'is_full_width_editor',
125+
value: checked ? '1' : '0',
126+
})
127+
},
128+
},
129+
}
130+
</script>
131+
132+
<style scoped lang="scss">
133+
.session-list {
134+
height: var(--default-clickable-area);
135+
}
136+
137+
.avatar-list {
138+
width: min-content !important;
139+
padding-inline: var(--default-grid-baseline);
140+
141+
:deep(.button-vue__icon) {
142+
display: inline-flex;
143+
flex-direction: row-reverse;
144+
width: min-content;
145+
146+
.avatar-wrapper {
147+
margin: 3px -12px 3px 0;
148+
z-index: 1;
149+
overflow: hidden;
150+
}
151+
}
152+
}
153+
154+
.session-menu {
155+
max-width: 280px;
156+
padding-top: 6px;
157+
padding-bottom: 6px;
158+
159+
ul li {
160+
align-items: center;
161+
display: flex;
162+
padding: 6px;
163+
164+
.avatar-wrapper {
165+
height: 36px;
166+
width: 36px;
167+
margin-right: 6px;
168+
}
169+
170+
.session-label {
171+
padding-right: 3px;
172+
}
173+
174+
.guest-label {
175+
padding-left: 3px;
176+
color: var(--color-text-maxcontrast);
177+
}
178+
}
179+
}
180+
181+
label {
182+
display: block;
183+
margin: 8px;
184+
}
185+
186+
.hint {
187+
margin: 8px;
188+
color: var(--color-text-maxcontrast);
189+
}
190+
</style>

0 commit comments

Comments
 (0)