From c908edebeb0fb24c943071f5ac9f1d0631b08c98 Mon Sep 17 00:00:00 2001 From: Dries Buytaert Date: Tue, 1 Dec 2009 13:27:27 +0000 Subject: [PATCH] - Patch #601150 by eojthebrave, bganicky, sun, seutje, JacobSingh, ivansf: improved UI for contextual links. --- misc/cog-select.png | Bin 0 -> 1218 bytes misc/contextual_links.css | 61 ++++++++++++++++++++++++++++------- misc/contextual_links.js | 21 ++++++++---- modules/system/system.module | 2 ++ themes/garland/style.css | 11 ------- 5 files changed, 66 insertions(+), 29 deletions(-) create mode 100644 misc/cog-select.png diff --git a/misc/cog-select.png b/misc/cog-select.png new file mode 100644 index 0000000000000000000000000000000000000000..e30217cd95c5a95bb9608665b3d5b1b0a542d2a0 GIT binary patch literal 1218 zcmV;z1U>tSP)5m0N5SRUF2DyX>{ymKM6zdZ}p>KoPtYjF|_Q)522}lB?ilV5q6`Sg&=#;x*sI#X>NRqUst*vcD z2q8QzEhCa7t?9jSUDUf92PH`=nvJu}(xpXAOoXfWXid$P(vlLoy1FQ^+sU!n7zqRj z1_LZwu#hVqoosr2!=u1WAg(A%e5TIyk|Y^```_QW;{s6D-hTOZEEZ$I!cuZ922MAjiSDx zLA15C31`D;;dD0&RaHeq4U527Kxje}pB_B$efpkf6h=Le{O<7K56+%HubC_s5{VQI ztunc}HU@nC{8(3qx6ezC&CJP0H_2Fn@nDcT_vzHJZw~KbB4K6(Jrj3jJyl=VYBihr z{aP=!EGx%O91j>Zv3*WB{Bpk4y1lNUDPT34xYE@@D6Vp@<(vnwrq9m^I!TgBoX+|i zX0wH;s?ycdL%+|*@Sy+T(W6J+1A;*AyW6(y38;~c_sz4DH#Zmbkc=nUx@AkLq9}g= ze17QAG(}e_0N4Ba=)HEG;bA{1AR3EepFjUDvdwHJ7KxD5>G2NSq_eY|?%r#6 zacZioUq~iXOkFkA)vI8lc!#StZC<`)*|Hs5tEyhgGMg|MjNBR-Uib0dk9@6XTQ9F% zvGTEQpLg9H-5jz_W`;r$n$Mg)-f`)-Pk`)|AWW#9yHh#YOkh?;9W|JBz2v%D8a39g)<~o6X|u{rjI&6s0-y z;dH$&UcI*bVrI{E;+LheEMLtyGn6e~{)!rj>b%~Yn2ZMeL&Gdy{4nF=Vd7efCzs@7 zuvu|8H!(Igj^1b_5en&^UbU)xvRJyn+Y9a~+`RPhC%*K!T;;MXUv)Sf$g(`q1D&oVt{2PK9?G}RD{N{ygVAgukxCGas>I`QL?TH_hhKI&H$1y~_3mFio_+t8 z47ES~{MCcS4;9F=Tsh zcuqPW0esB1U1jVmiV_0Ge0_ahH5Q}A<*G=f7}Zi5IxQ9OI9(O?LOW_S+RH@O5B;Ce zR7~w_BP||}l-`ez`2XB%o16Ex-|znrIOnRZEe7Ji=xjtX&`tLuJv_6xGdv^zH9XUN g1CX4|n;gc!0qaCGBv!;n^8f$<07*qoM6N<$g1mJ^NB{r; literal 0 HcmV?d00001 diff --git a/misc/contextual_links.css b/misc/contextual_links.css index 3158c8c81316..4d2ac51e8635 100644 --- a/misc/contextual_links.css +++ b/misc/contextual_links.css @@ -8,31 +8,68 @@ position: relative; } .contextual-links-region-active { - outline: #000 dashed 1px; + outline: #999 dashed 1px; } /** * Contextual links. */ -ul.contextual-links { - float: right; +div.contextual-links-wrapper { + display: none; 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; - 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 { - border-left: 1px solid #ccc; - display: inline; line-height: 100%; list-style: none; - margin: 0 0 0 0.3em; - padding: 0 0 0 0.6em; -} -ul.contextual-links li.first { - border-left: 0; + list-style-image: none; margin: 0; padding: 0; } -ul.contextual-links li a { +div.contextual-links-wrapper a { 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; +} diff --git a/misc/contextual_links.js b/misc/contextual_links.js index d7fafbd25456..0dfc9ddfa07e 100644 --- a/misc/contextual_links.js +++ b/misc/contextual_links.js @@ -8,8 +8,17 @@ Drupal.contextualLinks = Drupal.contextualLinks || {}; */ Drupal.behaviors.contextualLinks = { attach: function (context) { - $('ul.contextual-links', context).once('contextual-links', function () { - $(this).hover(Drupal.contextualLinks.hover, Drupal.contextualLinks.hoverOut); + $('div.contextual-links-wrapper', context).once('contextual-links', function () { + var $wrapper = $(this); + var $trigger = $('').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 = { * Enables outline for the region contextual links are associated with. */ Drupal.contextualLinks.hover = function () { - $(this).addClass('contextual-links-link-active') - .closest('.contextual-links-region').addClass('contextual-links-region-active'); + $(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).removeClass('contextual-links-link-active') - .closest('.contextual-links-region').removeClass('contextual-links-region-active'); + $(this).closest('.contextual-links-region').removeClass('contextual-links-region-active') + .find('.contextual-links-active').removeClass('contextual-links-active') + .find('ul.contextual-links').hide(); }; })(jQuery); diff --git a/modules/system/system.module b/modules/system/system.module index 9e771aa3fcb4..f1d9851d411b 100644 --- a/modules/system/system.module +++ b/modules/system/system.module @@ -3634,6 +3634,8 @@ function system_build_contextual_links($element) { $build = array(); if ($links) { $build = array( + '#prefix' => '
', + '#suffix' => '
', '#theme' => 'links', '#links' => $links, '#attributes' => array('class' => array('contextual-links')), diff --git a/themes/garland/style.css b/themes/garland/style.css index f52f5b4e4d94..f865cee3e3d3 100644 --- a/themes/garland/style.css +++ b/themes/garland/style.css @@ -840,17 +840,6 @@ tr.even td.menu-disabled { margin: 0; } -/** - * Contextual links. - */ -.contextual-links-region-active { - outline: #027AC6 dashed 1px; -} -.block ul.contextual-links { - margin: 0; - padding: 0; -} - /** * Collapsible fieldsets */