diff --git a/core/core.libraries.yml b/core/core.libraries.yml index eb62701..756e1b6 100644 --- a/core/core.libraries.yml +++ b/core/core.libraries.yml @@ -193,9 +193,6 @@ drupal.dropbutton: version: VERSION js: misc/dropbutton/dropbutton.js: {} - css: - component: - misc/dropbutton/dropbutton.css: {} dependencies: - core/jquery - core/drupal diff --git a/core/includes/theme.inc b/core/includes/theme.inc index 106d30c..02a6808 100644 --- a/core/includes/theme.inc +++ b/core/includes/theme.inc @@ -1719,7 +1719,7 @@ function drupal_common_theme() { 'variables' => array('links' => array(), 'attributes' => array('class' => array('links')), 'heading' => array(), 'set_active_class' => FALSE), ), 'dropbutton_wrapper' => array( - 'variables' => array('children' => NULL), + 'variables' => array('attributes' => array(), 'children' => NULL), ), 'image' => array( // HTML 4 and XHTML 1.0 always require an alt attribute. The HTML 5 draft diff --git a/core/lib/Drupal/Core/Render/Element/Dropbutton.php b/core/lib/Drupal/Core/Render/Element/Dropbutton.php index 76fab89..a215cc5 100644 --- a/core/lib/Drupal/Core/Render/Element/Dropbutton.php +++ b/core/lib/Drupal/Core/Render/Element/Dropbutton.php @@ -34,7 +34,8 @@ public function getInfo() { */ public static function preRenderDropbutton($element) { $element['#attached']['library'][] = 'core/drupal.dropbutton'; - $element['#attributes']['class'][] = 'dropbutton'; + $element['#attributes']['class'][] = 'dropbutton__menu'; + $element['#attributes']['data-drupal-dropbutton-menu'] = TRUE; if (!isset($element['#theme_wrappers'])) { $element['#theme_wrappers'] = array(); } diff --git a/core/misc/dropbutton/dropbutton.css b/core/misc/dropbutton/dropbutton.css deleted file mode 100644 index 5990514..0000000 --- a/core/misc/dropbutton/dropbutton.css +++ /dev/null @@ -1,164 +0,0 @@ - -/** - * @file - * Base styles for dropbuttons. - */ - -/** - * When a dropbutton has only one option, it is simply a button. - */ -.dropbutton-wrapper, -.dropbutton-wrapper div { - box-sizing: border-box; -} -.js .dropbutton-wrapper, -.js .dropbutton-widget { - display: block; - position: relative; -} - -@media screen and (max-width:600px) { - .js .dropbutton-wrapper { - width: 100%; - } -} - -/* Splitbuttons */ -@media screen and (min-width:600px) { - .form-actions .dropbutton-wrapper { - float: left; /* LTR */ - } - [dir="rtl"] .form-actions .dropbutton-wrapper { - float: right; - } -} -.js .form-actions .dropbutton-widget { - position: static; -} -.js td .dropbutton-widget { - position: absolute; -} -.js td .dropbutton-wrapper { - min-height: 2em; -} -.js td .dropbutton-multiple { - padding-right: 10em; /* LTR */ - margin-right: 2em; /* LTR */ - max-width: 100%; -} -[dir="rtl"].js td .dropbutton-multiple { - padding-right: 0; - margin-right: 0; - padding-left: 10em; - margin-left: 2em; -} -.js td .dropbutton-multiple .dropbutton-action a, -.js td .dropbutton-multiple .dropbutton-action input, -.js td .dropbutton-multiple .dropbutton-action button { - width: auto; -} - -/* UL styles are over-scoped in core, so this selector needs weight parity. */ -.js .dropbutton-widget .dropbutton { - list-style-image: none; - list-style-type: none; - margin: 0; - overflow: hidden; - padding: 0; -} -.js .dropbutton li, -.js .dropbutton a { - display: block; - outline: none; -} - -.js .dropbutton li:hover, -.js .dropbutton li:focus, -.js .dropbutton a:hover, -.js .dropbutton a:focus { - outline: initial; -} - -/** - * 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. - */ -.js .dropbutton-multiple .dropbutton-widget { - padding-right: 2em; /* LTR */ -} -.js[dir="rtl"] .dropbutton-multiple .dropbutton-widget { - padding-left: 2em; - padding-right: 0; -} -.dropbutton-multiple.open, -.dropbutton-multiple.open .dropbutton-widget { - max-width: none; -} -.dropbutton-multiple.open { - z-index: 100; -} -.dropbutton-multiple .dropbutton .secondary-action { - display: none; -} -.dropbutton-multiple.open .dropbutton .secondary-action { - display: block; -} -.dropbutton-toggle { - bottom: 0; - display: block; - position: absolute; - right: 0; /* LTR */ - text-indent: 110%; - top: 0; - white-space: nowrap; - width: 2em; -} -[dir="rtl"] .dropbutton-toggle { - left: 0; - right: auto; -} -.dropbutton-toggle button { - background: none; - border: 0; - cursor: pointer; - display: block; - height: 100%; - margin: 0; - padding: 0; - width: 100%; -} -.dropbutton-toggle button:hover, -.dropbutton-toggle button:focus { - outline: initial; -} -.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: 40%; /* 0.6667em; */ /* LTR */ - top: 50%; - margin-top: -0.1666em; - width: 0; - overflow: hidden; -} -[dir="rtl"] .dropbutton-arrow { - left: 0.6667em; - right: auto; -} -.dropbutton-multiple.open .dropbutton-arrow { - border-bottom: 0.3333em solid; - border-top-color: transparent; - top: 0.6667em; -} diff --git a/core/misc/dropbutton/dropbutton.js b/core/misc/dropbutton/dropbutton.js index 4f7645c..83cc35c 100644 --- a/core/misc/dropbutton/dropbutton.js +++ b/core/misc/dropbutton/dropbutton.js @@ -8,18 +8,21 @@ "use strict"; /** - * Process elements with the .dropbutton class on page load. + * Process elements with the data-drupal-dropbutton attribute on page load. * * @type {Drupal~behavior} + * + * @prop {Drupal~behaviorAttach} attach + * Process elements with `data-drupal-dropbutton` attributes. */ Drupal.behaviors.dropButton = { attach: function (context, settings) { - var $dropbuttons = $(context).find('.dropbutton-wrapper').once('dropbutton'); + var $dropbuttons = $(context).find('[data-drupal-dropbutton]').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-toggle', dropbuttonClickHandler); + $body.on('click', '.dropbutton__trigger', dropbuttonClickHandler); } // Initialize all buttons. var il = $dropbuttons.length; @@ -36,10 +39,11 @@ * @function Drupal.DropButton~dropbuttonClickHandler * * @param {jQuery.Event} e + * jQuery event object. */ function dropbuttonClickHandler(e) { e.preventDefault(); - $(e.target).closest('.dropbutton-wrapper').toggleClass('open'); + $(e.target).closest('[data-drupal-dropbutton]').toggleClass('is-open'); } /** @@ -66,29 +70,36 @@ /** * @type {jQuery} */ - this.$dropbutton = $dropbutton; + this.$dropbutton = $dropbutton.addClass('dropbutton'); /** * @type {jQuery} */ - this.$list = $dropbutton.find('.dropbutton'); + this.$list = $dropbutton.find('.dropbutton__menu'); /** * Find actions and mark them. * * @type {jQuery} */ - this.$actions = this.$list.find('li').addClass('dropbutton-action'); - + this.$actions = this.$list.find('li'); // Add the special dropdown only if there are hidden actions. if (this.$actions.length > 1) { // Identify the first element of the collection. - var $primary = this.$actions.slice(0, 1); - // Identify the secondary actions. - var $secondary = this.$actions.slice(1); - $secondary.addClass('secondary-action'); - // Add toggle link. - $primary.after(Drupal.theme('dropbuttonToggle', options)); + var $li = this.$actions.slice(0, 1); + $li.find('a, input, button') + .addClass('button dropbutton__primary-action') + .insertBefore(this.$list) + // Add toggle link. + .after(Drupal.theme('dropbuttonToggle', options)); + // Remove parent
  • for first dropbutton action. + $li.remove(); + + // Identify the secondary actions, reset their appearance. + this.$actions.slice(1).find('a, input, button') + .addClass('dropbutton__menu-item reset-appearance') + .removeClass('button'); + // Bind mouse events. this.$dropbutton .addClass('dropbutton-multiple') @@ -122,7 +133,11 @@ }); } else { - this.$dropbutton.addClass('dropbutton-single'); + // If there's only one action, add a button class. + this.$actions.find('a, input, button') + .addClass('button') + .insertBefore(this.$list); + this.$list.remove(); } } @@ -130,6 +145,7 @@ * Extend the DropButton constructor. */ $.extend(DropButton, /** @lends Drupal.DropButton */{ + /** * Store all processed DropButtons. * @@ -151,9 +167,8 @@ * passing false. */ toggle: function (show) { - var isBool = typeof show === 'boolean'; - show = isBool ? show : !this.$dropbutton.hasClass('open'); - this.$dropbutton.toggleClass('open', show); + var toggle = typeof show === 'boolean' ? show : !this.$dropbutton.hasClass('is-open'); + this.$dropbutton.toggleClass('is-open', toggle); }, /** @@ -190,6 +205,7 @@ /** * @param {jQuery.Event} e + * jQuery event object. */ focusOut: function (e) { this.hoverOut.call(this, e); @@ -197,28 +213,25 @@ /** * @param {jQuery.Event} e + * jQuery event object. */ focusIn: function (e) { this.hoverIn.call(this, e); } }); - $.extend(Drupal.theme, /** @lends Drupal.theme */{ - - /** - * A toggle is an interactive element often bound to a click handler. - * - * @param {object} options - * @param {string} [options.title] - * 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 toggle is an interactive element often bound to a click handler. + * + * @param {string} title + * The text of the inner span element for screen readers. + * + * @return {string} + * A string representing a DOM fragment. + */ + Drupal.theme.dropbuttonToggle = function (title) { + return ''; + }; // Expose constructor in the public space. Drupal.DropButton = DropButton; diff --git a/core/modules/book/src/Tests/BookTest.php b/core/modules/book/src/Tests/BookTest.php index b1c9fa3..2c713c4 100644 --- a/core/modules/book/src/Tests/BookTest.php +++ b/core/modules/book/src/Tests/BookTest.php @@ -641,7 +641,7 @@ public function testAdminBookNodeListing() { $this->drupalGet('admin/structure/book/' . $this->book->id()); $this->assertText($this->book->label(), 'The book title is displayed on the administrative book listing page.'); - $elements = $this->xpath('//table//ul[@class="dropbutton"]/li/a'); + $elements = $this->xpath('//table//div[@data-drupal-dropbutton]/ul/li/a'); $this->assertEqual((string) $elements[0], 'View', 'View link is found from the list.'); } diff --git a/core/modules/config_translation/src/Tests/ConfigTranslationOverviewTest.php b/core/modules/config_translation/src/Tests/ConfigTranslationOverviewTest.php index 13b56d5..a7aa219 100644 --- a/core/modules/config_translation/src/Tests/ConfigTranslationOverviewTest.php +++ b/core/modules/config_translation/src/Tests/ConfigTranslationOverviewTest.php @@ -81,7 +81,7 @@ public function testMapperListPage() { $this->assertLinkByHref('admin/config/people/accounts/translate'); // Make sure there is only a single operation for each dropbutton, either // 'List' or 'Translate'. - foreach ($this->cssSelect('ul.dropbutton') as $i => $dropbutton) { + foreach ($this->cssSelect('[data-drupal-dropbutton] ul') as $i => $dropbutton) { $this->assertIdentical(1, $dropbutton->count()); foreach ($dropbutton->li as $link) { $this->assertTrue(((string) $link->a === 'Translate') || ((string) $link->a === 'List')); @@ -108,7 +108,7 @@ public function testMapperListPage() { // Make sure there is only a single 'Translate' operation for each // dropbutton. - foreach ($this->cssSelect('ul.dropbutton') as $i => $dropbutton) { + foreach ($this->cssSelect('[data-drupal-dropbutton] ul') as $i => $dropbutton) { $this->assertIdentical(1, $dropbutton->count()); foreach ($dropbutton->li as $link) { $this->assertIdentical('Translate', (string) $link->a); diff --git a/core/modules/content_translation/src/Tests/ContentTranslationUITestBase.php b/core/modules/content_translation/src/Tests/ContentTranslationUITestBase.php index 9ed2e46..47d86b3 100644 --- a/core/modules/content_translation/src/Tests/ContentTranslationUITestBase.php +++ b/core/modules/content_translation/src/Tests/ContentTranslationUITestBase.php @@ -216,7 +216,7 @@ protected function doTestTranslationOverview() { $elements = $this->xpath('//table//a[@href=:href]', array(':href' => $view_path)); $this->assertEqual((string) $elements[0], $entity->getTranslation($langcode)->label(), format_string('Label correctly shown for %language translation.', array('%language' => $langcode))); $edit_path = $entity->url('edit-form', array('language' => $language)); - $elements = $this->xpath('//table//ul[@class="dropbutton"]/li/a[@href=:href]', array(':href' => $edit_path)); + $elements = $this->xpath('//table//div[@data-drupal-dropbutton]/ul/li/a[@href=:href]', array(':href' => $edit_path)); $this->assertEqual((string) $elements[0], t('Edit'), format_string('Edit link correct for %language translation.', array('%language' => $langcode))); } } diff --git a/core/modules/field_ui/src/Tests/ManageFieldsTest.php b/core/modules/field_ui/src/Tests/ManageFieldsTest.php index c09550f..2dd1895 100644 --- a/core/modules/field_ui/src/Tests/ManageFieldsTest.php +++ b/core/modules/field_ui/src/Tests/ManageFieldsTest.php @@ -154,7 +154,7 @@ function manageFieldsPage($type = '') { // Assert entity operations for all fields. $number_of_links = 3; $number_of_links_found = 0; - $operation_links = $this->xpath('//ul[@class = "dropbutton"]/li/a'); + $operation_links = $this->xpath('//div[@data-drupal-dropbutton]//a'); $url = base_path() . "admin/structure/types/manage/$type/fields/node.$type.body"; foreach ($operation_links as $link) { diff --git a/core/modules/language/config/optional/tour.tour.language.yml b/core/modules/language/config/optional/tour.tour.language.yml index 7ee56b4..6520f47 100644 --- a/core/modules/language/config/optional/tour.tour.language.yml +++ b/core/modules/language/config/optional/tour.tour.language.yml @@ -44,7 +44,7 @@ tips: body: '

    Operations are provided for editing and deleting your languages.

    You can edit the name and the direction of the language.

    Deleted languages can be added back at a later time. Deleting a language will remove all interface translations associated with it, and content in this language will be set to be language neutral. Note that you cannot delete the default language of the site.

    ' weight: 5 attributes: - data-class: dropbutton-wrapper + data-class: dropbutton-widget[data-drupal-dropbutton] language-continue: id: language-continue plugin: text diff --git a/core/modules/node/src/Tests/AssertButtonsTrait.php b/core/modules/node/src/Tests/AssertButtonsTrait.php index 96eb6c8..78d4619 100644 --- a/core/modules/node/src/Tests/AssertButtonsTrait.php +++ b/core/modules/node/src/Tests/AssertButtonsTrait.php @@ -35,7 +35,7 @@ public function assertButtons($buttons, $dropbutton = TRUE) { $this->assertTrue(empty($save_button)); // Dropbutton elements. - $elements = $this->xpath('//div[@class="dropbutton-wrapper"]//input[@type="submit"]'); + $elements = $this->xpath('//div[@data-drupal-dropbutton]//input[@type="submit"]'); $this->assertEqual($count, count($elements)); foreach ($elements as $element) { $value = isset($element['value']) ? (string) $element['value'] : ''; @@ -46,7 +46,7 @@ public function assertButtons($buttons, $dropbutton = TRUE) { else { // Assert there is a save button. $this->assertTrue(!empty($save_button)); - $this->assertNoRaw('dropbutton-wrapper'); + $this->assertNoRaw('data-drupal-dropbutton'); } } } diff --git a/core/modules/system/css/system.admin.css b/core/modules/system/css/system.admin.css index a3ccd20..40da1bd 100644 --- a/core/modules/system/css/system.admin.css +++ b/core/modules/system/css/system.admin.css @@ -196,12 +196,12 @@ small .admin-link:after { position: relative; vertical-align: top; width: 25%; - padding: 10px 6px 10px 40px; /* LTR */ + padding: 10px 6px 10px 40px; box-sizing: border-box; font-weight: normal; } [dir="rtl"] .system-status-report__status-title { - padding: 10px 40px 10px 6px; + padding: 10px 40px 10px 6px; } .system-status-report__status-icon:before { content: ""; diff --git a/core/modules/system/src/Tests/Asset/LibraryDiscoveryIntegrationTest.php b/core/modules/system/src/Tests/Asset/LibraryDiscoveryIntegrationTest.php index 2de5680..9baf4af 100644 --- a/core/modules/system/src/Tests/Asset/LibraryDiscoveryIntegrationTest.php +++ b/core/modules/system/src/Tests/Asset/LibraryDiscoveryIntegrationTest.php @@ -134,7 +134,7 @@ public function testLibrariesOverrideOtherAssetLibraryNames() { $this->activateTheme('test_theme'); // Assert Drupal-relative paths. - $this->assertAssetInLibrary('themes/my_theme/css/dropbutton.css', 'core', 'drupal.dropbutton', 'css'); + $this->assertAssetInLibrary('themes/my_theme/css/dialog.css', 'core', 'jquery.ui.dialog', 'css'); // Assert stream wrapper paths. $this->assertAssetInLibrary('public://my_css/vertical-tabs.css', 'core', 'drupal.vertical-tabs', 'css'); diff --git a/core/modules/system/templates/dropbutton-wrapper.html.twig b/core/modules/system/templates/dropbutton-wrapper.html.twig index ca0ff7e..a8f31a9 100644 --- a/core/modules/system/templates/dropbutton-wrapper.html.twig +++ b/core/modules/system/templates/dropbutton-wrapper.html.twig @@ -14,10 +14,8 @@ #} {% if children %} {% spaceless %} -
    -
    - {{ children }} -
    +
    + {{ children }}
    {% endspaceless %} {% endif %} diff --git a/core/modules/system/tests/themes/test_theme/test_theme.info.yml b/core/modules/system/tests/themes/test_theme/test_theme.info.yml index 4c1568c..118165c 100644 --- a/core/modules/system/tests/themes/test_theme/test_theme.info.yml +++ b/core/modules/system/tests/themes/test_theme/test_theme.info.yml @@ -41,10 +41,10 @@ libraries-override: js: assets/vendor/jquery/jquery.min.js: js/collapse.js # Use Drupal-relative paths. - core/drupal.dropbutton: + core/jquery.ui.dialog: css: component: - misc/dropbutton/dropbutton.css: /themes/my_theme/css/dropbutton.css + assets/vendor/jquery.ui/themes/base/dialog.css: /themes/my_theme/css/dialog.css # Use stream wrappers. core/drupal.vertical-tabs: css: diff --git a/core/modules/views/src/Tests/Handler/FieldDropButtonTest.php b/core/modules/views/src/Tests/Handler/FieldDropButtonTest.php index 574f7e4..fa0e6ea 100644 --- a/core/modules/views/src/Tests/Handler/FieldDropButtonTest.php +++ b/core/modules/views/src/Tests/Handler/FieldDropButtonTest.php @@ -51,9 +51,9 @@ public function testDropbutton() { $this->drupalGet('test-dropbutton'); foreach ($nodes as $node) { - $result = $this->xpath('//ul[contains(@class, dropbutton)]/li/a[contains(@href, :path) and text()=:title]', array(':path' => '/node/' . $node->id(), ':title' => $node->label())); + $result = $this->xpath('//div[@data-drupal-dropbutton]/ul/li/a[contains(@href, :path) and text()=:title]', array(':path' => '/node/' . $node->id(), ':title' => $node->label())); $this->assertEqual(count($result), 1, 'Just one node title link was found.'); - $result = $this->xpath('//ul[contains(@class, dropbutton)]/li/a[contains(@href, :path) and text()=:title]', array(':path' => '/node/' . $node->id(), ':title' => t('Custom Text'))); + $result = $this->xpath('//div[@data-drupal-dropbutton]/ul/li/a[contains(@href, :path) and text()=:title]', array(':path' => '/node/' . $node->id(), ':title' => t('Custom Text'))); $this->assertEqual(count($result), 1, 'Just one custom link was found.'); } diff --git a/core/modules/views/src/Tests/Handler/FieldEntityOperationsTest.php b/core/modules/views/src/Tests/Handler/FieldEntityOperationsTest.php index 665c016..1e660ae 100644 --- a/core/modules/views/src/Tests/Handler/FieldEntityOperationsTest.php +++ b/core/modules/views/src/Tests/Handler/FieldEntityOperationsTest.php @@ -77,7 +77,7 @@ public function testEntityOperations() { $this->assertTrue(count($operations) > 0, 'There are operations.'); foreach ($operations as $operation) { $expected_destination = Url::fromUri('internal:/test-entity-operations')->toString(); - $result = $this->xpath('//ul[contains(@class, dropbutton)]/li/a[@href=:path and text()=:title]', array(':path' => $operation['url']->toString() . '?destination=' . $expected_destination, ':title' => $operation['title'])); + $result = $this->xpath('//div[@data-drupal-dropbutton]/ul/li/a[@href=:path and text()=:title]', array(':path' => $operation['url']->toString() . '?destination=' . $expected_destination, ':title' => $operation['title'])); $this->assertEqual(count($result), 1, t('Found entity @operation link with destination parameter.', array('@operation' => $operation['title']))); // Entities which were created in Hungarian should link to the Hungarian // edit form, others to the English one (which has no path prefix here). diff --git a/core/modules/views/src/Tests/Plugin/RowRenderCacheTest.php b/core/modules/views/src/Tests/Plugin/RowRenderCacheTest.php index c00d584..10c6e41 100644 --- a/core/modules/views/src/Tests/Plugin/RowRenderCacheTest.php +++ b/core/modules/views/src/Tests/Plugin/RowRenderCacheTest.php @@ -157,10 +157,10 @@ protected function doTestRenderedOutput(AccountInterface $account, $check_cache $output = $view->style_plugin->getField($index, 'delete_node'); $this->assertEqual($output, $expected); - $expected = $access ? "
      " . + $expected = $access ? "
    " : ""; + "
    " : ""; $output = $view->style_plugin->getField($index, 'operations'); $this->assertEqual($output, $expected); diff --git a/core/modules/views_ui/config/optional/tour.tour.views-ui.yml b/core/modules/views_ui/config/optional/tour.tour.views-ui.yml index 42193dd..5f1d93f 100644 --- a/core/modules/views_ui/config/optional/tour.tour.views-ui.yml +++ b/core/modules/views_ui/config/optional/tour.tour.views-ui.yml @@ -66,7 +66,7 @@ tips: body: 'Add, rearrange or remove filters.' weight: 7 attributes: - data-class: 'views-ui-display-tab-bucket.filter .dropbutton-widget' + data-class: 'views-ui-display-tab-bucket.filter [data-drupal-dropbutton]' views-ui-sorts: id: views-ui-sorts plugin: text @@ -82,7 +82,7 @@ tips: body: 'Add, rearrange or remove sorting rules.' weight: 9 attributes: - data-class: 'views-ui-display-tab-bucket.sort .dropbutton-widget' + data-class: 'views-ui-display-tab-bucket.sort [data-drupal-dropbutton]' views-ui-preview: id: views-ui-preview plugin: text diff --git a/core/modules/views_ui/css/views_ui.admin.theme.css b/core/modules/views_ui/css/views_ui.admin.theme.css index 190345b..b0af106 100644 --- a/core/modules/views_ui/css/views_ui.admin.theme.css +++ b/core/modules/views_ui/css/views_ui.admin.theme.css @@ -18,95 +18,6 @@ .box-margin { margin: 12px 12px 0 12px; } -.views-admin .icon { - height: 16px; - width: 16px; -} -.views-admin .icon, -.views-admin .icon-text { - background-attachment: scroll; - background-image: url(../images/sprites.png); - background-position: left top; /* LTR */ - background-repeat: no-repeat; -} -[dir="rtl"] .views-admin .icon, -[dir="rtl"] .views-admin .icon-text { - background-position: right top; -} -.views-admin a.icon { - background: linear-gradient(-90deg, #fff 0, #e8e8e8 100%) no-repeat, repeat-y; - border: 1px solid #ddd; - border-radius: 4px; - box-shadow: 0 0 0 rgba(0,0,0,0.3333) inset; -} -.views-admin a.icon:hover { - border-color: #d0d0d0; - box-shadow: 0 0 1px rgba(0,0,0,0.3333) inset; -} -.views-admin a.icon:active { - border-color: #c0c0c0; -} -.views-admin span.icon { - float: left; /* LTR */ - position: relative; -} -[dir="rtl"] .views-admin span.icon { - float: right; -} -.views-admin .icon.compact { - display: block; - overflow: hidden; - direction: ltr; - text-indent: -9999px; -} - -/* Targets any element with an icon -> text combo */ -.views-admin .icon-text { - padding-left: 19px; /* LTR */ -} -[dir="rtl"] .views-admin .icon-text { - padding-left: 0; - padding-right: 19px; -} -.views-admin .icon.linked { - background-position: center -153px; -} -.views-admin .icon.unlinked { - background-position: center -195px; -} -.views-admin .icon.add { - background-position: center 3px; -} -.views-admin a.icon.add { - background-position: center 3px, left top; /* LTR */ -} -[dir="rtl"] .views-admin a.icon.add { - background-position: center 3px, right top; -} -.views-admin .icon.delete { - background-position: center -52px; -} -.views-admin a.icon.delete { - background-position: center -52px, left top; /* LTR */ -} -[dir="rtl"] .views-admin a.icon.delete { - background-position: center -52px, right top; -} -.views-admin .icon.rearrange { - background-position: center -111px; -} -.views-admin a.icon.rearrange { - background-position: center -111px, left top; /* LTR */ -} -[dir="rtl"] .views-admin a.icon.rearrange { - background-position: center -111px, right top; -} -.views-displays .tabs a:hover > .icon.add { - background-position: center -25px; -} -.views-displays .tabs .open a:hover > .icon.add { - background-position: center 3px; -} details.box-padding { border: none; } @@ -756,64 +667,54 @@ td.group-title { margin-bottom: 18px; line-height: 1.4555; } -.dropbutton-multiple { + +/* Dropbutton overrides. */ +.dropbutton { position: absolute; } -.dropbutton-widget { - position: relative; -} -.js .views-edit-view .dropbutton-wrapper .dropbutton .dropbutton-action > * { +.views-edit-view .dropbutton__menu-item > * { font-size: 10px; } -.js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber { +.dropbutton__menu-item > .ajax-progress-throbber { position: absolute; right: -5px; /* LTR */ top: -1px; z-index: 2; } -[dir="rtl"].js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber { +[dir="rtl"] .dropbutton__menu-item > .ajax-progress-throbber { left: -5px; right: auto; } -.js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:first-child a { - border-radius: 1.1em 0 0 0; /* LTR */ -} -[dir="rtl"].js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:first-child a { - border-radius: 0 1.1em 0 0; -} -.js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:last-child a { - border-radius: 0 0 0 1.1em; /* LTR */ -} -[dir="rtl"].js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:last-child a { - border-radius: 0 0 1.1em 0; -} -.views-display-top .dropbutton-wrapper { + +/* Add a separate class here. */ +.views-display-top .dropbutton { position: absolute; right: 12px; /* LTR */ top: 7px; } -[dir="rtl"] .views-display-top .dropbutton-wrapper { +[dir="rtl"] .views-display-top .dropbutton { left: 12px; right: auto; } -.views-display-top .dropbutton-wrapper .dropbutton-widget .dropbutton-action a { +.views-display-top .dropbutton-action a { width: auto; } -.views-ui-display-tab-bucket .dropbutton-wrapper { +.views-ui-display-tab-bucket .dropbutton { position: absolute; right: 5px; /* LTR */ top: 4px; + font-size: small; } -[dir="rtl"] .views-ui-display-tab-bucket .dropbutton-wrapper { +[dir="rtl"] .views-ui-display-tab-bucket .dropbutton { left: 5px; right: auto; } -.views-ui-display-tab-bucket .dropbutton-wrapper .dropbutton-widget .dropbutton-action a { +.views-ui-display-tab-bucket .dropbutton-widget .dropbutton-action a { width: auto; } -.views-ui-display-tab-actions .dropbutton-wrapper li a, -.views-ui-display-tab-actions .dropbutton-wrapper input { +.views-ui-display-tab-actions .dropbutton li a, +.views-ui-display-tab-actions .dropbutton input { background: none; border: medium; font-family: inherit; @@ -821,12 +722,12 @@ td.group-title { padding-left: 12px; /* LTR */ margin-bottom: 0; } -[dir="rtl"] .views-ui-display-tab-actions .dropbutton-wrapper li a, -[dir="rtl"] .views-ui-display-tab-actions .dropbutton-wrapper input { +[dir="rtl"] .views-ui-display-tab-actions .dropbutton li a, +[dir="rtl"] .views-ui-display-tab-actions .dropbutton input { padding-left: 0.5em; padding-right: 12px; } -.views-ui-display-tab-actions .dropbutton-wrapper input:hover { +.views-ui-display-tab-actions .dropbutton input:hover { background: none; border: none; } diff --git a/core/modules/views_ui/js/views-admin.js b/core/modules/views_ui/js/views-admin.js index 8e35c47..38c402c 100644 --- a/core/modules/views_ui/js/views-admin.js +++ b/core/modules/views_ui/js/views-admin.js @@ -1030,7 +1030,7 @@ */ Drupal.behaviors.viewsRemoveIconClass = { attach: function (context) { - $(context).find('.dropbutton').once('dropbutton-icon').find('.icon').removeClass('icon'); + $(context).find('[data-drupal-dropbutton]').once('dropbutton-icon').find('.icon').removeClass('icon'); } }; diff --git a/core/modules/views_ui/src/ViewEditForm.php b/core/modules/views_ui/src/ViewEditForm.php index 61a7e8b..7a7e056 100644 --- a/core/modules/views_ui/src/ViewEditForm.php +++ b/core/modules/views_ui/src/ViewEditForm.php @@ -393,7 +393,7 @@ public function getDisplayDetails($view, $display) { // Because some of the 'links' are actually submit buttons, we have to // manually wrap each item in
  • and the whole list in