The panels inline editor uses <div class="panels-ipe-handlebar-wrapper panels-ipe-on clear-block"> as the drag handle. panels-ipe-on class is then set to display:none in the css.

However, this div also has .clear-block Many themes set .clear-block to display:block explicitly . Since theme css comes after module css and some even set or even a more specific .randomclass .clear-block to display: block, this is difficult to override. In these themes, the editing drag handles are always seen on first page load. The theme css is then overriden successfully at the end of editing by the jquery hide function's inline display:none.

For these themes, in order to avoid these draggers being visible on first page load, I have added display:none inline to the html in the panels_jpe.module file. It is the least intrusive way to make this work.

(note that we can't use the evil display:none !important; css declaration to make our stylesheet take precedence, because we want to make these elements appear and dissapear as we go)

One might argue that folks could override our theme function in their theme if the theme css are not compatible, but I think that this feature should work with most themes out of the box.

CommentFileSizeAuthor
hide-handlebar.patch590 bytesyareckon
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

merlinofchaos’s picture

merlinofchaos CreditAttribution: merlinofchaos commented

I'd rather not use an embedded style for any reason. Maybe we should use a clear-block class that won't get changed by the theme?

yareckon’s picture

yareckon CreditAttribution: yareckon commented

if we want to avoid the inline css and roll our own clearing class, we would have to carry (the equivalent to) the following css in the panels_ipe code:

(from default.css)

.our-clear-block:after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}

.our-clear-block {
display:inline-block;
}

* html .our-clear-block {
height:1%;
}

.our-clear-block {
display:block;
}

To me that is too much (cross browser hairy) code to haul around to avoid inline css.

Alternatively, we could try getting more specific with our css to be more specific than some themes that just specify clear-block {display: block ;}

/* Hide editor-state-on elements initially, with .panels-ipe-sort-container  for more specificity */
.panels-ipe-sort-container .panels-ipe-on {
  display: none;
}

This is enough to override development seed's tao base theme, for instance. But there are issue here like whether that sort container is always there (I think so, but what if we break out the editing form the sorting permissions some day?).

We could also just rely on themers to work with us as IPE gets more popular (grin).

Your call, I can roll a patch that executes any of these strategies.

merlinofchaos’s picture

merlinofchaos CreditAttribution: merlinofchaos commented

We could also use !important for this and not worry about specificity. I think !important is okay in a situation like this.

DamienMcKenna’s picture

DamienMcKenna
Location NH, USA
CreditAttribution: DamienMcKenna commented
Issue summary: View changes
Parent issue: » #1774796: Plan for Panels v6.x-3.11 release (PHP 5.4 fix)
vijaycs85’s picture

vijaycs85
Location London, UK
CreditAttribution: vijaycs85 commented
Status: Needs review » Needs work

doesn't look like removing display:none would fix the issue?

DamienMcKenna’s picture

DamienMcKenna
Location NH, USA
CreditAttribution: DamienMcKenna at Mediacurrent commented
Parent issue: #1774796: Plan for Panels v6.x-3.11 release (PHP 5.4 fix) » #2639478: Plan for Panels 6.x-3.12 release
japerry’s picture

japerry
Location KVUO
CreditAttribution: japerry at Drupal Association commented
Status: Needs work » Closed (outdated)

Closing this issue as outdated as Drupal 6 ctools is not supported. If this issue is relevant for Drupal 7, feel free to re-open and mark for Drupal 7 (or 8)