Design guidelines #565

skjnldsv · 2017-09-28T21:30:26Z

@nextcloud/designers

Fix #333

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

jancborchardt

AWESOME! :) You rock @skjnldsv!

See the comments inline. I’d also like us to resolve the Mail app indent (as seen in navigation-menu.png) and maybe we should also add icons to the contacts app sidebar so the navigation-counter.png looks proper too.

jancborchardt · 2017-10-05T17:50:35Z

developer_manual/design/navigation.rst

+Introduction
+=============
+
+The main navigation menu represent the most important part of your app.


But also, I wouldn’t say »most important part of your app« since really the most important part is the content. ;) Maybe more something like »It is the main navigation of your app, so it needs to be simple, organized and responsive.«?

jancborchardt · 2017-10-05T17:51:41Z

developer_manual/design/navigation.rst

+* Simple
+* Responsive
+
+Nextcloud provide a very organized way of building menus.


jancborchardt · 2017-10-05T17:52:04Z

developer_manual/design/navigation.rst

+Utils
+======
+
+Each entry is allowed to have a counter and/or a button for user interraction.


interaction with one r

jancborchardt · 2017-10-05T17:53:08Z

developer_manual/design/navigation.rst

+Menu
+^^^^^
+
+If you need to add a few interractions for your entry, you can put everything in a popover menu.


interactions again, one r ;)

jancborchardt · 2017-10-05T17:54:08Z

developer_manual/design/popovermenu.rst

+What is a popover menu
+=======================
+
+This is a quick menu that open on click. We're usually using the three dots icons on nextcloud.


opens

»For menus, we use the three-dot-icon.« (also »Nextcloud needs to have a capital N ;)

jancborchardt · 2017-10-05T17:54:52Z

developer_manual/design/popovermenu.rst

+* The only allowed menu items elements are **a** and **button**.
+* You can mix between a and button on the same menu (in case of form or direct link) like the example above
+* You need to put the entire menu just after the three dot icon ``<div><span class="icon-more"></span><div class="popovermenu">...</div></div>``
+* You do not need js, css only is ok for positioning. Js is **still** required to handle the hide/show.


Let’s always capitalize JS and CSS as it is done, also so it stands out in the text.

jancborchardt · 2017-10-05T17:55:36Z

developer_manual/design/popovermenu.rst

+* Only **one** ul is allowed.
+* Only **one level** of menu is allowed.
+* Every entry **needs** to have its own icon. This greatly improves the UX.
+* 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)


We should do that automatically though, right? We shouldn’t need to manually mention any px values here?

It is done automatically. This information is for the menu button. Not everyone will use a standard button. For example again, the federationscope menu, the button is not 44px width. :)

jancborchardt · 2017-10-05T17:58:42Z

developer_manual/design/popovermenu.rst

+
+Alignment
+==========
+If you want to align your menu, you can add the class to the main popovermenu div.


Why do we want to make this customizable? It seems to be unnecessary, will make apps work differently, and also will be a problem on mobile if the menu is too far right outside of the viewport.

@jancborchardt this has been implemented and used for the last 8 months... The federationscope menus uses the center class for example.

And the issue of overlapping outside the browser is the same about the height of the menu. It can also overlap on the bottom. :)

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

skjnldsv · 2017-10-06T03:54:42Z

@jancborchardt What do you think of floating figures to illustrate the different parts?
I don't like having them in the middle of the text. I'd like to align them on the right like this:

jancborchardt · 2017-10-06T11:14:34Z

@skjnldsv maybe it's even better to put it to the right of the code it corresponds to, so a bit lower down? :) But both is fine, yep.

jancborchardt · 2017-10-06T11:16:02Z

Oh and an additional comment where you say icons in the menus are important for better UX, let's be more specific and say "Icons are important for quick recognition and to support the text."

pixelipo · 2017-10-06T12:08:26Z

developer_manual/design/navigation.rst

+* The ``app-navigation-entry-utils`` snippet need to be placed right next to the main link of your entry.
+* Maximum **two** items are allowed into the utils section. You can have:
+	* Two buttons
+	* One button and one counter


could you like counter with the Counter section?

Yes! Thx! There is still a lot to do :)

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

Fixed

skjnldsv · 2017-10-07T03:52:28Z

@jancborchardt

jancborchardt · 2017-10-10T17:11:08Z

@skjnldsv that works, yes! If it's possible the code section could be narrower and the image right next to it (without grey container), that would look even better.

+ collapsible animation Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

Signed-off-by: Morris Jobke <hey@morrisjobke.de>

MorrisJobke · 2017-10-23T15:34:17Z

Somehow the pdf build fails. Do we have some LateX-masters on the team?

I tried something - let's see.

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

skjnldsv · 2017-10-23T16:09:26Z

I added a fix too! Seems to work on local! :) finger crossed 🤞

EDIT: DANG IT! It is working on my local setup! :(

Latexmk: Index file 'NextcloudDeveloperManual.idx' was written
Latexmk: Log file says output to 'NextcloudDeveloperManual.pdf'
Latexmk: All targets (NextcloudDeveloperManual.pdf) are up-to-date
make[2] : on quitte le répertoire « /home/admin/documentation/developer_manual/_build/latex »
pdflatex finished; the PDF files are in _build/latex.
make[1] : on quitte le répertoire « /home/admin/documentation/developer_manual »
Developer manual build finished; PDF is updated

skjnldsv · 2017-10-23T16:17:34Z

Drone: Running Sphinx v1.2.3
Me: Running Sphinx v1.6.4

I'll check on this...

MorrisJobke · 2017-10-23T20:30:07Z

Could not import extension sphinxcontrib.phpdomain (exception: No module named sphinxcontrib.phpdomain)

🙈 @skjnldsv

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

skjnldsv · 2017-10-24T03:38:59Z

Success! 🎉 🎉 🎉

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

MorrisJobke · 2017-10-24T11:42:29Z

@skjnldsv Is this ready to merge?

skjnldsv · 2017-10-24T12:09:49Z

I still need some stuff to make!
Not much though!

skjnldsv · 2017-10-24T13:04:39Z

What's left to add:

Main content:
- Breadcrumbs?
- ~~app-content-list?~~ (@jancborchardt )
Overall layout
- Some explanation of our basic rules for a good app content layout? (@nextcloud/designers)
Global rules/guidelines? Like what we tend to do, what we usually do, what is not possible, and various rules (like button = 44x44px)?

Do anyone see something else?
Should we include stuff like how to create a placeholder (colored bg + white big letter, like avatar), or stuff like that?

jancborchardt · 2017-10-24T13:16:48Z

You mean app-content-list (not app-navigation-list) and app-content-detail? Yes that would be good to document. :) From the Contacts app and Mail app ideally.

Breadcrumbs I'm not sure as we don't really use/encourage them anywhere except Files. Would leave out for now tbh.

Explanation of basic rules yes. Includes min click target size 44*44px.

And yes, how to include avatars would be great.

The rest we can do in further pull requests and step by step. :)

skjnldsv · 2017-10-24T13:19:51Z

I could use some help on the rules 😄
I have bigger plans for the app-content-list, so I'll see that in the hackweek I think 😉

In which categorie should we put the avatar code stuff?

jancborchardt · 2017-10-24T13:23:06Z

Yeah, let's best work on it during the hackweek?

Avatars might need a separate section, also cause we have guidelines that every username should have an avatar next to it, and that clicking avatar/name should invoke the person's menu.

MorrisJobke · 2017-10-24T14:35:31Z

Avatars might need a separate section, also cause we have guidelines that every username should have an avatar next to it, and that clicking avatar/name should invoke the person's menu.

I would say, that we should do this in a followup PR.

jancborchardt · 2017-10-24T21:09:18Z

Yep, absolutely. Imo we can do everything additional in a follow-up - I asked long ago if we can merge this already. ;)

MorrisJobke · 2017-10-24T22:28:46Z

Let's merge this and then we can continue in a separate PR. I also will also backport this to stable12 already and we then can also backport the followups. ;)

MorrisJobke · 2017-10-24T22:32:05Z

stable12 d564822 (+29 commits before it)

skjnldsv · 2017-10-25T03:58:15Z

Hum, I need to create my patch for stable 12 compatibility then!! :)

Thanks for merging, this is a big step forward!!

jancborchardt · 2017-10-25T10:06:13Z

Aaaaaawesome! @skjnldsv such a magnificent job! :)

jancborchardt · 2017-10-30T17:34:55Z

By the way @skjnldsv, if you like you can also announce the new doc pages in our forum in the dev category: https://help.nextcloud.com/c/dev

Or maybe even a design blog post is in order? :) cc @jospoortvliet @NinaNC

skjnldsv · 2017-10-30T17:43:25Z

@jancborchardt Let's see this irl when we meet ;)

Initial files

0732532

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

skjnldsv added 2. developing design high labels Sep 28, 2017

skjnldsv added this to the Nextcloud 13 milestone Sep 28, 2017

skjnldsv self-assigned this Sep 28, 2017

Navigation 1

77fc74e

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

juliushaertl mentioned this pull request Oct 3, 2017

App navigation is broken on NC 13 nextcloud/deck#315

Closed

2 tasks

Popovermenu

2fe21d3

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

skjnldsv requested review from MorrisJobke, jancborchardt, ChristophWurst, juliushaertl and pixelipo October 5, 2017 14:22

More pages and some pictures

0139100

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

jancborchardt previously requested changes Oct 5, 2017

View reviewed changes

Grammar fixes and syntax

adabb11

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

pixelipo reviewed Oct 6, 2017

View reviewed changes

skjnldsv added 2 commits October 7, 2017 05:50

Navigation edit, syntax illustrations

b3fcb90

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

Css floating figure on html edit

88d205b

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

skjnldsv requested review from jancborchardt and pixelipo October 7, 2017 03:52

skjnldsv force-pushed the design-update branch from f0dcc1e to 00bd690 Compare October 10, 2017 17:10

Collapsible nav

95fa183

+ collapsible animation Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

Add preamble to raise limit of floats

dd2ea26

Signed-off-by: Morris Jobke <hey@morrisjobke.de>

MorrisJobke force-pushed the design-update branch from dd2ea26 to 6bbd878 Compare October 23, 2017 15:48

Fix pdf loop

2f09d5c

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

skjnldsv force-pushed the design-update branch from 6bbd878 to 2f09d5c Compare October 23, 2017 16:08

skjnldsv force-pushed the design-update branch from a1f382b to 3068abb Compare October 23, 2017 17:18

Drone version bump

d01b2f1

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

skjnldsv force-pushed the design-update branch from 3068abb to d01b2f1 Compare October 24, 2017 03:23

Fixed old css section and added angular example

91fffff

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

MorrisJobke merged commit c2862bd into master Oct 24, 2017

MorrisJobke deleted the design-update branch October 24, 2017 22:28

skjnldsv mentioned this pull request Feb 15, 2018

Standardisation summary nextcloud/server#8374

Closed

Design guidelines #565

Design guidelines #565

Conversation

skjnldsv commented Sep 28, 2017 • edited Loading

jancborchardt left a 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

skjnldsv commented Oct 6, 2017

jancborchardt commented Oct 6, 2017

jancborchardt commented Oct 6, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

skjnldsv commented Oct 7, 2017

jancborchardt commented Oct 10, 2017

MorrisJobke commented Oct 23, 2017

skjnldsv commented Oct 23, 2017 • edited Loading

skjnldsv commented Oct 23, 2017

MorrisJobke commented Oct 23, 2017

skjnldsv commented Oct 24, 2017

MorrisJobke commented Oct 24, 2017

skjnldsv commented Oct 24, 2017

skjnldsv commented Oct 24, 2017 • edited Loading

jancborchardt commented Oct 24, 2017

skjnldsv commented Oct 24, 2017

jancborchardt commented Oct 24, 2017

MorrisJobke commented Oct 24, 2017

jancborchardt commented Oct 24, 2017

MorrisJobke commented Oct 24, 2017

MorrisJobke commented Oct 24, 2017

skjnldsv commented Oct 25, 2017

jancborchardt commented Oct 25, 2017

jancborchardt commented Oct 30, 2017

skjnldsv commented Oct 30, 2017

skjnldsv commented Sep 28, 2017 •

edited

Loading

skjnldsv commented Oct 23, 2017 •

edited

Loading

skjnldsv commented Oct 24, 2017 •

edited

Loading