Page MenuHomePhabricator

When in edit mode, Depicts & Caption panels should subtly indicate change in state
Closed, ResolvedPublic


When edit mode is engaged, the panel border color should switch to this color (#2a4b8d from the style guide) with no change in width. Otherwise it's hard to tell what you're editing apart from other elements on the page.

Screenshot 2019-02-27 13.23.24.png (429×1 px, 42 KB)

Event Timeline

PDrouin-WMF renamed this task from [stub] When in edit mode, Depicts should visually distinguish itself from other elements to When in edit mode, Depicts & Caption panels should subtly indicate change in state.Feb 27 2019, 6:37 PM
PDrouin-WMF updated the task description. (Show Details)

There may already be a CSS class that gets added when a panel is in "Editing" state; if not this would be pretty easy to add. I'm curious if there are any WMF conventions for how to name these kinds of classes – BEM style, is-editing, panel--is-editing, etc. At a previous job we leaned heavily on a modified BEM style that worked like this (we used SASS but I think things would be similar in LESS):

.my-component {
  background-color: rebeccapurple;

  &__some-child-element {
    font-weight: bold;

  &.is-active {
    border: solid 1px #000;

Child element classes for a given component would come out with the lowest specificity possible (.my-component__some-child-element as a single rule); the modifier rule would have an additional level of specificity because it might need to override something else:

Regardless of the conventions we are using, this is a pretty quick change to implement.

Got this working locally – here are some screengrabs. It is pretty subtle. I tried to upload a .mov clip but Phabricator doesn't allow that apparently.

Nothing editable:

Screen Shot 2019-02-27 at 4.19.27 PM.png (792×1 px, 80 KB)

Captions editable:

Screen Shot 2019-02-27 at 4.19.35 PM.png (898×1 px, 96 KB)

Depicts editable:

Screen Shot 2019-02-27 at 4.19.43 PM.png (862×1 px, 94 KB)

On a related note, is anyone else bothered by the way that the captions button "jumps" from the top right of the panel when you click "Edit", to the lower right of the panel when it is in edit mode? The Depicts button stays in the same place as it toggles between "Edit" and "Publish", which I consider to be a more intuitive behavior.

I'll submit a patch shortly, and then maybe someone can put this up on labs for visual review.

Change 493344 had a related patch set uploaded (by Eric Gardner; owner: Eric Gardner):
[mediawiki/extensions/WikibaseMediaInfo@master] Add a visual indicator to Captions/Depicts panels when in edit mode

I like the change., thanks for the screenshots.

Yes, it's bothered me for some time that Captions & Depicts publish buttons aren't consistent. I'd like them to be the same (and prefer the Depicts version).

Change 493344 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Add a visual indicator to Captions/Depicts panels when in edit mode

Patch merged (and pulled onto labs)

@PDrouin-WMF can you submit a ticket to make those buttons consistent? :)

Tested on labs, works but is very subtle. Perhaps too subtle, but far from a major concern right now :)

Moving to Sign-off, which seems like it will be our "test all this stuff again when it gets to production" column for now.

@Ramsey-WMF I'm okay with erring on the side of subtle for now. Happy to re-open down the road if we decide we want to change the visuals – it will now just be a matter of changing that CSS rule since the JS is in place.

It's suuuuper subtle to the point of being imperceptible at higher resolutions, but it is to spec and works on production.