Merge pull request #11811 from nextcloud/fix/noid/group-avatars

fix(avatars): show Talk-defined avatar thumbnails in modals
nextcloud · Mar 19, 2024 · 31e8234 · 31e8234
2 parents 6a60046 + 68b5a34
commit 31e8234
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 99 deletions.
diff --git a/css/icons.css b/css/icons.css
@@ -1,15 +1,6 @@
-/* Mention bubbles in the chat input and messages */
-.avatar-class-icon.icon-group-forced-white {
-	background-image: url(../img/icon-contacts-white.svg);
-}
-
-.avatar-class-icon.icon-user-forced-white {
-	background-image: url(../img/icon-contacts-white.svg);
-}
-
 .app-talk .icon-user,
-.talk-modal .icon-user,
-.sidebar-callview .icon-user,
+.modal-mask .icon-user,
+.talk-sidebar-callview .icon-user,
 #talk-panel .icon-user,
 #talk-sidebar .icon-user,
 #call-container .icon-user,
@@ -18,8 +9,8 @@
 }
 
 .app-talk .icon-public,
-.talk-modal .icon-public,
-.sidebar-callview .icon-public,
+.modal-mask .icon-public,
+.talk-sidebar-callview .icon-public,
 #talk-panel .icon-public,
 #talk-sidebar .icon-public,
 #call-container .icon-public,
@@ -28,8 +19,8 @@
 }
 
 .app-talk .icon-contacts,
-.talk-modal .icon-contacts,
-.sidebar-callview .icon-contacts,
+.modal-mask .icon-contacts,
+.talk-sidebar-callview .icon-contacts,
 #talk-panel .icon-contacts,
 #talk-sidebar .icon-contacts,
 #call-container .icon-contacts,
@@ -38,8 +29,8 @@
 }
 
 .app-talk .icon-phone,
-.talk-modal .icon-phone,
-.sidebar-callview .icon-phone,
+.modal-mask .icon-phone,
+.talk-sidebar-callview .icon-phone,
 #talk-panel .icon-phone,
 #talk-sidebar .icon-phone,
 #call-container .icon-phone,
@@ -48,8 +39,8 @@
 }
 
 .app-talk .icon-password,
-.talk-modal .icon-password,
-.sidebar-callview .icon-password,
+.modal-mask .icon-password,
+.talk-sidebar-callview .icon-password,
 #talk-panel .icon-password,
 #talk-sidebar .icon-password,
 #call-container .icon-password,
@@ -58,8 +49,8 @@
 }
 
 .app-talk .icon-file,
-.talk-modal .icon-file,
-.sidebar-callview .icon-file,
+.modal-mask .icon-file,
+.talk-sidebar-callview .icon-file,
 #talk-panel .icon-file,
 #talk-sidebar .icon-file,
 #call-container .icon-file,
@@ -68,8 +59,8 @@
 }
 
 .app-talk .icon-mail,
-.talk-modal .icon-mail,
-.sidebar-callview .icon-mail,
+.modal-mask .icon-mail,
+.talk-sidebar-callview .icon-mail,
 #talk-panel .icon-mail,
 #talk-sidebar .icon-mail,
 #call-container .icon-mail,
@@ -78,8 +69,8 @@
 }
 
 .app-talk .icon-team,
-.talk-modal .icon-team,
-.sidebar-callview .icon-team,
+.modal-mask .icon-team,
+.talk-sidebar-callview .icon-team,
 #talk-panel .icon-team,
 #talk-sidebar .icon-team,
 #call-container .icon-team,
@@ -88,8 +79,8 @@
 }
 
 .app-talk .icon-changelog,
-.talk-modal .icon-changelog,
-.sidebar-callview .icon-changelog,
+.modal-mask .icon-changelog,
+.talk-sidebar-callview .icon-changelog,
 #talk-panel .icon-changelog,
 #talk-sidebar .icon-changelog,
 #call-container .icon-changelog,
@@ -101,51 +92,50 @@
  * .app-Talk rules above.
  * "forced-white" needs to be included in the class name as the Avatar does
  * not accept several classes. */
-.user-bubble__avatar .avatar-class-icon.icon-group-forced-white,
-.tribute-container .icon-group-forced-white {
-	background-color: var(--color-text-maxcontrast-default);
-	background-image: url(../img/icon-contacts-white.svg);
-	background-size: 75%;
+.user-bubble__avatar .icon-group-forced-white,
+.user-bubble__avatar .icon-user-forced-white,
+.autocomplete-result .icon-group-forced-white,
+.autocomplete-result .icon-user-forced-white,
+.mention-bubble .icon-group-forced-white,
+.mention-bubble .icon-user-forced-white {
+	background-color: var(--color-text-maxcontrast-default) !important;
 }
 
-.user-bubble__avatar .avatar-class-icon.icon-user-forced-white,
-.tribute-container .icon-user-forced-white {
-	background-color: var(--color-text-maxcontrast-default);
-	background-image: url(../img/icon-user-white.svg);
-	background-size: 75%;
-}
-
-/* Needed to use white color also in dark mode. */
-.app-files .app-sidebar__close.forced-white {
-	color: #ffffff;
+body[data-theme-dark] .icon-group-forced-white,
+body[data-theme-dark] .icon-user-forced-white {
+	background-color: #3B3B3B !important;
 }
 
-.dashboard-talk-icon {
-	background-image: url(../img/app-dark.svg);
-	filter: var(--background-invert-if-dark);
-}
-
-/* To be used in new conversation / invitation handler dialogs */
-.conversation-icon .icon-conversation-group.icon--dark {
-	background-image: url('../img/icon-conversation-group-dark.svg')
+.user-bubble__avatar .icon-group-forced-white,
+.user-bubble__avatar .icon-user-forced-white {
+	background-size: 75%;
 }
 
-.conversation-icon .icon-conversation-group.icon--bright {
-	background-image: url('../img/icon-conversation-group-bright.svg')
+.autocomplete-result .icon-group-forced-white.autocomplete-result__icon--,
+.autocomplete-result .icon-user-forced-white.autocomplete-result__icon--,
+.mention-bubble .icon-group-forced-white.mention-bubble__icon--,
+.mention-bubble .icon-user-forced-white.mention-bubble__icon-- {
+	background-size: 50% !important;
 }
 
-.conversation-icon .icon-conversation-public.icon--dark {
-	background-image: url('../img/icon-conversation-public-dark.svg')
+.user-bubble__avatar .icon-user-forced-white,
+.autocomplete-result .icon-user-forced-white.autocomplete-result__icon--,
+.mention-bubble .icon-user-forced-white.mention-bubble__icon-- {
+	background-image: url(../img/icon-user-white.svg);
 }
 
-.conversation-icon .icon-conversation-public.icon--bright {
-	background-image: url('../img/icon-conversation-public-bright.svg')
+.user-bubble__avatar .icon-group-forced-white,
+.autocomplete-result .icon-group-forced-white.autocomplete-result__icon--,
+.mention-bubble .icon-group-forced-white.mention-bubble__icon-- {
+	background-image: url(../img/icon-contacts-white.svg);
 }
 
-.conversation-icon .icon-conversation-federation.icon--dark {
-	background-image: url('../img/icon-conversation-federation-dark.svg')
+/* Needed to use white color also in dark mode. */
+.app-files .app-sidebar__close.forced-white {
+	color: #ffffff;
 }
 
-.conversation-icon .icon-conversation-federation.icon--bright {
-	background-image: url('../img/icon-conversation-federation-bright.svg')
+.dashboard-talk-icon {
+	background-image: url(../img/app-dark.svg);
+	filter: var(--background-invert-if-dark);
 }
diff --git a/src/components/AvatarWrapper/AvatarWrapper.vue b/src/components/AvatarWrapper/AvatarWrapper.vue
@@ -156,11 +156,15 @@ export default {
 			if (this.source === ATTENDEE.ACTOR_TYPE.BOTS && this.id === ATTENDEE.CHANGELOG_BOT_ID) {
 				return 'icon-changelog'
 			}
-			// source: groups, circles
+			if (this.source === ATTENDEE.ACTOR_TYPE.CIRCLES) {
+				return 'icon-team'
+			}
+			// source: groups
 			return 'icon-contacts'
 		},
 		avatarClass() {
 			return {
+				'avatar-wrapper--dark': isDarkTheme,
 				'avatar-wrapper--offline': this.offline,
 				'avatar-wrapper--condensed': this.condensed,
 				'avatar-wrapper--highlighted': this.highlighted,
@@ -211,6 +215,10 @@ export default {
 	width: var(--avatar-size);
 	border-radius: var(--avatar-size);
 
+	&--dark .avatar {
+		background-color: #3B3B3B !important;
+	}
+
 	.avatar {
 		position: sticky;
 		top: 0;
@@ -219,9 +227,9 @@ export default {
 		line-height: var(--avatar-size);
 		font-size: calc(var(--avatar-size) / 2);
 		border-radius: 50%;
+		background-color: var(--color-text-maxcontrast-default);
 
 		&.icon {
-			background-color: var(--color-background-darker);
 			background-size: calc(var(--avatar-size) / 2);
 			&.icon-changelog {
 				background-size: cover !important;
@@ -235,7 +243,6 @@ export default {
 
 		&.guest {
 			color: #ffffff;
-			background-color: #b9b9b9;
 			padding: 0;
 			display: block;
 			text-align: center;

diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue
@@ -178,10 +178,7 @@ export default {
 		iconClass() {
 			if (this.item.isDummyConversation) {
 				// Prevent a 404 when trying to load an avatar before the conversation data is actually loaded
-				// Also used in new conversation / invitation handler dialog
-				const isFed = this.item.remoteServer && 'icon-conversation-federation'
-				const type = this.item.type === CONVERSATION.TYPE.PUBLIC ? 'icon-conversation-public' : 'icon-conversation-group'
-				return `${isFed || type} icon--dummy`
+				return this.item.type === CONVERSATION.TYPE.PUBLIC ? 'icon-public' : 'icon-contacts'
 			}
 
 			if (!supportsAvatar) {
@@ -268,10 +265,6 @@ export default {
 		background-size: calc(var(--icon-size) / 2);
 		background-color: var(--color-text-maxcontrast-default);
 
-		&--dummy {
-			background-size: var(--icon-size);
-		}
-
 		&.icon-changelog {
 			background-size: cover !important;
 		}

diff --git a/src/components/MediaSettings/MediaSettings.vue b/src/components/MediaSettings/MediaSettings.vue
@@ -21,7 +21,6 @@
 
 <template>
 	<NcModal v-if="modal"
-		class="talk-modal"
 		:container="container"
 		@close="closeModal">
 		<div class="media-settings">

diff --git a/src/components/NewConversationDialog/NewConversationDialog.vue b/src/components/NewConversationDialog/NewConversationDialog.vue
@@ -20,10 +20,10 @@
 -->
 
 <template>
-	<div v-if="modal" class="wrapper">
+	<div v-if="modal">
 		<!-- New group form -->
 		<NcModal v-show="page !== 2"
-			class="conversation-form"
+			class="new-group-conversation"
 			:container="container"
 			@close="closeModal">
 			<h2 class="new-group-conversation__header">
@@ -445,18 +445,18 @@ export default {
 	&__button {
 		margin-left: auto;
 	}
-}
 
-.conversation-form :deep(.modal-wrapper) {
-	.modal-container {
-		height: 90%;
-	}
+	:deep(.modal-wrapper) {
+		.modal-container {
+			height: 90%;
+		}
 
-	.modal-container__content {
-		display: flex !important;
-		flex-direction: column;
-		height: 100%;
-		overflow: hidden !important;
+		.modal-container__content {
+			display: flex !important;
+			flex-direction: column;
+			height: 100%;
+			overflow: hidden !important;
+		}
 	}
 }
 

diff --git a/src/components/NewMessage/NewMessage.vue b/src/components/NewMessage/NewMessage.vue
@@ -1040,20 +1040,6 @@ export default {
 }
 </script>
 
-<style lang="scss">
-// FIXME upstream: Enforce NcAutoCompleteResult to have proper box-sizing
-.tribute-container {
-	position: absolute;
-	box-sizing: content-box !important;
-
-	& *,
-	& *::before,
-	& *::after {
-		box-sizing: inherit !important;
-	}
-}
-</style>
-
 <style lang="scss" scoped>
 .wrapper {
 	padding: 12px 12px 12px 0;

diff --git a/src/components/NewMessage/NewMessageUploadEditor.vue b/src/components/NewMessage/NewMessageUploadEditor.vue
@@ -23,7 +23,6 @@
 	<NcModal v-if="showModal"
 		ref="modal"
 		:size="isVoiceMessage ? 'small' : 'normal'"
-		class="upload-editor"
 		:container="container"
 		@close="handleDismiss">
 		<div class="upload-editor"