From f25cc56ddb8eb20116f6d5038d1400539838170e Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Tue, 19 Dec 2017 19:15:45 +0100 Subject: [PATCH 1/4] Use Portal to put dialogs to the end of the document --- client/coral-ui/components/Dialog.css | 1 - client/coral-ui/components/Dialog.js | 17 ++++++++++------- package.json | 1 + yarn.lock | 6 ++++++ 4 files changed, 17 insertions(+), 8 deletions(-) diff --git a/client/coral-ui/components/Dialog.css b/client/coral-ui/components/Dialog.css index b5872c12c..9e7700299 100644 --- a/client/coral-ui/components/Dialog.css +++ b/client/coral-ui/components/Dialog.css @@ -1,4 +1,3 @@ .dialog { - position: fixed; } diff --git a/client/coral-ui/components/Dialog.js b/client/coral-ui/components/Dialog.js index d847efaea..bba386026 100644 --- a/client/coral-ui/components/Dialog.js +++ b/client/coral-ui/components/Dialog.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import dialogPolyfill from 'dialog-polyfill'; import 'dialog-polyfill/dialog-polyfill.css'; import styles from './Dialog.css'; +import {Portal} from 'react-portal'; export default class Dialog extends Component { static propTypes = { @@ -53,13 +54,15 @@ export default class Dialog extends Component { const {children, className = '', onClose, onCancel, open, ...rest} = this.props; // eslint-disable-line return ( - { this.dialog = el; }} - className={`mdl-dialog ${className} ${styles.dialog}`} - {...rest} - > - {children} - + + { this.dialog = el; }} + className={`mdl-dialog ${className} ${styles.dialog}`} + {...rest} + > + {children} + + ); } } diff --git a/package.json b/package.json index da084504d..de3b617a2 100644 --- a/package.json +++ b/package.json @@ -160,6 +160,7 @@ "react-mdl": "^1.7.2", "react-mdl-selectfield": "^0.2.0", "react-paginate": "^5.0.0", + "react-portal": "^4.1.2", "react-recaptcha": "^2.2.6", "react-redux": "^4.4.5", "react-router": "^3.0.0", diff --git a/yarn.lock b/yarn.lock index 282e501e1..c380bcd3a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7473,6 +7473,12 @@ react-paginate@^5.0.0: prop-types "^15.6.0" react-addons-create-fragment "^15.0.0" +react-portal@^4.1.2: + version "4.1.2" + resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-4.1.2.tgz#7f28f3c8c2ed5c541907c0ed0f24e8996acf627f" + dependencies: + prop-types "^15.5.8" + react-recaptcha@^2.2.6: version "2.3.5" resolved "https://registry.yarnpkg.com/react-recaptcha/-/react-recaptcha-2.3.5.tgz#a5db337125bb00fb13c2fa2e4ebfbe8b0cd06bb7" From 88d3a53165cf46e15a93da6931c2f94272fb1c27 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Tue, 19 Dec 2017 19:24:39 +0100 Subject: [PATCH 2/4] Make backdrop work --- client/coral-ui/components/Dialog.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/client/coral-ui/components/Dialog.css b/client/coral-ui/components/Dialog.css index 9e7700299..7c260cbbf 100644 --- a/client/coral-ui/components/Dialog.css +++ b/client/coral-ui/components/Dialog.css @@ -1,3 +1,14 @@ .dialog { } + +:global(.backdrop) { + z-index: 100148; + left: 0; + top: 0; + width: 100%; + height: 100%; + position: absolute; + background-color: black; + opacity: 0.1; +} From 689fb4baf0c78ce531c9e04caab27f127313db44 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Tue, 19 Dec 2017 19:26:22 +0100 Subject: [PATCH 3/4] Remove z-index --- client/coral-ui/components/Dialog.css | 1 - 1 file changed, 1 deletion(-) diff --git a/client/coral-ui/components/Dialog.css b/client/coral-ui/components/Dialog.css index 7c260cbbf..47bc43918 100644 --- a/client/coral-ui/components/Dialog.css +++ b/client/coral-ui/components/Dialog.css @@ -3,7 +3,6 @@ } :global(.backdrop) { - z-index: 100148; left: 0; top: 0; width: 100%; From f2f7742709073b3ba01c0184285a789321a5ebd9 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Tue, 19 Dec 2017 19:40:16 +0100 Subject: [PATCH 4/4] Adapt e2e --- test/e2e/page_objects/admin.js | 8 ++++---- test/e2e/specs/04_userStatus.js | 7 +++++-- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/test/e2e/page_objects/admin.js b/test/e2e/page_objects/admin.js index fd2571707..c76a45d9e 100644 --- a/test/e2e/page_objects/admin.js +++ b/test/e2e/page_objects/admin.js @@ -57,6 +57,10 @@ module.exports = { suspendUserDialog: '.talk-admin-suspend-user-dialog', suspendUserConfirmButton: '.talk-admin-suspend-user-dialog-confirm', supendUserSendButton: '.talk-admin-suspend-user-dialog-send', + usernameDialog: '.talk-reject-username-dialog', + usernameDialogButtons: '.talk-reject-username-dialog-buttons', + usernameDialogSuspend: '.talk-reject-username-dialog-button-k', + usernameDialogSuspensionMessage: '.talk-reject-username-dialog-suspension-message', toast: '.toastify', toastClose: '.toastify__close', }, @@ -97,10 +101,6 @@ module.exports = { flaggedUser:'.talk-admin-community-flagged-user', flaggedUserApproveButton: '.talk-admin-flagged-user-approve-button', flaggedUserRejectButton: '.talk-admin-flagged-user-reject-button', - usernameDialog: '.talk-reject-username-dialog', - usernameDialogButtons: '.talk-reject-username-dialog-buttons', - usernameDialogSuspend: '.talk-reject-username-dialog-button-k', - usernameDialogSuspensionMessage: '.talk-reject-username-dialog-suspension-message' }, sections: { people: { diff --git a/test/e2e/specs/04_userStatus.js b/test/e2e/specs/04_userStatus.js index 41540db65..f4a4455f0 100644 --- a/test/e2e/specs/04_userStatus.js +++ b/test/e2e/specs/04_userStatus.js @@ -64,15 +64,18 @@ module.exports = { .click('@flaggedUserRejectButton'); }, 'admin suspends the user': (client) => { + const adminPage = client.page.admin(); const community = client.page.admin().section.community; - community + adminPage .waitForElementVisible('@usernameDialog') .waitForElementVisible('@usernameDialogButtons') .waitForElementVisible('@usernameDialogSuspend') .click('@usernameDialogSuspend') .waitForElementVisible('@usernameDialogSuspensionMessage') - .click('@usernameDialogSuspend') + .click('@usernameDialogSuspend'), + + community .waitForElementNotPresent('@flaggedUser'); }, 'admin logs out': (client) => {