Merge pull request #12995 from nextcloud/backport/12956/stable30

[stable30] fix(avatar): decrease avatar size from 44px to 36px
nextcloud · Aug 15, 2024 · db54c47 · db54c47
2 parents 6630978 + c6e42d4
commit db54c47
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 22 deletions.
diff --git a/src/components/AvatarWrapper/AvatarWrapper.spec.js b/src/components/AvatarWrapper/AvatarWrapper.spec.js
@@ -12,6 +12,7 @@ import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 
 import AvatarWrapper from './AvatarWrapper.vue'
 
+import { AVATAR } from '../../constants.js'
 import storeConfig from '../../store/storeConfig.js'
 
 describe('AvatarWrapper.vue', () => {
@@ -39,7 +40,7 @@ describe('AvatarWrapper.vue', () => {
 
 			const avatar = wrapper.findComponent(NcAvatar)
 			expect(avatar.exists()).toBeTruthy()
-			expect(avatar.props('size')).toBe(44)
+			expect(avatar.props('size')).toBe(AVATAR.SIZE.DEFAULT)
 		})
 
 		test('component does not render NcAvatar for non-users', () => {
@@ -89,7 +90,7 @@ describe('AvatarWrapper.vue', () => {
 			expect(avatar.props('showUserStatus')).toBe(true)
 			expect(avatar.props('showUserStatusCompact')).toBe(false)
 			expect(avatar.props('preloadedUserStatus')).toBe(PRELOADED_USER_STATUS)
-			expect(avatar.props('size')).toBe(44)
+			expect(avatar.props('size')).toBe(AVATAR.SIZE.DEFAULT)
 		})
 	})
 

diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue
@@ -24,7 +24,7 @@
 				role="img"
 				aria-hidden="false"
 				:aria-label="conversationType.label">
-				<component :is="conversationType.icon" :size="14" />
+				<component :is="conversationType.icon" :size="12" />
 			</span>
 		</template>
 		<!-- NcAvatar doesn't fully support props update and works only for 1 user -->
@@ -265,11 +265,14 @@ export default {
 
 	&__type {
 		position: absolute;
-		right: -4px;
-		bottom: -4px;
-		height: 18px;
-		width: 18px;
-		border: 2px solid var(--color-main-background);
+		right: -2px;
+		bottom: -2px;
+		display: flex;
+		align-content: center;
+		justify-content: center;
+		height: clamp(14px, 40%, 18px);
+		width: clamp(14px, 40%, 18px);
+		border: 1px solid var(--color-main-background);
 		background-color: var(--color-main-background);
 		color: var(--color-main-text);
 		border-radius: 50%;

diff --git a/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue b/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue
@@ -27,11 +27,11 @@ import LoadingPlaceholder from '../../UIShared/LoadingPlaceholder.vue'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
 /* Consider:
- * 45 = 2lh - 2 lines of text
+ * 36 = 2 * 1.2 * var(--default-font-size) - two lines of text
  * 8 = 2 * var(--default-grid-baseline) - item padding
  * 4 = var(--default-grid-baseline) - item outline (collapsed)
  */
-const CONVERSATION_ITEM_SIZE = 61
+const CONVERSATION_ITEM_SIZE = 48
 
 export default {
 	name: 'ConversationsListVirtual',

diff --git a/src/components/LeftSidebar/InvitationHandler.vue b/src/components/LeftSidebar/InvitationHandler.vue
@@ -228,11 +228,14 @@ export default {
 			padding-left: 4px;
 
 			&__name {
+				line-height: 1.2;
 				font-weight: bold;
 				color: var(--color-main-text);
 			}
 
 			&__subname {
+				// Overwrite NcRichText styles
+				line-height: 1.2 !important;
 				color: var(--color-text-maxcontrast);
 			}
 		}

diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
@@ -180,7 +180,7 @@
 					data-nav-id="conversation_create_new"
 					@click="createConversation(searchText)">
 					<template #icon>
-						<ChatPlus :size="44" />
+						<ChatPlus :size="AVATAR.SIZE.DEFAULT" />
 					</template>
 					<template #subname>
 						{{ t('spreed', 'New group conversation') }}
@@ -336,7 +336,7 @@ import SearchBox from '../UIShared/SearchBox.vue'
 import TransitionWrapper from '../UIShared/TransitionWrapper.vue'
 
 import { useArrowNavigation } from '../../composables/useArrowNavigation.js'
-import { ATTENDEE, CONVERSATION } from '../../constants.js'
+import { ATTENDEE, AVATAR, CONVERSATION } from '../../constants.js'
 import BrowserStorage from '../../services/BrowserStorage.js'
 import { getTalkConfig, hasTalkFeature } from '../../services/CapabilitiesManager.ts'
 import {
@@ -410,6 +410,7 @@ export default {
 		const isMobile = useIsMobile()
 
 		return {
+			AVATAR,
 			initializeNavigation,
 			resetNavigation,
 			leftSidebar,
@@ -1087,8 +1088,20 @@ export default {
 	padding: 0 !important;
 }
 
+// Overwrite NcListItem styles
 :deep(.list-item) {
+	line-height: 1.2;
 	overflow: hidden;
 	outline-offset: -2px;
+
+	// FIXME clean up after nextcloud/vue release
+	.avatardiv .avatardiv__user-status {
+		right: -2px !important;
+		bottom: -2px !important;
+		min-height: 14px !important;
+		min-width: 14px !important;
+		line-height: 1 !important;
+		font-size: clamp(var(--font-size-small), 85%, var(--default-font-size)) !important;
+	}
 }
 </style>
diff --git a/src/components/RightSidebar/Participants/Participant.vue b/src/components/RightSidebar/Participants/Participant.vue
@@ -1135,6 +1135,7 @@ export default {
 .participant {
 	// Overwrite NcListItem styles
 	:deep(.list-item) {
+		line-height: 1.2;
 		overflow: hidden;
 		outline-offset: -2px;
 		cursor: default;
@@ -1146,6 +1147,16 @@ export default {
 		button, button * {
 			cursor: pointer;
 		}
+
+		// FIXME clean up after nextcloud/vue release
+		.avatardiv .avatardiv__user-status {
+			right: -2px !important;
+			bottom: -2px !important;
+			min-height: 14px !important;
+			min-width: 14px !important;
+			line-height: 1 !important;
+			font-size: clamp(var(--font-size-small), 85%, var(--default-font-size)) !important;
+		}
 	}
 
 	&--offline &__user-name {

diff --git a/src/components/RightSidebar/Participants/ParticipantsListVirtual.vue b/src/components/RightSidebar/Participants/ParticipantsListVirtual.vue
@@ -26,7 +26,12 @@ import LoadingPlaceholder from '../../UIShared/LoadingPlaceholder.vue'
 
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
-const PARTICIPANT_ITEM_SIZE = 64
+/* Consider:
+ * 36 = 2 * 1.2 * var(--default-font-size) - two lines of text
+ * 8 = 2 * var(--default-grid-baseline) - item padding
+ * 4 = var(--default-grid-baseline) - item outline (collapsed)
+ */
+const PARTICIPANT_ITEM_SIZE = 48
 
 export default {
 	name: 'ParticipantsListVirtual',

diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
@@ -12,7 +12,7 @@
 			class="conversation-icon"
 			:offline="isPeerInactive"
 			:item="conversation"
-			:size="iconSize"
+			:size="AVATAR.SIZE.DEFAULT"
 			:disable-menu="false"
 			show-user-online-status
 			:hide-favorite="false"
@@ -129,7 +129,7 @@ import BreakoutRoomsEditor from '../BreakoutRoomsEditor/BreakoutRoomsEditor.vue'
 import ConversationIcon from '../ConversationIcon.vue'
 
 import { useGetParticipants } from '../../composables/useGetParticipants.js'
-import { CONVERSATION } from '../../constants.js'
+import { AVATAR, CONVERSATION } from '../../constants.js'
 import BrowserStorage from '../../services/BrowserStorage.js'
 import { getTalkConfig } from '../../services/CapabilitiesManager.ts'
 import { useChatExtrasStore } from '../../stores/chatExtras.js'
@@ -177,12 +177,11 @@ export default {
 
 	setup() {
 		useGetParticipants()
-		const iconSize = parseFloat(getComputedStyle(document.documentElement)
-			.getPropertyValue('--default-clickable-area'))
+
 		return {
+			AVATAR,
 			localCallParticipantModel,
 			localMediaModel,
-			iconSize,
 			chatExtrasStore: useChatExtrasStore(),
 			isMobile: useIsMobile(),
 		}

diff --git a/src/components/UIShared/LoadingPlaceholder.vue b/src/components/UIShared/LoadingPlaceholder.vue
@@ -79,9 +79,9 @@ export default {
 	&__avatar {
 		flex-shrink: 0;
 		&-circle {
-			height: 44px; // AVATAR.SIZE.DEFAULT
-			width: 44px;
-			border-radius: 44px;
+			height: 36px; // AVATAR.SIZE.DEFAULT
+			width: 36px;
+			border-radius: 36px;
 		}
 	}
 

diff --git a/src/constants.js b/src/constants.js
@@ -273,7 +273,7 @@ export const AVATAR = {
 	SIZE: {
 		EXTRA_SMALL: 22,
 		SMALL: 32,
-		DEFAULT: 44,
+		DEFAULT: 36,
 		MEDIUM: 64,
 		LARGE: 128,
 		EXTRA_LARGE: 180,