Uploaded image for project: 'Magnolia UI'
  1. Magnolia UI
  2. MGNLUI-633 Improve visual appearance of trees and lists
  3. MGNLUI-100

Fix alignment of column headers and values in lists and trees

XMLWordPrintable

    • Icon: Sub-task Sub-task
    • Resolution: Fixed
    • Icon: Major Major
    • 5.0
    • 5.0
    • design, tree/list
    • Beta 2

      In all apps I've visited, the column title and the values in the rows below are not properly horizontally aligned. The title should be aligned with the icon in the list, with a possible arrow from trees being on the left of that combo.

      The visual design rules are as follows:

      • column headers are left-aligned (I think that's the case everywhere)
      • column values are left-aligned as well, if they consist of either only text or of an icon plus some text
      • column values are centered if icons are used to represent them. Examples are the "Status" column in the page tree and the "Type" column in the messages list (see attached screen shot)
      • if a column shows a tree and thus every row contains icons and text as well as open and close arrows:
        • the arrows should be to the left of the column header
        • an optional icon and the non-optional text should be left-aligned with the header (see attachment)
      • if there is no open/close arrow, there also should be no gap between the check boxes and the title value.

        1. 01 Column with only icons.png
          01 Column with only icons.png
          10 kB
        2. Assets app - good.png
          Assets app - good.png
          38 kB
        3. Assets app - now.png
          Assets app - now.png
          37 kB
        4. Firefox.png
          Firefox.png
          70 kB
        5. Good styling.png
          Good styling.png
          80 kB
        6. Pages app - good.png
          Pages app - good.png
          18 kB
        7. Pages app - now.png
          Pages app - now.png
          18 kB
        8. Safari.png
          Safari.png
          121 kB
        9. Screen Shot 2013-05-07 at 1.53.42 PM.png
          Screen Shot 2013-05-07 at 1.53.42 PM.png
          15 kB
        10. Screen Shot 2013-05-07 at 1.55.49 PM.png
          Screen Shot 2013-05-07 at 1.55.49 PM.png
          17 kB
        11. Security app - good.png
          Security app - good.png
          20 kB
        12. Security app - now.png
          Security app - now.png
          19 kB

            spenttila Samuli Penttilä
            weder Andreas Weder
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated:
              Resolved: