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 · 3558b55 · 3558b55
1 parent 0a29f35
commit 3558b55
Showing 1 changed file with 51 additions and 65 deletions.
diff --git a/src/components/NcListItem/NcListItem.vue b/src/components/NcListItem/NcListItem.vue
@@ -333,7 +333,8 @@
 			:class="{ 'list-item__wrapper--active' : isActive || active }">
 			<div ref="list-item"
 				class="list-item"
-				:class="{ 'list-item--compact': compact }"
+				:class="{ 'list-item--compact': compact,
+					'list-item--one-line': oneLine,}"
 				@mouseover="handleMouseover"
 				@mouseleave="handleMouseleave">
 				<a :id="anchorId || undefined"
@@ -352,53 +353,39 @@
 
 					<!-- Main content -->
 					<div class="list-item-content">
-						<div class="list-item-content__main"
-							:class="{ 'list-item-content__main--oneline': oneLine, 'list-item-content__main--full-width-view' : fullWidthView }">
-							<!-- Default view with details at the end -->
-							<slot name="default">
-								<!-- First line, name -->
-								<div class="line-one">
-									<span class="line-one__name">
-										<slot name="name" />
-									</span>
-								</div>
-								<!-- First line, name and details -->
-								<div class="line-one">
-									<span class="line-one__name">
-										{{ name }}
-									</span>
-									<span v-if="showDetails"
-										class="line-one__details">
-										<!-- @slot This slot is used for some details in form of icon (prop `details` as a fallback) -->
-										<slot name="details">{{ details }}</slot>
-									</span>
-								</div>
-
-								<!-- Second line, subname and counter -->
-								<div class="line-two"
-									:class="{'line-two--bold': bold}">
-									<span v-if="hasSubname" class="line-two__subname">
-										<!-- @slot Slot for the second line of the component -->
-										<slot name="subname" />
-									</span>
-
-									<!-- Counter and indicator -->
-									<span v-if="counterNumber != 0 || hasIndicator"
-										v-show="showAdditionalElements"
-										class="line-two__additional_elements">
-										<NcCounterBubble v-if="counterNumber != 0"
-											:active="isActive || active"
-											class="line-two__counter"
-											:type="counterType">
-											{{ counterNumber }}
-										</NcCounterBubble>
-
-										<span v-if="hasIndicator" class="line-two__indicator">
-											<!-- @slot This slot is used for some indicator in form of icon -->
-											<slot name="indicator" />
-										</span>
-									</span>
-								</div>
+						<div class="list-item-content__main">
+							<div class="list-item-content__name">
+								{{ name }}
+							</div>
+							<div v-if="hasSubname"
+								class="list-item-content__subname"
+								:class="{'line-two--bold': bold}">
+								<!-- @slot Slot for the second line of the component -->
+								<slot name="subname" />
+							</div>
+						</div>
+						<div class="list-item-content__details">
+							<div v-if="showDetails" class="list-item-details__details">
+								<!-- @slot This slot is used for some details in form of icon (prop `details` as a fallback) -->
+								<slot name="details">{{ details }}</slot>
+							</div>
+							<!-- Counter and indicator -->
+							<div v-if="counterNumber != 0 || hasIndicator"
+								v-show="showAdditionalElements"
+								class="list-item-details__extra">
+								<NcCounterBubble v-if="counterNumber != 0"
+									:active="isActive || active"
+									class="list-item-details__counter"
+									:type="counterType">
+									{{ counterNumber }}
+								</NcCounterBubble>
+
+								<span v-if="hasIndicator" class="list-item-details__indicator">
+									<!-- @slot This slot is used for some indicator in form of icon -->
+									<slot name="indicator" />
+								</span>
+								</span>
+							</div>
 							</slot>
 							<!-- Detailed view with details as it is now -->
 							<slot name="detailed">
@@ -572,9 +559,9 @@ export default {
 			default: false,
 		},
 		/**
-		 * Show the NcListItem in full width (one line) design
+		 * Show the list component in one line instead of two lines
 		 */
-		fullWidthView: {
+		oneLine: {
 			type: Boolean,
 			default: false,
 		},
@@ -598,10 +585,6 @@ export default {
 	},
 
 	computed: {
-		oneLine() {
-			return !this.hasSubname && !this.showDetails
-		},
-
 		showAdditionalElements() {
 			return !this.displayActionsOnHoverFocus || this.forceDisplayActions
 		},
@@ -742,11 +725,9 @@ export default {
 			}
 		}
 
-		.line-one__name, .line-one__details {
-			color: var(--color-primary-element-text) !important;
-		}
-
-		.line-two__subname {
+		.list-item-content__name,
+		.list-item-content__subname,
+		.list-item-content__details {
 			color: var(--color-primary-element-text) !important;
 		}
 	}
@@ -790,6 +771,17 @@ export default {
 			}
 		}
 	}
+	&--one-line {
+		.list-item-content__main {
+			flex-direction: row;
+			justify-content: start;
+			gap: 12px;
+		}
+		.list-item-content__details {
+			flex-direction: row;
+			justify-content: end;
+		}
+	}
 
 	&__anchor {
 		display: flex;
@@ -817,12 +809,6 @@ export default {
 			&--oneline {
 				display: flex;
 			}
-			&--full-width-view {
-				display: flex;
-				flex-direction: row;
-				//this shouldnt be here but i need it for testing right now
-				width: 100%;
-			}
 		}
 
 		&__actions {