Commit 3e790105 authored by Dries's avatar Dries
Browse files

Issue #1799498 by seutje, tim.plunkett, delmarr, jessebeach: improve dropbutton.

parent e76af8e7
......@@ -1721,7 +1721,9 @@ function theme_links($variables) {
* the dropbutton menu. Properties used: #children.
*/
function theme_dropbutton_wrapper($variables) {
return '<div class="dropbutton-wrapper"><div class="dropbutton-widget">' . $variables['element']['#children'] . '</div></div>';
if (!empty($variables['element']['#children'])) {
return '<div class="dropbutton-wrapper"><div class="dropbutton-widget">' . $variables['element']['#children'] . '</div></div>';
}
}
/**
......
......@@ -7,10 +7,6 @@
/**
* The dropbutton arrow.
*/
.dropbutton-widget {
left: 0;
right: auto;
}
.dropbutton-toggle {
left: 0;
right: auto;
......@@ -19,7 +15,7 @@
left: 0.6667em;
right: auto;
}
.dropbutton-multiple .dropbutton-widget {
.js .dropbutton-multiple .dropbutton-widget {
padding-left: 2em;
padding-right: 0;
}
......@@ -13,28 +13,28 @@
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.dropbutton-wrapper {
.js .dropbutton-wrapper {
display: block;
min-height: 2em;
position: relative;
}
.dropbutton-widget {
position: absolute;
right: 0; /* LTR */
}
.dropbutton-wrapper,
.dropbutton-widget {
.js .dropbutton-wrapper,
.js .dropbutton-widget {
max-width: 100%;
}
.js .dropbutton-widget {
position: absolute;
}
/* UL styles are over-scoped in core, so this selector needs weight parity. */
.dropbutton-widget .dropbutton {
.js .dropbutton-widget .dropbutton {
list-style-image: none;
list-style-type: none;
margin: 0;
overflow: hidden;
padding: 0;
}
.dropbutton li,
.dropbutton a {
.js .dropbutton li,
.js .dropbutton a {
display: block;
}
......@@ -48,7 +48,7 @@
* The arrow is created using border on a zero-width, zero-height span.
* The arrow inherits the link color, but can be overridden with border colors.
*/
.dropbutton-multiple .dropbutton-widget {
.js .dropbutton-multiple .dropbutton-widget {
padding-right: 2em; /* LTR */
}
.dropbutton-multiple.open,
......@@ -97,6 +97,7 @@
right: 40%; /* 0.6667em; */ /* LTR */
top: 0.9em;
width: 0;
overflow: hidden;
}
.dropbutton-multiple.open .dropbutton-arrow {
border-bottom: 0.3333em solid;
......
......@@ -59,7 +59,7 @@ function DropButton (dropbutton, settings) {
var $primary = this.$actions.slice(0,1);
// Identify the secondary actions.
var $secondary = this.$actions.slice(1);
$($secondary).addClass('secondary-action');
$secondary.addClass('secondary-action');
// Add toggle link.
$primary.after(Drupal.theme('dropbuttonToggle', options));
// Bind mouse events.
......@@ -73,7 +73,12 @@ function DropButton (dropbutton, settings) {
/**
* Clears timeout when mouseout of the dropdown.
*/
'mouseenter.dropbutton': $.proxy(this.hoverIn, this)
'mouseenter.dropbutton': $.proxy(this.hoverIn, this),
/**
* Similar to mouseleave/mouseenter, but for keyboard navigation.
*/
'focusout.dropbutton': $.proxy(this.focusOut, this),
'focusin.dropbutton': $.proxy(this.focusIn, this)
});
}
}
......@@ -125,6 +130,14 @@ $.extend(DropButton.prototype, {
close: function () {
this.toggle(false);
},
focusOut: function(e) {
this.hoverOut.call(this, e);
},
focusIn: function(e) {
this.hoverIn.call(this, e);
}
});
......
......@@ -4,14 +4,11 @@
* General styles for dropbuttons.
*/
.dropbutton-wrapper {
cursor: pointer;
}
.dropbutton-widget {
.js .dropbutton-widget {
background-color: white;
border: 1px solid #cccccc;
}
.dropbutton-widget:hover {
.js .dropbutton-widget:hover {
border-color: #b8b8b8;
}
.dropbutton .dropbutton-action > * {
......
......@@ -1609,15 +1609,15 @@ div.admin-panel .description {
}
/* ---------- Dropbutton ----------- */
.dropbutton-widget {
.js .dropbutton-widget {
background-color: white;
border-radius: 5px;
}
.dropbutton-widget:hover {
.js .dropbutton-widget:hover {
background-color: #f8f8f8;
border-color: #b8b8b8;
}
.dropbutton-multiple.open .dropbutton-widget:hover {
.js .dropbutton-multiple.open .dropbutton-widget:hover {
background-color: white;
}
......
......@@ -1036,7 +1036,7 @@ div.add-or-remove-shortcuts {
}
/* Dropbutton */
.dropbutton-widget {
.js .dropbutton-widget {
background-color: #fff;
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0), #e7e7e7);
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0), #e7e7e7);
......@@ -1044,11 +1044,11 @@ div.add-or-remove-shortcuts {
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0), #e7e7e7);
border-radius: 5px;
}
.dropbutton-widget:hover {
.js .dropbutton-widget:hover {
background-color: #f0f0f0;
border-color: #b8b8b8;
}
.dropbutton-multiple.open .dropbutton-widget:hover {
.js .dropbutton-multiple.open .dropbutton-widget:hover {
background-color: #fff;
}
.dropbutton-content li:first-child > * {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment