[styleguide] Popover menu

[skjnldsv]

This is a styleguide post. We will discuss the proper way to integrate a specific design part of nextcloud and then integrate it in the documentations.

@jancborchardt @nextcloud/designers

What is a popover menu

This is a quick menu that open on click. We're usually using the three dots icons on nextcloud.
This menu currently differs from the navigation menu on the app-navigation section on the left. We should definitely merge those two and make one single way to create a popover menu on nextcloud (see app-navigation-entry-menu class on css files)

Summary

1. In nextcloud we only want icons or icons+text
2. Two orientation:
   • Horizontal: for icons only
   • Vertical: for icon+text
3. The menu is aligned on the three-dot icons it refers to

Proposition

Html structure

<div class="popovermenu">
	<ul>
		<li>
			<a href="#" class="icon-details">
				<span>Details</span>
			</a>
		</li>
		<li>
			<button class="icon-details">
				<span>Details</span>
			</button>
		</li>
		<li>
			<button>
				<span class="icon-details"></span><span>Details</span>
			</button>
		</li>
		<li>
			<a>
				<span class="icon-details"></span><span>Details</span>
			</a>
		</li>
	<ul>
</div>

Technical details

1. The only allowed menu items elements are a and button
2. You can mix between a and button on the same menu (in case of form or direct link)
3. If you want your menu to be horizontal, you need to set the icon class to your a/button and not use span inside.
4. You need to put the entire menu just after the three dot icon (refs Fix popover width #2545 (comment))
   • <div><span class="icon-more"></span><div class="popovermenu">...</div></div>
   • With this, we don't need js, css only is ok for positioning.
   • The required right distance to the border (or padding, whatever you want to use) of the three-dot icon should be 14px (5 for menu margin and 6 for arrow position)
5. Don't put ul next to each other like the mail app, this is a wrong way to do.

Suggestions

1. Should we add the possibility to display the popover towards the top? Right now it is only set as "to the bottom"

• Should we add the option to select the arrow alignement? Right now this is only aligned on the right of the popup.
  • You can now have fun with menu-center and menu-left for alignment.

[skjnldsv]

Examples

Calendar (app navigation)

<div class="app-navigation-entry-menu hidden" style="display: block;">
	<ul>
		<li ng-show="item.calendar.arePropertiesWritable()">
			<button ng-click="item.openEditor()">
				<span class="icon-rename svg"></span>
				<span>Edit</span>
			</button>
		</li>
		... (li is repeated)
	</ul>
</div>

Mail (app navigation)

<div class="app-navigation-entry-menu open">
	<ul>
		<li><button class="icon-rename svg" title="Settings"></button></li>
	</ul>
	<ul>
		<li><button class="icon-delete svg" title="Delete account"></button></li>
	</ul>
	... (ul is repeated)
</div>

Files

<div class="fileActionsMenu popovermenu bubble open menu">
	<ul>
		<li>
			<a href="#" class="menuitem action action-details permanent" data-action="Details">
					<span class="icon icon-details"></span><span>Details</span>
			</a>
		</li>
		<li>
			<a href="#" class="menuitem action action-rename permanent" data-action="Rename">
				<span class="icon icon-rename"></span><span>Rename</span>
			</a>
		</li>
		... (li is repeated)
	</ul>
</div>

Personal settings

<div class="federationScopeMenu popovermenu bubble open menu" style="width: 242px; left: -59.4844px;">
	<ul>
		<li>
			<a href="#" class="menuitem action action-private permanent " data-action="private">
				<img class="icon" src="/core/img/actions/password.svg">
				<p>
					<strong class="menuitem-text">Private</strong>
					<br><span class="menuitem-text-detail">Only visible to you</span>
				</p>
			</a>
		</li>
		<li>
			<a href="#" class="menuitem action action-contacts permanent active" data-action="contacts">
				<img class="icon" src="/core/img/places/contacts-dark.svg">
				<p>
					<strong class="menuitem-text">Contacts</strong>
					<br><span class="menuitem-text-detail">Visible to local users and to trusted servers</span>
				</p>
			</a>
		</li>
		... (li is repeated)
	</ul>
</div>

[skjnldsv]

@nextcloud/designers
@MorrisJobke @jancborchardt should we backport this?

[jancborchardt]

@skjnldsv I just noticed that the top-right border radius is not set except in Files, is that fixed? :)

I guess backporting is not really possible since it would require SCSS to be backported?

[skjnldsv]

No we could just backport the compiled css over the old popover code in stable11.
top right border wasn't set before iirc, it was because of the arrow. You want border radius everywhere?

[skjnldsv]

yep, it was like this on stable11.
I have no issue removing this. Both are fine imo :)
https://github.com/nextcloud/server/blob/stable11/core/css/apps.css#L294

[ChristophWurst]

You need to put the entire menu just after the three dot icon (refs #2545 (comment))

<div><span class="icon-more"></span><div class="popover">...</div></div>

I assume that should be class="popovermenu".

With this, we don't need js, css only is ok.

Didn't work for me in #3233. What exactly can I expect to work without js? Even opening the menu on clicking the three dots?

[ChristophWurst]

I'm still undecided regarding popover menus inside (scrolled) popover menus...

That looks bad.

[skjnldsv]

Putting it inside the menu is the only way to position it without js 😄
But clearly there is an issue as you have an overflow hidden set :/

Yeah the class is popovermenu, that's a typo thanks 😉

[ChristophWurst]

But clearly there is an issue as you have an overflow hidden set :/

True that! That's what it looks without the overflow-y: auto rule

Any suggestion how I should make the content scrollable instead? 😅

[skjnldsv]

In that case I'm afraid you only have two choices left:

1. Using js for positioning
2. Add a bottom padding like we do in files, settings...