Uploaded image for project: 'Nuxeo Platform'
  1. Nuxeo Platform
  2. NXP-25104

New Default layout

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Resolved
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 10.3
    • Component/s: Web UI

      Description

      Main changes
      Pills pass for a horizontal scrollable menu on the bottom on the top toolbar
      Actions pass for the top toolbar, aligned right.

      Reasons that lead to this solution
      Pills on the topbar don't scale & don't perform well on smaller screens - getting into conflict with the Document/Container name and breadcrumbs
      Actions under the topbar, create a duplication of actions possibilities, when we have selection actions showing - this lead to recurrent errors by several users.
      This new default layout will stop having 2 slots of actions visible and the pills will work as tabs on a horizontal menu, that will be scrollable (left/right) on smaller screens.

      General Styling coordinates for the new layout
      Tabs menu
      The font should follow the .heading class with Font-size: 1rem
      +
      Padding: 5,10,5,10
      Border bottom on active tab, with 2px with the active colors of the theme (the label of the tab should assume the same theme color on hover and when selected)
      hover: var(--nuxeo-primary-color);
      active: var(--nuxeo-secondary-color);

      The shadow of the main page toolbar div should be kept, and fall on top of the tabs toolbar.

      Actions slot
      Should pass to the top, aligned right (in place of the previous pills) & as a next improvement, we should define a limit of always visible actions.

      In smaller screens, to avoid confusion with the title and breadcrumbs, we should include an ellipsis menu, having the actions represented by labels on a dropdown.
      Eventually consider: https://developer.xamarin.com/api/field/Android.Resource+Attribute.ShowAsAction/

      General mockups available here: https://projects.invisionapp.com/freehand/document/GcxFa5ZxT

        Attachments

        1. actions-on-top.png
          132 kB
          Isabel Machado
        2. new_layout_on-doc-view.png
          245 kB
          Isabel Machado
        3. Selecion-actions-on-top.png
          129 kB
          Isabel Machado

          Issue Links

            Activity

              People

              • Votes:
                1 Vote for this issue
                Watchers:
                3 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 1 day
                  1d