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

[Restyling] Change style in tab sheets

    XMLWordPrintable

Details

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

    Description

      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

      Checklists

        Acceptance criteria

        Attachments

          Issue Links

            Activity

              People

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

                Dates

                  Created:
                  Updated:

                  Checklists

                    Task DoR