Merge pull request #13013 from nextcloud/backport/13010/stable30

[stable30] fix(avatar): increase avatar size to 40px

src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue

@@ -24,14 +24,16 @@ import { RecycleScroller } from 'vue-virtual-scroller'
 import Conversation from './Conversation.vue'
 import LoadingPlaceholder from '../../UIShared/LoadingPlaceholder.vue'
 
+import { AVATAR } from '../../../constants.js'
+
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
 /* 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)
+ * avatar size (and two lines of text)
+ * list-item padding
+ * list-item__wrapper padding
  */
-const CONVERSATION_ITEM_SIZE = 48
+const CONVERSATION_ITEM_SIZE = AVATAR.SIZE.DEFAULT + 2 * 4 + 2 * 2
 
 export default {
 	name: 'ConversationsListVirtual',

src/components/LeftSidebar/InvitationHandler.vue

@@ -228,14 +228,14 @@ export default {
 			padding-left: 4px;
 
 			&__name {
-				line-height: 1.2;
+				line-height: 20px;
 				font-weight: bold;
 				color: var(--color-main-text);
 			}
 
 			&__subname {
 				// Overwrite NcRichText styles
-				line-height: 1.2 !important;
+				line-height: 20px !important;
 				color: var(--color-text-maxcontrast);
 			}
 		}

src/components/LeftSidebar/LeftSidebar.vue

@@ -1007,6 +1007,7 @@ export default {
 	height: 100%;
 	padding-left: var(--default-grid-baseline);
 	overflow-y: scroll !important; // reserve a place for scrollbar
+	line-height: 20px;
 }
 
 .new-conversation {
@@ -1090,7 +1091,6 @@ export default {
 
 // Overwrite NcListItem styles
 :deep(.list-item) {
-	line-height: 1.2;
 	overflow: hidden;
 	outline-offset: -2px;
 

src/components/RightSidebar/Participants/Participant.vue

@@ -1133,9 +1133,10 @@ export default {
 
 <style lang="scss" scoped>
 .participant {
+	line-height: 20px;
+
 	// Overwrite NcListItem styles
 	:deep(.list-item) {
-		line-height: 1.2;
 		overflow: hidden;
 		outline-offset: -2px;
 		cursor: default;

src/components/RightSidebar/Participants/ParticipantsListVirtual.vue

@@ -24,14 +24,16 @@ import { RecycleScroller } from 'vue-virtual-scroller'
 import Participant from './Participant.vue'
 import LoadingPlaceholder from '../../UIShared/LoadingPlaceholder.vue'
 
+import { AVATAR } from '../../../constants.js'
+
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
 /* 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)
+ * avatar size (and two lines of text)
+ * list-item padding
+ * list-item__wrapper padding
  */
-const PARTICIPANT_ITEM_SIZE = 48
+const PARTICIPANT_ITEM_SIZE = AVATAR.SIZE.DEFAULT + 2 * 4 + 2 * 2
 
 export default {
 	name: 'ParticipantsListVirtual',

src/components/TopBar/TopBar.vue

@@ -405,8 +405,8 @@ export default {
 		justify-content: center;
 		width: 100%;
 		overflow: hidden;
-		// Text is guaranteed to be one line. Make line-height 1.2 to fit top bar
-		line-height: 1.2;
+		// Text is guaranteed to be one line. Make line-height 20px to fit top bar
+		line-height: 20px;
 		&--offline {
 			color: var(--color-text-maxcontrast);
 		}
@@ -450,7 +450,7 @@ export default {
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
-	line-height: 1.2;
+	line-height: 20px;
 
 	&__header {
 		font-weight: 500;

src/components/UIShared/LoadingPlaceholder.vue

@@ -7,7 +7,7 @@
 	<ul :class="'placeholder-list placeholder-list--' + type"
 		:style="{ '--colorPlaceholderLight': colorPlaceholderLight, '--colorPlaceholderDark': colorPlaceholderDark }">
 		<li v-for="(item, index) in placeholderData" :key="index" class="placeholder-item">
-			<div class="placeholder-item__avatar">
+			<div class="placeholder-item__avatar" :style="{ '--avatar-size': item.avatarSize }">
 				<div class="placeholder-item__avatar-circle" />
 			</div>
 			<div class="placeholder-item__content" :style="{'--last-line-width': item.width}">
@@ -19,6 +19,8 @@
 </template>
 
 <script>
+import { AVATAR } from '../../constants.js'
+
 const bodyStyles = window.getComputedStyle(document.body)
 const colorPlaceholderDark = bodyStyles.getPropertyValue('--color-placeholder-dark')
 const colorPlaceholderLight = bodyStyles.getPropertyValue('--color-placeholder-light')
@@ -55,6 +57,7 @@ export default {
 				data.push({
 					amount: this.type === 'messages' ? 4 : this.type === 'conversations' ? 2 : 1,
 					width: this.type === 'participants' ? '60%' : (Math.floor(Math.random() * 40) + 30) + '%',
+					avatarSize: (this.type === 'messages' ? AVATAR.SIZE.SMALL : AVATAR.SIZE.DEFAULT) + 'px',
 				})
 			}
 			return data
@@ -79,9 +82,9 @@ export default {
 	&__avatar {
 		flex-shrink: 0;
 		&-circle {
-			height: 36px; // AVATAR.SIZE.DEFAULT
-			width: 36px;
-			border-radius: 36px;
+			height: var(--avatar-size);
+			width: var(--avatar-size);
+			border-radius: var(--avatar-size);
 		}
 	}
 
@@ -124,12 +127,6 @@ export default {
 		&__avatar {
 			width: 48px;
 			padding: 20px 8px 0;
-
-			&-circle {
-				height: 32px; // AVATAR.SIZE.SMALL
-				width: 32px;
-				border-radius: 32px;
-			}
 		}
 
 		&__content {

src/constants.js

@@ -273,7 +273,7 @@ export const AVATAR = {
 	SIZE: {
 		EXTRA_SMALL: 22,
 		SMALL: 32,
-		DEFAULT: 36,
+		DEFAULT: 40,
 		MEDIUM: 64,
 		LARGE: 128,
 		EXTRA_LARGE: 180,