diff --git a/core/modules/contextual/contextual-rtl.css b/core/modules/contextual/contextual-rtl.css
new file mode 100644
index 0000000000000000000000000000000000000000..0da4d1c52a0a5743651cdba1a890d15033ff9b76
--- /dev/null
+++ b/core/modules/contextual/contextual-rtl.css
@@ -0,0 +1,13 @@
+/**
+ * @file
+ * RTL base styles for the Contextual module.
+ */
+
+.contextual {
+ float: left;
+}
+
+.contextual li.ui-menu-item {
+ padding-right: 0;
+ padding-left: 3em;
+}
diff --git a/core/modules/contextual/contextual.base-rtl.css b/core/modules/contextual/contextual.base-rtl.css
deleted file mode 100644
index 147a5670709445bfb41d0d18f5d6483091494b04..0000000000000000000000000000000000000000
--- a/core/modules/contextual/contextual.base-rtl.css
+++ /dev/null
@@ -1,9 +0,0 @@
-
-/**
- * @file
- * RTL base styles for the Contextual module.
- */
-
-.contextual .trigger {
- text-align: left;
-}
diff --git a/core/modules/contextual/contextual.base.css b/core/modules/contextual/contextual.base.css
deleted file mode 100644
index 5c20c8abfa711d585fd4ee6f429700885259df5d..0000000000000000000000000000000000000000
--- a/core/modules/contextual/contextual.base.css
+++ /dev/null
@@ -1,36 +0,0 @@
-
-/**
- * @file
- * Generic base styles for contextual module.
- */
-
-/**
- * Contextual links behavior.
- */
-.contextual,
-.contextual .contextual-links,
-.contextual .trigger {
- display: none;
-}
-.contextual-region:hover .contextual,
-.contextual-region:hover .contextual-links-trigger-active,
-.contextual-active .contextual-links {
- display: block;
-}
-
-/**
- * Contextual links structure.
- */
-.contextual-region {
- position: relative;
-}
-.contextual {
- position: absolute;
- z-index: 999;
-}
-.contextual .trigger {
- overflow: hidden;
- position: relative;
- text-align: right; /* LTR */
- z-index: 1;
-}
diff --git a/core/modules/contextual/contextual.css b/core/modules/contextual/contextual.css
new file mode 100644
index 0000000000000000000000000000000000000000..748b2ce3e3012021096bf274117f4e1f229005ef
--- /dev/null
+++ b/core/modules/contextual/contextual.css
@@ -0,0 +1,24 @@
+/**
+ * @file
+ * Generic base styles for contextual module.
+ */
+
+/**
+ * Contextual links structure.
+ */
+.contextual {
+ font-size:0.821em;
+ float: right;
+ position: relative;
+}
+
+.contextual ul.ui-menu {
+ padding: 0;
+ margin: 0;
+ position: absolute;
+ right: 0;
+}
+
+.contextual li.ui-menu-item {
+ padding-right: 3em; /* LTR */
+}
diff --git a/core/modules/contextual/contextual.js b/core/modules/contextual/contextual.js
index 8534ce13af706255a8ebed2ab70241bc5eda13e6..b85c5eca512542c44042202ef776ccc8b11fde95 100644
--- a/core/modules/contextual/contextual.js
+++ b/core/modules/contextual/contextual.js
@@ -17,39 +17,34 @@ Drupal.behaviors.contextualLinks = {
$(context).find('div.contextual').once('contextual-links', function () {
var $wrapper = $(this);
var $region = $wrapper.closest('.contextual-region');
- var $links = $wrapper.find('ul');
- var $trigger = $('').text(Drupal.t('Configure')).click(
- function (e) {
- e.preventDefault();
- e.stopPropagation();
- $links.stop(true, true).slideToggle(100);
- $wrapper.toggleClass('contextual-active');
- }
- );
- // Attach hover behavior to trigger and ul.contextual-links.
- $trigger.add($links).hover(
- function () { $region.addClass('contextual-region-active'); },
- function () { $region.removeClass('contextual-region-active'); }
- );
- // Hide the contextual links when user clicks a link or rolls out of the .contextual-region.
- $region.bind('mouseleave click', Drupal.contextualLinks.mouseleave);
- $region.hover(
- function() { $trigger.addClass('contextual-links-trigger-active'); },
- function() { $trigger.removeClass('contextual-links-trigger-active'); }
- );
- // Prepend the trigger.
- $wrapper.prepend($trigger);
+
+ // Create the menu, and hide make sure to hide it.
+ var $links = $wrapper.find('ul').hide().menu();
+
+ // Create the button object.
+ var $button = $('').text(Drupal.t('Configure')).button({
+ icons: {
+ primary: "ui-icon-gear",
+ secondary: "ui-icon-triangle-1-s"
+ },
+ text: false
+ }).click(function() {
+ // When the button is clicked, show/hide the menu.
+ $links.toggle();
+
+ // Disable the menu when it looses focus.
+ $(document).one( "click", function() {
+ $links.hide();
+ });
+
+ return false;
+ });
+
+ // Display the button and the wrapper in the contextual links region.
+ $wrapper.prepend($button);
+ $region.prepend($wrapper);
});
}
};
-/**
- * Disables outline for the region contextual links are associated with.
- */
-Drupal.contextualLinks.mouseleave = function () {
- $(this)
- .find('.contextual-active').removeClass('contextual-active')
- .find('.contextual-links').hide();
-};
-
})(jQuery);
diff --git a/core/modules/contextual/contextual.module b/core/modules/contextual/contextual.module
index 37b3a21fe6b2589bd7458864a26de42c9f08e679..e175a19f4294072c735886b726a7d16d5b61d27c 100644
--- a/core/modules/contextual/contextual.module
+++ b/core/modules/contextual/contextual.module
@@ -48,13 +48,14 @@ function contextual_library_info() {
$path . '/contextual.js' => array(),
),
'css' => array(
- $path . '/contextual.base.css' => array(),
- $path . '/contextual.theme.css' => array(),
+ $path . '/contextual.css' => array(),
),
'dependencies' => array(
array('system', 'jquery'),
array('system', 'drupal'),
array('system', 'jquery.once'),
+ array('system', 'jquery.ui.menu'),
+ array('system', 'jquery.ui.button'),
),
);
@@ -171,4 +172,3 @@ function contextual_pre_render_links($element) {
return $element;
}
-
diff --git a/core/modules/contextual/contextual.theme-rtl.css b/core/modules/contextual/contextual.theme-rtl.css
deleted file mode 100644
index f558ffa48fde9eeafac5967bde725c82d1a931b6..0000000000000000000000000000000000000000
--- a/core/modules/contextual/contextual.theme-rtl.css
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * @file
- * RTL styling for contextual module.
- */
-
-.contextual {
- left: 5px;
- right: auto;
-}
-.contextual .contextual-links {
- border-radius: 0 4px 4px 4px;
- left: 0;
- right: auto;
-}
-
-.contextual-region .contextual .contextual-links a {
- text-align: right;
- padding: 0.4em 0.6em 0.4em 0.8em;
-}
diff --git a/core/modules/contextual/contextual.theme.css b/core/modules/contextual/contextual.theme.css
deleted file mode 100644
index d86c59672007562ff57ae5497d8821a73b297e2a..0000000000000000000000000000000000000000
--- a/core/modules/contextual/contextual.theme.css
+++ /dev/null
@@ -1,87 +0,0 @@
-/**
- * @file
- * Styling for contextual module.
- */
-
-/**
- * Contextual links wrappers.
- */
-.contextual-region-active {
- outline: 1px dashed #d6d6d6;
- outline-offset: 1px;
-}
-.contextual {
- right: 2px; /* LTR */
- top: 2px;
-}
-
-/**
- * Contextual trigger.
- */
-.contextual .trigger {
- background: transparent url(images/gear-select.png) no-repeat 2px 0;
- border: 1px solid transparent;
- height: 18px;
- margin: 0;
- outline: none;
- overflow: hidden;
- padding: 0 2px;
- text-indent: 34px;
- width: 28px;
-}
-.contextual .trigger:hover,
-.contextual-active .trigger {
- background-position: 2px -18px;
-}
-.contextual-active .trigger {
- background-color: #ffffff;
- border-bottom: none;
- border-color: #d6d6d6;
- border-radius: 4px 4px 0 0;
- position: relative;
- z-index: 1;
-}
-
-/**
- * Contextual links.
- */
-.contextual .contextual-links {
- background-color: #fff;
- border: 1px solid #d6d6d6;
- border-radius: 4px 0 4px 4px; /* LTR */
- margin: 0;
- padding: 0.25em 0;
- position: absolute;
- right: 0; /* LTR */
- text-align: left;
- top: 18px;
- white-space: nowrap;
-}
-/* Reset the li to prevent accidential overrides by a theme. */
-.contextual-region .contextual .contextual-links li {
- background-color: #fff;
- border: none;
- list-style: none;
- list-style-image: none;
- margin: 0;
- padding: 0;
-}
-.contextual-region .contextual .contextual-links a {
- display: block;
- font-family: sans-serif;
- font-size: small;
- line-height: 0.8em;
- margin: 0.25em 0;
- padding: 0.4em 0.8em 0.4em 0.6em; /* LTR */
-}
-.contextual-region .contextual .contextual-links a,
-.contextual-region .contextual .contextual-links a:hover,
-.contextual-region .contextual .contextual-links a:active,
-.contextual-region .contextual .contextual-links a:focus {
- background-color: #fff;
- color: #333;
- text-decoration: none;
-}
-.contextual-region .contextual .contextual-links li a:hover {
- background-color: #bfdcee;
-}
diff --git a/core/modules/contextual/images/gear-select.png b/core/modules/contextual/images/gear-select.png
deleted file mode 100644
index adf65822d442caf2f29dc8c1c0655e413d3a9c77..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001
literal 506
zcmVcksFU1Ni&|`#7tfC35z7aVd%pwR1
z{Q#k(f-7(WSBgtEA)yBLiIx^Xkx+qSkL&<`-85Cirm0!}4=K3tJbF(0gfuDoSY%vC
zEWnNB8H)D`4J%j+xs2rjA#eSzZ_|Wsn>mdOCbX;zhUJIYf{z%Xlq=wX?>lotj>Ri@
z3;#&CUVm!ffdguCAxR8KXly}8@^q?})}r{C
z;IVOkd=e>80M81S?0qR#Xn`IhbYc}vVD*j2@neL3fY4EV1y0~famgkm)WAN`(gG;<
zIgUND!=p`8MQoZnFfRoco=4A#5Q<6h$07?z7vRS7%%gK?SixGzWlY{Svh};zbC`oU
wjSD8UtPAGB9lQk}LoROx9PmKD|A#Sr1Ly9Wd)}l66951J07*qoM6N<$f@y)(3;+NC