I've tested this on Chrome and Firefox: The DnD library, when collapsed, still catches mouse-clicks in the empty space below the atom-creation buttons.

I noticed this because I wasn't able to resize my CKEditor text-areas, because the resize icon appears in the lower right, and lines up just below the collapsed DnD library. I tried a few CSS tweaks but have not had any success. I'm temporarily working around the problem with this CSS:

body.dnd-processed {
  padding-right: 20px;
}
CommentFileSizeAuthor
#7 2141239-dnd-mouse-catch.patch458 bytesjcisio
#6 scald-clicks-beneath-dnd-library-2141239.patch1.36 KBbrockfanning

Comments

brockfanning’s picture

brockfanning commented
Issue summary: View changes
brockfanning’s picture

brockfanning commented

Here's a slightly less hackish bit of CSS to get around the problem. I haven't made it into a proper patch, because I suspect it's probably not the best way to do it. But it does work for me. Any CSS experts, please review!

.scald-menu {
  pointer-events: none;
}
.scald-menu .summary,
.scald-menu .add-buttons,
.scald-menu .filters {
  pointer-events: auto;
}
brockfanning’s picture

brockfanning commented
Status: Active » Needs review
jcisio’s picture

jcisio commented

With this CSS can you click behind the .scald-menu (where there is no icon)? If yes then it's quite good, I think.

brockfanning’s picture

brockfanning commented

That entire grey vertical rectangle still catches mouse-clicks. This change allows you to click *beneath* that rectangle, where it was previously catching mouse-clicks.

One thing that worries me about my CSS is that it targets specific divs inside the .scald-menu div. If new divs were added there, they wouldn't receive mouse-clicks, which but be quite confusing to the developer.

I just tried adding an inner wrapper around the contents of the .scald-menu. Like this...

<div class="scald-menu"...
  <div class="scald-menu-inner"...
    <div class="summary"...</div>
    <div class="add-buttons"...</div>
    <div class="filters"...</div>
  </div>
</div>

And then in CSS:

.scald-menu { pointer-events: none; }
.scald-menu-inner { pointer-events: auto; }

It seems odd, but it works. I can make a patch if that seems OK to you.

brockfanning’s picture

brockfanning commented
StatusFileSize
new scald-clicks-beneath-dnd-library-2141239.patch1.36 KB

I went ahead and made the patch, to make clear what the code changes would be.

jcisio’s picture

jcisio commented
StatusFileSize
new 2141239-dnd-mouse-catch.patch458 bytes

Got it. Could you try this simpler patch?

brockfanning’s picture

brockfanning commented

Yep, that's working too, nice.

jcisio’s picture

jcisio commented
Status: Needs review » Fixed

Commit 25160fd. Thanks.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.