fix(icons): fix avatar colors on creation / on fetch from server

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
nextcloud · Feb 21, 2024 · dce7984 · dce7984
1 parent 415c141
commit dce7984
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"