Skip to content

Commit 57ac9b6

Browse files
nickvergessennickvergessen
authored
Merge pull request #14242 from nextcloud/feat/12036/team-mentions-frontend
fix(team): support team mentions on frontend
2 parents 1d4e4e4 + 97d8cdb commit 57ac9b6

6 files changed

Lines changed: 42 additions & 4 deletions

File tree

‎css/icons.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,12 +106,15 @@
106106
* "forced-white" needs to be included in the class name as the Avatar does
107107
* not accept several classes. */
108108
.user-bubble__avatar .icon-group-forced-white.avatar-class-icon,
109+
.user-bubble__avatar .icon-team-forced-white.avatar-class-icon,
109110
.user-bubble__avatar .icon-user-forced-white.avatar-class-icon,
110111
.user-bubble__avatar .icon-mail-forced-white.avatar-class-icon,
111112
.autocomplete-result .icon-group-forced-white.autocomplete-result__icon--,
113+
.autocomplete-result .icon-team-forced-white.autocomplete-result__icon--,
112114
.autocomplete-result .icon-user-forced-white.autocomplete-result__icon--,
113115
.autocomplete-result .icon-mail-forced-white.autocomplete-result__icon--,
114116
.mention-bubble .icon-group-forced-white.mention-bubble__icon--,
117+
.mention-bubble .icon-team-forced-white.mention-bubble__icon--,
115118
.mention-bubble .icon-user-forced-white.mention-bubble__icon--,
116119
.mention-bubble .icon-mail-forced-white.mention-bubble__icon-- {
117120
background-color: #6B6B6B;
@@ -120,12 +123,15 @@
120123
/* System default: dark theme */
121124
@media (prefers-color-scheme: dark) {
122125
body[data-theme-default] .user-bubble__avatar .icon-group-forced-white.avatar-class-icon,
126+
body[data-theme-default] .user-bubble__avatar .icon-team-forced-white.avatar-class-icon,
123127
body[data-theme-default] .user-bubble__avatar .icon-user-forced-white.avatar-class-icon,
124128
body[data-theme-default] .user-bubble__avatar .icon-mail-forced-white.avatar-class-icon,
125129
body[data-theme-default] .autocomplete-result .icon-group-forced-white.autocomplete-result__icon--,
130+
body[data-theme-default] .autocomplete-result .icon-team-forced-white.autocomplete-result__icon--,
126131
body[data-theme-default] .autocomplete-result .icon-user-forced-white.autocomplete-result__icon--,
127132
body[data-theme-default] .autocomplete-result .icon-mail-forced-white.autocomplete-result__icon--,
128133
body[data-theme-default] .mention-bubble .icon-group-forced-white.mention-bubble__icon--,
134+
body[data-theme-default] .mention-bubble .icon-team-forced-white.mention-bubble__icon--,
129135
body[data-theme-default] .mention-bubble .icon-user-forced-white.mention-bubble__icon--,
130136
body[data-theme-default] .mention-bubble .icon-mail-forced-white.mention-bubble__icon-- {
131137
background-color: #3B3B3B;
@@ -134,12 +140,15 @@
134140

135141
/* Manually set dark theme */
136142
body[data-theme-dark] .user-bubble__avatar .icon-group-forced-white.avatar-class-icon,
143+
body[data-theme-dark] .user-bubble__avatar .icon-team-forced-white.avatar-class-icon,
137144
body[data-theme-dark] .user-bubble__avatar .icon-user-forced-white.avatar-class-icon,
138145
body[data-theme-dark] .user-bubble__avatar .icon-mail-forced-white.avatar-class-icon,
139146
body[data-theme-dark] .autocomplete-result .icon-group-forced-white.autocomplete-result__icon--,
147+
body[data-theme-dark] .autocomplete-result .icon-team-forced-white.autocomplete-result__icon--,
140148
body[data-theme-dark] .autocomplete-result .icon-user-forced-white.autocomplete-result__icon--,
141149
body[data-theme-dark] .autocomplete-result .icon-mail-forced-white.autocomplete-result__icon--,
142150
body[data-theme-dark] .mention-bubble .icon-group-forced-white.mention-bubble__icon--,
151+
body[data-theme-dark] .mention-bubble .icon-team-forced-white.mention-bubble__icon--,
143152
body[data-theme-dark] .mention-bubble .icon-user-forced-white.mention-bubble__icon--,
144153
body[data-theme-dark] .mention-bubble .icon-mail-forced-white.mention-bubble__icon-- {
145154
background-color: #3B3B3B;
@@ -151,15 +160,18 @@ body[dir="rtl"] .bidirectional-icon {
151160
}
152161

153162
.user-bubble__avatar .icon-group-forced-white.avatar-class-icon,
163+
.user-bubble__avatar .icon-team-forced-white.avatar-class-icon,
154164
.user-bubble__avatar .icon-user-forced-white.avatar-class-icon,
155165
.user-bubble__avatar .icon-mail-forced-white.avatar-class-icon,
156166
.mention-bubble .icon-group-forced-white.mention-bubble__icon--,
167+
.mention-bubble .icon-team-forced-white.mention-bubble__icon--,
157168
.mention-bubble .icon-user-forced-white.mention-bubble__icon--,
158169
.mention-bubble .icon-mail-forced-white.mention-bubble__icon-- {
159170
background-size: 75%;
160171
}
161172

162173
.autocomplete-result .icon-group-forced-white.autocomplete-result__icon--,
174+
.autocomplete-result .icon-team-forced-white.autocomplete-result__icon--,
163175
.autocomplete-result .icon-user-forced-white.autocomplete-result__icon--,
164176
.autocomplete-result .icon-mail-forced-white.autocomplete-result__icon-- {
165177
background-size: 50% !important;
@@ -183,6 +195,12 @@ body[dir="rtl"] .bidirectional-icon {
183195
background-image: url(../img/icon-contacts-white.svg);
184196
}
185197

198+
.user-bubble__avatar .icon-team-forced-white,
199+
.autocomplete-result .icon-team-forced-white.autocomplete-result__icon--,
200+
.mention-bubble .icon-team-forced-white.mention-bubble__icon-- {
201+
background-image: url(../img/icon-team-white.svg);
202+
}
203+
186204
/* Needed to use white color also in dark mode. */
187205
.app-files .app-sidebar__close.forced-white {
188206
color: #ffffff;

‎src/components/LeftSidebar/LeftSidebar.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,7 @@
229229
:compact="isCompact"
230230
@click="createAndJoinConversation(item)">
231231
<template #icon>
232-
<ConversationIcon :item="iconData(item)" />
232+
<ConversationIcon :item="iconData(item)" :size="isCompact ? AVATAR.SIZE.COMPACT: AVATAR.SIZE.DEFAULT" />
233233
</template>
234234
<template v-if="!isCompact" #subname>
235235
{{ t('spreed', 'New group conversation') }}
@@ -247,7 +247,7 @@
247247
:compact="isCompact"
248248
@click="createAndJoinConversation(item)">
249249
<template #icon>
250-
<ConversationIcon :item="iconData(item)" />
250+
<ConversationIcon :item="iconData(item)" :size="isCompact ? AVATAR.SIZE.COMPACT: AVATAR.SIZE.DEFAULT" />
251251
</template>
252252
<template v-if="!isCompact" #subname>
253253
{{ t('spreed', 'New group conversation') }}

‎src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,9 @@ export default {
7575
isGroupMention() {
7676
return [MENTION.TYPE.USERGROUP, MENTION.TYPE.GROUP].includes(this.type)
7777
},
78+
isTeamMention() {
79+
return [MENTION.TYPE.CIRCLE, MENTION.TYPE.TEAM].includes(this.type)
80+
},
7881
isMentionToGuest() {
7982
return this.type === MENTION.TYPE.GUEST || this.type === MENTION.TYPE.EMAIL
8083
},
@@ -105,9 +108,15 @@ export default {
105108
return this.isGroupMention
106109
&& loadState('spreed', 'user_group_ids', []).includes(this.id)
107110
},
111+
isCurrentUserTeam() {
112+
// FIXME need backend support here
113+
return this.isTeamMention && false
114+
},
108115
primary() {
109-
return this.isMentionToAll || this.isCurrentUser
110-
|| (this.isGroupMention && this.isCurrentUserGroup)
116+
return this.isMentionToAll
117+
|| this.isCurrentUser
118+
|| this.isCurrentUserGroup
119+
|| this.isCurrentUserTeam
111120
|| (this.isMentionToGuest && this.isCurrentGuest)
112121
},
113122
avatarUrl() {
@@ -117,6 +126,8 @@ export default {
117126
: 'icon-user-forced-white'
118127
} else if (this.isGroupMention) {
119128
return 'icon-group-forced-white'
129+
} else if (this.isTeamMention) {
130+
return 'icon-team-forced-white'
120131
} else if (this.isMentionToGuest) {
121132
return 'icon-user-forced-white'
122133
} else if (!this.isMentionToAll) {

‎src/composables/useChatMentions.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,10 @@ export function useChatMentions(token: Ref<string>): ReturnType {
6666
} else if (possibleMention.source === ATTENDEE.ACTOR_TYPE.GROUPS) {
6767
chatMention.icon = 'icon-group-forced-white'
6868
chatMention.subline = t('spreed', 'Group')
69+
} else if (possibleMention.source === ATTENDEE.ACTOR_TYPE.CIRCLES
70+
|| possibleMention.source === ATTENDEE.ACTOR_TYPE.TEAMS) {
71+
chatMention.icon = 'icon-team-forced-white'
72+
chatMention.subline = t('spreed', 'Team')
6973
} else if (possibleMention.source === ATTENDEE.ACTOR_TYPE.GUESTS) {
7074
chatMention.icon = 'icon-user-forced-white'
7175
chatMention.subline = t('spreed', 'Guest')

‎src/constants.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,7 @@ export const ATTENDEE = {
119119
EMAILS: 'emails',
120120
GROUPS: 'groups',
121121
CIRCLES: 'circles',
122+
TEAMS: 'teams',
122123
BOTS: 'bots',
123124
BRIDGED: 'bridged',
124125
FEDERATED_USERS: 'federated_users',
@@ -325,6 +326,7 @@ export const MENTION = {
325326
GUEST: 'guest',
326327
EMAIL: 'email',
327328
USERGROUP: 'user-group',
329+
CIRCLE: 'circle',
328330
// Parsed to another types
329331
FEDERATED_USER: 'federated_user',
330332
GROUP: 'group',

‎src/utils/textParse.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@ function parseMentions(text: string, parameters: ChatMessage['messageParameters'
2828
} else if (key.startsWith('mention-group')
2929
&& [MENTION.TYPE.USERGROUP, MENTION.TYPE.GROUP].includes(value.type)) {
3030
mention = `@"group/${value.id}"`
31+
} else if (key.startsWith('mention-team')
32+
&& [MENTION.TYPE.CIRCLE, MENTION.TYPE.TEAM].includes(value.type)) {
33+
mention = `@"team/${value.id}"`
3134
} else if (key.startsWith('mention-guest') && value.type === MENTION.TYPE.GUEST) {
3235
mention = `@"${value.id}"`
3336
} else if (key.startsWith('mention-email') && value.type === MENTION.TYPE.EMAIL) {

0 commit comments

Comments
 (0)