969484 - [VDR][Settings] Apply Buttons and Input areas [BB]

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::Settings, defect)

Comment 1

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Attachment: patch for Gaia/master

Comment 2

[Maria Angeles Oteo (:oteo)]

Please do not merge this, as this feature could be for 1.5, waiting for Jaime confirmation

Comment 3

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

Pavel,
In wifi > Advanced settings looks like "manage networks" buttons has disappeared in this PR.
Could you please check that?

Comment 4

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Hey Arnau,

Thanks for this one :) I fixed the problem

Comment 5

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

LGTM :)
But let's wait for 1.5 :(

Comment 6

[Arthur Chen [:arthurcc][inactive after 6/30]]

Comment on attachment 8373151 [details] [review]
patch for Gaia/master

Based on my understanding, the refreshed UX spec defines two types of buttons in settings app: action button and list button. Currently two types of elements (<button> and <a class="menu-item">) in settings app both behave as a list button. IMHO we should replace all <button> with <a class="menu-item"> before the visual refresh. Does it make sense to you?

Comment 7

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

Arthur,
Most buttons in Setting are list buttons.
The way they get the styles only depends if they are inside a ul li tags (lit buttons).
That applies both button and a[role="button"], so I don't think we need to change tag names.
But it would be good after landing this patch, going through all screens with the interaction/visual design team and fine-tune all buttons, in case any of the was using the wrong type.

Comment 8

[Arthur Chen [:arthurcc][inactive after 6/30]]

I was just thinking if they look the same and behave the same, the html code should also be the same. Or did I miss the differences among these types of items?

Comment 9

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

List buttons are meant to choose between a large option.
Default or "special" buttons (rounded ones) are those to trigger a main action.
A good example to see the difference is in modals:
http://buildingfirefoxos.com/building-blocks/action-menu.html

Comment 10

[Arthur Chen [:arthurcc][inactive after 6/30]]

Attachment: comparison

Arnau, it seems that we are referring to different list buttons. :p

The attachment shows the result after applying the patch. The list buttons now look like ordinary list items (list buttons in the incoming UX spec).

Harley, Przemek, could you explain more about this? Thanks.

Comment 11

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

Ooops sorry, had not seen the image.
Please refer to this image:
https://bug981887.bugzilla.mozilla.org/attachment.cgi?id=8392200
to see all available buttons we have after the refresh.

The one you are asking for has already been approved by Przemek.
This is our default list button to show something will be opened in another screen.
And has no border :)

Comment 12

[Przemek Abratowski [:przemek] UX]

Yes this is now the intended look for a list item that takes you to a new page.

Comment 13

[Harly Hsu[:harly]]

Attachment: Screen Shot 2014-04-15 at 9.58.30 AM.png

Hi Arnau,
I think what Arthur means is that the main page in Settings should also be list button, and to do so, we may need to change the current type of button for main Settings page. I had an offline discussion with Przemek, he also agrees that main page for Settings should use list button.

Comment 14

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

Harly,
I've seen several places in Settings where we should be using the arrow buttons (let's call it that way, because list buttons are the squared ones).
Does make sense if we land this patch only to use the new styles and create a follow up to fix incorrect types?

Comment 15

[Arthur Chen [:arthurcc][inactive after 6/30]]

Hi Arnau, I am fine with landing the patch and using another bug to change the incorrect types. I'd just like to ensure that the HTML structure for arrow buttons remains the same as the following:

<li>
  <a href="#panelId"></a>
<li>

This is more straightforward for expressing the behavior of navigating to other panels.

Comment 16

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

Arthur,
You could use both buttons and anchors (using role="button") with class="icon icon-view" inside a list:
    <ul>
      <li>
        <button class="icon icon-view">
          Side navigation
        </button>
      </li>
      <li>
        <a role="button" class="icon icon-view">
          Side navigation
        </a>
      </li>
    </ul>

Comment 17

[Arthur Chen [:arthurcc][inactive after 6/30]]

Comment on attachment 8373151 [details] [review]
patch for Gaia/master

Please check the comments in github, thanks.

Comment 18

[Arthur Chen [:arthurcc][inactive after 6/30]]

Comment on attachment 8373151 [details] [review]
patch for Gaia/master

r=me, thanks!

Comment 19

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Thanks :) 

Landed on master:
https://github.com/mozilla-b2g/gaia/commit/7b6b1bd25c626860267861521f040ac38cd30b8f