fix(NcListItem): decrease line height from 1.5 to 1.2

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
nextcloud · Aug 15, 2024 · 8ce30cc · 8ce30cc
1 parent 7043739
commit 8ce30cc
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 3 deletions.
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
@@ -226,11 +226,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
@@ -1089,7 +1089,9 @@ export default {
 	padding: 0 !important;
 }
 
+// Overwrite NcListItem styles
 :deep(.list-item) {
+	line-height: 1.2;
 	overflow: hidden;
 	outline-offset: -2px;
 }

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;

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',