Merge pull request #1888 from nextcloud/feature/add-slot-for-third-li…

…ne-in-listitem Add slot for third line in listitem component
nextcloud-libraries · Apr 28, 2021 · 07b4064 · 07b4064
2 parents c241516 + 79d50a1
commit 07b4064
Showing 1 changed file with 70 additions and 56 deletions.
diff --git a/src/components/ListItem/ListItem.vue b/src/components/ListItem/ListItem.vue
@@ -113,61 +113,68 @@
 			@click="onClick"
 			@keydown.esc="hideActions">
 
-			<!-- @slot This slot is used for the avatar or icon -->
-			<slot name="icon" />
-
-			<!-- Main content -->
-			<div class="list-item-content">
-				<div class="list-item-content__main">
-
-					<!-- First line, title and details -->
-					<div class="line-one"
-						:class="{'line-one--bold': bold}">
-						<span
-							class="line-one__title">
-							{{ title }}
-						</span>
-						<span
-							v-if="hasDetails && !displayActions"
-							class="line-one__details">
-							{{ details }}
-						</span>
+			<div class="list-item-content__wrapper">
+				<!-- @slot This slot is used for the avatar or icon -->
+				<slot name="icon" />
+
+				<!-- Main content -->
+				<div class="list-item-content">
+					<div class="list-item-content__main">
+
+						<!-- First line, title and details -->
+						<div class="line-one"
+							:class="{'line-one--bold': bold}">
+							<span
+								class="line-one__title">
+								{{ title }}
+							</span>
+							<span
+								v-if="hasDetails && !displayActions"
+								class="line-one__details">
+								{{ details }}
+							</span>
+						</div>
+
+						<!-- Second line, subtitle and counter -->
+						<div class="line-two"
+							:class="{'line-one--bold': bold}">
+							<span v-if="hasSubtitle" class="line-two__subtitle">
+								<!-- @slot Slot for the second line of the component -->
+								<slot name="subtitle" />
+							</span>
+
+							<!-- Counter -->
+							<span v-if="!displayActions" class="line-two__counter">
+								<AppNavigationCounter
+									v-if="counterNumber != 0"
+									:highlighted="counterHighlighted">
+									{{ counterNumber }}
+								</AppNavigationCounter>
+							</span>
+						</div>
 					</div>
 
-					<!-- Second line, subtitle and counter -->
-					<div class="line-two"
-						:class="{'line-one--bold': bold}">
-						<span v-if="hasSubtitle" class="line-two__subtitle">
-							<!-- @slot Slot for the second line of the component -->
-							<slot name="subtitle" />
-						</span>
-
-						<!-- Counter -->
-						<span v-if="!displayActions" class="line-two__counter">
-							<AppNavigationCounter
-								v-if="counterNumber != 0"
-								:highlighted="counterHighlighted">
-								{{ counterNumber }}
-							</AppNavigationCounter>
-						</span>
+					<!-- Actions -->
+					<div
+						v-show="displayActions"
+						class="list-item-content__actions"
+						@click.prevent.stop="">
+						<Actions
+							ref="actions"
+							menu-align="right"
+							:aria-label="actionsAriaLabel"
+							@update:open="handleActionsUpdateOpen">
+							<!-- @slot Provide the actions for the right side quick menu -->
+							<slot
+								name="actions" />
+						</Actions>
 					</div>
 				</div>
+			</div>
 
-				<!-- Actions -->
-				<div
-					v-show="displayActions"
-					class="list-item-content__actions"
-					@click.prevent.stop="">
-					<Actions
-						ref="actions"
-						menu-align="right"
-						:aria-label="actionsAriaLabel"
-						@update:open="handleActionsUpdateOpen">
-						<!-- @slot Provide the actions for the right side quick menu -->
-						<slot
-							name="actions" />
-					</Actions>
-				</div>
+			<!-- @slot Extra elements below the item -->
+			<div v-if="$slots.extra" class="list-item__extra">
+				<slot name="extra" />
 			</div>
 		</a>
 	</nav-element>
@@ -406,21 +413,19 @@ export default {
 
 // listItem
 .list-item {
+	display: block;
 	position: relative;
-	display: flex;
-	align-items: center;
 	flex: 0 0 auto;
 	justify-content: flex-start;
-	padding: 2px 2px 2px 8px;
-	height: 64px;
+	padding: 8px;
 	border-radius: 16px;
 	margin: 2px 0;
 	width: 100%;
 	cursor: pointer;
 	transition: background-color 200ms ease-in-out;
 	list-style: none;
 	&:hover,
-	&:focus  {
+	&:focus {
 		background-color: var(--color-background-hover);
 	}
 	&--active,
@@ -429,11 +434,16 @@ export default {
 		background-color: var(--color-primary-light);
 	}
 
+	&-content__wrapper {
+		display: flex;
+		align-items: center;
+	}
+
 	&-content {
 		display: flex;
 		flex: 1 1 auto;
 		justify-content: space-between;
-		padding: 0 8px;
+		padding-left: 8px;
 
 		&__main {
 			flex: 1 1 auto;
@@ -449,6 +459,10 @@ export default {
 
 		}
 	}
+
+	&__extra {
+		margin-top: 4px;
+	}
 }
 
 .line-one {