Skip to content

Commit

Permalink
fix(team): support team mentions on frontend
Browse files Browse the repository at this point in the history 
Signed-off-by: Maksim Sukharev <[email protected]>
  • Loading branch information
@Antreesy
Antreesy committed Jan 30, 2025
1 parent 3125abe commit 97d8cdb
Show file tree
Hide file tree
Showing 5 changed files with 41 additions and 2 deletions.
18 changes: 18 additions & 0 deletions css/icons.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,12 +106,15 @@
* "forced-white" needs to be included in the class name as the Avatar does
* not accept several classes. */
.user-bubble__avatar .icon-group-forced-white.avatar-class-icon,
.user-bubble__avatar .icon-team-forced-white.avatar-class-icon,
.user-bubble__avatar .icon-user-forced-white.avatar-class-icon,
.user-bubble__avatar .icon-mail-forced-white.avatar-class-icon,
.autocomplete-result .icon-group-forced-white.autocomplete-result__icon--,
.autocomplete-result .icon-team-forced-white.autocomplete-result__icon--,
.autocomplete-result .icon-user-forced-white.autocomplete-result__icon--,
.autocomplete-result .icon-mail-forced-white.autocomplete-result__icon--,
.mention-bubble .icon-group-forced-white.mention-bubble__icon--,
.mention-bubble .icon-team-forced-white.mention-bubble__icon--,
.mention-bubble .icon-user-forced-white.mention-bubble__icon--,
.mention-bubble .icon-mail-forced-white.mention-bubble__icon-- {
background-color: #6B6B6B;
Expand All @@ -120,12 +123,15 @@
/* System default: dark theme */
@media (prefers-color-scheme: dark) {
body[data-theme-default] .user-bubble__avatar .icon-group-forced-white.avatar-class-icon,
body[data-theme-default] .user-bubble__avatar .icon-team-forced-white.avatar-class-icon,
body[data-theme-default] .user-bubble__avatar .icon-user-forced-white.avatar-class-icon,
body[data-theme-default] .user-bubble__avatar .icon-mail-forced-white.avatar-class-icon,
body[data-theme-default] .autocomplete-result .icon-group-forced-white.autocomplete-result__icon--,
body[data-theme-default] .autocomplete-result .icon-team-forced-white.autocomplete-result__icon--,
body[data-theme-default] .autocomplete-result .icon-user-forced-white.autocomplete-result__icon--,
body[data-theme-default] .autocomplete-result .icon-mail-forced-white.autocomplete-result__icon--,
body[data-theme-default] .mention-bubble .icon-group-forced-white.mention-bubble__icon--,
body[data-theme-default] .mention-bubble .icon-team-forced-white.mention-bubble__icon--,
body[data-theme-default] .mention-bubble .icon-user-forced-white.mention-bubble__icon--,
body[data-theme-default] .mention-bubble .icon-mail-forced-white.mention-bubble__icon-- {
background-color: #3B3B3B;
Expand All @@ -134,12 +140,15 @@

/* Manually set dark theme */
body[data-theme-dark] .user-bubble__avatar .icon-group-forced-white.avatar-class-icon,
body[data-theme-dark] .user-bubble__avatar .icon-team-forced-white.avatar-class-icon,
body[data-theme-dark] .user-bubble__avatar .icon-user-forced-white.avatar-class-icon,
body[data-theme-dark] .user-bubble__avatar .icon-mail-forced-white.avatar-class-icon,
body[data-theme-dark] .autocomplete-result .icon-group-forced-white.autocomplete-result__icon--,
body[data-theme-dark] .autocomplete-result .icon-team-forced-white.autocomplete-result__icon--,
body[data-theme-dark] .autocomplete-result .icon-user-forced-white.autocomplete-result__icon--,
body[data-theme-dark] .autocomplete-result .icon-mail-forced-white.autocomplete-result__icon--,
body[data-theme-dark] .mention-bubble .icon-group-forced-white.mention-bubble__icon--,
body[data-theme-dark] .mention-bubble .icon-team-forced-white.mention-bubble__icon--,
body[data-theme-dark] .mention-bubble .icon-user-forced-white.mention-bubble__icon--,
body[data-theme-dark] .mention-bubble .icon-mail-forced-white.mention-bubble__icon-- {
background-color: #3B3B3B;
Expand All @@ -151,15 +160,18 @@ body[dir="rtl"] .bidirectional-icon {
}

.user-bubble__avatar .icon-group-forced-white.avatar-class-icon,
.user-bubble__avatar .icon-team-forced-white.avatar-class-icon,
.user-bubble__avatar .icon-user-forced-white.avatar-class-icon,
.user-bubble__avatar .icon-mail-forced-white.avatar-class-icon,
.mention-bubble .icon-group-forced-white.mention-bubble__icon--,
.mention-bubble .icon-team-forced-white.mention-bubble__icon--,
.mention-bubble .icon-user-forced-white.mention-bubble__icon--,
.mention-bubble .icon-mail-forced-white.mention-bubble__icon-- {
background-size: 75%;
}

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

.user-bubble__avatar .icon-team-forced-white,
.autocomplete-result .icon-team-forced-white.autocomplete-result__icon--,
.mention-bubble .icon-team-forced-white.mention-bubble__icon-- {
background-image: url(../img/icon-team-white.svg);
}

/* Needed to use white color also in dark mode. */
.app-files .app-sidebar__close.forced-white {
color: #ffffff;
Expand Down
15 changes: 13 additions & 2 deletions src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,9 @@ export default {
isGroupMention() {
return [MENTION.TYPE.USERGROUP, MENTION.TYPE.GROUP].includes(this.type)
},
isTeamMention() {
return [MENTION.TYPE.CIRCLE, MENTION.TYPE.TEAM].includes(this.type)
},
isMentionToGuest() {
return this.type === MENTION.TYPE.GUEST || this.type === MENTION.TYPE.EMAIL
},
Expand Down Expand Up @@ -105,9 +108,15 @@ export default {
return this.isGroupMention
&& loadState('spreed', 'user_group_ids', []).includes(this.id)
},
isCurrentUserTeam() {
// FIXME need backend support here
return this.isTeamMention && false
},
primary() {
return this.isMentionToAll || this.isCurrentUser
|| (this.isGroupMention && this.isCurrentUserGroup)
return this.isMentionToAll
|| this.isCurrentUser
|| this.isCurrentUserGroup
|| this.isCurrentUserTeam
|| (this.isMentionToGuest && this.isCurrentGuest)
},
avatarUrl() {
Expand All @@ -117,6 +126,8 @@ export default {
: 'icon-user-forced-white'
} else if (this.isGroupMention) {
return 'icon-group-forced-white'
} else if (this.isTeamMention) {
return 'icon-team-forced-white'
} else if (this.isMentionToGuest) {
return 'icon-user-forced-white'
} else if (!this.isMentionToAll) {
Expand Down
4 changes: 4 additions & 0 deletions src/composables/useChatMentions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,10 @@ export function useChatMentions(token: Ref<string>): ReturnType {
} else if (possibleMention.source === ATTENDEE.ACTOR_TYPE.GROUPS) {
chatMention.icon = 'icon-group-forced-white'
chatMention.subline = t('spreed', 'Group')
} else if (possibleMention.source === ATTENDEE.ACTOR_TYPE.CIRCLES
|| possibleMention.source === ATTENDEE.ACTOR_TYPE.TEAMS) {
chatMention.icon = 'icon-team-forced-white'
chatMention.subline = t('spreed', 'Team')
} else if (possibleMention.source === ATTENDEE.ACTOR_TYPE.GUESTS) {
chatMention.icon = 'icon-user-forced-white'
chatMention.subline = t('spreed', 'Guest')
Expand Down
3 changes: 3 additions & 0 deletions src/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,7 @@ export const ATTENDEE = {
EMAILS: 'emails',
GROUPS: 'groups',
CIRCLES: 'circles',
TEAMS: 'teams',
BOTS: 'bots',
BRIDGED: 'bridged',
FEDERATED_USERS: 'federated_users',
Expand Down Expand Up @@ -325,9 +326,11 @@ export const MENTION = {
GUEST: 'guest',
EMAIL: 'email',
USERGROUP: 'user-group',
CIRCLE: 'circle',
// Parsed to another types
FEDERATED_USER: 'federated_user',
GROUP: 'group',
TEAM: 'team',
},
}

Expand Down
3 changes: 3 additions & 0 deletions src/utils/textParse.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,9 @@ function parseMentions(text: string, parameters: ChatMessage['messageParameters'
} else if (key.startsWith('mention-group')
&& [MENTION.TYPE.USERGROUP, MENTION.TYPE.GROUP].includes(value.type)) {
mention = `@"group/${value.id}"`
} else if (key.startsWith('mention-team')
&& [MENTION.TYPE.CIRCLE, MENTION.TYPE.TEAM].includes(value.type)) {
mention = `@"team/${value.id}"`
} else if (key.startsWith('mention-guest') && value.type === MENTION.TYPE.GUEST) {
mention = `@"${value.id}"`
} else if (key.startsWith('mention-email') && value.type === MENTION.TYPE.EMAIL) {
Expand Down

0 comments on commit 97d8cdb

Please sign in to comment.