Merge pull request #4149 from nextcloud/backport/4134/stable7

[stable7] fix toggle overlapping other stuff
nextcloud-libraries · May 24, 2023 · 903339b · 903339b
2 parents 5598374 + fb7419b
commit 903339b
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 18 deletions.
diff --git a/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue b/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue
@@ -28,9 +28,9 @@
 		:aria-label="labelButton"
 		@click="onClick">
 		<template #icon>
-			<ChevronDown v-if="open"
+			<ChevronUp v-if="open"
 				:size="20" />
-			<ChevronRight v-else
+			<ChevronDown v-else
 				:size="20" />
 		</template>
 	</NcButton>
@@ -40,16 +40,16 @@
 import NcButton from '../NcButton/index.js'
 import { t } from '../../l10n.js'
 
-import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
+import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 
 export default {
 	name: 'NcAppNavigationIconCollapsible',
 
 	components: {
 		NcButton,
-		ChevronRight,
 		ChevronDown,
+		ChevronUp,
 	},
 
 	props: {
@@ -78,7 +78,7 @@ export default {
 
 <style lang="scss" scoped>
 .button-vue.icon-collapse {
-	position: absolute;
+	position: relative;
 	z-index: 105; // above a, under button
 	color: var(--color-main-text);
 	right: 0;

diff --git a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
@@ -137,15 +137,59 @@ Just nest the counter in a template within `<NcAppNavigationItem>` and add `#cou
 Wrap the children in a template with the `slot` property and use the prop `allowCollapse` to choose wether to allow or
 prevent the user from collapsing the items.
 
-```
-<NcAppNavigationItem name="Item with children" :allowCollapse="true" :open="true">
+```vue
 	<template>
-		<NcAppNavigationItem name="AppNavigationItemChild1" />
-		<NcAppNavigationItem name="AppNavigationItemChild2" />
-		<NcAppNavigationItem name="AppNavigationItemChild3" />
-		<NcAppNavigationItem name="AppNavigationItemChild4" />
+		<NcAppNavigationItem name="Item with children" :allowCollapse="true" :open="true">
+			<template #icon>
+				<Folder :size="20" />
+			</template>
+			<template #counter>
+				<NcCounterBubble>
+					99+
+				</NcCounterBubble>
+			</template>
+			<template #actions>
+				<NcActionButton @click="alert('Edit')">
+					<template #icon>
+						<Pencil :size="20" />
+					</template>
+					Edit
+				</NcActionButton>
+				<NcActionButton @click="alert('Delete')">
+					<template #icon>
+						<Delete :size="20" />
+					</template>
+					Delete
+				</NcActionButton>
+				<NcActionLink name="Link" href="https://nextcloud.com">
+					<template #icon>
+						<OpenInNew :size="20" />
+					</template>
+				</NcActionLink>
+			</template>
+			<template>
+				<NcAppNavigationItem name="AppNavigationItemChild1" />
+				<NcAppNavigationItem name="AppNavigationItemChild2" />
+				<NcAppNavigationItem name="AppNavigationItemChild3" />
+				<NcAppNavigationItem name="AppNavigationItemChild4" />
+			</template>
+		</NcAppNavigationItem>
 	</template>
-</NcAppNavigationItem>
+	<script>
+	import Folder from 'vue-material-design-icons/Folder'
+	import Delete from 'vue-material-design-icons/Delete'
+	import OpenInNew from 'vue-material-design-icons/OpenInNew'
+	import Pencil from 'vue-material-design-icons/Pencil'
+
+	export default {
+		components: {
+			Folder,
+			Delete,
+			OpenInNew,
+			Pencil,
+		},
+	}
+	</script>
 ```
 
 ### Editable element
@@ -253,7 +297,6 @@ Just set the `pinned` prop.
 					</div>
 				</a>
 
-				<NcAppNavigationIconCollapsible v-if="collapsible" :open="opened" @click.prevent.stop="toggleCollapse" />
 				<!-- undo entry -->
 				<div v-if="undo" class="app-navigation-entry__deleted">
 					<div class="app-navigation-entry__deleted-description">
@@ -302,6 +345,7 @@ Just set the `pinned` prop.
 						<slot name="actions" />
 					</NcActions>
 				</div>
+				<NcAppNavigationIconCollapsible v-if="collapsible" :open="opened" @click.prevent.stop="toggleCollapse" />
 
 				<!-- Anything (virtual) that should be mounted in the component, like a related modal -->
 				<slot name="extra" />
@@ -878,20 +922,21 @@ export default {
 }
 
 /* Makes the icon of the collapsible element disappear
-*  When hovering on the root element */
+ * When hovering on the root element
+ */
 .app-navigation-entry--collapsible {
-	//shows the triangle button
+	// hides the triangle button
 	.icon-collapse {
-		visibility: hidden;
+		display: none;
 	}
 	&.app-navigation-entry--no-icon,
 	&:hover, &:focus {
 		a .app-navigation-entry-icon {
 			visibility: visible;
 		}
 		.icon-collapse {
-			//shows the triangle button
-			visibility: visible;
+			// shows the triangle button
+			display: initial;
 		}
 		// prevent the icon of children elements from being hidden
 		// by the previous rule