Show apps in header #3008

juliusknorr · 2017-01-10T11:22:20Z

This is a experimental implementation of what we've discussed with @jancborchardt @eppfel and @skjnldsv to make apps accessible directly without a popover. See juliusknorr/direct_menu#51

I'm still not totally happy with this, but I guess we should have some discussion so please have a look, @nextcloud/designers

Screenshots (updated)

Up to 8 apps:

More than 8 apps:

Mobile:

ToDo

Show 8 apps in total
Mobile/small screens
Cleanup CSS code to make use of scss
Fix css formating issues
Fix positioning in mobile view
Hide popover app names when popover menu is shown
Fix popover positioning after window resize
Fix app name position on small window sizes
Adding apps doesn't work any more

mention-bot · 2017-01-10T11:22:23Z

@juliushaertl, thanks for your PR! By analyzing the history of the files in this pull request, we identified @skjnldsv, @Henni and @jancborchardt to be potential reviewers.

raimund-schluessler · 2017-01-10T11:49:52Z

What happens when I open Notes in your example? Will there be an indicator that I am using Notes anywhere?

skjnldsv · 2017-01-10T12:08:52Z

I like it a lot!

MorrisJobke · 2017-01-10T13:00:22Z

Up to 3 apps

But this is "Up to 4 apps" - > otherwise the first 3 apps are shown plus the menu opener ;)

juliusknorr · 2017-01-10T14:23:42Z

But this is "Up to 4 apps" - > otherwise the first 3 apps are shown plus the menu opener ;)
2

🙈 Changed it. I was not counting the apps management as an app.

juliusknorr · 2017-01-10T14:27:41Z

What happens when I open Notes in your example? Will there be an indicator that I am using Notes anywhere?

@raimund-schluessler I would prefer to show the icon somwhere, not only an indicator at the 3 dots menu. Does anyone have an idea how we could do that?

MariusBluem · 2017-01-10T15:56:01Z

would prefer to show the icon somwhere, not only an indicator at the 3 dots menu. Does anyone have an idea how we could do that?

Maybe by showing the current app as the first 🤔 @juliushaertl

Espina2 · 2017-01-10T17:37:17Z

I don't think this are a good solution. It breaks after the third/four app. I talked with @jancborchardt at the Berlin conference that maybe the best solution is to have navigation on the right.

https://codepen.io/nikhil/pen/sicrK (example)
(example not public) from another project Im working on

Why I think its best?

Its versatile and works on mobile.
You can list more apps.
You can even change the order and personalize.

I am with a little time to make a proper mockup so I hope that I can explain what I mean.

skjnldsv · 2017-01-10T17:39:08Z

I would be fine with that too :)

juliusknorr · 2017-01-11T10:33:52Z

I talked with @jancborchardt at the Berlin conference that maybe the best solution is to have navigation on the right.

@Espina2 We also had some discussion about that over at https://help.nextcloud.com/t/is-this-the-most-awesome-or-what/6163/3

I'll just quote @jancborchardt on this:

Yes … I was more thinking about integrating it to the left navigation without losing horizontal space (compare iCloud.com) but there are just too many drawbacks. Mainly the issue of the responsiveness and how to handle it on mobile where the navigation just hides.

skjnldsv · 2017-01-11T10:38:07Z

Oh common guys, i barely have the time to follow everything on github. What can I do if you discuss on nextcloud forums now? 😆

Espina2 · 2017-01-11T12:32:13Z

This is not new, even before you launch the version with icons on the topbar I have called attention to @jancborchardt at conference that in my opinion this is not a good solution.

And like you quote

Yes … I was more thinking about integrating it to the left navigation without losing horizontal space (compare iCloud.com) but there are just too many drawbacks. Mainly the issue of the responsiveness and how to handle it on mobile where the navigation just hides.

The solution that I am suggesting don't add extra space. You only remove the icon for the second menu entry and add them to the first level.

So you have icon + label on the first "menu" and only label on the second, because it's not needed the icon.

Tooltips is a crime in User Experience, if you need them its because the information or the interface isn't clear enough. For not talking about mobile that don't have "hover" capabilities.

The solution that you are working now, its patching a problem not resolving them. This is my opinion.

eppfel · 2017-01-13T14:08:03Z

Tooltips is a crime in User Experience

🚨 Call the UX Police 😂

I think @Espina2 proposal could work. I agree that app names are not necessary as long as we have distinct icons. Problem could be external sites. We should add an option to upload a custom icon there.
And I don't see problems with the mobile version. This could be integrated into the side-menu as well.

Spartachetto · 2017-01-19T21:07:37Z

I am not at all an UX expert, and I get that a single user feedback and preferences have a really limited usefulness.
Yet I really like @Espina2 proposal! :-)

SonRiab · 2017-01-20T08:10:09Z

I would stick with the current default behavior when accessing the site with a mobile phone. Pressing on the current app name is easier then hitting small icons. But using icons and hiding the current app name for the desktop view is totally fine for me. Maybe we could add the icon in front of the app name in mobile view.

juliusknorr · 2017-01-20T08:53:06Z

Tooltips is a crime in User Experience, if you need them its because the information or the interface isn't clear enough.

I think they work quite well here, especially for a menu, that you use more often. At the beginning you might need some information about what the icons will do, but after some time you'll start to remember them, so there is no need to show a title always and we can use a tooltip instead.

For not talking about mobile that don't have "hover" capabilities.

I would like to keep the current menu for mobile, as requires no screen space while not using it. Just as @SonRiab proposed.

It breaks after the third/four app.

I don't like that very much either, it was just an idea to avoid a too crowded header bar.

The solution that I am suggesting don't add extra space. You only remove the icon for the second menu entry and add them to the first level.

Ok, that could work. Feel free to do a mockup. 👍

jancborchardt

Some code nitpicking inline, and bigger design considerations here:

Only showing 4 apps until having the »more apps« menu is too few. Let’s increase it to 8 apps. This will also fix the issue @Espina2 mentioned. Of course on mobile or when the screen gets narrower, the menu should show accordingly to make sure there’s no overflow with the username or avatar.
How about we layout the »more apps« menu like user menu, in a list view. Fits better rather than showing bigger icons in the dropdown than there are in the bar.
If app from more-menu is open, don’t put it first in list. Either:
- put it as last in the list (before the »more apps« menu icon), switching out the one which was there before temporarily
- or just put a triangle below the 3-dot-menu to indicate it, and don’t switch places
Fix placement issues of notifications and search on the right
Consider opening more apps and user menu on hover, like menus on Amazon
Again, we won’t introduce a left bar for the apps again because we had that in the past and decided against it because the apps/content should get as much space as possible. We have a header already.

jancborchardt · 2017-01-17T22:26:29Z

core/css/header.scss

+	text-align: center;
+	color: #1d2d44 !important;
+	vertical-align: top !important;
+    position: relative;


Spaces → tabs :)

jancborchardt · 2017-01-17T22:26:47Z

core/css/header.scss

+	float: left;
+	display: inline-block;
+	vertical-align: top !important;
+    height:44px;


Spaces → tabs

jancborchardt · 2017-01-17T22:26:57Z

core/css/header.scss

+}
+
+#appmenu li a {
+	opacity: 0.6;


No leading 0 required here :)

jancborchardt · 2017-01-17T22:27:08Z

core/css/header.scss

+#appmenu li a {
+	opacity: 0.6;
+	margin: 0;
+	padding: 12px 0px;


No unit required when it’s a 0-value :)

jancborchardt · 2017-01-17T22:28:22Z

core/css/header.scss

+	border-top-right-radius: 0;
+	margin-top: 0;
+	border: none;
+	color: #333;


Should we rather do this with an opacity value, or best do we have a variable for that?

jancborchardt · 2017-01-17T22:29:37Z

core/css/header.scss

+	-moz-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
+	-ms-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
+	-o-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
+	filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));


No leading 0 required for the 0.75 either :)

jancborchardt · 2017-01-17T22:29:56Z

core/css/header.scss

+
+#appmenu li:hover a:before,
+#appmenu li a.active:before {
+    content: " ";


Single quotes in CSS

jancborchardt · 2017-01-17T22:30:03Z

core/css/header.scss

+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border-bottom-color: white;


jancborchardt · 2017-01-17T22:30:18Z

core/css/header.scss

+    pointer-events: none;
+    border-bottom-color: white;
+    border-width: 7px;
+    top:36px;


space after colon

jancborchardt · 2017-01-17T22:30:29Z

core/css/header.scss

+    top:36px;
+    transform: translateX(-50%);
+    left: 50%;
+    z-index: 100;


On this whole block: spaces → tabs ;)

Espina2 · 2017-02-07T11:47:21Z

@jancborchardt

Again, we won’t introduce a left bar for the apps again because we had that in the past and decided against it because the apps/content should get as much space as possible. We have a header already.

This is not a valid point, Like I already said this left menu will have the same space.

I only see advantages with that approach.

First you can navigate directly to a page in a app without open the "home" app page.

The navigation are on the same place and are more natural. Like we have now you change from context from two different locations, one on the "header" and another on the left bar.

Can you say why this is a bad pattern or give some reason to why you think this will not work?

And I want the opinions of all the others designers here
@nextcloud/designers

jancborchardt · 2017-02-14T06:59:17Z

This is not a valid point, Like I already said this left menu will have the same space.

It won’t. We already have the header bar there with room for icons. The left menu will be an additional element.

First you can navigate directly to a page in a app without open the "home" app page.

How is this different from the approach outlined here? Maybe it’s not entirely clear from the screenshot you posted. Please do a detailed mockup in that case.

The navigation are on the same place and are more natural. Like we have now you change from context from two different locations, one on the "header" and another on the left bar.
Can you say why this is a bad pattern or give some reason to why you think this will not work?

Yes, precisely for the reason that they are in the same place. Because the icons will be confused as icons for the other navigation entries, or conflict with navigation entries where there are icons. It will be a mass of icons on the left, some with text, some without. They do not have the same relevance so they don’t need to be in the same place.

Anyhow.

A bigger issue I have here is that we discussed a lot and still didn’t change anything from the status quo. The direct menu as done by @juliushaertl is the top rated app in the store and really useful to let people know we have a bunch of apps – which is not apparent at the moment.
So we should get this change in for Nextcloud 12. @nextcloud/designers @Espina2 don’t forget one of our tenets is to be pragmatic. It’s always iterations. But right now we’re brought to a stop.

eppfel · 2017-02-15T21:20:49Z

I support @jancborchardt, we have to go forward here.

The biggest issue with @Espina2 approach is the horizontal space. And the app navigation + the sidebar is not a typical multi level menu, as the sidebar can function quite differently in different apps.

The biggest issue with the current approach is the mystery meat. But at least it would not be as mysterious as it is now. We could add some height to the header and add labels beneath the app icons. But I think this should not block us implementing it.

Espina2 · 2017-02-15T22:20:20Z

@jancborchardt @eppfel

Like I said more than one time, the horizontal space is the same, it will not add extra space.

What I propose is like this. Have the icon for the app on the left and the pages of the app on the right.

This have exact the same horizontal space as before. So this issue doesn't exist at all. Can you point wich app use the bar different? Because I can't see any advantage with my approach.

@jancborchardt I dont get what you mean with this

or conflict with navigation entries where there are icons. It will be a mass of icons on the left, some with text, some without.

At the moment I don't have the time to make an high fidelity mockup so its the best I can do.

eppfel · 2017-02-15T22:54:18Z

@Espina2

juliusknorr · 2017-03-01T23:09:55Z

@jancborchardt I've rebased and fixed some more issues. I'll try to get this a bit more polished tomorrow. 🙈 The code is still a bit messy. If you want to jump in, feel free to do so. I've updated the todo list in the first post as well.

juliusknorr · 2017-03-03T14:14:39Z

Ok, this should be ready to review now. I've also updated the screenshots in the first post.

cc @jancborchardt @skjnldsv @eppfel @nextcloud/designers

Signed-off-by: Julius Haertl <jus@bitgrid.net>

MorrisJobke

Tested and works in IE11, Firefox, Chrome, Safari 👍

MorrisJobke · 2017-03-16T17:24:44Z

@nextcloud/designers Please review

MariusBluem

Had no problems so far with Safari and Chrome on my instance 💪

LukasReschke

Works nicely

juliusknorr added 2. developing Work in progress design Design, UI, UX, etc. labels Jan 10, 2017

juliusknorr force-pushed the appmenu-experiment branch from c037462 to 336d376 Compare January 10, 2017 11:23

juliusknorr mentioned this pull request Jan 10, 2017

Positioning considerations & improvements juliusknorr/direct_menu#51

Closed

eppfel self-requested a review January 10, 2017 12:27

juliusknorr force-pushed the appmenu-experiment branch from 336d376 to 5c01c9f Compare January 11, 2017 11:36

jancborchardt reviewed Jan 25, 2017

View reviewed changes

skjnldsv mentioned this pull request Jan 25, 2017

Scss variables #3256

Closed

7 tasks

eppfel self-assigned this Feb 7, 2017

jancborchardt added the enhancement label Feb 21, 2017

juliusknorr force-pushed the appmenu-experiment branch from 5c01c9f to 72679af Compare March 1, 2017 23:04

juliusknorr force-pushed the appmenu-experiment branch 2 times, most recently from 71dcb9f to a55c2f7 Compare March 3, 2017 01:15

juliusknorr changed the title ~~[WIP] App menu experiment~~ Show apps in header Mar 3, 2017

juliusknorr added 3. to review Waiting for reviews and removed 2. developing Work in progress labels Mar 3, 2017

juliusknorr mentioned this pull request Mar 14, 2017

Top spinner is hardly visible #3831

Closed

juliusknorr added 12 commits March 16, 2017 11:55

Show app icons in the header

42feab5

Signed-off-by: Julius Haertl <jus@bitgrid.net>

Move active app to the first slot

e3e4cb3

Signed-off-by: Julius Haertl <jus@bitgrid.net>

Generate seperate menu list for header bar

a630e46

Signed-off-by: Julius Haertl <jus@bitgrid.net>

Fix menu issues

61dc78e

Signed-off-by: Julius Haertl <jus@bitgrid.net>

Make app management icon act like a normal app icon

7eae669

Signed-off-by: Julius Haertl <jus@bitgrid.net>

Cleanup SCSS for app menu and fix mobile view

267b89f

Signed-off-by: Julius Haertl <jus@bitgrid.net>

Fix popover positioning after window resize

f58f8f6

Signed-off-by: Julius Haertl <jus@bitgrid.net>

Fix positioning of popovermenu

efc681d

Signed-off-by: Julius Haertl <jus@bitgrid.net>

Make enabling/disabling apps work with the new menu

1d6fba0

Signed-off-by: Julius Haertl <jus@bitgrid.net>

Reduce device width and hide app name when menu is open

25e18b8

Signed-off-by: Julius Haertl <jus@bitgrid.net>

Rebuild menu to keep order of icons correct

7804003

Signed-off-by: Julius Haertl <jus@bitgrid.net>

Fix html formating issues

b8ef616

Signed-off-by: Julius Haertl <jus@bitgrid.net>

juliusknorr force-pushed the appmenu-experiment branch from 8a6325a to b8ef616 Compare March 16, 2017 10:55

MorrisJobke approved these changes Mar 16, 2017

View reviewed changes

MariusBluem approved these changes Mar 16, 2017

View reviewed changes

LukasReschke approved these changes Mar 16, 2017

View reviewed changes

MorrisJobke merged commit cd4ebe2 into master Mar 16, 2017

MorrisJobke deleted the appmenu-experiment branch March 16, 2017 19:03

MariusBluem mentioned this pull request Mar 18, 2017

Make direct_menu incompatible with Nextcloud 12 juliusknorr/direct_menu#59

Merged

Show apps in header #3008

Show apps in header #3008

Conversation

juliusknorr commented Jan 10, 2017 • edited Loading

Screenshots (updated)

ToDo

mention-bot commented Jan 10, 2017

raimund-schluessler commented Jan 10, 2017

skjnldsv commented Jan 10, 2017

MorrisJobke commented Jan 10, 2017

juliusknorr commented Jan 10, 2017 • edited Loading

juliusknorr commented Jan 10, 2017

MariusBluem commented Jan 10, 2017

Espina2 commented Jan 10, 2017

skjnldsv commented Jan 10, 2017

juliusknorr commented Jan 11, 2017

skjnldsv commented Jan 11, 2017

Espina2 commented Jan 11, 2017 • edited Loading

eppfel commented Jan 13, 2017

Spartachetto commented Jan 19, 2017

SonRiab commented Jan 20, 2017

juliusknorr commented Jan 20, 2017 • edited Loading

jancborchardt left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Espina2 commented Feb 7, 2017

jancborchardt commented Feb 14, 2017 • edited Loading

eppfel commented Feb 15, 2017

Espina2 commented Feb 15, 2017 • edited Loading

eppfel commented Feb 15, 2017

juliusknorr commented Mar 1, 2017

juliusknorr commented Mar 3, 2017

MorrisJobke left a comment

Choose a reason for hiding this comment

MorrisJobke commented Mar 16, 2017

MariusBluem left a comment

Choose a reason for hiding this comment

LukasReschke left a comment

Choose a reason for hiding this comment

juliusknorr commented Jan 10, 2017 •

edited

Loading

juliusknorr commented Jan 10, 2017 •

edited

Loading

Espina2 commented Jan 11, 2017 •

edited

Loading

juliusknorr commented Jan 20, 2017 •

edited

Loading

jancborchardt left a comment •

edited

Loading

jancborchardt commented Feb 14, 2017 •

edited

Loading

Espina2 commented Feb 15, 2017 •

edited

Loading