Problem/Motivation
The Outside In prototype introduced in #2753941: [Experimental] Create Outside In module MVP to provide block configuration in Off-Canvas tray and expand site edit mode makes it very easy for a user to understand which elements on the page are configurable and to select them in an intuitive way. Once the element is selected, a sidebar for it opens.
However, once the sidebar opens, there is no longer any visual indication of what sidebar element is being configured.
This can become especially confusing for some of the more unintuitive/magical blocks, for example the title block. See #2782891: The Page Title block's title behaves in a confusing way with Settings Tray and the Help block incorrectly has Settings Tray styling. That problem is exacerbated by not even being able to see that that is what I clicked on.
Proposed resolution
Come up with a design to visually highlight the region on the page that is being configured.
Remaining tasks
Needs design, usability review, implementation, etc.
User interface changes
New visual indication of the element being configured (TBD).
API changes
TBD; most likely none.
Data model changes
Probably N/A.
Comment | File | Size | Author |
---|---|---|---|
#32 | 2782885-32.patch | 2 KB | tedbow |
#28 | 2782885-28.patch | 2.17 KB | rakesh.gectcr |
#21 | 2782885-21.patch | 2.12 KB | tedbow |
#20 | active_same_hover.png | 105.92 KB | tedbow |
#20 | interdiff-2782885-15-19.txt | 1.06 KB | tedbow |
Comments
Comment #2
xjmComment #3
xjmComment #4
xjmThis feels major actually.
Comment #5
xjmComment #6
tkoleary CreditAttribution: tkoleary at Acquia commentedThis is a case of a feature of the design that has not yet been implemented.
The prototype shows that the highlight effect that a block gets on hover persists when the block is selected and the tray is open.
Comment #7
xjmThanks Kevin. Sounds like this is a "Must-have" part of implementing the full design.
Comment #8
webchickComment #9
tedbowComment #10
tedbowOk here is patch that passing the id of the active element to the dialog and then adds a class to that element on dialog open so it can be highlighted.
I include some initial css to highlight the element.
The patch includes the changes from #2786459-59: "Offcanvas" tray should be using the existing dialog system
Also a patch with only relevant changes.
Comment #11
tedbowForgot patch with only relevant changes.
Comment #12
tedbowComment #13
tedbow#2786459: "Offcanvas" tray should be using the existing dialog system landed!
re-rolled with just these changes
@tkoleary this should work but the css should be improved so that active element stands out.
Comment #14
GrandmaGlassesRopeManInstead of fetching all elements in the body, just grab the ones that have the class and then remove it.
Comment #15
tedbow@drpal nice catch. I have fixed that
Comment #16
GrandmaGlassesRopeMan@tedbow
Looks good. I'm happy with the most recent set of changes.
Comment #17
webchickHm. I applied the patch to simplytest.me, but can't tell what I'm looking for here. Got screenshot?
Comment #18
tedbow@webchick here is screenshot
Notice that the breadcrumb block which is the one that is being updating in the tray has red-dotted border whereas all the other block have a gray dotted-border.
Comment #19
webchickYeeah, that's way too subtle. :( Also doesn't really work on e.g. the site branding block, because the contrast isn't clear enough.
Let's go with Kevin's suggestion in #6 to persist the highlight styling on the active element.
Comment #20
tedbow@webchick ok.
This patch just adds the active element selector to the hover selector so they are same. much simpler and better ux I think.
Comment #21
tedbowRe-rolled the patch from #20. It no longer applied.
Also fixed 2 JS lines that didn't end with ";". No other changes
Comment #22
GrandmaGlassesRopeMan@tedbow @webchick
I've tested this locally and while it is working, its also not obvious, at least initially, what's happening. The
active
effect and thehover
effect appear to be nearly identical. Unless you immediately move your mouse away, theactive
could easily be mistaken for thehover
styling. In addition to the darkened background, perhaps the red dashed outline as well, although that might be too garish.Comment #23
tkoleary CreditAttribution: tkoleary at Acquia commented@drpal
The prototype just maintained the same hover effect as the active state once the tray was open. I don't think we need the red, esp. since red indicates warning or error.
Comment #24
tkoleary CreditAttribution: tkoleary at Acquia commentedLooks right now.
Comment #26
tedbowLooks like unrelated test failed but then ran again and everything passed.
Comment #27
alexpott#2785589: Fix js and jsdoc of outside-in module got reverted which means this needs a reroll.
Comment #28
rakesh.gectcrI have re-rolled the patch against the 8.2.x
Comment #29
nod_Comment #30
tkoleary CreditAttribution: tkoleary at Acquia commentedTested in simplytest.me. Works as expected.
Great work!
Comment #31
webchickThis no longer applies after #2781577: Properly style outside-in off canvas tray. Anyone up for a quick re-roll?
Comment #32
tedbow@webchick ok here it is. Just a re-roll
Comment #33
webchickMoving back to RTBC, since there are no substantial changes.
Comment #34
webchickCommitted and pushed to 8.2.x and 8.3.x. Thanks!
Comment #37
webchickComment #38
Manuel Garcia CreditAttribution: Manuel Garcia as a volunteer and at Appnovation commentedComment #40
Gábor HojtsyComment #41
tedbowChanging to new settings_tray.module component. @drpal thanks for script help! :)