diff --git a/src/core_modules/capture-core/components/DataEntries/withErrorMessagePostProcessor/UniqueTEADuplicate/ExistingTEIContents.component.js b/src/core_modules/capture-core/components/DataEntries/withErrorMessagePostProcessor/UniqueTEADuplicate/ExistingTEIContents.component.js index 8d919e73e2..7bfed86fa6 100644 --- a/src/core_modules/capture-core/components/DataEntries/withErrorMessagePostProcessor/UniqueTEADuplicate/ExistingTEIContents.component.js +++ b/src/core_modules/capture-core/components/DataEntries/withErrorMessagePostProcessor/UniqueTEADuplicate/ExistingTEIContents.component.js @@ -2,10 +2,7 @@ import React, { type ComponentType } from 'react'; import { withStyles } from '@material-ui/core/styles'; import i18n from '@dhis2/d2-i18n'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogTitle from '@material-ui/core/DialogTitle'; -import DialogActions from '@material-ui/core/DialogActions'; -import { Button } from '@dhis2/ui'; +import { Button, ModalContent, ModalTitle, ModalActions } from '@dhis2/ui'; import { CardList } from '../../../CardList'; import type { Props } from './existingTeiContents.types'; @@ -35,18 +32,18 @@ const ExistingTEIContentsComponentPlain = ({ return ( - - + + {i18n.t('Registered person')} - + - - + + @@ -73,17 +69,15 @@ class ErrorDialogPlain extends React.Component { render() { return ( - + {i18n.t('Validation errors')} - - - - {this.getContents()} - - - + + + {this.getContents()} + + {this.getButtons()} - + ); } diff --git a/src/core_modules/capture-core/components/DataEntry/withSaveHandler/MessagesDialogContents/WarningDialog.component.js b/src/core_modules/capture-core/components/DataEntry/withSaveHandler/MessagesDialogContents/WarningDialog.component.js index 4510553cca..ff95f00ee1 100644 --- a/src/core_modules/capture-core/components/DataEntry/withSaveHandler/MessagesDialogContents/WarningDialog.component.js +++ b/src/core_modules/capture-core/components/DataEntry/withSaveHandler/MessagesDialogContents/WarningDialog.component.js @@ -1,11 +1,7 @@ // @flow import * as React from 'react'; -import DialogActions from '@material-ui/core/DialogActions'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogContentText from '@material-ui/core/DialogContentText'; -import DialogTitle from '@material-ui/core/DialogTitle'; import i18n from '@dhis2/d2-i18n'; -import { Button } from '@dhis2/ui'; +import { Button, ModalTitle, ModalContent, ModalActions } from '@dhis2/ui'; import { withStyles } from '@material-ui/core'; type Props = { @@ -51,15 +47,13 @@ class WarningDialogPlain extends React.Component { const { onAbort, onSave, classes } = this.props; return ( - + {i18n.t('Validation warnings')} - - - - {this.getContents()} - - - + + + {this.getContents()} + +
- + ); } diff --git a/src/core_modules/capture-core/components/DataEntry/withSaveHandler/withSaveHandler.js b/src/core_modules/capture-core/components/DataEntry/withSaveHandler/withSaveHandler.js index d8e90bfc3c..b17256fb98 100644 --- a/src/core_modules/capture-core/components/DataEntry/withSaveHandler/withSaveHandler.js +++ b/src/core_modules/capture-core/components/DataEntry/withSaveHandler/withSaveHandler.js @@ -1,10 +1,7 @@ // @flow import * as React from 'react'; import log from 'loglevel'; -import Dialog from '@material-ui/core/Dialog'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogContentText from '@material-ui/core/DialogContentText'; -import DialogTitle from '@material-ui/core/DialogTitle'; +import { Modal, ModalContent, ModalTitle } from '@dhis2/ui'; import { connect } from 'react-redux'; import i18n from '@dhis2/d2-i18n'; import { errorCreator } from 'capture-core-utils'; @@ -248,8 +245,8 @@ const getSaveHandler = ( onSave={this.handleSaveAttempt} {...filteredProps} /> - - - + - + {i18n.t('Operations running')} - - - - {this.getDialogWaitForUploadContents()} - - - + + + {this.getDialogWaitForUploadContents()} + + ); } diff --git a/src/core_modules/capture-core/components/FeedbackBar/FeedbackBar.component.js b/src/core_modules/capture-core/components/FeedbackBar/FeedbackBar.component.js index c6b1fe0a49..80fdee4a14 100644 --- a/src/core_modules/capture-core/components/FeedbackBar/FeedbackBar.component.js +++ b/src/core_modules/capture-core/components/FeedbackBar/FeedbackBar.component.js @@ -1,13 +1,9 @@ // @flow import * as React from 'react'; import SnackBar from '@material-ui/core/Snackbar'; -import Dialog from '@material-ui/core/Dialog'; -import DialogActions from '@material-ui/core/DialogActions'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogTitle from '@material-ui/core/DialogTitle'; import { withStyles } from '@material-ui/core/styles'; import { IconButton } from 'capture-ui'; -import { IconCross24, Button } from '@dhis2/ui'; +import { IconCross24, Button, Modal, ModalTitle, ModalContent, ModalActions } from '@dhis2/ui'; import i18n from '@dhis2/d2-i18n'; import isDefined from 'd2-utilizr/lib/isDefined'; @@ -100,25 +96,25 @@ class Index extends React.Component { message={{message}} action={this.getAction()} /> - - + { // $FlowFixMe[prop-missing] automated comment isDialogOpen ? message && message.title : ''} - - + + { // $FlowFixMe[prop-missing] automated comment isDialogOpen ? message && message.content : ''} - - + + - - + + ); } diff --git a/src/core_modules/capture-core/components/FormFields/New/Fields/CoordinateField/CoordinateField.component.js b/src/core_modules/capture-core/components/FormFields/New/Fields/CoordinateField/CoordinateField.component.js index 9ac8d6931c..992b6b069d 100644 --- a/src/core_modules/capture-core/components/FormFields/New/Fields/CoordinateField/CoordinateField.component.js +++ b/src/core_modules/capture-core/components/FormFields/New/Fields/CoordinateField/CoordinateField.component.js @@ -2,8 +2,7 @@ import * as React from 'react'; import withStyles from '@material-ui/core/styles/withStyles'; import { CoordinateField as UICoordinateField } from 'capture-ui'; -import Dialog from '@material-ui/core/Dialog'; -import DialogTitle from '@material-ui/core/DialogTitle'; +import { Modal, ModalTitle } from '@dhis2/ui'; import { typeof orientations } from '../../../New'; const getStyles = (theme: Theme) => ({ @@ -80,11 +79,12 @@ class CoordinateFieldPlain extends React.Component { // $FlowFixMe[cannot-spread-inexact] automated comment - {dialogLabel} - + {dialogLabel} + } {...passOnProps} classes={this.passOnClasses} diff --git a/src/core_modules/capture-core/components/ListView/ColumnSelector/ColumnSelectorDialog.component.js b/src/core_modules/capture-core/components/ListView/ColumnSelector/ColumnSelectorDialog.component.js index 6cbe5aa034..120adf768e 100644 --- a/src/core_modules/capture-core/components/ListView/ColumnSelector/ColumnSelectorDialog.component.js +++ b/src/core_modules/capture-core/components/ListView/ColumnSelector/ColumnSelectorDialog.component.js @@ -1,11 +1,7 @@ // @flow import React, { useState, useEffect } from 'react'; import { isEqual } from 'lodash'; -import { Button } from '@dhis2/ui'; -import Dialog from '@material-ui/core/Dialog'; -import DialogActions from '@material-ui/core/DialogActions'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogTitle from '@material-ui/core/DialogTitle'; +import { Modal, ModalTitle, ModalContent, ModalActions, Button } from '@dhis2/ui'; import i18n from '@dhis2/d2-i18n'; import { DragDropList } from './DragDropList'; @@ -42,21 +38,21 @@ export const ColumnSelectorDialog = ({ columns, open, onClose, onSave }: Props) return ( - - {i18n.t('Columns to show in table')} - + + {i18n.t('Columns to show in table')} + - - + + - - + + ); }; diff --git a/src/core_modules/capture-core/components/LoadingMasks/DialogLoadingMask.component.js b/src/core_modules/capture-core/components/LoadingMasks/DialogLoadingMask.component.js index 0366b2b095..1acc9e6a1c 100644 --- a/src/core_modules/capture-core/components/LoadingMasks/DialogLoadingMask.component.js +++ b/src/core_modules/capture-core/components/LoadingMasks/DialogLoadingMask.component.js @@ -1,8 +1,6 @@ // @flow import React, { Component } from 'react'; -import { CircularLoader } from '@dhis2/ui'; -import Dialog from '@material-ui/core/Dialog'; -import DialogContent from '@material-ui/core/DialogContent'; +import { CircularLoader, Modal, ModalContent } from '@dhis2/ui'; type Props = { }; @@ -10,13 +8,13 @@ type Props = { export class DialogLoadingMask extends Component { render() { return ( - - + - - + + ); } } diff --git a/src/core_modules/capture-core/components/PossibleDuplicatesDialog/PossibleDuplicatesDialog.component.js b/src/core_modules/capture-core/components/PossibleDuplicatesDialog/PossibleDuplicatesDialog.component.js index 5a35b3ff34..969f581db3 100644 --- a/src/core_modules/capture-core/components/PossibleDuplicatesDialog/PossibleDuplicatesDialog.component.js +++ b/src/core_modules/capture-core/components/PossibleDuplicatesDialog/PossibleDuplicatesDialog.component.js @@ -1,8 +1,6 @@ // @flow import * as React from 'react'; -import { withStyles } from '@material-ui/core'; -import Dialog from '@material-ui/core/Dialog'; -import DialogActions from '@material-ui/core/DialogActions'; +import { Modal, ModalActions } from '@dhis2/ui'; import { ReviewDialogContents } from './ReviewDialogContents/ReviewDialogContents.container'; import type { RenderCustomCardActions } from '../CardList/CardList.types'; @@ -15,37 +13,24 @@ type Props = {| selectedScopeId: string |}; -const StyledDialogActions = withStyles({ - root: { margin: 24 }, -})(DialogActions); - class ReviewDialogClass extends React.Component { - static paperProps = { - style: { - maxHeight: 'calc(100% - 100px)', - }, - }; - render() { const { open, onCancel, extraActions, selectedScopeId, dataEntryId, renderCardActions } = this.props; return ( - - + {extraActions} - - + + ); } } diff --git a/src/core_modules/capture-core/components/PossibleDuplicatesDialog/ReviewDialogContents/ReviewDialogContents.component.js b/src/core_modules/capture-core/components/PossibleDuplicatesDialog/ReviewDialogContents/ReviewDialogContents.component.js index 99c01c200c..d5146481cb 100644 --- a/src/core_modules/capture-core/components/PossibleDuplicatesDialog/ReviewDialogContents/ReviewDialogContents.component.js +++ b/src/core_modules/capture-core/components/PossibleDuplicatesDialog/ReviewDialogContents/ReviewDialogContents.component.js @@ -1,8 +1,7 @@ // @flow import React, { type ComponentType, useContext } from 'react'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogTitle from '@material-ui/core/DialogTitle'; import { withStyles } from '@material-ui/core/styles'; +import { ModalTitle, ModalContent } from '@dhis2/ui'; import i18n from '@dhis2/d2-i18n'; import { CardList } from '../../CardList'; import { ReviewDialogContentsPager } from './ReviewDialogContentsPager.container'; @@ -30,10 +29,10 @@ const ReviewDialogContentsPlain = ({ const { resultsPageSize } = useContext(ResultsPageSizeContext); return ( - - + + {i18n.t('Possible duplicates found')} - + - + ); }; diff --git a/src/core_modules/capture-ui/CoordinateField/CoordinateField.component.js b/src/core_modules/capture-ui/CoordinateField/CoordinateField.component.js index 48eecdaca7..270ee8f549 100644 --- a/src/core_modules/capture-ui/CoordinateField/CoordinateField.component.js +++ b/src/core_modules/capture-ui/CoordinateField/CoordinateField.component.js @@ -4,7 +4,7 @@ import classNames from 'classnames'; import i18n from '@dhis2/d2-i18n'; import { Map, TileLayer, Marker, withLeaflet } from 'react-leaflet'; import { ReactLeafletSearch } from 'react-leaflet-search-unpolyfilled'; -import { IconCross24, Button } from '@dhis2/ui'; +import { IconCross24, Button, ModalActions, ModalContent } from '@dhis2/ui'; import { IconButton } from 'capture-ui'; import { AddLocationIcon } from '../Icons'; import { CoordinateInput } from '../internal/CoordinateInput/CoordinateInput.component'; @@ -139,13 +139,15 @@ export class CoordinateField extends React.Component { const clonedDialog = React.cloneElement( this.props.mapDialog, - { open: this.state.showMap, onClose: this.closeMap }, + { hide: !this.state.showMap, onClose: this.closeMap }, [...React.Children.toArray(this.props.mapDialog.props.children), ( -
- {this.renderMap()} + <> + + {this.renderMap()} + {this.renderDialogActions()} -
+ )], ); return clonedDialog; @@ -173,7 +175,7 @@ export class CoordinateField extends React.Component { key="map" ref={(mapInstance) => { this.setMapInstance(mapInstance); }} > - + { } renderDialogActions = () => ( -
+
{/* $FlowFixMe[prop-missing] automated comment */}
-
+ ); renderLatitude = () => { diff --git a/src/core_modules/capture-ui/CoordinateField/coordinateField.module.css b/src/core_modules/capture-ui/CoordinateField/coordinateField.module.css index d73c64bcf2..9be9f06878 100644 --- a/src/core_modules/capture-ui/CoordinateField/coordinateField.module.css +++ b/src/core_modules/capture-ui/CoordinateField/coordinateField.module.css @@ -3,7 +3,7 @@ display: flex; flex-direction: column; } - + .coordinateFieldsHorizontal { position: relative; display: flex; @@ -64,6 +64,8 @@ .mapContainer { flex-grow: 1; position: relative; + height: 100%; + width: 100%; } .leafletContainer { @@ -72,14 +74,13 @@ width: 100%; } +/*Really cant get this map to work - need to have a look*/ .dialogContent { - flex-grow: 1; display: flex; + height: 600px; flex-direction: column; - padding: 0px 24px 24px 24px; } .buttonsContainerVertical { display: flex; } - \ No newline at end of file