From 056118498c6d3136b2809f0d99b8c67e8b45bbc4 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Mon, 29 Jul 2024 09:55:36 +0200
Subject: [PATCH] fix(NcListItem): Make paddings smaller again on Nextcloud 30

Add a `legacy` class so that we can keep stylings for Nextcloud 29 and older
but still can style the component properly on Nextcloud 30 (smaller border radius = we can use smaller paddings)

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 src/components/NcListItem/NcListItem.vue | 54 ++++++++++++++++++------
 1 file changed, 41 insertions(+), 13 deletions(-)

diff --git a/src/components/NcListItem/NcListItem.vue b/src/components/NcListItem/NcListItem.vue
index 2433ab0156..f2df354ee8 100644
--- a/src/components/NcListItem/NcListItem.vue
+++ b/src/components/NcListItem/NcListItem.vue
@@ -355,6 +355,7 @@
 				class="list-item"
 				:class="{
 					'list-item--compact': compact,
+					'list-item--legacy': isLegacy,
 					'list-item--one-line': oneLine,
 				}"
 				@mouseover="handleMouseover"
@@ -577,6 +578,15 @@ export default {
 		'update:menuOpen',
 	],
 
+	setup() {
+		const [major] = window._oc_config?.version.split('.', 2) ?? []
+		const isLegacy = major && Number.parseInt(major) < 30
+
+		return {
+			isLegacy,
+		}
+	},
+
 	data() {
 		return {
 			hovered: false,
@@ -773,7 +783,7 @@ export default {
 
 // NcListItem
 .list-item {
-	--list-item-padding: 8px;
+	--list-item-padding: var(--default-grid-baseline);
 	// The content are two lines of text and respect the 1.5 line height
 	--list-item-height: 2lh;
 	--list-item-border-radius: var(--border-radius-element, 32px);
@@ -783,9 +793,7 @@ export default {
 	position: relative;
 	flex: 0 0 auto;
 	justify-content: flex-start;
-	// we need to make sure the elements are not cut off by the border
-	padding-inline: calc((var(--list-item-height) - var(--list-item-border-radius)) / 2);
-	padding-block: var(--list-item-padding);
+	padding: var(--list-item-padding);
 	width: 100%;
 	border-radius: var(--border-radius-element, 32px);
 	cursor: pointer;
@@ -805,18 +813,29 @@ export default {
 	}
 
 	&--compact {
-		--list-item-padding: 2px;
+		--list-item-padding: calc(0.5 * var(--default-grid-baseline)) var(--default-grid-baseline);
+
+		&:not(:has(.list-item-content__subname)) {
+			--list-item-height: var(--default-clickable-area);
+		}
 	}
-	.list-item-content__details {
-		display: flex;
-		flex-direction: column;
-		justify-content: end;
-		align-items: end;
+
+	&--legacy {
+		--list-item-padding: calc(2 * var(--default-grid-baseline));
+
+		&.list-item--compact {
+			--list-item-padding: var(--default-grid-baseline) calc(2 * var(--default-grid-baseline));
+		}
 	}
+
 	&--one-line {
 		--list-item-height: var(--default-clickable-area);
 		--list-item-border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));
-		--list-item-padding: 2px;
+		--list-item-padding: var(--default-grid-baseline);
+
+		&#{&}--legacy {
+			--list-item-padding: 2px calc((var(--list-item-height) - var(--list-item-border-radius)) / 2);
+		}
 
 		.list-item-content__main {
 			display: flex;
@@ -851,8 +870,9 @@ export default {
 		display: flex;
 		flex: 1 0;
 		justify-content: space-between;
-		padding-left: 8px;
+		padding-left: calc(2 * var(--default-grid-baseline));
 		min-width: 0;
+
 		&__main {
 			flex: 1 0;
 			width: 0;
@@ -863,6 +883,13 @@ export default {
 			}
 		}
 
+		&__details {
+			display: flex;
+			flex-direction: column;
+			justify-content: end;
+			align-items: end;
+		}
+
 		&__actions {
 			flex: 0 0 auto;
 			align-self: center;
@@ -886,8 +913,9 @@ export default {
 			margin: 0 5px;
 		}
 	}
+
 	&__extra {
-		margin-top: 4px;
+		margin-top: var(--default-grid-baseline);
 	}
 }