Commit ab6f592c authored by Dries's avatar Dries

- Patch #601150 by bleen18, eojthebrave, seutje, bganicky, sun, yoroy,...

- Patch #601150 by bleen18, eojthebrave, seutje, bganicky, sun, yoroy, JacobSingh, ivansf, drifter: improved UI for contextual links.
parent 601150c2
......@@ -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;
}
......@@ -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();
};
......
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