fix(NcAppNavigationCaption): Align actions with other app navigation …

…actions Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
nextcloud-libraries · Jun 15, 2023 · 5cc0663 · 5cc0663
1 parent d87b428
commit 5cc0663
Showing 1 changed file with 42 additions and 1 deletion.
diff --git a/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue b/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue
@@ -1,6 +1,7 @@
 <docs>
 ```vue
 	<template>
+	<div>
 		<NcAppNavigationCaption
 			name="Your caption goes here">
 			<template #actions>
@@ -12,6 +13,45 @@
 				</NcActionButton>
 			</template>
 		</NcAppNavigationCaption>
+		<NcAppNavigationCaption
+			name="Your caption goes here sfsdf sdf sdf sdf s dfs df sdf sd fsdf">
+			<template #actions>
+				<NcActionButton>
+					<template #icon>
+						<Plus :size="20" />
+					</template>
+					This is an action
+				</NcActionButton>
+			</template>
+		</NcAppNavigationCaption>
+		<NcAppNavigationItem name="AppNavigationItemChild1">
+			<template #icon>
+					<Plus :size="20" />
+				</template>
+				<template #actions>
+					<NcActionButton @click="alert('Edit')">
+						<template #icon>
+							<Plus :size="20" />
+						</template>
+						Edit
+					</NcActionButton>
+				</template>
+		</NcAppNavigationItem>
+		<NcAppNavigationItem name="AppNavigationItemChild2">
+			<template #icon>
+					<Plus :size="20" />
+				</template>
+				<template #actions>
+					<NcActionButton @click="alert('Edit')">
+						<template #icon>
+							<Plus :size="20" />
+						</template>
+						Edit
+					</NcActionButton>
+				</template>
+		</NcAppNavigationItem>
+	</template>
+	</div>
 	</template>
 	<script>
 	import Plus from 'vue-material-design-icons/Plus'
@@ -132,7 +172,6 @@ export default {
 .app-navigation-caption {
 	display: flex;
 	justify-content: space-between;
-	padding: 0 calc(var(--default-grid-baseline, 4px) * 2) 0 calc(var(--default-grid-baseline, 4px) * 3);
 
 	&__name {
 		font-weight: bold;
@@ -145,6 +184,8 @@ export default {
 		opacity: $opacity_normal;
 		box-shadow: none !important;
 		flex-shrink: 0;
+		// padding to align the name with the icon of app navigation items
+		padding: 0 calc(var(--default-grid-baseline, 4px) * 2) 0 calc(var(--default-grid-baseline, 4px) * 3);
 	}
 
 	&__actions {