diff --git a/modules/contextual/contextual.css b/modules/contextual/contextual.css index eafc809da8b..05612cfb6b1 100644 --- a/modules/contextual/contextual.css +++ b/modules/contextual/contextual.css @@ -26,32 +26,55 @@ html.js div.contextual-links-wrapper { display: block; } a.contextual-links-trigger { - background: transparent url(images/cog-select.png) no-repeat center center; + background: transparent url(images/gear-select.png) no-repeat top left; display: none; - height: 20px; - margin-top: 2px; + height: 18px; + margin: 2px 1px 0 1px; outline: none; text-indent: 34px; - width: 30px; + width: 28px; overflow: hidden; } a.contextual-links-trigger:hover, +div.contextual-links-active a.contextual-links-trigger { + background-position: 0 -18px; +} div.contextual-links-active a.contextual-links-trigger { background-color: #fff; + border: #ccc 1px solid; + border-bottom: none; + padding: 0; + margin: 1px 0 0 0; + position: relative; + z-index: 1; + border-radius-topleft: 4px; + border-radius-topright: 4px; + -moz-border-radius-topleft: 4px; + -moz-border-radius-topright: 4px; + -webkit-border-radius-topleft: 4px; + -webkit-border-radius-topright: 4px; } div.contextual-links-wrapper ul.contextual-links { + background-color: #fff; + border: #ccc 1px solid; display: none; margin: 0; - padding: 5px 10px; + padding: 0.25em 0; position: absolute; right: 0; - top: 20px; + top: 19px; white-space: nowrap; + -moz-border-radius: 4px; + -moz-border-radius-topright: 0; + -webkit-border-radius: 4px; + -webkit-border-radius-topright: 0; + border-radius: 4px; + border-radius-topright: 0; } .contextual-links-region:hover a.contextual-links-trigger, div.contextual-links-active a.contextual-links-trigger, div.contextual-links-active ul.contextual-links { - display: block; + display: block; } ul.contextual-links li { line-height: 100%; @@ -64,12 +87,11 @@ div.contextual-links-wrapper a { text-decoration: none; } ul.contextual-links li a { - background: #fff; - color: #666; + color: #333; display: block; - margin: 0.5em 0; - padding: 0.3em; + margin: 0.25em 0; + padding: 0.25em; } ul.contextual-links li a:hover { - text-decoration: underline; + background-color: #bfdcee; } diff --git a/modules/contextual/contextual.js b/modules/contextual/contextual.js index 0dfc9ddfa07..92973f66129 100644 --- a/modules/contextual/contextual.js +++ b/modules/contextual/contextual.js @@ -10,6 +10,8 @@ Drupal.behaviors.contextualLinks = { attach: function (context) { $('div.contextual-links-wrapper', context).once('contextual-links', function () { var $wrapper = $(this); + var $region = $wrapper.closest('.contextual-links-region'); + var $links = $wrapper.find('ul.contextual-links'); var $trigger = $('').text(Drupal.t('Configure')).click( function () { $wrapper.find('ul.contextual-links').slideToggle(100); @@ -17,24 +19,24 @@ Drupal.behaviors.contextualLinks = { return false; } ); - $wrapper.prepend($trigger) - .closest('.contextual-links-region').hover(Drupal.contextualLinks.hover, Drupal.contextualLinks.hoverOut); + // Attach hover behavior to trigger and ul.contextual-links. + $trigger.add($links).hover( + function () { $region.addClass('contextual-links-region-active'); }, + function () { $region.removeClass('contextual-links-region-active'); } + ); + // Hide the contextual links when user rolls out of the ul.contextual-links or .contextual-links-region. + $links.add($region).bind('mouseleave', Drupal.contextualLinks.mouseleave); + // Prepend the trigger. + $links.end().prepend($trigger); }); } }; -/** - * Enables outline for the region contextual links are associated with. - */ -Drupal.contextualLinks.hover = function () { - $(this).closest('.contextual-links-region').addClass('contextual-links-region-active'); -}; - /** * Disables outline for the region contextual links are associated with. */ -Drupal.contextualLinks.hoverOut = function () { - $(this).closest('.contextual-links-region').removeClass('contextual-links-region-active') +Drupal.contextualLinks.mouseleave = function () { + $(this).closest('.contextual-links-region') .find('.contextual-links-active').removeClass('contextual-links-active') .find('ul.contextual-links').hide(); }; diff --git a/modules/contextual/images/cog-select.png b/modules/contextual/images/cog-select.png deleted file mode 100644 index e30217cd95c..00000000000 Binary files a/modules/contextual/images/cog-select.png and /dev/null differ diff --git a/modules/contextual/images/gear-select.png b/modules/contextual/images/gear-select.png new file mode 100644 index 00000000000..e8031d4482d Binary files /dev/null and b/modules/contextual/images/gear-select.png differ