fix: make the list more compact and increase icon/avatar size of the …

…conversation Signed-off-by: Dorra Jaouad <[email protected]>
nextcloud · Jan 14, 2025 · 7a2e965 · 7a2e965
1 parent 1c58c0d
commit 7a2e965
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue b/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue
@@ -57,11 +57,11 @@ 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 itemSize = 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 {
 			itemSize,
 		}

diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
@@ -1168,8 +1168,22 @@ export default {
 	}
 }
 
-// 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,