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

RESOLVED FIXED in Firefox OS v2.0

Status

RESOLVED FIXED
5 years ago
5 years ago

People

(Reporter: pivanov, Assigned: pivanov)

Tracking

unspecified
1.4 S6 (25apr)
x86
Mac OS X
Dependency tree / graph

Firefox Tracking Flags

(b2g-v2.0 fixed)

Details

(Whiteboard: ux-tracking, visual design, visual-tracking, bokken )

Attachments

(3 attachments)

Comment hidden (empty)
Depends on: 967843
Summary: [VDR][Settings] → [VDR][Settings] Apply Buttons and Input areas [BB]
Created attachment 8373151 [details] [review]
patch for Gaia/master
Attachment #8373151 - Flags: review?(arnau)
Please do not merge this, as this feature could be for 1.5, waiting for Jaime confirmation
Pavel,
In wifi > Advanced settings looks like "manage networks" buttons has disappeared in this PR.
Could you please check that?
Hey Arnau,

Thanks for this one :) I fixed the problem
Flags: needinfo?(arnau)
LGTM :)
But let's wait for 1.5 :(
Flags: needinfo?(arnau)
Attachment #8373151 - Flags: review?(fabien)
Attachment #8373151 - Flags: review?(fabien) → review?(ehung)

Updated

5 years ago
Attachment #8373151 - Flags: review?(ehung) → review?(arthur.chen)
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?
Attachment #8373151 - Flags: review?(arthur.chen)
Flags: needinfo?(pivanov)
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.
Flags: needinfo?(pivanov)
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?
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
Created attachment 8406007 [details]
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.
Flags: needinfo?(pabratowski)
Flags: needinfo?(hhsu)
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 :)
Yes this is now the intended look for a list item that takes you to a new page.
Flags: needinfo?(pabratowski)

Comment 13

5 years ago
Created attachment 8406557 [details]
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.
Flags: needinfo?(hhsu)
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?
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.
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>
Attachment #8373151 - Flags: review?(arthur.chen)
Comment on attachment 8373151 [details] [review]
patch for Gaia/master

Please check the comments in github, thanks.
Attachment #8373151 - Flags: review?(arthur.chen)
Attachment #8373151 - Flags: review?(arnau) → review?(arthur.chen)
Comment on attachment 8373151 [details] [review]
patch for Gaia/master

r=me, thanks!
Attachment #8373151 - Flags: review?(arthur.chen) → review+
Thanks :) 

Landed on master:
https://github.com/mozilla-b2g/gaia/commit/7b6b1bd25c626860267861521f040ac38cd30b8f
Status: NEW → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED

Updated

5 years ago
status-b2g-v2.0: --- → fixed
Target Milestone: --- → 1.4 S6 (25apr)
You need to log in before you can comment on or make changes to this bug.