Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Get the possibility to have a sub-list #4755

Open
zak39 opened this issue Nov 3, 2023 · 7 comments
Open

Get the possibility to have a sub-list #4755

zak39 opened this issue Nov 3, 2023 · 7 comments
Labels
0. to triage enhancement New feature or request feature: list-item Related to the list-item component

Comments

@zak39
Copy link

zak39 commented Nov 3, 2023

Hi everyone 👋

As a web developer, I would like to add a sub-list to a NcAppNavigationItem component.

In fact, I would like to get an equivalent of this HTML code :

<ul>
  <li>Countries</li>
  <ul>
    <li>France</li>
    <ul>
      <li>Paris</li>
      <li>Roubaix</li>
    </ul>
    <li>Geremany</li>
    <ul>
      <li>Berlin</li>
      <li>Munich</li>
    </ul>
  </ul>
</ul>

Currently, it's not possible. Because, the NcAppNavigation component gives developers just one level of a <ul> html element.

We can write an equivalent to this code :

<NcAppNavigation>
 <template #list>
   <NcAppNavigationItem name="Countries" />
   <ul>
      <NcAppNavigationItem name="Paris" />
      <NcAppNavigationItem name="Roubaix" />
   </ul>
 </template>
</NcAppNavigation>

However, this requires to apply a custom css and it may break Nextcloud's flow design.

What do you think ?

@susnux
Copy link
Contributor

susnux commented Nov 4, 2023

This is already possible as NcAppNavigationItem allows children, see example:

https://nextcloud-vue-components.netlify.app/#/Components/App%20containers/NcAppNavigation?id=ncappnavigationitem

"Element with children"

@susnux susnux closed this as not planned Won't fix, can't repro, duplicate, stale Nov 4, 2023
@zak39
Copy link
Author

zak39 commented Nov 6, 2023

This is already possible as NcAppNavigationItem allows children, see example:

https://nextcloud-vue-components.netlify.app/#/Components/App%20containers/NcAppNavigation?id=ncappnavigationitem

"Element with children"

Yes, but you get one level children and not more. Except if I'm wrong ?

Edit - November 4th, 2023

I can't to get more than one level with the example from the documentation :

<template>
		<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">
				  <template>
          				  <NcAppNavigationItem name="AppNavigationItemChild1-1">
          				  </NcAppNavigationItem>
				  </template>
				</NcAppNavigationItem>
				<NcAppNavigationItem name="AppNavigationItemChild2" />
				<NcAppNavigationItem name="AppNavigationItemChild3" />
				<NcAppNavigationItem name="AppNavigationItemChild4" />
			</template>
		</NcAppNavigationItem>
	</template>
	<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>

Edit - November, 7th 2023

I saw that the padding-left is still 16px. So, it's impossible to have a multiple level NcAppNavigationItem ?

The padding-left rule : https://github.com/nextcloud-libraries/nextcloud-vue/blob/1c2f926107725244a17b7d152163e5508ac76990/src/components/NcAppNavigationItem/NcAppNavigationItem.vue#L897C18-L897C27

The icon-size variable :

$icon-size: 16px;

I create this gist as a draw : https://gist.github.com/zak39/1e2ddb4ca768e25743c606b24dae0101

The idea here is to declare a new props which is level and use the calc function in the css to define a step level.

props {
  /**
* code...
*/
		/**
		 * The step level of the components
		 */
		level: {
			type: Number,
			default: 1,
		},
	},
}
/* Second level nesting for lists */
.app-navigation-entry__children {
	position: relative;
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	width: 100%;
	gap: var(--default-grid-baseline, 4px);

	.app-navigation-entry {
		display: inline-flex;
		flex-wrap: wrap;
		padding-left: calc(($icon-size - 8px) + (8px * $level));
	}
}

What do you think @susnux ?

Knowing that it's possibile with Vue3 : https://learnvue.co/articles/reactive-styles-vue-3 .

@susnux
Copy link
Contributor

susnux commented Nov 7, 2023

Do you have a use case for more than one level nesting?
I am curious because nesting more than one level in the app navigation seems to me not a good UX.

@zak39
Copy link
Author

zak39 commented Nov 7, 2023

Do you have a use case for more than one level nesting? I am curious because nesting more than one level in the app navigation seems to me not a good UX.

Yes of course !

I have this mockup made by a UX colleague :

image

The idea is that "Project cloud", "Workspace Groups" ("Groupes Workspace" in french) and "Connected Groups" ("Groupes Connectés" in french) are NcAppNavigationItem.

However, "Workspace groups" and "Connected Groups" could be NcAppNavigationCaption (?)

I am curious because nesting more than one level in the app navigation seems to me not a good UX.

It depends on the case. In the left sidebar, I agree with you on this point. But, if it's in the main content or in a modal window, it could make sense.

@susnux
Copy link
Contributor

susnux commented Nov 7, 2023

It depends on the case. In the left sidebar, I agree with you on this point.

Yes but that is what NcAppNavigation* is about

But, if it's in the main content or in a modal window, it could make sense.

I do not think you should use NcAppNaviation* in such cases but NcListItem or similiar?


cc @jancborchardt as this probably is a design decision.

@susnux susnux reopened this Nov 7, 2023
@susnux susnux added enhancement New feature or request 0. to triage feature: list-item Related to the list-item component labels Nov 7, 2023
@jancborchardt
Copy link
Contributor

We habe this one-subfolder level in Files for "Shares", is that not a component?

@susnux
Copy link
Contributor

susnux commented Nov 7, 2023

@jancborchardt yes but this is about arbitrary levels, e.g. "Shares -> Shared by you -> shared to XY -> list of shares".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
0. to triage enhancement New feature or request feature: list-item Related to the list-item component
Projects
None yet
Development

No branches or pull requests

3 participants