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

UX design for filterable/sortable grid

XMLWordPrintable

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

      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

       

       

        Acceptance criteria

          1. definitions column filtering.png
            55 kB
            Anja von Gunten
          2. definitions column filtering dropdown.png
            82 kB
            Anja von Gunten
          3. definitions column filtering hover.png
            60 kB
            Anja von Gunten
          4. definitions column filtering variationA.png
            56 kB
            Anja von Gunten
          5. definitions column filtering variationB.png
            56 kB
            Anja von Gunten
          6. Screenshot 2019-04-01 at 13.23.07.png
            164 kB
            Roman Kovařík
          7. Screenshot 2019-04-11 at 08.46.50.png
            8 kB
            Roman Kovařík
          8. Screenshot 2019-04-11 at 14.50.44.png
            184 kB
            Roman Kovařík
          9. Screenshot 2019-04-18 at 14.04.06.png
            748 kB
            Roman Kovařík
          10. sorting.mov
            196 kB
            Roman Kovařík

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

                Created:
                Updated:
                Resolved:

                  Task DoR

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