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 <[email protected]>
nextcloud-libraries · Jul 29, 2024 · bf4e529 · bf4e529
1 parent 0e216da
commit bf4e529
Showing 1 changed file with 41 additions and 13 deletions.
diff --git a/src/components/NcListItem/NcListItem.vue b/src/components/NcListItem/NcListItem.vue
@@ -356,6 +356,7 @@
 				class="list-item"
 				:class="{
 					'list-item--compact': compact,
+					'list-item--legacy': isLegacy,
 					'list-item--one-line': oneLine,
 				}"
 				@mouseover="handleMouseover"
@@ -585,6 +586,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,
@@ -780,7 +790,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: calc(2 * var(--default-line-height));
 	--list-item-border-radius: var(--border-radius-element, 32px);
@@ -790,9 +800,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;
@@ -812,18 +820,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;
@@ -859,8 +878,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;
@@ -871,6 +891,13 @@ export default {
 			}
 		}
 
+		&__details {
+			display: flex;
+			flex-direction: column;
+			justify-content: end;
+			align-items: end;
+		}
+
 		&__actions {
 			flex: 0 0 auto;
 			align-self: center;
@@ -894,8 +921,9 @@ export default {
 			margin: 0 5px;
 		}
 	}
+
 	&__extra {
-		margin-top: 4px;
+		margin-top: var(--default-grid-baseline);
 	}
 }