From c0e28ca5c2627cb6a9374d449abc3286a0d92543 Mon Sep 17 00:00:00 2001 From: Steffen Waterkamp Date: Fri, 9 Nov 2018 10:44:34 +0100 Subject: [PATCH 1/5] Export DialogFooterLayout from Footer This will be reused in a new Footer component. Also the padding is adjusted to match left-button/dialog-margin distance to right-button/dialog-margin distance. --- gsa/src/web/components/dialog/footer.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/gsa/src/web/components/dialog/footer.js b/gsa/src/web/components/dialog/footer.js index 07ed6531b0..6e1477e03f 100644 --- a/gsa/src/web/components/dialog/footer.js +++ b/gsa/src/web/components/dialog/footer.js @@ -34,12 +34,12 @@ import Layout from 'web/components/layout/layout'; import Button from './button'; -const StyledLayout = styled(Layout)` +export const DialogFooterLayout = styled(Layout)` border-width: 1px 0 0 0; border-style: solid; border-color: ${Theme.lightGray}; margin-top: 15px; - padding: 10px 20px 10px 15px; + padding: 10px 20px 10px 20px; `; const DialogFooter = ({ @@ -47,7 +47,7 @@ const DialogFooter = ({ onClick, loading = false, }) => ( - @@ -58,7 +58,7 @@ const DialogFooter = ({ > {title} - + ); DialogFooter.propTypes = { From 4ddc188c2585f66791fb5887e7278271f31e8f40 Mon Sep 17 00:00:00 2001 From: Steffen Waterkamp Date: Fri, 9 Nov 2018 10:58:33 +0100 Subject: [PATCH 2/5] Extract TwoButtonFooter from LinkConfirmationDialog and make it its own component --- gsa/CMakeLists.txt | 3 +- .../dialog/linkconfirmationdialog.js | 39 ++-------- .../web/components/dialog/twobuttonfooter.js | 77 +++++++++++++++++++ 3 files changed, 86 insertions(+), 33 deletions(-) create mode 100644 gsa/src/web/components/dialog/twobuttonfooter.js diff --git a/gsa/CMakeLists.txt b/gsa/CMakeLists.txt index b1b0233558..b95c771a6f 100644 --- a/gsa/CMakeLists.txt +++ b/gsa/CMakeLists.txt @@ -243,9 +243,10 @@ set (GSA_JS_SRC_FILES ${GSA_SRC_DIR}/src/web/components/dialog/linkconfirmationdialog.js ${GSA_SRC_DIR}/src/web/components/dialog/overlay.js ${GSA_SRC_DIR}/src/web/components/dialog/resizer.js + ${GSA_SRC_DIR}/src/web/components/dialog/savedialog.js ${GSA_SRC_DIR}/src/web/components/dialog/scrollablecontent.js ${GSA_SRC_DIR}/src/web/components/dialog/title.js - ${GSA_SRC_DIR}/src/web/components/dialog/savedialog.js + ${GSA_SRC_DIR}/src/web/components/dialog/twobuttonfooter.js ${GSA_SRC_DIR}/src/web/components/errorboundary/errorboundary.js ${GSA_SRC_DIR}/src/web/components/folding/folding.js ${GSA_SRC_DIR}/src/web/components/footnote/footnote.js diff --git a/gsa/src/web/components/dialog/linkconfirmationdialog.js b/gsa/src/web/components/dialog/linkconfirmationdialog.js index 377943fe8a..1c7dc36fc3 100644 --- a/gsa/src/web/components/dialog/linkconfirmationdialog.js +++ b/gsa/src/web/components/dialog/linkconfirmationdialog.js @@ -23,34 +23,18 @@ */ import React from 'react'; -import styled from 'styled-components'; - import _ from 'gmp/locale'; import PropTypes from 'web/utils/proptypes'; -import Theme from 'web/utils/theme'; - import Dialog from 'web/components/dialog/dialog'; import DialogContent from 'web/components/dialog/content'; -import DialogTitle from 'web/components/dialog/title'; import ScrollableContent from 'web/components/dialog/scrollablecontent'; - -import Button from 'web/components/dialog/button'; - -import Layout from 'web/components/layout/layout'; +import DialogTitle from 'web/components/dialog/title'; +import DialogTwoButtonFooter from 'web/components/dialog/twobuttonfooter'; const DEFAULT_DIALOG_WIDTH = '400px'; -const StyledLayout = styled(Layout)` - justify-content: space-between; - border-width: 1px 0 0 0; - border-style: solid; - border-color: ${Theme.lightGray}; - margin-top: 15px; - padding: 10px 15px 10px 15px; -`; - class ConfirmationDialogContent extends React.Component { constructor(...args) { @@ -87,20 +71,11 @@ class ConfirmationDialogContent extends React.Component { {text} - - - - + ); } diff --git a/gsa/src/web/components/dialog/twobuttonfooter.js b/gsa/src/web/components/dialog/twobuttonfooter.js new file mode 100644 index 0000000000..a58a33091e --- /dev/null +++ b/gsa/src/web/components/dialog/twobuttonfooter.js @@ -0,0 +1,77 @@ +/* Greenbone Security Assistant + * + * Authors: + * Steffen Waterkamp + * + * Copyright: + * Copyright (C) 2018 Greenbone Networks GmbH + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU General Public License + * as published by the Free Software Foundation; either version 2 + * of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program; if not, write to the Free Software + * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA. + */ + +import React from 'react'; + +import styled from 'styled-components'; + +import _ from 'gmp/locale'; + +import PropTypes from 'web/utils/proptypes'; + +import {DialogFooterLayout} from 'web/components/dialog/footer'; + +import Button from './button'; + +const StyledLayout = styled(DialogFooterLayout)` + justify-content: space-between; +`; + +const DialogTwoButtonFooter = ({ + leftButtonTitle = _('Cancel'), + rightButtonTitle, + onLeftButtonClick, + onRightButtonClick, + loading = false, +}) => ( + + + + +); + +DialogTwoButtonFooter.propTypes = { + leftButtonTitle: PropTypes.string.isRequired, + loading: PropTypes.bool, + rightButtonTitle: PropTypes.string.isRequired, + onLeftButtonClick: PropTypes.func, + onRightButtonClick: PropTypes.func, +}; + +export default DialogTwoButtonFooter; + +// vim: set ts=2 sw=2 tw=80: From 8abb5756fdb07a203360ac0372f7647e5f01266e Mon Sep 17 00:00:00 2001 From: Steffen Waterkamp Date: Fri, 9 Nov 2018 10:59:33 +0100 Subject: [PATCH 3/5] Use TwoButtonFooter in all SaveDialogs --- gsa/src/web/components/dialog/savedialog.js | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/gsa/src/web/components/dialog/savedialog.js b/gsa/src/web/components/dialog/savedialog.js index 5bd6a43bcb..99c185bfca 100644 --- a/gsa/src/web/components/dialog/savedialog.js +++ b/gsa/src/web/components/dialog/savedialog.js @@ -27,17 +27,17 @@ import _ from 'gmp/locale'; import {isDefined} from 'gmp/utils/identity'; -import State from '../../utils/state.js'; -import PropTypes from '../../utils/proptypes.js'; +import State from 'web/utils/state'; +import PropTypes from 'web/utils/proptypes'; import ErrorBoundary from 'web/components/errorboundary/errorboundary'; -import Dialog from '../dialog/dialog.js'; -import DialogContent from '../dialog/content.js'; -import DialogError from '../dialog/error.js'; -import DialogFooter from '../dialog/footer.js'; -import DialogTitle from '../dialog/title.js'; -import ScrollableContent from '../dialog/scrollablecontent.js'; +import Dialog from '../dialog/dialog'; +import DialogContent from '../dialog/content'; +import DialogError from '../dialog/error'; +import DialogFooter from '../dialog/twobuttonfooter'; +import DialogTitle from '../dialog/title'; +import ScrollableContent from '../dialog/scrollablecontent'; class SaveDialogContent extends React.Component { @@ -138,9 +138,10 @@ class SaveDialogContent extends React.Component { this.handleSaveClick(childValues)} + rightButtonTitle={buttonTitle} + onLeftButtonClick={close} + onRightButtonClick={() => this.handleSaveClick(childValues)} /> ); From fc5e584d163f4c302aa483ae2980bee3eabbe530 Mon Sep 17 00:00:00 2001 From: Steffen Waterkamp Date: Fri, 9 Nov 2018 11:00:31 +0100 Subject: [PATCH 4/5] Use TwoButtonFooter in withFilterDialog --- .../powerfilter/withFilterDialog.js | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/gsa/src/web/components/powerfilter/withFilterDialog.js b/gsa/src/web/components/powerfilter/withFilterDialog.js index ed87413d6c..35ba70bfa5 100644 --- a/gsa/src/web/components/powerfilter/withFilterDialog.js +++ b/gsa/src/web/components/powerfilter/withFilterDialog.js @@ -26,15 +26,15 @@ import _ from 'gmp/locale'; import {isDefined} from 'gmp/utils/identity'; -import Filter from 'gmp/models/filter.js'; +import Filter from 'gmp/models/filter'; -import PropTypes from '../../utils/proptypes.js'; +import PropTypes from 'web/utils/proptypes'; -import Dialog from '../dialog/dialog.js'; -import DialogContent from '../dialog/content.js'; -import DialogTitle from '../dialog/title.js'; -import DialogFooter from '../dialog/footer.js'; -import ScrollableContent from '../dialog/scrollablecontent.js'; +import Dialog from '../dialog/dialog'; +import DialogContent from '../dialog/content'; +import DialogTitle from '../dialog/title'; +import DialogFooter from '../dialog/twobuttonfooter'; +import ScrollableContent from '../dialog/scrollablecontent'; const withFilterDialog = (options = {}) => FilterDialogComponent => { @@ -159,8 +159,9 @@ const withFilterDialog = (options = {}) => FilterDialogComponent => { )} From 64ecfdb2233d1baef0937ef6f4667fe9c4a6f6de Mon Sep 17 00:00:00 2001 From: Steffen Waterkamp Date: Fri, 9 Nov 2018 11:04:44 +0100 Subject: [PATCH 5/5] Don't require LeftButtonTitle --- gsa/src/web/components/dialog/twobuttonfooter.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gsa/src/web/components/dialog/twobuttonfooter.js b/gsa/src/web/components/dialog/twobuttonfooter.js index a58a33091e..77d89882e0 100644 --- a/gsa/src/web/components/dialog/twobuttonfooter.js +++ b/gsa/src/web/components/dialog/twobuttonfooter.js @@ -65,7 +65,7 @@ const DialogTwoButtonFooter = ({ ); DialogTwoButtonFooter.propTypes = { - leftButtonTitle: PropTypes.string.isRequired, + leftButtonTitle: PropTypes.string, loading: PropTypes.bool, rightButtonTitle: PropTypes.string.isRequired, onLeftButtonClick: PropTypes.func,