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

Style read-only fields

    XMLWordPrintable

Details

    • Improvement
    • Resolution: Fixed
    • Major
    • 5.0
    • 5.0
    • design, dialogs
    • None

    Description

      Currently a read-only field looks like a normal input field, which of course is wrong and misleading. Here's what Andreas suggested to do

      • change the background color of disabled and of read-only fields to #e6e6e6 [04]
      • leave all other colors the way they are: in particular the text color should remain black and the border shall remain visible.

      The visual idea behind the shades of grey in forms is that elements which have or could have the edit or keyboard focus are bright (white usually) to make them stick out and to use darker, diminishing shades of gray for the other elements. For read-only fields, there's no need to emphasize fields like this, so we've kept them in the form background color, but left the border visible so that they still appear to be fields. This works as the contrast is still high enough for the actual value of the field to remain readable.

      One other thing I noticed while looking at this is that the borders around input fields are actually too strong: they use color [02] instead of [03]. Could you thus please also:

      • change the border color of text input fields to: #cccccc [03]

      Checklists

        Acceptance criteria

        Attachments

          Activity

            People

              fgrilli Federico Grilli
              fgrilli Federico Grilli
              Votes:
              0 Vote for this issue
              Watchers:
              0 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:

                Checklists

                  Task DoD