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
          10 kB
          Andreas Weder
        2. Assets app - good.png
          38 kB
          Andreas Weder
        3. Assets app - now.png
          37 kB
          Andreas Weder
        4. Firefox.png
          70 kB
          Andreas Weder
        5. Good styling.png
          80 kB
          Andreas Weder
        6. Pages app - good.png
          18 kB
          Andreas Weder
        7. Pages app - now.png
          18 kB
          Andreas Weder
        8. Safari.png
          121 kB
          Andreas Weder
        9. Screen Shot 2013-05-07 at 1.53.42 PM.png
          15 kB
          Samuli Penttilä
        10. Screen Shot 2013-05-07 at 1.55.49 PM.png
          17 kB
          Samuli Penttilä
        11. Security app - good.png
          20 kB
          Andreas Weder
        12. Security app - now.png
          19 kB
          Andreas Weder

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

              Created:
              Updated:
              Resolved: