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

Offer different layout options in list and tree views




      The layout of the list and tree view is a compromise between a compact list of elements and a generous enough layout to work well on tablet devices. It works well for e.g. a small set of pages, but we also know (and also get feedback that supports this) that it fails in a variety of other cases:

      • Tree levels are not always clearly discernible, as the large padding between rows and the horizontal lines dissociates content that would be easier to read if it was shown in a more compact layout.
      • We have some trees and lists with a lot of nodes, sometimes even on a single level. For these trees, it would be beneficial to see significantly more rows at a time to avoid heavy scrolling.
      • The rows and arrows on tablet devices are actually still too small on tablets to work comfortably and safely - we had a larger padding before, which worked best on these devices.

      There's actually no one layout that works well on all devices and in all views. We thus want to offer the user the choice between a small set of layout options with different density levels: a generous, a normal (the current) and a compact appearance of a list and a tree.

      • For regular, "non-technical" content such as Pages and Assets, Events, etc., we show lists and trees using the current, normal layout on desktops and using the generous layout on tablets.
      • For "technical" content or sets with lots of items, we would use the compact layout on desktops and the normal layout on tablets.
      • For every tree and list, the user has the option to choose a different layout than the default layout still.

      This issue mainly covers the different layout options and how we choose them. Next steps will be to persist a choice across app restarts and to allow to choose a layout for a given layout in a user's profile.


        1. 01 Density.compact.png
          01 Density.compact.png
          621 kB
        2. 02 Density.normal.png
          02 Density.normal.png
          629 kB
        3. 03 Density.generous.png
          03 Density.generous.png
          631 kB
        4. 10 View options.tree.png
          10 View options.tree.png
          461 kB
        5. 11 View options.list.png
          11 View options.list.png
          460 kB
        6. 12 View options.thumbnail.png
          12 View options.thumbnail.png
          440 kB
        7. 20 Density view options.png
          20 Density view options.png
          461 kB
        8. 21 Density view options.png
          21 Density view options.png
          469 kB
        9. 22 Density view options.png
          22 Density view options.png
          656 kB
        10. 23 Density view options.png
          23 Density view options.png
          652 kB
        11. 24 Density view options.png
          24 Density view options.png
          652 kB

          Issue Links



              Unassigned Unassigned
              weder Andreas Weder
              0 Vote for this issue
              3 Start watching this issue


                Date of First Response: