diff --git a/js/base.js b/js/base.js
index 1c4a603d4b448ef44c60ebad4c8fb8d9c0309458..90482e46df2d342fd40995845ea2ef0c448495c4 100644
--- a/js/base.js
+++ b/js/base.js
@@ -101,7 +101,7 @@
href = href.substring(3, href.length);
}
var chars = ['#', '?', '&'];
- for (i in chars) {
+ for (var i in chars) {
if (href.indexOf(chars[i]) > -1) {
href = href.substr(0, href.indexOf(chars[i]));
}
diff --git a/views.info b/views.info
index 77703ce043815a8918101dbddad271330cd171b5..1b2b92f6614e510a4f265dace980941345cdb9dd 100644
--- a/views.info
+++ b/views.info
@@ -3,7 +3,6 @@ description = Create customized lists and queries from your database.
package = Views
core = 8.x
php = 5.2
-dependencies[] = ctools
dependencies[] = config
; Always available CSS
diff --git a/views_dropbutton/dropbutton.base-rtl.css b/views_dropbutton/dropbutton.base-rtl.css
new file mode 100644
index 0000000000000000000000000000000000000000..be6fd6cbae71fdca0ee5ab692590c5e7d108dac5
--- /dev/null
+++ b/views_dropbutton/dropbutton.base-rtl.css
@@ -0,0 +1,23 @@
+
+/**
+ * @file
+ * Base RTL styles for dropbuttons.
+ */
+
+/**
+ * The dropbutton arrow.
+ */
+.dropbutton-link {
+ left: 0;
+ right: auto;
+}
+.dropbutton-arrow {
+ left: 0.6667em;
+ right: auto;
+}
+.dropbutton-multiple .dropbutton-widget {
+ left: auto;
+ padding-left: 2em;
+ padding-right: 0;
+ right: 0;
+}
diff --git a/views_dropbutton/dropbutton.base.css b/views_dropbutton/dropbutton.base.css
new file mode 100644
index 0000000000000000000000000000000000000000..8c6448f1e485da678a0396fae49ef43de902d4cf
--- /dev/null
+++ b/views_dropbutton/dropbutton.base.css
@@ -0,0 +1,96 @@
+
+/**
+ * @file
+ * Base styles for dropbuttons.
+ */
+
+/**
+ * When a dropbutton has only one option, it is simply a button.
+ */
+.dropbutton-wrapper,
+.dropbutton-wrapper div {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.dropbutton-wrapper,
+.dropbutton-widget {
+ max-width: 100%;
+}
+.dropbutton-wrapper {
+ min-height: 1em;
+ position: relative;
+}
+.dropbutton-widget {
+ display: block;
+ position: absolute;
+ right: 0; /* LTR */
+}
+/* UL styles are over-scoped in core, so this selector needs weight parity. */
+.dropbutton-widget .dropbutton-content {
+ list-style-image: none;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+.dropbutton-content li,
+.dropbutton-content a {
+ display: block;
+}
+
+/**
+ * The dropbutton styling.
+ *
+ * A dropbutton is a widget that displays a list of action links as a button
+ * with a primary action. Secondary actions are hidden behind a click on a
+ * twisty arrow.
+ *
+ * The arrow is created using border on a zero-width, zero-height span.
+ * The arrow inherits the link color, but can be overridden with border colors.
+ */
+.dropbutton-multiple .dropbutton-widget {
+ padding-right: 2em; /* LTR */
+}
+.dropbutton-multiple.open,
+.dropbutton-multiple.open .dropbutton-widget {
+ max-width: none;
+}
+.dropbutton-multiple.open {
+ z-index: 100;
+}
+.dropbutton-multiple .dropbutton-content .secondary-actions {
+ display: none;
+}
+.dropbutton-multiple.open .dropbutton-content .secondary-actions {
+ display: block;
+}
+.dropbutton-link {
+ bottom: 0;
+ display: block;
+ overflow: hidden;
+ position: absolute;
+ right: 0; /* LTR */
+ text-indent: 110%;
+ top: 0;
+ white-space: nowrap;
+ width: 2em;
+}
+.dropbutton-arrow {
+ border-bottom-color: transparent;
+ border-left-color: transparent;
+ border-right-color: transparent;
+ border-style: solid;
+ border-width: 0.3333em 0.3333em 0;
+ display: block;
+ height: 0;
+ line-height: 0;
+ position: absolute;
+ right: 0.6667em; /* LTR */
+ top: 0.767em;
+ width: 0;
+}
+.dropbutton-multiple.open .dropbutton-arrow {
+ border-bottom: 0.3333em solid;
+ border-top-color: transparent;
+ top: 0.333em;
+}
diff --git a/views_dropbutton/dropbutton.js b/views_dropbutton/dropbutton.js
new file mode 100644
index 0000000000000000000000000000000000000000..6d75fae5e3bfac523db15228db85b0c4bede357b
--- /dev/null
+++ b/views_dropbutton/dropbutton.js
@@ -0,0 +1,152 @@
+(function ($, Drupal) {
+
+"use strict";
+
+/**
+ * Process elements with the .dropbutton class on page load.
+ */
+Drupal.behaviors.dropButton = {
+ attach: function (context, settings) {
+ var $dropbuttons = $(context).find('.dropbutton-wrapper').once('dropbutton');
+ if ($dropbuttons.length) {
+ // Adds the delegated handler that will toggle dropdowns on click.
+ var $body = $('body').once('dropbutton-click');
+ if ($body.length) {
+ $body.on('click', '.dropbutton-link', dropbuttonClickHandler);
+ }
+ // Initialize all buttons.
+ for (var i = 0, il = $dropbuttons.length; i < il; i++) {
+ DropButton.dropbuttons.push(new DropButton($dropbuttons[i], settings.dropbutton));
+ }
+ }
+ }
+};
+
+/**
+ * Delegated callback for for opening and closing dropbutton secondary actions.
+ */
+function dropbuttonClickHandler (e) {
+ e.preventDefault();
+ $(e.target).closest('.dropbutton-wrapper').toggleClass('open');
+}
+
+/**
+ * A DropButton presents an HTML list as a button with a primary action.
+ *
+ * All secondary actions beyond the first in the list are presented in a
+ * dropdown list accessible through a toggle arrow associated with the button.
+ *
+ * @param {jQuery} $dropbutton
+ * A jQuery element.
+ *
+ * @param {Object} settings
+ * A list of options including:
+ * - {String} title: The text inside the toggle link element. This text is
+ * hidden from visual UAs.
+ */
+function DropButton (dropbutton, settings) {
+ // Merge defaults with settings.
+ var options = $.extend({'title': Drupal.t('More')}, settings);
+ var $dropbutton = $(dropbutton);
+ this.$dropbutton = $dropbutton;
+ this.$list = $dropbutton.find('.dropbutton');
+ this.$actions = this.$list.find('li');
+
+ // Move the classes from .dropbutton up to .dropbutton-wrapper
+ this.$dropbutton.addClass(this.$list[0].className);
+ this.$dropbutton.attr('id', this.$list[0].id);
+ this.$list.attr({id: '', 'class': 'dropbutton-content'});
+
+ // Add the special dropdown only if there are hidden actions.
+ if (this.$actions.length > 1) {
+ // Remove the first element of the collection and create a new jQuery
+ // collection for the secondary actions.
+ $(this.$actions.splice(1)).addClass('secondary-actions');
+ // Add toggle link.
+ this.$list.before(Drupal.theme('dropbuttonToggle', options));
+ // Bind mouse events.
+ this.$dropbutton.addClass('dropbutton-multiple')
+ .on({
+ /**
+ * Adds a timeout to close the dropdown on mouseleave.
+ */
+ 'mouseleave.dropbutton': $.proxy(this.hoverOut, this),
+ /**
+ * Clears timeout when mouseout of the dropdown.
+ */
+ 'mouseenter.dropbutton': $.proxy(this.hoverIn, this)
+ });
+ }
+}
+
+/**
+ * Extend the DropButton constructor.
+ */
+$.extend(DropButton, {
+ /**
+ * Store all processed DropButtons.
+ *
+ * @type {Array}
+ */
+ dropbuttons: []
+});
+
+/**
+ * Extend the DropButton prototype.
+ */
+$.extend(DropButton.prototype, {
+ /**
+ * Toggle the dropbutton open and closed.
+ *
+ * @param {Boolean} show
+ * (optional) Force the dropbutton to open by passing true or to close by
+ * passing false.
+ */
+ toggle: function (show) {
+ var isBool = typeof show === 'boolean';
+ show = isBool ? show : !this.$dropbutton.hasClass('open');
+ this.$dropbutton.toggleClass('open', show);
+ },
+
+ hoverIn: function () {
+ // Clear any previous timer we were using.
+ if (this.timerID) {
+ window.clearTimeout(this.timerID);
+ }
+ },
+
+ hoverOut: function () {
+ // Wait half a second before closing.
+ this.timerID = window.setTimeout($.proxy(this, 'close'), 500);
+ },
+
+ open: function () {
+ this.toggle(true);
+ },
+
+ close: function () {
+ this.toggle(false);
+ }
+});
+
+
+$.extend(Drupal.theme, {
+ /**
+ * A toggle is an interactive element often bound to a click handler.
+ *
+ * @param {Object} options
+ * - {String} title: (optional) The HTML anchor title attribute and text for the
+ * inner span element.
+ *
+ * @return {String}
+ * A string representing a DOM fragment.
+ */
+ dropbuttonToggle: function (options) {
+ return '<a href="#" class="dropbutton-link" title="' + options.title + '"><span class="dropbutton-arrow"><span class="element-invisible">' + options.title + '</span></span></a>';
+ }
+});
+
+// Expose constructor in the public space.
+Drupal.DropButton = DropButton;
+
+})(jQuery, Drupal);
diff --git a/views_dropbutton/dropbutton.theme-rtl.css b/views_dropbutton/dropbutton.theme-rtl.css
new file mode 100644
index 0000000000000000000000000000000000000000..9d6456ce600186dfd32ad7af5d0dc86432ea540c
--- /dev/null
+++ b/views_dropbutton/dropbutton.theme-rtl.css
@@ -0,0 +1,14 @@
+
+/**
+ * @file
+ * General RTL styles for dropbuttons.
+ */
+
+.dropbutton-multiple .dropbutton-content {
+ border-left: 1px solid #e8e8e8;
+ border-right: 0 none;
+}
+.dropbutton-multiple .dropbutton-content li > * {
+ margin-left: 0.25em;
+ margin-right: 0;
+}
diff --git a/views_dropbutton/dropbutton.theme.css b/views_dropbutton/dropbutton.theme.css
new file mode 100644
index 0000000000000000000000000000000000000000..9c54b735035865755503ac9bedb0284f8ac9baba
--- /dev/null
+++ b/views_dropbutton/dropbutton.theme.css
@@ -0,0 +1,31 @@
+
+/**
+ * @file
+ * General styles for dropbuttons.
+ */
+
+.dropbutton-wrapper {
+ cursor: pointer;
+ min-height: 2em;
+}
+.dropbutton-widget {
+ background-color: white;
+ border: 1px solid #cccccc;
+}
+.dropbutton-widget:hover {
+ border-color: #b8b8b8;
+}
+.dropbutton-content li > * {
+ overflow: hidden;
+ padding: 0.2em 0.5em;
+ white-space: nowrap;
+}
+.dropbutton-content li + li {
+ border-top: 1px solid #e8e8e8;
+}
+.dropbutton-multiple .dropbutton-content {
+ border-right: 1px solid #e8e8e8; /* LTR */
+}
+.dropbutton-multiple .dropbutton-content li > * {
+ margin-right: 0.25em; /* LTR */
+}
diff --git a/views_dropbutton/views_dropbutton.info b/views_dropbutton/views_dropbutton.info
new file mode 100644
index 0000000000000000000000000000000000000000..55dafa863e0417ac21856a6ae19f9164e0044616
--- /dev/null
+++ b/views_dropbutton/views_dropbutton.info
@@ -0,0 +1,4 @@
+name = Views Dropbutton
+description = A temporary copy of the work-in-progress dropbutton.
+package = Views
+core = 8.x
diff --git a/views_dropbutton/views_dropbutton.module b/views_dropbutton/views_dropbutton.module
new file mode 100644
index 0000000000000000000000000000000000000000..c4dd08efb19aee047968ac873ba2139ee1b3ba0a
--- /dev/null
+++ b/views_dropbutton/views_dropbutton.module
@@ -0,0 +1,82 @@
+<?php
+
+/**
+ * Implements hook_theme().
+ */
+function views_dropbutton_theme($existing, $type, $theme, $path) {
+ return array(
+ 'dropbutton' => array(
+ 'variables' => array('title' => NULL, 'links' => array(), 'attributes' => array()),
+ ),
+ );
+}
+
+/**
+ * Implements hook_library_info().
+ */
+function views_dropbutton_library_info() {
+ $path = drupal_get_path('module', 'views_dropbutton');
+ $libraries['drupal.dropbutton'] = array(
+ 'title' => 'Dropbutton',
+ 'website' => 'http://drupal.org/node/1608878',
+ 'version' => '1.0',
+ 'js' => array(
+ "$path/dropbutton.js" => array(),
+ ),
+ 'css' => array(
+ "$path/dropbutton.base.css" => array(),
+ "$path/dropbutton.theme.css" => array(),
+ ),
+ 'dependencies' => array(
+ array('system', 'jquery'),
+ array('system', 'drupal'),
+ array('system', 'drupalSettings'),
+ array('system', 'jquery.once'),
+ ),
+ );
+
+ return $libraries;
+}
+
+/**
+ * Builds a render array for theme_dropbutton().
+ */
+function template_preprocess_dropbutton(&$variables) {
+ $variables['attributes']['class'][] = 'dropbutton';
+ $variables['element'] = array(
+ '#theme' => 'links',
+ '#links' => $variables['links'],
+ '#attributes' => $variables['attributes'],
+ '#attached' => array(
+ 'library' => array(
+ array('views_dropbutton', 'drupal.dropbutton'),
+ ),
+ ),
+ );
+ if (!empty($variables['links'])) {
+ $variables['element']['#prefix'] = '<div class="dropbutton-wrapper"><div class="dropbutton-widget">';
+ $variables['element']['#suffix'] = '</div></div>';
+ }
+ // Pass through title to the dropbutton options.
+ if (isset($variables['title'])) {
+ $variables['element']['#attached']['js'][] = array(
+ 'type' => 'setting',
+ 'data' => array('dropbutton' => array('title' => $variables['title'])),
+ );
+ }
+}
+
+/**
+ * Creates a dropbutton menu.
+ *
+ * @param array $variables
+ * An associative array containing:
+ * - title: (optional) The text placed in the clickable area to activate the
+ * dropbutton. Defaults to 'Open dropbutton'.
+ * - links: An array of links to provide in the dropbutton.
+ * - attributes: (optional) An associative array of HTML attributes to apply
+ * to the dropbutton.
+ */
+function theme_dropbutton($variables) {
+ return render($variables['element']);
+}
diff --git a/views_ui/css/views-admin.bartik.css b/views_ui/css/views-admin.bartik.css
index e8f7aefda6b17a6eabb5d760d958cc977f62f61a..28d4f828f9e0eda4e6e1069e8c8130745ea47e7a 100644
--- a/views_ui/css/views-admin.bartik.css
+++ b/views_ui/css/views-admin.bartik.css
@@ -3,6 +3,20 @@
* in the Bartik theme.
*/
+/* ---------- Dropbutton ----------- */
+
+.dropbutton-widget {
+ background-color: white;
+ border-radius: 5px;
+}
+.dropbutton-widget:hover {
+ background-color: #f8f8f8;
+ border-color: #b8b8b8;
+}
+.dropbutton-multiple.open .dropbutton-widget:hover {
+ background-color: white;
+}
+
/* @group Lists */
.views-display-top .secondary .action-list {
@@ -71,127 +85,6 @@
/* @end */
-/* @group CTools */
-
-/* @group Buttons */
-
-.ctools-button-processed {
- background-image:
- -moz-linear-gradient(
- -90deg,
- #ffffff 0,
- #f9f9f9 100%);
- background-image:
- -webkit-gradient(
- linear,
- left top,
- left bottom,
- color-stop(0.0, rgba(255, 255, 255, 1.0)),
- color-stop(1.0, rgba(249, 249, 249, 1.0))
- );
- background-image:
- -webkit-linear-gradient(
- -90deg,
- #ffffff 0,
- #f9f9f9 100%);
- background-image:
- linear-gradient(
- -90deg,
- #ffffff 0,
- #f9f9f9 100%);
- border-radius: 5px;
- padding-bottom: 1px;
- padding-top: 1px;
-}
-
-.ctools-button-processed:hover {
- background-image:
- -moz-linear-gradient(
- -90deg,
- #ffffff 0,
- #f1f1f1 100%);
- background-image:
- -webkit-gradient(
- linear,
- left top,
- left bottom,
- color-stop(0.0, rgba(255, 255, 255, 1.0)),
- color-stop(1.0, rgba(241, 241, 241, 1.0))
- );
- background-image:
- -webkit-linear-gradient(
- -90deg,
- #ffffff 0,
- #f1f1f1 100%);
- background-image:
- linear-gradient(
- -90deg,
- #ffffff 0,
- #f1f1f1 100%);
-}
-
-.ctools-button-processed li a,
-.views-ui-display-tab-actions .ctools-button-processed input {
- padding-left: 9px;
- padding-right: 9px;
-}
-
-.ctools-content ul.actions {
- padding-bottom: 0;
-}
-
-.ctools-dropbutton-processed.open:hover {
- background-image:
- -moz-linear-gradient(
- -90deg,
- #ffffff 0,
- #f9f9f9 100%);
- background-image:
- -webkit-gradient(
- linear,
- left top,
- left bottom,
- color-stop(0.0, rgba(255, 255, 255, 1.0)),
- color-stop(1.0, rgba(249, 249, 249, 1.0))
- );
- background-image:
- -webkit-linear-gradient(
- -90deg,
- #ffffff 0,
- #f9f9f9 100%);
- background-image:
- linear-gradient(
- -90deg,
- #ffffff 0,
- #f9f9f9 100%);
-}
-
-.ctools-dropbutton-processed.open {
- -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
- -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
- box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
-}
-
-.ctools-twisty {
- top: 0.6667em;
-}
-
-.ctools-dropbutton-processed.open .ctools-twisty {
- top: 0.3333em;
-}
-
-.ctools-dropbutton-processed li a,
-.views-ui-display-tab-actions .ctools-dropbutton-processed input {
- padding-right: 7px;
-}
-
-.views-ui-display-tab-actions .ctools-button-processed input.form-submit {
- margin-right: 0;
- margin-top: 0;
-}
-
-/* @end */
-
.views-display-column .fieldset-wrapper {
margin-top: 0;
}
@@ -224,15 +117,20 @@
color: #018FE2;
}
-.views-ui-display-tab-actions .ctools-button input {
+/* @group Dropbutton */
+
+.views-ui-display-tab-actions .dropbutton input {
color: #0071B3;
}
-.views-ui-display-tab-actions .ctools-button input:hover,
-.views-ui-display-tab-actions .ctools-button input:focus {
+.views-ui-display-tab-actions .dropbutton input:hover,
+.views-ui-display-tab-actions .dropbutton input:focus {
color: #018FE2;
}
-/* @end */
+.views-ui-display-tab-actions .dropbutton input.form-submit {
+ margin-right: 0;
+ margin-top: 0;
+}
/* @end */
diff --git a/views_ui/css/views-admin.ctools-rtl.css b/views_ui/css/views-admin.ctools-rtl.css
deleted file mode 100644
index 2a3d1fcfba96fc23f48f24f228b694b197f53f00..0000000000000000000000000000000000000000
--- a/views_ui/css/views-admin.ctools-rtl.css
+++ /dev/null
@@ -1,32 +0,0 @@
-/* @group Buttons */
-
-.ctools-dropbutton .ctools-content {
- border-left: 1px solid #e8e8e8;
-}
-
-.ctools-content ul.actions {
- padding-left: auto;
- padding-right: 0;
-}
-
-.ctools-dropbutton .ctools-link {
- border-right: 1px solid #ffffff;
-}
-
-.ctools-dropbutton li {
- padding-left: 9px;
- padding-left: auto;
-}
-
-.views-display-top .ctools-button {
- left: 12px;
- right: auto;
-}
-
-.views-ui-display-tab-bucket .ctools-button {
- left: 5px;
- right: auto;
-}
-
-/* @end */
-
diff --git a/views_ui/css/views-admin.ctools.css b/views_ui/css/views-admin.ctools.css
deleted file mode 100644
index 389e2c5ee0c09b2d338d9ad328e3aabfddc756ed..0000000000000000000000000000000000000000
--- a/views_ui/css/views-admin.ctools.css
+++ /dev/null
@@ -1,116 +0,0 @@
-/* @group Buttons */
-
-.ctools-button-processed {
- background-color: #ffffff;
- border-color: #cccccc;
- font-size: 11px;
- padding-bottom: 2px;
- padding-top: 2px;
-}
-
-.ctools-button-processed:hover {
- border-color: #b8b8b8;
-}
-
-.ctools-button-processed:active {
- border-color: #a0a0a0;
-}
-
-.ctools-button-processed .ctools-content {
- padding-bottom: 0;
- padding-top: 0;
-}
-
-.ctools-dropbutton-processed {
- position: absolute;
-}
-
-.ctools-dropbutton-processed .ctools-content {
- border-right: 1px solid #e8e8e8;
-}
-
-.ctools-dropbutton-processed .ctools-content ul {
- margin: 0;
- padding: 0;
-}
-
-.ctools-content ul.actions {
- margin-top: 0;
- margin-bottom: 0;
- padding-left: 0;
-}
-
-.ctools-button-processed .ctools-content a {
- background-image: none;
- border: medium none;
-}
-
-.ctools-dropbutton-processed.open:hover {
- border-color: #D0D0D0;
-}
-
-.ctools-dropbutton-processed.open {
- z-index: 100;
-}
-
-.ctools-dropbutton-processed .ctools-link {
- border-left: 1px solid #ffffff;
-}
-
-.ctools-dropbutton-processed.open .ctools-content {
- padding-bottom: 4px;
-}
-
-.ctools-dropbutton-processed li a,
-.ctools-dropbutton-processed li input {
- padding-right: 9px;
-}
-
-.ctools-dropbutton-processed.open li + li {
- border-top: 1px solid #efefef;
- margin-top: 4px;
- padding-bottom: 0;
- padding-top: 4px;
-}
-
-.ctools-twisty:focus {
- outline: medium none;
-}
-
-.ctools-no-js .ctools-content ul {
- margin-bottom: 0;
- margin-top: 0;
- padding-left: 0;
-}
-
-.views-display-top .ctools-button-processed {
- font-size: 12px;
- position: absolute;
- right: 12px;
- top: 7px;
-}
-
-.views-ui-display-tab-bucket .ctools-button-processed {
- position: absolute;
- right: 5px;
- top: 4px;
-}
-
-.views-ui-display-tab-actions .ctools-button-processed li a,
-.views-ui-display-tab-actions .ctools-button-processed input {
- background: none;
- border: medium;
- font-family: inherit;
- font-size: 12px;
- padding-bottom: 0;
- padding-left: 12px;
- padding-top: 0;
- margin-bottom: 0;
-}
-
-.views-ui-display-tab-actions .ctools-button-processed input:hover {
- background: none;
-}
-
-/* @end */
-
diff --git a/views_ui/css/views-admin.seven.css b/views_ui/css/views-admin.seven.css
index 1452a0ab25cac943e7faa5a1e6245e06da32d50c..67c481d8eb33b6745699f2bd81fccb05170ed7ee 100644
--- a/views_ui/css/views-admin.seven.css
+++ b/views_ui/css/views-admin.seven.css
@@ -3,6 +3,29 @@
* in the Seven admin theme.
*/
+/* Dropbutton */
+.dropbutton-widget {
+ background-color: #fff;
+ background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0), #e7e7e7);
+ background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0), #e7e7e7);
+ background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0), #e7e7e7);
+ background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0), #e7e7e7);
+ border-radius: 5px;
+}
+.dropbutton-widget:hover {
+ background-color: #f0f0f0;
+ border-color: #b8b8b8;
+}
+.dropbutton-multiple.open .dropbutton-widget:hover {
+ background-color: #fff;
+}
+.dropbutton-content li:first-child > * {
+ text-overflow: ellipsis;
+}
+.dropbutton-multiple.open .dropbutton-content li:first-child > * {
+ text-overflow: clip;
+}
+
/* @group Content */
.views-ui-display-tab-bucket h1,
@@ -173,28 +196,6 @@ fieldset.fieldset-no-legend {
/* @end */
-/* @group Buttons */
-
-.ctools-button-processed ul {
- margin: 0;
-}
-
-/* Override for input elements that are themed like ctools-buttons */
-.ctools-button-processed input.form-submit:hover {
- background-image: none;
- color: #0074BD;
- text-shadow: none;
-}
-
-.ctools-button-processed input.form-submit:active {
- background: none;
- border: medium none;
- color: #0074BD;
- text-shadow: none;
-}
-
-/* @end */
-
/* @group Tables */
table td,
@@ -391,93 +392,8 @@ table th {
/* @end */
-/* @group CTools */
-
-/* @group Buttons */
-
-.ctools-button-processed {
- background-image:
- -moz-linear-gradient(
- -90deg,
- #ffffff 0,
- #f9f9f9 100%);
- background-image:
- -webkit-gradient(
- linear,
- left top,
- left bottom,
- color-stop(0.0, rgba(255, 255, 255, 1.0)),
- color-stop(1.0, rgba(249, 249, 249, 1.0))
- );
- background-image:
- -webkit-linear-gradient(
- -90deg,
- #ffffff 0,
- #f9f9f9 100%);
- background-image:
- linear-gradient(
- -90deg,
- #ffffff 0,
- #f9f9f9 100%);
- border-radius: 11px;
-}
-
-.ctools-button-processed:hover {
- background-image:
- -moz-linear-gradient(
- -90deg,
- #ffffff 0,
- #f1f1f1 100%);
- background-image:
- -webkit-gradient(
- linear,
- left top,
- left bottom,
- color-stop(0.0, rgba(255, 255, 255, 1.0)),
- color-stop(1.0, rgba(241, 241, 241, 1.0))
- );
- background-image:
- -webkit-linear-gradient(
- -90deg,
- #ffffff 0,
- #f1f1f1 100%);
- background-image:
- linear-gradient(
- -90deg,
- #ffffff 0,
- #f1f1f1 100%);
-}
-
-.ctools-dropbutton-processed.open:hover {
- background-image:
- -moz-linear-gradient(
- -90deg,
- #ffffff 0,
- #f9f9f9 100%);
- background-image:
- -webkit-gradient(
- linear,
- left top,
- left bottom,
- color-stop(0.0, rgba(255, 255, 255, 1.0)),
- color-stop(1.0, rgba(249, 249, 249, 1.0))
- );
- background-image:
- -webkit-linear-gradient(
- -90deg,
- #ffffff 0,
- #f9f9f9 100%);
- background-image:
- linear-gradient(
- -90deg,
- #ffffff 0,
- #f9f9f9 100%);
-}
-
-.ctools-dropbutton-processed.open {
- -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
- -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
- box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
+.views-ui-display-tab-actions .dropbutton input {
+ color: #0074BD;
}
/* @end */
diff --git a/views_ui/css/views-admin.theme-rtl.css b/views_ui/css/views-admin.theme-rtl.css
index b2656f1c87fd04ce6a4cd5d65b8c9770acea03a2..99c8c42b7782fe6da3cc02ffeed81b63904c313d 100644
--- a/views_ui/css/views-admin.theme-rtl.css
+++ b/views_ui/css/views-admin.theme-rtl.css
@@ -205,4 +205,16 @@ div.form-item-displays-live-preview {
/* @end */
+/* @group Buttons */
+
+.no-js .views-display-top .dropbutton {
+ left: 12px;
+ right: auto;
+}
+
+.views-ui-display-tab-bucket .dropbutton {
+ left: 5px;
+ right: auto;
+}
+
/* @end */
diff --git a/views_ui/css/views-admin.theme.css b/views_ui/css/views-admin.theme.css
index 44750d7995ebd0e9460e77e212ef867ecf98b93d..3aedb26fcf73428bc02399085d40bd530ee16469 100644
--- a/views_ui/css/views-admin.theme.css
+++ b/views_ui/css/views-admin.theme.css
@@ -432,10 +432,6 @@ td.group-title {
margin-right: 0;
}
-#views-display-extra-actions li {
- padding: 3px 9px;
-}
-
.views-display-top #views-display-top {
max-width: 180px;
}
@@ -1100,3 +1096,59 @@ div.messages {
}
/* @end */
+
+/* @group Buttons */
+
+.dropbutton,
+.dropbutton input {
+ text-transform: lowercase;
+}
+.dropbutton-multiple {
+ position: absolute;
+}
+.dropbutton-widget {
+ position: relative;
+}
+.dropbutton-arrow {
+ top: 0.567em;
+}
+.dropbutton-content {
+ font-size: 11px;
+ line-height: 1.333em;
+}
+.dropbutton-content li > * {
+ margin: 0;
+ padding: 0.2em 0.75em;
+}
+
+.views-display-top .dropbutton {
+ position: absolute;
+ right: 12px;
+ top: 7px;
+}
+.views-display-top .dropbutton a {
+ font-size: 12px;
+}
+
+.views-ui-display-tab-bucket .dropbutton {
+ position: absolute;
+ right: 5px;
+ top: 4px;
+}
+
+.views-ui-display-tab-actions .dropbutton li a,
+.views-ui-display-tab-actions .dropbutton input {
+ background: none;
+ border: medium;
+ font-family: inherit;
+ font-size: 12px;
+ padding-left: 12px;
+ margin-bottom: 0;
+}
+
+.views-ui-display-tab-actions .dropbutton input:hover {
+ background: none;
+ border: none;
+}
+
+/* @end */
diff --git a/views_ui/js/views-admin.js b/views_ui/js/views-admin.js
index ccddc5e5a37d4860fcaf8569ee97bce825cc970f..1d226c40bb3ecb4c7ba85ae60e556969a85206f3 100644
--- a/views_ui/js/views-admin.js
+++ b/views_ui/js/views-admin.js
@@ -914,11 +914,8 @@ Drupal.behaviors.viewsRemoveIconClass.attach = function (context, settings) {
"use strict";
- jQuery('.ctools-button', context).once('RemoveIconClass', function () {
- var $ = jQuery;
- var $this = $(this);
- $('.icon', $this).removeClass('icon');
- $('.horizontal', $this).removeClass('horizontal');
+ jQuery(context).find('.dropbutton').once('dropbutton-icon', function () {
+ jQuery(this).find('.icon').removeClass('icon');
});
};
diff --git a/views_ui/lib/Drupal/views_ui/ViewListController.php b/views_ui/lib/Drupal/views_ui/ViewListController.php
index 5916ff8111828eeb68d9614d8e07f6a07bfe3194..6e388f2335559155f83996d13ef84278b3778cfe 100644
--- a/views_ui/lib/Drupal/views_ui/ViewListController.php
+++ b/views_ui/lib/Drupal/views_ui/ViewListController.php
@@ -139,8 +139,8 @@ public function buildOperations(EntityInterface $entity) {
}
}
- // Use theme_links__ctools_dropbutton().
- $build['#theme'] = 'links__ctools_dropbutton';
+ // Use theme_dropbutton().
+ $build['#theme'] = 'dropbutton';
return $build;
}
diff --git a/views_ui/lib/Drupal/views_ui/ViewUI.php b/views_ui/lib/Drupal/views_ui/ViewUI.php
index 5982ebbaca0965a9b505057168c87dffd18bd882..565dbf98c2c297e671c0be32d1d7024f980f0901 100644
--- a/views_ui/lib/Drupal/views_ui/ViewUI.php
+++ b/views_ui/lib/Drupal/views_ui/ViewUI.php
@@ -167,26 +167,12 @@ public function getDisplayDetails($display) {
'#attributes' => array('id' => 'edit-display-settings-details'),
);
- // The following is for display purposes only. We need to determine if there is more than one button and wrap
- // the buttons in a .ctools-dropbutton class if more than one is present. Otherwise, we'll just wrap the
- // actions in the .ctools-button class.
$is_display_deleted = !empty($display['deleted']);
// The master display cannot be cloned.
$is_default = $display['id'] == 'default';
// @todo: Figure out why getOption doesn't work here.
$is_enabled = $this->displayHandlers[$display['id']]->getOption('enabled');
- if (!$is_display_deleted && !$is_default) {
- $prefix = '<div class="ctools-no-js ctools-button ctools-dropbutton"><div class="ctools-link"><a href="#" class="ctools-twisty ctools-text">open</a></div><div class="ctools-content"><ul class="horizontal right actions">';
- $suffix = '</ul></div></div>';
- $item_element = 'li';
- }
- else {
- $prefix = '<div class="ctools-button"><div class="ctools-content"><ul class="horizontal right actions">';
- $suffix = '</ul></div></div>';
- $item_element = 'li';
- }
-
if ($display['id'] != 'default') {
$build['top']['#theme_wrappers'] = array('container');
$build['top']['#attributes']['id'] = 'edit-display-settings-top';
@@ -194,8 +180,8 @@ public function getDisplayDetails($display) {
// The Delete, Duplicate and Undo Delete buttons.
$build['top']['actions'] = array(
- '#prefix' => $prefix,
- '#suffix' => $suffix,
+ '#prefix' => '<div class="dropbutton-wrapper"><div class="dropbutton-widget"><ul class="dropbutton">',
+ '#suffix' => '</ul></div></div>',
);
if (!$is_display_deleted) {
@@ -205,8 +191,8 @@ public function getDisplayDetails($display) {
'#value' => t('enable @display_title', array('@display_title' => $display_title)),
'#limit_validation_errors' => array(),
'#submit' => array(array($this, 'submitDisplayEnable'), array($this, 'submitDelayDestination')),
- '#prefix' => '<' . $item_element . ' class="enable">',
- "#suffix" => '</' . $item_element . '>',
+ '#prefix' => '<li class="enable">',
+ "#suffix" => '</li>',
);
}
// Add a link to view the page.
@@ -218,8 +204,8 @@ public function getDisplayDetails($display) {
'#title' => t('view @display', array('@display' => $display['display_title'])),
'#options' => array('alt' => array(t("Go to the real page for this display"))),
'#href' => $path,
- '#prefix' => '<' . $item_element . ' class="view">',
- "#suffix" => '</' . $item_element . '>',
+ '#prefix' => '<li class="view">',
+ "#suffix" => '</li>',
);
}
}
@@ -229,8 +215,8 @@ public function getDisplayDetails($display) {
'#value' => t('clone @display_title', array('@display_title' => $display_title)),
'#limit_validation_errors' => array(),
'#submit' => array(array($this, 'submitDisplayDuplicate'), array($this, 'submitDelayDestination')),
- '#prefix' => '<' . $item_element . ' class="duplicate">',
- "#suffix" => '</' . $item_element . '>',
+ '#prefix' => '<li class="duplicate">',
+ "#suffix" => '</li>',
);
}
// Always allow a display to be deleted.
@@ -239,8 +225,8 @@ public function getDisplayDetails($display) {
'#value' => t('delete @display_title', array('@display_title' => $display_title)),
'#limit_validation_errors' => array(),
'#submit' => array(array($this, 'submitDisplayDelete'), array($this, 'submitDelayDestination')),
- '#prefix' => '<' . $item_element . ' class="delete">',
- "#suffix" => '</' . $item_element . '>',
+ '#prefix' => '<li class="delete">',
+ "#suffix" => '</li>',
);
if ($is_enabled) {
$build['top']['actions']['disable'] = array(
@@ -248,8 +234,8 @@ public function getDisplayDetails($display) {
'#value' => t('disable @display_title', array('@display_title' => $display_title)),
'#limit_validation_errors' => array(),
'#submit' => array(array($this, 'submitDisplayDisable'), array($this, 'submitDelayDestination')),
- '#prefix' => '<' . $item_element . ' class="disable">',
- "#suffix" => '</' . $item_element . '>',
+ '#prefix' => '<li class="disable">',
+ "#suffix" => '</li>',
);
}
}
@@ -259,8 +245,8 @@ public function getDisplayDetails($display) {
'#value' => t('undo delete of @display_title', array('@display_title' => $display_title)),
'#limit_validation_errors' => array(),
'#submit' => array(array($this, 'submitDisplayUndoDelete'), array($this, 'submitDelayDestination')),
- '#prefix' => '<' . $item_element . ' class="undo-delete">',
- "#suffix" => '</' . $item_element . '>',
+ '#prefix' => '<li class="undo-delete">',
+ "#suffix" => '</li>',
);
}
@@ -399,13 +385,10 @@ public function renderDisplayTop($display_id) {
// Extra actions for the display
$element['extra_actions'] = array(
- '#theme' => 'links__ctools_dropbutton',
+ '#theme' => 'dropbutton',
'#attributes' => array(
- 'id' => 'views-display-extra-actions',
- 'class' => array(
- 'horizontal', 'right', 'links', 'actions',
- ),
- ),
+ 'id' => 'views-display-extra-actions',
+ ),
'#links' => array(
'edit-details' => array(
'title' => t('edit view name/description'),
@@ -771,12 +754,8 @@ public static function getAdminCSS() {
}
$theme_key = isset($themes[$theme_key]->base_theme) ? $themes[$theme_key]->base_theme : '';
}
- // Views contains style overrides for the following modules
- $module_list = array('contextual', 'ctools');
- foreach ($module_list as $module) {
- if (module_exists($module)) {
- $list[$module_path . '/css/views-admin.' . $module . '.css'] = array();
- }
+ if (module_exists('contextual')) {
+ $list[$module_path . '/css/views-admin.contextual.css'] = array();
}
return $list;
@@ -839,7 +818,7 @@ public function submitDisplayDelete($form, &$form_state) {
* Submit handler for form buttons that do not complete a form workflow.
*
* The Edit View form is a multistep form workflow, but with state managed by
- * the CTools object cache rather than $form_state['rebuild']. Without this
+ * the TempStore rather than $form_state['rebuild']. Without this
* submit handler, buttons that add or remove displays would redirect to the
* destination parameter (e.g., when the Edit View form is linked to from a
* contextual link). This handler can be added to buttons whose form submission
@@ -971,12 +950,9 @@ public function getFormBucket($type, $display) {
}
// Render the array of links
- $build['#actions'] = theme('links__ctools_dropbutton',
+ $build['#actions'] = theme('dropbutton',
array(
'links' => $actions,
- 'attributes' => array(
- 'class' => array('inline', 'links', 'actions', 'horizontal', 'right')
- ),
'class' => array('views-ui-settings-bucket-operations'),
)
);
@@ -1473,7 +1449,7 @@ public function buildPreviewForm($form, &$form_state, $display_id = 'default') {
$form['button'] = array(
'#type' => 'submit',
'#value' => t('Update preview'),
- '#attributes' => array('class' => array('arguments-preview', 'ctools-auto-submit-click')),
+ '#attributes' => array('class' => array('arguments-preview')),
'#prefix' => '<div id="preview-submit-wrapper">',
'#suffix' => '</div>',
'#id' => 'preview-submit',
diff --git a/views_ui/views_ui.info b/views_ui/views_ui.info
index c9eebf4192d9ce1e7078121e27b3518afc3eb1aa..8873459bb6d55c71e1d97bbc4f9c8ded39f6ce8c 100644
--- a/views_ui/views_ui.info
+++ b/views_ui/views_ui.info
@@ -4,3 +4,4 @@ package = Views
core = 8.x
configure = admin/structure/views
dependencies[] = views
+dependencies[] = views_dropbutton