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

Adapt bars in page editor to match new design

XMLWordPrintable

    • Yes

      We've defined new colors and a small form change for the bars in the page editor. Please implement these changes so that the editor matches the rest of the visual design by the time we release Alpha 1.

      In essence the changes in form are:

      • we'll eventually use a different, more apparent form to distinguish areas from components. We no longer use two greens for that.
      • for now just take away the rounded corners from area bars, but stick with the thicker bar at the top, the thinner bar at the bottom.
      • So don't implement the white arrow as shown in the attached screen shot.

      The changes in color are:

      • the dark green marks the currently selected element
      • its direct children are marked green. With "direct children" I mean children on the next hierarchy level only.
      • its sibling bars (any bars on the same level) and its parent bar are light green.
      • all other visible elements are light gray

      The idea behind the new color scheme is:

      • we use less actual colors, but merely shades of green. The selection color in the page editor is the Magnolia typical dark green.
      • we use shades of green to mark the current edit focus, with the dark green clearly marking the currently selected element.
      • its children are marked with a less strong green to explain what the selected element contains. This helps to read the context inside the selected element.
      • the bars the currently selected element finds itself in is indicated with a light green. This helps to read the context above the selected element, which is useful to understand where I could move the element to.
      • all other visible elements are visible, but not colored (light gray)

      I'll post some additional explanations and images illustrating them on a wiki page. I plan to not do this now, but if it helps, I can do that earlier.

        Acceptance criteria

              czimmermann Christopher Zimmermann
              weder Andreas Weder
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

                Created:
                Updated:
                Resolved:

                  Task DoD