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

          Issue Links

            Activity

            Hide
            imachado Isabel Machado added a comment -

            Mockups attached

            Show
            imachado Isabel Machado added a comment - Mockups attached
            Hide
            imachado Isabel Machado added a comment - - edited

            On smaller screens (mostly) if we have more tabs than the visible ones, we should give some indicator that we have a horizontal scrollable possibility - if possible, not a scrollbar - since this scenario will mainly happen in touchable screens/smaller devices.
            But this requires an extra effort in terms of implementation, so it should be considered as a possible improvement in the future.
            Consider scrollable tabs https://material.io/design/components/tabs.html#scrollable-tabs

            Show
            imachado Isabel Machado added a comment - - edited On smaller screens (mostly) if we have more tabs than the visible ones, we should give some indicator that we have a horizontal scrollable possibility - if possible, not a scrollbar - since this scenario will mainly happen in touchable screens/smaller devices. But this requires an extra effort in terms of implementation, so it should be considered as a possible improvement in the future. Consider scrollable tabs https://material.io/design/components/tabs.html#scrollable-tabs
            Hide
            hudson Jenkins added a comment -

            SUCCESS: Integrated in master/addons_nuxeo-web-ui-master #1057
            NXP-25104: move document actions to page header and update page-item L&F (afjusto: 5ce5327174afb221a0a60cc7a946ea7a03104d33)

            Show
            hudson Jenkins added a comment - SUCCESS: Integrated in master/addons_nuxeo-web-ui-master #1057 NXP-25104 : move document actions to page header and update page-item L&F (afjusto: 5ce5327174afb221a0a60cc7a946ea7a03104d33 )

              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