From 2a0e505003653f8a1396c0c48b49481b77300656 Mon Sep 17 00:00:00 2001 From: Christopher Ng Date: Tue, 5 Dec 2023 18:39:53 -0800 Subject: [PATCH 1/4] fix(NcAvatar): Increase contrast of avatar status icon Signed-off-by: Christopher Ng --- src/assets/status-icons/user-status-away.svg | 2 +- src/assets/status-icons/user-status-dnd.svg | 2 +- .../status-icons/user-status-online.svg | 2 +- src/components/NcAvatar/NcAvatar.vue | 44 +++++--------- src/globals.d.ts | 5 ++ src/utils/UserStatus.ts | 57 +++++++++++++++++++ 6 files changed, 79 insertions(+), 33 deletions(-) create mode 100644 src/utils/UserStatus.ts diff --git a/src/assets/status-icons/user-status-away.svg b/src/assets/status-icons/user-status-away.svg index 6451adf7aa..440ddde2d3 100644 --- a/src/assets/status-icons/user-status-away.svg +++ b/src/assets/status-icons/user-status-away.svg @@ -1,2 +1,2 @@ - + diff --git a/src/assets/status-icons/user-status-dnd.svg b/src/assets/status-icons/user-status-dnd.svg index 6892873d68..b599362c48 100644 --- a/src/assets/status-icons/user-status-dnd.svg +++ b/src/assets/status-icons/user-status-dnd.svg @@ -1,2 +1,2 @@ - + diff --git a/src/assets/status-icons/user-status-online.svg b/src/assets/status-icons/user-status-online.svg index 506b44213e..759401bb22 100644 --- a/src/assets/status-icons/user-status-online.svg +++ b/src/assets/status-icons/user-status-online.svg @@ -1,2 +1,2 @@ - + diff --git a/src/components/NcAvatar/NcAvatar.vue b/src/components/NcAvatar/NcAvatar.vue index 8399f0327b..fa64388713 100644 --- a/src/components/NcAvatar/NcAvatar.vue +++ b/src/components/NcAvatar/NcAvatar.vue @@ -167,10 +167,10 @@ export default { {{ userStatus.icon }} - + :svg="userStatusIcon" + :name="userStatusIconName" /> + * + * @author Christopher Ng + * + * @license AGPL-3.0-or-later + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */ + +import { t } from '../l10n.js' + +import onlineSvg from '../assets/status-icons/user-status-online.svg?raw' +import awaySvg from '../assets/status-icons/user-status-away.svg?raw' +import dndSvg from '../assets/status-icons/user-status-dnd.svg?raw' +import invisibleSvg from '../assets/status-icons/user-status-invisible.svg?raw' + +type Status = 'online' | 'away' | 'dnd' | 'invisible' | 'offline' + +const getUserStatusText = (status: Status): string => { + switch (status) { + // TRANSLATORS: User status if the user is currently away from keyboard + case 'away': return t('away') + case 'dnd': return t('do not disturb') + case 'online': return t('online') + case 'invisible': return t('inviisble') + case 'offline': return t('offline') + default: return status + } +} + +export const getUserStatusIcon = (status: Status): null | string => { + const statusIconMap = { + online: onlineSvg, + away: awaySvg, + dnd: dndSvg, + invisible: invisibleSvg, + } + + return statusIconMap[status] ?? null +} + +export const getUserStatusIconName = (status: Status): string => { + return t('User status: {status}', { status: getUserStatusText(status) }) +} From 77607b47c360e78765532033e6cd305a864c3952 Mon Sep 17 00:00:00 2001 From: Christopher Ng Date: Tue, 5 Dec 2023 18:39:53 -0800 Subject: [PATCH 2/4] fix(NcAutoCompleteResult): Increase contrast of user status icons Signed-off-by: Christopher Ng --- src/components/NcAvatar/NcAvatar.vue | 6 ++- .../NcAutoCompleteResult.vue | 40 +++++++++++-------- src/utils/UserStatus.ts | 2 +- 3 files changed, 28 insertions(+), 20 deletions(-) diff --git a/src/components/NcAvatar/NcAvatar.vue b/src/components/NcAvatar/NcAvatar.vue index fa64388713..718b9b510d 100644 --- a/src/components/NcAvatar/NcAvatar.vue +++ b/src/components/NcAvatar/NcAvatar.vue @@ -190,7 +190,7 @@ import NcButton from '../NcButton/index.js' import NcLoadingIcon from '../NcLoadingIcon/index.js' import NcIconSvgWrapper from '../NcIconSvgWrapper/index.js' import usernameToColor from '../../functions/usernameToColor/index.js' -import { getUserStatusIcon, getUserStatusIconName } from '../../utils/UserStatus.ts' +import { getUserStatusIcon, getUserStatusIconName, getUserStatusText } from '../../utils/UserStatus.ts' import { userStatus } from '../../mixins/index.js' import { t } from '../../l10n.js' @@ -381,13 +381,15 @@ export default { return } if (this.canDisplayUserStatus || this.showUserStatusIconOnAvatar) { - return t('Avatar of {displayName}, {status}', { displayName: this.displayName ?? this.user, status: this.userStatusText }) + return t('Avatar of {displayName}, {status}', { displayName: this.displayName ?? this.user, status: getUserStatusText(this.userStatus.status) }) } return t('Avatar of {displayName}', { displayName: this.displayName ?? this.user }) }, + userStatusIcon() { return getUserStatusIcon(this.userStatus.status) }, + /** * If the avatar has no menu no aria-label is assigned, but for accessibility we still need the status to be accessible * So this sets the required accessible label for the user status icon. diff --git a/src/components/NcRichContenteditable/NcAutoCompleteResult.vue b/src/components/NcRichContenteditable/NcAutoCompleteResult.vue index 527889431f..0fdba3e6f6 100644 --- a/src/components/NcRichContenteditable/NcAutoCompleteResult.vue +++ b/src/components/NcRichContenteditable/NcAutoCompleteResult.vue @@ -25,11 +25,14 @@
-
+ {{ status && status.icon || '' }} -
+ +
@@ -47,9 +50,17 @@