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

UX design for filterable/sortable grid

    XMLWordPrintable

Details

    • Task
    • Resolution: Fixed
    • Neutral
    • 6.1
    • None
    • framework
    • None
    • Foundation 9
    • 5

    Description

      Migration of the definitions app to new framework uses vaadin grid:

      • search box is now included in the column header
      • filters are gone in favour of column header filters (origin, type, module)
      • group by is gone in favour of sorting/filtering by any column
      • problems subapp replaced by severity column in the browser (to be reevaluated)
        • problem icon shows on the problematic property and all the parent nodes, hover shows the actual problem (might be shown in a dialog via an action as well)

       

      UX & Visual design

      • Title row height: 45px
      • Label font: Roboto light, 10px, letter spacing -0.25, #232323, opacity 60%
      • Input field font: Roboto regular, 14px, letter spacing -0.5, #232323
      • On click in input field, the field remains grey (don't change to white)
      • On hover over icons show grey background circle (same as for all M6 icons), circle:22x22px, #ebebeb, icon font size: 18 or 20px (see mockup)
      • Select box dropdown follows same design as other dropdowns in M6 (see mockup)
      • Click on arrow down/up re-sort the column
      • Find detailed specs on zeplin here https://zpl.io/aX3YlJM

       

       

      Checklists

        Acceptance criteria

        Attachments

          Issue Links

            Activity

              People

                rkovarik Roman Kovařík
                rkovarik Roman Kovařík
                Votes:
                1 Vote for this issue
                Watchers:
                6 Start watching this issue

                Dates

                  Created:
                  Updated:
                  Resolved:

                  Checklists

                    Task DoR

                    Time Tracking

                      Estimated:
                      Original Estimate - Not Specified
                      Not Specified
                      Remaining:
                      Remaining Estimate - 0d
                      0d
                      Logged:
                      Time Spent - 2d 3.35h
                      2d 3.35h