diff options
author | Dries Buytaert <dries@buytaert.net> | 2009-12-13 13:00:32 +0000 |
---|---|---|
committer | Dries Buytaert <dries@buytaert.net> | 2009-12-13 13:00:32 +0000 |
commit | ab6f592cd72b0ed0b33a962985004d19969da479 (patch) | |
tree | 716ac12ab2a449e630bec5efbdab459763ffef02 | |
parent | 601150c2627c017b29a1f240dc7398b36b7ca47f (diff) | |
download | brdo-ab6f592cd72b0ed0b33a962985004d19969da479.tar.gz brdo-ab6f592cd72b0ed0b33a962985004d19969da479.tar.bz2 |
- Patch #601150 by bleen18, eojthebrave, seutje, bganicky, sun, yoroy, JacobSingh, ivansf, drifter: improved UI for contextual links.
-rw-r--r-- | modules/contextual/contextual.css | 46 | ||||
-rw-r--r-- | modules/contextual/contextual.js | 24 | ||||
-rw-r--r-- | modules/contextual/images/cog-select.png | bin | 1218 -> 0 bytes | |||
-rw-r--r-- | modules/contextual/images/gear-select.png | bin | 0 -> 880 bytes |
4 files changed, 47 insertions, 23 deletions
diff --git a/modules/contextual/contextual.css b/modules/contextual/contextual.css index eafc809da..05612cfb6 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 0dfc9ddfa..92973f661 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 = $('<a class="contextual-links-trigger" href="#" />').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 Binary files differdeleted file mode 100644 index e30217cd9..000000000 --- a/modules/contextual/images/cog-select.png +++ /dev/null diff --git a/modules/contextual/images/gear-select.png b/modules/contextual/images/gear-select.png Binary files differnew file mode 100644 index 000000000..e8031d448 --- /dev/null +++ b/modules/contextual/images/gear-select.png |