Merge pull request #14118 from nextcloud/fix/11697/compact-follow-up

feat(compact): follow-up
nextcloud · Jan 14, 2025 · 790cbb0 · 790cbb0
2 parents d3d2e03 + 09e62e1
commit 790cbb0
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 42 deletions.
diff --git a/src/components/AvatarWrapper/AvatarWrapper.vue b/src/components/AvatarWrapper/AvatarWrapper.vue
@@ -31,7 +31,7 @@
 			:preloaded-user-status="preloadedUserStatus"
 			:size="size" />
 		<!-- Override user status for federated users -->
-		<span v-if="showUserStatus && isFederatedUser && !compact"
+		<span v-if="showUserStatus && isFederatedUser"
 			class="avatar-wrapper__user-status"
 			role="img"
 			aria-hidden="false"
@@ -132,11 +132,6 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-
-		compact: {
-			type: Boolean,
-			default: false,
-		},
 	},
 
 	setup() {

diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue
@@ -19,7 +19,7 @@
 				:height="size"
 				:alt="item.displayName"
 				class="avatar icon">
-			<span v-if="!hideUserStatus && conversationType && !compact"
+			<span v-if="!hideUserStatus && conversationType"
 				class="conversation-icon__type"
 				role="img"
 				aria-hidden="false"
@@ -131,11 +131,6 @@ export default {
 			type: Number,
 			default: AVATAR.SIZE.DEFAULT,
 		},
-
-		compact: {
-			type: Boolean,
-			default: false,
-		}
 	},
 
 	setup() {
@@ -148,11 +143,11 @@ export default {
 
 	computed: {
 		showCall() {
-			return !this.hideCall && this.item.hasCall && !this.compact
+			return !this.hideCall && this.item.hasCall
 		},
 
 		showFavorite() {
-			return !this.hideFavorite && this.item.isFavorite && !this.compact
+			return !this.hideFavorite && this.item.isFavorite
 		},
 
 		preloadedUserStatus() {

diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.vue b/src/components/LeftSidebar/ConversationsList/Conversation.vue
@@ -23,20 +23,20 @@
 		force-menu
 		:compact="compact"
 		@click="onClick">
+		<template #icon>
+			<ConversationIcon :item="item"
+				:hide-favorite="compact"
+				:hide-call="compact"
+				:hide-user-status="item.type !== CONVERSATION.TYPE.ONE_TO_ONE && compact"
+				:show-user-online-status="compact"
+				:size="compact? AVATAR.SIZE.COMPACT : AVATAR.SIZE.DEFAULT" />
+		</template>
 		<template #name>
 			<template v-if="compact && iconType">
 				<component :is="iconType.component" :size="15" :fill-color="iconType.color" />
 				<span class="hidden-visually">{{ iconType.text }}</span>
 			</template>
-			<span>{{ item.displayName }}</span>
-		</template>
-		<template #icon>
-			<ConversationIcon :item="item"
-				:hide-favorite="false"
-				:hide-call="false"
-				:compact="compact"
-				:show-user-online-status="compact"
-				:size="compact? AVATAR.SIZE.COMPACT : AVATAR.SIZE.DEFAULT" />
+			<span class="text"> {{ item.displayName }} </span>
 		</template>
 		<template v-if="!compact" #subname>
 			<!-- eslint-disable-next-line vue/no-v-html -->
@@ -245,7 +245,7 @@ import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
 import ConversationIcon from './../../ConversationIcon.vue'
 
 import { useConversationInfo } from '../../../composables/useConversationInfo.js'
-import { PARTICIPANT, AVATAR } from '../../../constants.js'
+import { PARTICIPANT, AVATAR, CONVERSATION } from '../../../constants.js'
 import { hasTalkFeature } from '../../../services/CapabilitiesManager.ts'
 import { copyConversationLinkToClipboard } from '../../../utils/handleUrl.ts'
 
@@ -337,6 +337,7 @@ export default {
 			counterType,
 			conversationInformation,
 			notificationLevels,
+			CONVERSATION,
 		}
 	},
 
@@ -570,6 +571,12 @@ export default {
 	}
 }
 
+.text {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
 :deep(.dialog) {
 	padding-block: 0 8px;
 	padding-inline: 12px 8px;

diff --git a/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue b/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue
@@ -7,7 +7,7 @@
 	<RecycleScroller ref="scroller"
 		item-tag="ul"
 		:items="conversations"
-		:item-size="CONVERSATION_ITEM_SIZE"
+		:item-size="itemSize"
 		key-field="token">
 		<template #default="{ item }">
 			<Conversation :item="item" :compact="compact" />
@@ -57,13 +57,13 @@ export default {
 
 	setup(props) {
 		/* Consider:
-		* avatar size (and two lines of text) or compact mode (34px)
+		* avatar size (and two lines of text) or compact mode (28px)
 		* list-item padding
 		* list-item__wrapper padding
 		*/
-		const CONVERSATION_ITEM_SIZE = computed(() => props.compact ? 34 + 2 * 2 + 0 * 2 : AVATAR.SIZE.DEFAULT + 2 * 4 + 2 * 2)
+		const itemSize = computed(() => props.compact ? 28 + 2 * 2 + 0 * 2 : AVATAR.SIZE.DEFAULT + 2 * 4 + 2 * 2)
 		return {
-			CONVERSATION_ITEM_SIZE,
+			itemSize,
 		}
 	},
 
@@ -76,7 +76,7 @@ export default {
 		 */
 		getFirstItemInViewportIndex() {
 			// (ceil to include partially) of (absolute number of items above viewport) + 1 (next item is in viewport) - 1 (index starts from 0)
-			return Math.ceil(this.$refs.scroller.$el.scrollTop / this.CONVERSATION_ITEM_SIZE)
+			return Math.ceil(this.$refs.scroller.$el.scrollTop / this.itemSize)
 		},
 
 		/**
@@ -87,7 +87,7 @@ export default {
 		 */
 		getLastItemInViewportIndex() {
 			// (floor to include only fully visible) of (absolute number of items below and in viewport) - 1 (index starts from 0)
-			return Math.floor((this.$refs.scroller.$el.scrollTop + this.$refs.scroller.$el.clientHeight) / this.CONVERSATION_ITEM_SIZE) - 1
+			return Math.floor((this.$refs.scroller.$el.scrollTop + this.$refs.scroller.$el.clientHeight) / this.itemSize) - 1
 		},
 
 		/**
@@ -111,7 +111,7 @@ export default {
 			 */
 			const doScroll = (to) => {
 				const ITEMS_TO_BORDER_AFTER_SCROLL = 1
-				const padding = ITEMS_TO_BORDER_AFTER_SCROLL * this.CONVERSATION_ITEM_SIZE
+				const padding = ITEMS_TO_BORDER_AFTER_SCROLL * this.itemSize
 				const from = this.$refs.scroller.$el.scrollTop
 				const direction = from < to ? 1 : -1
 
@@ -128,10 +128,10 @@ export default {
 			}
 
 			if (index < firstItemIndex) { // Item is above
-				await doScroll(index * this.CONVERSATION_ITEM_SIZE)
+				await doScroll(index * this.itemSize)
 			} else if (index > lastItemIndex) { // Item is below
 				// Position of item + item's height and move to bottom
-				await doScroll((index + 1) * this.CONVERSATION_ITEM_SIZE - viewportHeight)
+				await doScroll((index + 1) * this.itemSize - viewportHeight)
 			}
 		},
 

diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
@@ -182,7 +182,7 @@
 					data-nav-id="conversation_create_new"
 					@click="createConversation(searchText)">
 					<template #icon>
-						<ChatPlus :size="isCompact? AVATAR.SIZE.COMPACT: AVATAR.SIZE.DEFAULT" />
+						<ChatPlus :size="isCompact ? AVATAR.SIZE.COMPACT: AVATAR.SIZE.DEFAULT" />
 					</template>
 					<template v-if="!isCompact" #subname>
 						{{ t('spreed', 'New group conversation') }}
@@ -230,7 +230,7 @@
 							:compact="isCompact"
 							@click="createAndJoinConversation(item)">
 							<template #icon>
-								<ConversationIcon :item="iconData(item)" :size="isCompact ? AVATAR.SIZE.COMPACT : AVATAR.SIZE.DEFAULT" />
+								<ConversationIcon :item="iconData(item)" />
 							</template>
 							<template v-if="!isCompact" #subname>
 								{{ t('spreed', 'New group conversation') }}
@@ -248,7 +248,7 @@
 							:compact="isCompact"
 							@click="createAndJoinConversation(item)">
 							<template #icon>
-								<ConversationIcon :item="iconData(item)" :size="isCompact ? AVATAR.SIZE.COMPACT : AVATAR.SIZE.DEFAULT" />
+								<ConversationIcon :item="iconData(item)" />
 							</template>
 							<template v-if="!isCompact" #subname>
 								{{ t('spreed', 'New group conversation') }}
@@ -1046,13 +1046,12 @@ export default {
 					token: 'new',
 					showUserStatus: true,
 					size: this.isCompact ? AVATAR.SIZE.COMPACT : AVATAR.SIZE.DEFAULT,
-					compact: this.isCompact,
 				}
 			}
 			return {
 				type: CONVERSATION.TYPE.GROUP,
 				objectType: item.source,
-				compact: this.isCompact,
+				size: this.isCompact ? AVATAR.SIZE.COMPACT : AVATAR.SIZE.DEFAULT,
 			}
 		},
 	},
@@ -1166,13 +1165,25 @@ export default {
 		bottom: -2px !important;
 		min-height: 11px !important;
 		min-width: 11px !important;
-		line-height: 1 !important;
-		font-size: clamp(var(--font-size-small), 85%, var(--default-font-size)) !important;
 	}
 }
 
-// Overwrite NcListItem styles: remove padding in compact view
+/* Overwrite NcListItem styles for compact view */
 :deep(.list-item--compact) {
 	padding-block: 0 !important;
 }
+
+:deep(.list-item--compact:not(:has(.list-item-content__subname))) {
+	--list-item-height: calc(var(--clickable-area-small, 24px) + 4px) !important;
+}
+
+:deep(.list-item--compact .button-vue--size-normal) {
+	--button-size: var(--clickable-area-small, 24px);
+	--button-radius: var(--border-radius);
+}
+
+:deep(.list-item--compact .list-item-content__actions) {
+	height: var(--clickable-area-small, 24px);
+}
+
 </style>
diff --git a/src/constants.js b/src/constants.js
@@ -300,8 +300,8 @@ export const BOT = {
 
 export const AVATAR = {
 	SIZE: {
-		COMPACT: 20,
 		EXTRA_SMALL: 22,
+		COMPACT: 24,
 		SMALL: 32,
 		DEFAULT: 40,
 		MEDIUM: 64,