From 3257ff168bfefba0e8789d05ac31620a9c3d0af7 Mon Sep 17 00:00:00 2001
From: Lauri Eskola <lauri.eskola@acquia.com>
Date: Wed, 5 Dec 2018 06:46:38 +0200
Subject: [PATCH] Issue #2822778 by wengerk, bighappyface, joelpittet, Lendude,
lauriii, vivekguptakota, Meenakshi.g, shashikant_chauhan, GoZ, ifrik, Manuel
Garcia, Neograph734: Modal popups in views is not showing properly when
toolbar tray is upon modal
---
core/misc/dialog/dialog.position.es6.js | 3 +
core/misc/dialog/dialog.position.js | 3 +
.../FilterOptionsTest.php | 67 ++++++++++++++++++-
3 files changed, 72 insertions(+), 1 deletion(-)
diff --git a/core/misc/dialog/dialog.position.es6.js b/core/misc/dialog/dialog.position.es6.js
index 4c3e915e0e35..1b88d6e245fa 100644
--- a/core/misc/dialog/dialog.position.es6.js
+++ b/core/misc/dialog/dialog.position.es6.js
@@ -129,6 +129,9 @@
autoResize,
);
}
+ // Force the dialog & dialog-overlay to render on top.
+ $element.dialog('widget').css('zIndex', 601);
+ $('.ui-widget-overlay').css('zIndex', 600);
},
'dialog:beforeclose': function(event, dialog, $element) {
$(window).off('.dialogResize');
diff --git a/core/misc/dialog/dialog.position.js b/core/misc/dialog/dialog.position.js
index 843bf3b249ef..9953e9a71cf3 100644
--- a/core/misc/dialog/dialog.position.js
+++ b/core/misc/dialog/dialog.position.js
@@ -60,6 +60,9 @@
$(window).on('resize.dialogResize scroll.dialogResize', eventData, autoResize).trigger('resize.dialogResize');
$(document).on('drupalViewportOffsetChange.dialogResize', eventData, autoResize);
}
+
+ $element.dialog('widget').css('zIndex', 601);
+ $('.ui-widget-overlay').css('zIndex', 600);
},
'dialog:beforeclose': function dialogBeforeclose(event, dialog, $element) {
$(window).off('.dialogResize');
diff --git a/core/modules/views_ui/tests/src/FunctionalJavascript/FilterOptionsTest.php b/core/modules/views_ui/tests/src/FunctionalJavascript/FilterOptionsTest.php
index 6f2f6259682d..a31bf664f7b7 100644
--- a/core/modules/views_ui/tests/src/FunctionalJavascript/FilterOptionsTest.php
+++ b/core/modules/views_ui/tests/src/FunctionalJavascript/FilterOptionsTest.php
@@ -14,7 +14,13 @@ class FilterOptionsTest extends WebDriverTestBase {
/**
* {@inheritdoc}
*/
- public static $modules = ['node', 'views', 'views_ui', 'views_ui_test_field'];
+ public static $modules = [
+ 'node',
+ 'views',
+ 'views_ui',
+ 'views_ui_test_field',
+ 'toolbar',
+ ];
/**
* {@inheritdoc}
@@ -22,8 +28,12 @@ class FilterOptionsTest extends WebDriverTestBase {
public function setUp() {
parent::setUp();
+ // Install additional themes Seven & Bartik.
+ $this->container->get('theme_installer')->install(['seven', 'bartik']);
+
$admin_user = $this->drupalCreateUser([
'administer views',
+ 'access toolbar',
]);
$this->drupalLogin($admin_user);
}
@@ -73,4 +83,59 @@ public function testFilterOptionsAddFields() {
$this->assertFalse($page->findField('name[views.views_test_field_1]')->isVisible());
}
+ /**
+ * Test the integration of the dialog with the toolbar module.
+ *
+ * @dataProvider themeDataProvider
+ */
+ public function testDialogOverlayWithHorizontalToolbar($theme) {
+ // Switch to the provided theme.
+ $this->container->get('config.factory')->getEditable('system.theme')
+ ->set('default', $theme)->save();
+ $this->container->get('router.builder')->rebuildIfNeeded();
+
+ $session = $this->getSession();
+
+ // Set size for horizontal toolbar.
+ $this->getSession()->resizeWindow(1200, 600);
+ $this->drupalGet('admin/structure/views/view/content');
+
+ $web_assert = $this->assertSession();
+ $page = $session->getPage();
+
+ $this->assertNotEmpty($web_assert->waitForElement('css', 'body.toolbar-horizontal'));
+ $this->assertNotEmpty($web_assert->waitForElementVisible('css', '.toolbar-tray'));
+
+ // Toggle the Toolbar in Horizontal mode to asserts the checkboxes are not
+ // covered by the toolbar.
+ $page->pressButton('Vertical orientation');
+
+ // Open the dialog.
+ $page->clickLink('views-add-field');
+
+ // Wait for the popup to open and the search field to be available.
+ $options_search = $web_assert->waitForField('override[controls][options_search]');
+
+ $options_search->setValue('FIELD_1_TITLE');
+ // Assert the element is clickable and on top of toolbar.
+ $web_assert->waitForElement('css', 'input[name="name[views.views_test_field_1]"]')->click();
+ }
+
+ /**
+ * Dataprovider that returns theme name as the sole argument.
+ */
+ public function themeDataProvider() {
+ return [
+ [
+ 'classy',
+ ],
+ [
+ 'seven',
+ ],
+ [
+ 'bartik',
+ ],
+ ];
+ }
+
}
--
GitLab