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

Offer different layout options in list and tree views

XMLWordPrintable

      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.

        Acceptance criteria

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

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

                Created:
                Updated:
                Resolved:

                  Task DoD