Material buttons and checkboxes

[AndyScherzinger]

Started a followup branch material_buttons and PR to #1076 as per discussion with @davivel

Things being implemented on this branch (already):

• material design buttons --> DONE
• material design check boxes on multi-select lists --> DONE

Things I would start working on (subject to discussion):

• margin/padding according to material guidelines --> DONE
• recycler views instead of list views --> POSTPONED see MATERIAL DESIGN: As an OC user I want that the new list & grid components from Material Design replace the current so that performance is improved in folders with hundreds of files & images #984
• replace third party grid implementation with android's grid layout implementation-> POSTPONED see MATERIAL DESIGN: As an OC user I want that the new list & grid components from Material Design replace the current so that performance is improved in folders with hundreds of files & images #984

pinging @davivel @jancborchardt @tobiasKaminsky @masensio for the discussion

[AndyScherzinger]

First screenshots for discussion especially with @jancborchardt

button on login screen

multi select check boxes and buttons (on lollipop device)

multi select check boxes and buttons (on Android 15 device) --> See the problem with not having a shadow on the button

[jancborchardt]

@AndyScherzinger wow, you're awesome! :)
The last screenshot is strange as you say – also the triangle in the top bar has a whole bunch of whitespace.

[AndyScherzinger]

The whitespace is fine, this also happens on lollipop - it depends on the longest path name in the chooser, thus the size varies per folder :)

[jancborchardt]

@AndyScherzinger that’s kind of strange though, no? It seems because the dropdown arrow is floating (unlike for a dropdown box) it should always stick next to the text.

[AndyScherzinger]

Yeah, I guesss. It still seems to be the Google desired (?!) behaviors...

[AndyScherzinger]

@purigarcia can you check the button's look and feel for Android 4.1/4.0 on a device? My screenshots for pre lollipop are done in an emulator, so I am not sure a "real" device would render them the exact same way.

On the other hand, the contrast is very low (light background color and light button coloring), @jancborchardt any opinion on that? Maybay make the buttons blue (like the action bar?). This would solve the rendering issue (in a pragmatic way)

[jancborchardt]

@AndyScherzinger I would definitely not make both buttons dark blue. Maybe the primary button (in this case »Upload«) should be differently colored – try #35537a (same as the highlight color, also what we use in the web interface for primary buttons).

[AndyScherzinger]

@jancborchardt see attached the primary button in blue with the secondary one in grey or white

_Lollipop 5.1:_

or

_Android 4.0:_

or

[jancborchardt]

@AndyScherzinger nice! I’d say the first version of each is better, with the other button being grey rather than white.

[AndyScherzinger]

_Fixed Button coloring_

[jancborchardt]

Great! :) 👍

[AndyScherzinger]

For some reason I got the highlight color of the textfield fixed on this branch (more styling done on here already), but it doesn't work on the material_toolbar branch (yet) :( - So maybe leave it on here and take this PR to be a fix for the bug on PR #1076 ?

[AndyScherzinger]

PR is ready for Test imho, what do you think @jancborchardt @purigarcia ?

[jancborchardt]

I think it’s awesome, as I said 👍 :)

[AndyScherzinger]

@jancborchardt Danke für die Blumen :) - see attached the standard folder view. It is a minor change but a change nevertheless. According to the material Guidelines I changed the standard item padding to 16dp and the icon size in the list items to 32dp. This adds up to slightly more whitespace (which is good imho) but I something I like to mention just to make sure this change isn't missed in the review and any feedback has been considered.

[tobiasKaminsky]

Code looks fine to me, a quick test in an emulator (nexus 5) also looks fine 👍

[AndyScherzinger]

Great! Thanks for the code review @tobiasKaminsky

Is this PR fine design wise @jancborchardt
Is this PR fine code wise @davivel @masensio

[jancborchardt]

👍 design wise as said before. :)

[AndyScherzinger]

Sweet, so code review from the ownCloud Team would be next I guess, @davivel @rperezb @masensio

BTW: Could be create a new label for this kind of task, as in Ready4CodeReview or something like that?

[tobiasKaminsky]

BTW: Could be create a new label for this kind of task, as in Ready4CodeReview or something like that?

See #1130, there I suggested this already.

[AndyScherzinger]

👍

[rperezb]

@AndyScherzinger, yes I know, this is very appreciated! it´s on the backlog.
Currently we are focus on share with users: #880
Developing this feature, @masensio detected that it would be great to have included this pr: #1065 and I'm about the check it
Besides, it would be active on our end soon this one: #1109
Having said, yes, we will check it...not sure when, sorry

[AndyScherzinger]

Aaaaah! @davivel I made a big mistake and pushed this branch to master instead of the other way round. Are you able to revert my push/commit in any way? I'm very Sorry!!!!

[davivel]

Don't worry, I'll revert it.

[davivel]

Master fixed, but the PR is not recovered by Github. New PR, same branch in #1209

[AndyScherzinger]

Thanks a lot @davivel !!!! 👍

[AndyScherzinger]

Just for documentation: this has been merged to master via #1209 now