Commit c908edeb authored by Dries's avatar Dries

- Patch #601150 by eojthebrave, bganicky, sun, seutje, JacobSingh, ivansf:...

- Patch #601150 by eojthebrave, bganicky, sun, seutje, JacobSingh, ivansf: improved UI for contextual links.
parent 5fbaa631
...@@ -8,31 +8,68 @@ ...@@ -8,31 +8,68 @@
position: relative; position: relative;
} }
.contextual-links-region-active { .contextual-links-region-active {
outline: #000 dashed 1px; outline: #999 dashed 1px;
} }
/** /**
* Contextual links. * Contextual links.
*/ */
ul.contextual-links { div.contextual-links-wrapper {
float: right; display: none;
font-size: 90%; font-size: 90%;
position: absolute;
right: 5px;
top: 0px;
z-index: 999;
}
html.js div.contextual-links-wrapper {
display: block;
}
a.contextual-links-trigger {
background: transparent url(cog-select.png) no-repeat center center;
display: none;
height: 20px;
margin-top: 2px;
outline: none;
text-indent: 34px;
width: 30px;
overflow: hidden;
}
a.contextual-links-trigger:hover,
div.contextual-links-active a.contextual-links-trigger {
background-color: #fff;
}
div.contextual-links-wrapper ul.contextual-links {
display: none;
margin: 0; margin: 0;
padding: 0; padding: 5px 10px;
position: absolute;
right: 0;
top: 20px;
white-space: nowrap;
}
.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;
} }
ul.contextual-links li { ul.contextual-links li {
border-left: 1px solid #ccc;
display: inline;
line-height: 100%; line-height: 100%;
list-style: none; list-style: none;
margin: 0 0 0 0.3em; list-style-image: none;
padding: 0 0 0 0.6em;
}
ul.contextual-links li.first {
border-left: 0;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
ul.contextual-links li a { div.contextual-links-wrapper a {
text-decoration: none; text-decoration: none;
} }
ul.contextual-links li a {
background: #fff;
color: #666;
display: block;
margin: 0.5em 0;
padding: 0.3em;
}
ul.contextual-links li a:hover {
text-decoration: underline;
}
...@@ -8,8 +8,17 @@ Drupal.contextualLinks = Drupal.contextualLinks || {}; ...@@ -8,8 +8,17 @@ Drupal.contextualLinks = Drupal.contextualLinks || {};
*/ */
Drupal.behaviors.contextualLinks = { Drupal.behaviors.contextualLinks = {
attach: function (context) { attach: function (context) {
$('ul.contextual-links', context).once('contextual-links', function () { $('div.contextual-links-wrapper', context).once('contextual-links', function () {
$(this).hover(Drupal.contextualLinks.hover, Drupal.contextualLinks.hoverOut); var $wrapper = $(this);
var $trigger = $('<a class="contextual-links-trigger" href="#" />').text(Drupal.t('Configure')).click(
function () {
$wrapper.find('ul.contextual-links').slideToggle(100);
$wrapper.toggleClass('contextual-links-active');
return false;
}
);
$wrapper.prepend($trigger)
.closest('.contextual-links-region').hover(Drupal.contextualLinks.hover, Drupal.contextualLinks.hoverOut);
}); });
} }
}; };
...@@ -18,16 +27,16 @@ Drupal.behaviors.contextualLinks = { ...@@ -18,16 +27,16 @@ Drupal.behaviors.contextualLinks = {
* Enables outline for the region contextual links are associated with. * Enables outline for the region contextual links are associated with.
*/ */
Drupal.contextualLinks.hover = function () { Drupal.contextualLinks.hover = function () {
$(this).addClass('contextual-links-link-active') $(this).closest('.contextual-links-region').addClass('contextual-links-region-active');
.closest('.contextual-links-region').addClass('contextual-links-region-active');
}; };
/** /**
* Disables outline for the region contextual links are associated with. * Disables outline for the region contextual links are associated with.
*/ */
Drupal.contextualLinks.hoverOut = function () { Drupal.contextualLinks.hoverOut = function () {
$(this).removeClass('contextual-links-link-active') $(this).closest('.contextual-links-region').removeClass('contextual-links-region-active')
.closest('.contextual-links-region').removeClass('contextual-links-region-active'); .find('.contextual-links-active').removeClass('contextual-links-active')
.find('ul.contextual-links').hide();
}; };
})(jQuery); })(jQuery);
...@@ -3634,6 +3634,8 @@ function system_build_contextual_links($element) { ...@@ -3634,6 +3634,8 @@ function system_build_contextual_links($element) {
$build = array(); $build = array();
if ($links) { if ($links) {
$build = array( $build = array(
'#prefix' => '<div class="contextual-links-wrapper">',
'#suffix' => '</div>',
'#theme' => 'links', '#theme' => 'links',
'#links' => $links, '#links' => $links,
'#attributes' => array('class' => array('contextual-links')), '#attributes' => array('class' => array('contextual-links')),
......
...@@ -840,17 +840,6 @@ tr.even td.menu-disabled { ...@@ -840,17 +840,6 @@ tr.even td.menu-disabled {
margin: 0; margin: 0;
} }
/**
* Contextual links.
*/
.contextual-links-region-active {
outline: #027AC6 dashed 1px;
}
.block ul.contextual-links {
margin: 0;
padding: 0;
}
/** /**
* Collapsible fieldsets * Collapsible fieldsets
*/ */
......
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