Design Panel - Visualizing the CSS inheritance

Request For Comments
9

you have literally snatched words from my mouth, @George. i was going to request for this.

few points to note:

  1. just changing the text colour of the label ('colour', 'size') to orange/red is NOT enough. please consider adding a BG with a lighter shade of same colour so that it gets highlighted clearly. visually more appealing i guess. something like this:
    image
    BG height is +4px and width is +8px from the font area in px.

  2. also have a new colour (suggested: blue or green) on the label for components which have been edited in the respective breakpoint. so that in live view, user can see what all things were changed. the icon colours of selected properties already turn blue like this:
    image
    if the label colour also changes to blue with light blue bg - that'll be better IMO.

  3. how will the inheritance work?
    a. value is inherited from parent element.
    b. value is inherited from a previous breakpoint of same element.
    c. value is inherited from first class in case the selected element has a combo class.
    d. value is inherited from another state (hover, active, etc.)
    i hope all these cases are included when 'orange' the property.

  4. further points to improve UX for inheritance popup content:
    a. if the inhertance is coming from a parent element, please show type name (div, form, etc.) or/and class name of the parent element.
    b. if the inheritance is coming from previous breakpoint, show the breakpoint icon (mobile, tablet, etc.).
    c. if the inheritance is coming form first class of the combo class, show the breakpoint icon with the class name.
    d. if the inheritance is coming from another state (hover, active, etc.), show the breakpoint icon with the class name and "::".

  1. hover might not be a good option IMO. because that would mean whenever you take the mouse over to the design panel to set/select any property, something will surely popup as you will inadvertantly hover your mouse over one or the other properties.
    this is just my feeling seeing Wappler UI and the screenshots above, not 100% sure if click would be better than hover.

will add further to this, if we can think of more inputs later today.