Introduce compact mode

Signed-off-by: Jonas Rittershofer <[email protected]>
nextcloud-libraries · Jul 29, 2022 · 96b4fca · 96b4fca
1 parent bc1645c
commit 96b4fca
Showing 1 changed file with 79 additions and 2 deletions.
diff --git a/src/components/ListItem/ListItem.vue b/src/components/ListItem/ListItem.vue
@@ -20,7 +20,7 @@
 -->
 <docs>
 
-# Usage
+### Default Usage
 ```
 <ul>
 	<listItem
@@ -118,6 +118,65 @@
 	</listItem>
 </ul>
 
+```
+
+### ListItem compact mode
+```
+<ul>
+	<listItem
+		:title="'Title of the element'"
+		:counter-number=1
+		:compact="true" >
+		<template #icon>
+			<div class="icon-edit" />
+		</template>
+		<template #subtitle>
+			This one is with subtitle
+		</template>
+		<template #actions>
+			<ActionButton>
+				Button one
+			</ActionButton>
+			<ActionButton>
+				Button two
+			</ActionButton>
+		</template>
+	</listItem>
+	<listItem
+		:title="'Title of the element'"
+		:compact="true" >
+		<template #icon>
+			<div class="icon-edit" />
+		</template>
+	</listItem>
+	<listItem
+		:title="'Title of the element'"
+		:counter-number=3
+		:compact="true" >
+		<template #icon>
+			<div class="icon-edit" />
+		</template>
+		<template #subtitle>
+			This one is with subtitle
+		</template>
+		<template #actions>
+			<ActionButton>
+				Button one
+			</ActionButton>
+			<ActionButton>
+				Button two
+			</ActionButton>
+		</template>
+	</listItem>
+	<listItem
+		:title="'Title of the element'"
+		:counter-number=4
+		:compact="true" >
+		<template #icon>
+			<div class="icon-edit" />
+		</template>
+	</listItem>
+</ul>
 ```
 </docs>
 
@@ -139,7 +198,8 @@
 			@click="onClick"
 			@keydown.esc="hideActions">
 
-			<div class="list-item-content__wrapper">
+			<div class="list-item-content__wrapper"
+				:class="{ 'list-item-content__wrapper--compact': compact }">
 				<!-- @slot This slot is used for the avatar or icon -->
 				<slot name="icon" />
 
@@ -275,6 +335,14 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * Show the ListItem in compact design
+		 */
+		compact: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Toggle the active state of the component
 		 */
@@ -506,6 +574,15 @@ export default {
 		display: flex;
 		align-items: center;
 		height: 48px;
+
+		&--compact {
+			height: 36px;
+
+			.line-one, .line-two {
+				margin-top: -4px;
+				margin-bottom: -4px;
+			}
+		}
 	}
 
 	&-content {