Filepicker design improvements #11522

jancborchardt · 2018-10-01T19:53:40Z

Lots of improvements, check it out @nextcloud/designers:

Before & after, mobile:

Before, desktop:

After, desktop:

(And no, somehow it didn’t work to ellipsize long filenames in the list on mobile … tables.)

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

weeman1337 · 2018-10-01T19:58:10Z

@jancborchardt very nice!

Info: #11315 is about the broken button layout in version 13.
c2a956f should be backported to 13 and 14 once this PR is approved.

weeman1337

Call me picky :)

The buttons are not aligned:

I don't know if it's by intent. Otherwise the border color variable may be the wrong one...

If the path is long enough the dialog is partly "messed up" again:

jancborchardt · 2018-10-01T20:29:51Z

@weeman1337 ah cool, only saw #11315 now! :) Then I guess this fixes #11315

The buttons are not aligned:
I don't know if it's by intent. Otherwise the border color variable may be the wrong one...

Yeah, it’s not really intentional, but fixing is something for a different pull request. :) There is white border on the primary button mainly for when it’s on background (like on the log in page and error pages etc.).

If the path is long enough the dialog is partly "messed up" again:

Yep – also something for a different pull request. Actually here we should also use the ellipsis that is used in Files (but does not work at the moment): #11520 → different pull request too. :)

MorrisJobke

Teste and works 👍

MorrisJobke · 2018-10-01T20:59:07Z

codecov upload failed -> merge

skjnldsv · 2018-10-02T05:03:55Z

Common folks, not even 1h opened. I know we want things to get in, but regarding design, don't ask input of the designer team if this is to merge 1h after ^^

I really find the round border out of place. They feel like an old design and are too different from our current design. Please revert.

pixelipo · 2018-10-02T06:45:34Z

apps/files/js/fileactions.js

@@ -662,7 +662,7 @@
 					if (permissions & OC.PERMISSION_UPDATE) {
 						actions = OC.dialogs.FILEPICKER_TYPE_COPY_MOVE;
 					}
-					OC.dialogs.filepicker(t('files', 'Target folder'), function(targetPath, type) {
+					OC.dialogs.filepicker(t('files', 'Choose target folder'), function(targetPath, type) {


Shouldn't it be "Select" instead of "Choose"?

"Choose" seems a tad less technical, no?

@jancborchardt Select looks to be much more standard. The only place I found "Choose" was in OneDrive and even they seem to be interchanging the 2 terms:
https://support.office.com/en-us/article/Choose-which-OneDrive-folders-to-sync-to-your-computer-98b8b011-8b94-419b-aa95-a14ff2415e85

pixelipo · 2018-10-02T06:47:29Z

core/css/css-variables.scss

@@ -34,6 +34,7 @@
 	--color-border: $color-border;
 	--color-border-dark: $color-border-dark;
 	--border-radius: $border-radius;
+	--border-radius-large: $border-radius-large;


I don't think we should go with these extremely rounded borders. That would in fact mean that we would have to make the same changes to other (much smaller) popovers where it would look totally out of place.

@pixelipo see comment – no, the border-radius large is only for the big modal dialogs (welcome screen, this move/copy etc.)

@jancborchardt but what if a popover has a button?

pixelipo · 2018-10-02T06:48:57Z

core/css/variables.scss


 // light border like file table or app-content list
 $color-border: nc-darken($color-main-background, 7%) !default;
 // darker border like inputs or very visible elements
 $color-border-dark: nc-darken($color-main-background, 14%) !default;
 $border-radius: 3px !default;
+$border-radius-large: 20px;


MorrisJobke · 2018-10-02T06:53:26Z

I really find the round border out of place. They feel like an old design and are too different from our current design. Please revert.

We should then not revert the whole thing, but only the border radius change.

skjnldsv · 2018-10-02T06:55:17Z

We should then not revert the whole thing, but only the border radius change.

Of course :)
The pr is really good aside from the radius! 📐

jancborchardt · 2018-10-02T07:58:27Z

@pixelipo @skjnldsv for reference, the border-radius-large is only intended for the modal dialogs (like this move/copy, first run wizard, etc.). Not for other popovers.

But feel free to make a pull request to adjust the border-radius with before/after screenshots. And regarding feeling like an old design, it was inspired by the current macOS/iOS modals – which do have a little less border-radius though, yes.

pixelipo · 2018-10-02T08:06:07Z

@jancborchardt NC design seems more closely related to the Material design, where border-radius is similar to what we had (3px):

jancborchardt · 2018-10-02T08:29:37Z

A follow-up with adjustment and reasoning here: #11536

@pixelipo we’re not really following Material Design, and it’s good that we’re not just doing it dogmatically but pick and choose what is best. There’s this (quite old and possibly not correct) article about rounded rectangels: http://uiandus.squarespace.com/blog/2009/7/27/realizations-of-rounded-rectangles.html
Basically TL;DR: Rounded corners are not only there for looks, but also the feel of being less aggressive and (possibly) for less cognitive load, cause corners are more actively recognized.

Just because "iOS did it first", of course Android and especially Windows Phone (R.I.P. ☠) had to do it slightly different to have different branding – it isn’t particularly rooted in actual ergonomics.
And still you see that Android uses for example circular icons, and of course circular avatar containers.

jancborchardt added 5 commits October 1, 2018 20:32

Refine wording from 'Target folder' to 'Choose target folder'

86d5bfd

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

Fix buttons wrapping on long folder names

c2a956f

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

Fix breadcrumbs in file picker

5ed0062

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

Fix long folder names in picker, prevent horizontal scroll

3b7c6e7

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

Improve overall container style, radius and shadow

36062fe

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

jancborchardt added enhancement design Design, UI, UX, etc. 3. to review Waiting for reviews feature: filepicker labels Oct 1, 2018

jancborchardt added this to the Nextcloud 15 milestone Oct 1, 2018

jancborchardt requested review from juliusknorr, kevgathuku, weeman1337 and skjnldsv October 1, 2018 19:53

weeman1337 reviewed Oct 1, 2018

View reviewed changes

weeman1337 approved these changes Oct 1, 2018

View reviewed changes

MorrisJobke approved these changes Oct 1, 2018

View reviewed changes

MorrisJobke merged commit 8799c6e into master Oct 1, 2018

MorrisJobke deleted the filepicker-design branch October 1, 2018 20:59

weeman1337 mentioned this pull request Oct 1, 2018

[13] Fixes the move/copy picker buttons #11524

Merged

This was referenced Oct 1, 2018

[14] Fixes the move/copy picker buttons #11525

Merged

Lower button cut off in the destination folder dialog #11315

Closed

pixelipo reviewed Oct 2, 2018

View reviewed changes

skjnldsv mentioned this pull request Oct 2, 2018

Fix border-radius too big #11534

Closed

nextcloud-bot mentioned this pull request Oct 18, 2018

Comment indicator display improvements #11904

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Filepicker design improvements #11522

Filepicker design improvements #11522

jancborchardt commented Oct 1, 2018 •

edited by weeman1337

Loading

weeman1337 commented Oct 1, 2018 •

edited

Loading

weeman1337 left a comment

jancborchardt commented Oct 1, 2018

MorrisJobke left a comment

MorrisJobke commented Oct 1, 2018

skjnldsv commented Oct 2, 2018

pixelipo Oct 2, 2018

jancborchardt Oct 2, 2018

pixelipo Oct 2, 2018

pixelipo Oct 2, 2018

jancborchardt Oct 2, 2018

pixelipo Oct 2, 2018

pixelipo Oct 2, 2018

MorrisJobke commented Oct 2, 2018

skjnldsv commented Oct 2, 2018

jancborchardt commented Oct 2, 2018

pixelipo commented Oct 2, 2018

jancborchardt commented Oct 2, 2018

Filepicker design improvements #11522

Filepicker design improvements #11522

Conversation

jancborchardt commented Oct 1, 2018 • edited by weeman1337 Loading

weeman1337 commented Oct 1, 2018 • edited Loading

weeman1337 left a comment

Choose a reason for hiding this comment

jancborchardt commented Oct 1, 2018

MorrisJobke left a comment

Choose a reason for hiding this comment

MorrisJobke commented Oct 1, 2018

skjnldsv commented Oct 2, 2018

pixelipo Oct 2, 2018

Choose a reason for hiding this comment

jancborchardt Oct 2, 2018

Choose a reason for hiding this comment

pixelipo Oct 2, 2018

Choose a reason for hiding this comment

pixelipo Oct 2, 2018

Choose a reason for hiding this comment

jancborchardt Oct 2, 2018

Choose a reason for hiding this comment

pixelipo Oct 2, 2018

Choose a reason for hiding this comment

pixelipo Oct 2, 2018

Choose a reason for hiding this comment

MorrisJobke commented Oct 2, 2018

skjnldsv commented Oct 2, 2018

jancborchardt commented Oct 2, 2018

pixelipo commented Oct 2, 2018

jancborchardt commented Oct 2, 2018

jancborchardt commented Oct 1, 2018 •

edited by weeman1337

Loading

weeman1337 commented Oct 1, 2018 •

edited

Loading