Skip to content

Instantly share code, notes, and snippets.

@alivedise

alivedise/gist:3232005

Created August 2, 2012 00:44
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save alivedise/3232005 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save alivedise/3232005 to your computer and use it in GitHub Desktop.
Download ZIP
System UI hierarchy
Raw
gistfile1.md

Hi,

https://github.com/mozilla-b2g/gaia/issues/2039 I am dealing with a issue about zIndex audit, I would refactor system-app dom structure and style tremendously. This mail is to throw my idea and plan.

The story

  1. System app forms our UI base
  2. System app contains many intractable UI part
  3. All UI parts has some kind of hierarchy

The problems

  1. We have z-index nightmare.
  2. Something need to be resized when statusbar resized and/or keyboard poped.
  3. Fullscreen app z-index issue ** Fullscreen is designed to have max zIndex value in css, hence only the order in DOM structure could overlay upon full screened app.

The plan

First of all, list all modules(have UI here) here with some comments

  1. System-overlay 1.a Volume 1.b USB 1.c Battery 1.d XXX overlay…
  • SystemOverlay < Everything
  • Do not related to status bar height
  • Do not related to keyboard visible/height
  • Newest (system) overlay would overwrite the elder (system) overlay?

System overlay could be collected in single container

  1. List menu 2.a Sleep menu
  • Everything < Sleep menu < SystemOverlay 2.b Context menu 2.c XXX menu…
  1. Attention screen 3.a Call screen 3.b Alarm screen
  • Everything < Lockscreen < Attention screen
  • Call screen would be affected by status bar height?
  • Alarm attention screen would be affected by status bar height?
  • Attention should be up full screened app. ** CASE: For Android(My S3), when attention screen pops(LINE or Alarm), the full-screened app turn black and then the status bar drop down, as if now is not at fullscreen mode. ** CASE: For iOS(iphone S4), when attention screen pops(LINE or Alarm), the full-screened app stay paused and the attention screen overlay on the app. No status bar drops down. *** Need UX input, I prefer first since our attention screen design acts more like Android.
  1. Statusbar
  2. Utility-tray
  • Keyboard < Utility-tray < StatusBar

  1. Lockscreen Camera

  2. Lockscreen

  3. Cardview

  4. Modal dialog

10.Special Input Overlay 10.a Value Selector 10.b Date Picker 10.c Time Picker

  1. Popup container

  2. Trusted dialog/Privileged dialog

  3. Keyboard-overlay

  4. Keyboard

  5. App window

The html

Alive C. Kuo, Front end engineer, Mozilla Taiwan alive@mozilla.com

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment