fixup! Add a new slot to support full width view for mail list

Signed-off-by: greta <gretadoci@gmail.com>
nextcloud-libraries · Feb 13, 2024 · 33b46e5 · 33b46e5
1 parent a87e7ad
commit 33b46e5
Showing 1 changed file with 19 additions and 58 deletions.
diff --git a/src/components/NcListItem/NcListItem.vue b/src/components/NcListItem/NcListItem.vue
@@ -31,6 +31,7 @@
 			:active="true"
 			:details="'1h'"
 			:counter-number="44"
+			one-line
 			counterType="highlighted">
 			<template #icon>
 				<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
@@ -216,15 +217,12 @@
 			</template>
 		</NcListItem>
 		<NcListItem
-			:name="'Name of the element'"
+			:name="'Without subname, Name of the element'"
 			:bold="false"
 			:details="'1h'">
 			<template #icon>
 				<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
 			</template>
-			<template #subname>
-				In this slot you can put both text and other components such as icons
-			</template>
 			<template #indicator>
 				<!-- Color dot -->
 				<CheckboxBlankCircle :size="16" fill-color="#0082c9"/>
@@ -727,7 +725,8 @@ export default {
 
 		.list-item-content__name,
 		.list-item-content__subname,
-		.list-item-content__details {
+		.list-item-content__details,
+		.list-item-details__details {
 			color: var(--color-primary-element-text) !important;
 		}
 	}
@@ -819,62 +818,24 @@ export default {
 		}
 	}
 
+	&-details {
+		&__details {
+			color: var(--color-text-maxcontrast);
+			margin: 0 9px;
+			font-weight: normal;
+		}
+		&__extra {
+			margin: 2px 4px 0 4px;
+			display: flex;
+			align-items: center;
+		}
+		&__indicator {
+			margin: 0 5px;
+		}
+	}
 	&__extra {
 		margin-top: 4px;
 	}
 }
 
-.line-one {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	white-space: nowrap;
-	margin: 0 auto 0 0;
-	overflow: hidden;
-
-	&__name {
-		overflow: hidden;
-		flex-grow: 1;
-		cursor: pointer;
-		text-overflow: ellipsis;
-		color: var(--color-main-text);
-		font-weight: bold;
-	}
-
-	&__details {
-		color: var(--color-text-maxcontrast);
-		margin: 0 9px;
-		font-weight: normal;
-	}
-}
-
-.line-two {
-	display: flex;
-	align-items: flex-start;
-	justify-content: space-between;
-	white-space: nowrap;
-	&--bold {
-		font-weight: bold;
-	}
-
-	&__subname {
-		overflow: hidden;
-		flex-grow: 1;
-		cursor: pointer;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		color: var(--color-text-maxcontrast);
-	}
-
-	&__additional_elements {
-		margin: 2px 4px 0 4px;
-		display: flex;
-		align-items: center;
-	}
-
-	&__indicator {
-		margin: 0 5px;
-	}
-}
-
 </style>