From 74af00478e6ee9399ce34cabac38f03f501bd428 Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Wed, 7 Feb 2024 10:09:51 +0100 Subject: [PATCH] fix(icons): fix avatar colors on creation / on fetch from server Signed-off-by: Maksim Sukharev --- css/icons.css | 17 +++++++++++++++++ lib/Service/AvatarService.php | 4 ++-- src/components/ConversationIcon.vue | 18 ++++++++++-------- .../ConversationAvatarEditor.vue | 2 +- .../NewConversationDialog.vue | 1 + .../features/conversation-1/avatar.feature | 8 ++++---- 6 files changed, 35 insertions(+), 15 deletions(-) diff --git a/css/icons.css b/css/icons.css index a5e488efc1c1..2cc80c3ce35c 100644 --- a/css/icons.css +++ b/css/icons.css @@ -110,3 +110,20 @@ background-image: url(../img/app-dark.svg); filter: var(--background-invert-if-dark); } + +/* To be used in new conversation dialog */ +.conversation-icon .icon-conversation-group.icon--dark { + background-image: url('../img/icon-conversation-group-dark.svg') +} + +.conversation-icon .icon-conversation-group.icon--bright { + background-image: url('../img/icon-conversation-group-bright.svg') +} + +.conversation-icon .icon-conversation-public.icon--dark { + background-image: url('../img/icon-conversation-public-dark.svg') +} + +.conversation-icon .icon-conversation-public.icon--bright { + background-image: url('../img/icon-conversation-public-bright.svg') +} diff --git a/lib/Service/AvatarService.php b/lib/Service/AvatarService.php index bae1b94a56d9..13b603869d89 100644 --- a/lib/Service/AvatarService.php +++ b/lib/Service/AvatarService.php @@ -43,8 +43,8 @@ class AvatarService { public const THEMING_PLACEHOLDER = '{{THEMING}}'; - public const THEMING_DARK_BACKGROUND = '3B3B3B'; - public const THEMING_BRIGHT_BACKGROUND = 'DBDBDB'; + public const THEMING_DARK_BACKGROUND = '999999'; + public const THEMING_BRIGHT_BACKGROUND = '6B6B6B'; public function __construct( private IAppData $appData, diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue index a2ccdbda5449..da7abc235a91 100644 --- a/src/components/ConversationIcon.vue +++ b/src/components/ConversationIcon.vue @@ -167,7 +167,10 @@ export default { iconClass() { if (this.item.isDummyConversation) { // Prevent a 404 when trying to load an avatar before the conversation data is actually loaded - return 'icon-contacts' + // Also used in new conversation dialog + const type = this.item.type === CONVERSATION.TYPE.PUBLIC ? 'icon-conversation-public' : 'icon-conversation-group' + const theme = isDarkTheme ? 'dark' : 'bright' + return `${type} icon--dummy icon--${theme}` } if (!supportsAvatar) { @@ -201,11 +204,6 @@ export default { return 'icon-contacts' } - if (this.item.type === CONVERSATION.TYPE.PUBLIC) { - // Public icon for new conversation dialog - return 'icon-public' - } - // Fall-through for other conversation suggestions to user-avatar handling return undefined }, @@ -215,7 +213,7 @@ export default { }, avatarUrl() { - if (!supportsAvatar) { + if (!supportsAvatar || this.item.isDummyConversation) { return undefined } @@ -242,7 +240,11 @@ export default { height: var(--icon-size); line-height: var(--icon-size); background-size: calc(var(--icon-size) / 2); - background-color: var(--color-background-darker); + background-color: var(--color-text-maxcontrast); + + &--dummy { + background-size: var(--icon-size); + } &.icon-changelog { background-size: cover !important; diff --git a/src/components/ConversationSettings/ConversationAvatarEditor.vue b/src/components/ConversationSettings/ConversationAvatarEditor.vue index a493b4a95e15..43d13ee3e077 100644 --- a/src/components/ConversationSettings/ConversationAvatarEditor.vue +++ b/src/components/ConversationSettings/ConversationAvatarEditor.vue @@ -431,7 +431,7 @@ section { height: 100%; padding-bottom: 6px; border-radius: 100%; - background-color: var(--color-background-darker); + background-color: var(--color-text-maxcontrast); font-size: 575%; line-height: 100%; } diff --git a/src/components/NewConversationDialog/NewConversationDialog.vue b/src/components/NewConversationDialog/NewConversationDialog.vue index 56b750686cb0..9812c91658cd 100644 --- a/src/components/NewConversationDialog/NewConversationDialog.vue +++ b/src/components/NewConversationDialog/NewConversationDialog.vue @@ -156,6 +156,7 @@ const NEW_CONVERSATION = { description: '', hasPassword: false, type: CONVERSATION.TYPE.GROUP, + isDummyConversation: true, } export default { diff --git a/tests/integration/features/conversation-1/avatar.feature b/tests/integration/features/conversation-1/avatar.feature index 26a3130421f1..65fad276cb10 100644 --- a/tests/integration/features/conversation-1/avatar.feature +++ b/tests/integration/features/conversation-1/avatar.feature @@ -149,8 +149,8 @@ Feature: conversation/avatar And the avatar svg of room "room" contains the string "123456" Then user "participant1" sets emoji "🍏" with color "null" as avatar of room "room" with 200 (v1) And the avatar svg of room "room" contains the string "🍏" - And the avatar svg of room "room" contains the string "DBDBDB" - And the avatar svg of room "room" not contains the string "3B3B3B" + And the avatar svg of room "room" contains the string "6B6B6B" + And the avatar svg of room "room" not contains the string "999999" And the dark avatar svg of room "room" contains the string "🍏" - And the dark avatar svg of room "room" not contains the string "DBDBDB" - And the dark avatar svg of room "room" contains the string "3B3B3B" + And the dark avatar svg of room "room" not contains the string "6B6B6B" + And the dark avatar svg of room "room" contains the string "999999"