Uploaded image for project: 'Magnolia UI'
  1. Magnolia UI
  2. MGNLUI-5783

[Restyling] Change style in tab sheets

XMLWordPrintable

    • Icon: Task Task
    • Resolution: Unresolved
    • Icon: Neutral Neutral
    • None
    • None
    • widgetset
    • None

      MGNLUI-5777 introduces tabs into the action bar.

      In relation to that the main tab sheet needs to look hierarchically more important than the tabs in the new action bar. The main tab sheet has to be the primary visual anchor and orientation for the user so he's knows where (in the application) he is. The tabs in new action bar are secondary. So for the main tab sheet we are proposing to increase the font size and change characters to upper case.

      1) Primary tab sheet: Restyle the main tab sheet as specified here:

      https://zpl.io/2yZK0vq

      • Font size 16px
      • Characters upper case
      • Roboto medium for active tab
      • Roboto light for default tabs

      2) Rename the sub app tabs so it is clear what the tab stands for:

      • Make sure the sub app tab displays the name of the content (and not the path as it is currently)
        • e.g. Tours: tour name
        • e.g. Pages: page name
        • e.g. Assets: asset name
        • e.g. Stories: story title
        • e.g. Notifications/tasks: notification/task titles
        • e.g. Personas: persona name
        • etc

      3) Secondary tab sheet: Restyle tab sheet in form layout so they align with the ones in the new action bar

      https://zpl.io/29xNxQl

      • Font size 13px
      • Characters upper case
      • Roboto medium for active tab
      • Roboto light for default tabs
      • Border 1px #DBDBDB
      • Add border 1px around content

        Acceptance criteria

              Unassigned Unassigned
              ahietala Antti Hietala
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

                Created:
                Updated:

                  Task DoR