From 67baa9520ad38946e621d6f316c07b4cc9b83c18 Mon Sep 17 00:00:00 2001 From: "Eugeniy Aryamnov (DevExpress)" Date: Mon, 28 Oct 2019 13:53:59 +0300 Subject: [PATCH 01/11] Initial --- .../src/templates/appointment-tooltip/content.jsx | 1 - .../src/templates/appointment-tooltip/header.jsx | 1 - .../src/templates/appointment-tooltip/layout.jsx | 4 ++++ .../src/templates/appointment/vertical-appointment.jsx | 8 ++++++++ .../src/templates/today-button/today-button.jsx | 3 +++ .../src/templates/view-switcher/switcher.jsx | 3 +++ .../src/templates/views/horizontal/time-table/cell.jsx | 3 +++ .../src/templates/views/vertical/day-scale/cell.jsx | 7 +++++++ 8 files changed, 28 insertions(+), 2 deletions(-) diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-tooltip/content.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-tooltip/content.jsx index 5b9bb9e864..b867bdb076 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-tooltip/content.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-tooltip/content.jsx @@ -14,7 +14,6 @@ const styles = ({ spacing, palette, typography }) => ({ paddingTop: spacing(1), backgroundColor: palette.background.paper, boxSizing: 'border-box', - width: '400px', ...typography.body2, }, text: { diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-tooltip/header.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-tooltip/header.jsx index 9f777df25b..c7877d38e7 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-tooltip/header.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-tooltip/header.jsx @@ -5,7 +5,6 @@ import { withStyles } from '@material-ui/core/styles'; const styles = ({ spacing, palette }) => ({ head: { - width: '400px', position: 'relative', paddingLeft: spacing(1), paddingRight: spacing(0.5), diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-tooltip/layout.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-tooltip/layout.jsx index 6776db00cb..bd101ed70b 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-tooltip/layout.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-tooltip/layout.jsx @@ -8,6 +8,10 @@ const verticalTopHorizontalCenterOptions = { vertical: 'top', horizontal: 'cente const styles = { popover: { borderRadius: '8px', + width: '400px', + '@media (max-width: 500px)': { + width: '300px', + }, }, }; diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment/vertical-appointment.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment/vertical-appointment.jsx index 729f578962..fcd12e6296 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment/vertical-appointment.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment/vertical-appointment.jsx @@ -32,9 +32,17 @@ const styles = ({ palette, spacing }) => ({ textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'flex', + '@media (max-width: 500px)': { + paddingLeft: spacing(0.5), + paddingRight: spacing(0.5), + }, }, shortContent: { padding: spacing(0.25, 1), + '@media (max-width: 500px)': { + paddingLeft: spacing(0.5), + paddingRight: spacing(0.5), + }, }, shortContainer: { display: 'flex', diff --git a/packages/dx-react-scheduler-material-ui/src/templates/today-button/today-button.jsx b/packages/dx-react-scheduler-material-ui/src/templates/today-button/today-button.jsx index 0b5d330d95..89ee77bc8e 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/today-button/today-button.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/today-button/today-button.jsx @@ -11,6 +11,9 @@ const styles = ({ spacing }) => ({ '&:first-child': { marginLeft: 0, }, + '@media (max-width: 700px)': { + fontSize: '0.75rem', + }, }, }); diff --git a/packages/dx-react-scheduler-material-ui/src/templates/view-switcher/switcher.jsx b/packages/dx-react-scheduler-material-ui/src/templates/view-switcher/switcher.jsx index 805d83f801..5e6db74e3d 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/view-switcher/switcher.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/view-switcher/switcher.jsx @@ -8,6 +8,9 @@ const styles = ({ spacing }) => ({ padding: spacing(1.25, 1.75), paddingRight: spacing(4), textTransform: 'uppercase', + '@media (max-width: 700px)': { + fontSize: '0.75rem', + }, }, inputRoot: { marginLeft: spacing(0.5), diff --git a/packages/dx-react-scheduler-material-ui/src/templates/views/horizontal/time-table/cell.jsx b/packages/dx-react-scheduler-material-ui/src/templates/views/horizontal/time-table/cell.jsx index ab0ee36ab5..c4321d0a0f 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/views/horizontal/time-table/cell.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/views/horizontal/time-table/cell.jsx @@ -33,6 +33,9 @@ const styles = theme => ({ }, text: { padding: '1em', + '@media (max-width: 500px)': { + padding: '0.5em', + }, }, today: { margin: '0.85em', diff --git a/packages/dx-react-scheduler-material-ui/src/templates/views/vertical/day-scale/cell.jsx b/packages/dx-react-scheduler-material-ui/src/templates/views/vertical/day-scale/cell.jsx index fee8af86de..afc210d74a 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/views/vertical/day-scale/cell.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/views/vertical/day-scale/cell.jsx @@ -14,6 +14,10 @@ const styles = theme => ({ '&:last-child': { paddingRight: 0, }, + '@media (max-width: 700px)': { + padding: theme.spacing(1), + paddingBottom: 0, + }, }, dayOfWeek: { ...theme.typography.caption, @@ -21,6 +25,9 @@ const styles = theme => ({ }, dayOfMonth: { ...theme.typography.h4, + '@media (max-width: 700px)': { + ...theme.typography.h6, + }, }, highlightCell: { color: theme.palette.primary.main, From 03243068d7922ef54f050e8fea62056d82da728c Mon Sep 17 00:00:00 2001 From: "Eugeniy Aryamnov (DevExpress)" Date: Mon, 28 Oct 2019 13:58:58 +0300 Subject: [PATCH 02/11] Fix Navigation button --- .../date-navigator/navigation-button.jsx | 26 ++++++++++++++++--- .../date-navigator/navigation-button.test.jsx | 14 +++++++++- 2 files changed, 36 insertions(+), 4 deletions(-) diff --git a/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/navigation-button.jsx b/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/navigation-button.jsx index d09efe1dc3..e7904514f0 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/navigation-button.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/navigation-button.jsx @@ -3,25 +3,45 @@ import * as PropTypes from 'prop-types'; import IconButton from '@material-ui/core/IconButton'; import ChevronLeft from '@material-ui/icons/ChevronLeft'; import ChevronRight from '@material-ui/icons/ChevronRight'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'clsx'; -export const NavigationButton = React.memo(({ +const styles = ({ spacing }) => ({ + button: { + '@media (max-width: 500px)': { + width: spacing(4), + height: spacing(4), + padding: spacing(0), + }, + }, +}); + +const NavigationButtonBase = React.memo(({ type, onClick, + classes, + className, ...restProps }) => ( {type === 'back' ? : } )); -NavigationButton.propTypes = { +NavigationButtonBase.propTypes = { type: PropTypes.oneOf(['forward', 'back']).isRequired, onClick: PropTypes.func, + classes: PropTypes.object.isRequired, + className: PropTypes.string, }; -NavigationButton.defaultProps = { +NavigationButtonBase.defaultProps = { onClick: () => {}, + className: undefined, }; + +export const NavigationButton = withStyles(styles, { name: 'NavigationButton' })(NavigationButtonBase); diff --git a/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/navigation-button.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/navigation-button.test.jsx index 9b11bd26f1..83a958b7b9 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/navigation-button.test.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/navigation-button.test.jsx @@ -1,13 +1,15 @@ import * as React from 'react'; -import { createShallow } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@material-ui/core/test-utils'; import ChevronLeft from '@material-ui/icons/ChevronLeft'; import ChevronRight from '@material-ui/icons/ChevronRight'; import { NavigationButton } from './navigation-button'; describe('DateNavigator', () => { let shallow; + let classes; beforeAll(() => { shallow = createShallow({ dive: true }); + classes = getClasses(); }); describe('NavigationButton', () => { it('should pass rest props to the root element', () => { @@ -44,5 +46,15 @@ describe('DateNavigator', () => { expect(onClick) .toBeCalled(); }); + it('should pass className to the root element', () => { + const tree = shallow(( + + )); + + expect(tree.is('.custom-class')) + .toBeTruthy(); + expect(tree.is(`.${classes.button}`)) + .toBeTruthy(); + }); }); }); From 04f3a6865e539c92212b53fcbad0205780e036bb Mon Sep 17 00:00:00 2001 From: "Eugeniy Aryamnov (DevExpress)" Date: Mon, 28 Oct 2019 14:03:31 +0300 Subject: [PATCH 03/11] Fix Open button --- .../templates/date-navigator/open-button.jsx | 55 +++++++++++++++---- .../date-navigator/open-button.test.jsx | 39 +++++++++++-- 2 files changed, 78 insertions(+), 16 deletions(-) diff --git a/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/open-button.jsx b/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/open-button.jsx index 78acea605e..8ee1ddbbc2 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/open-button.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/open-button.jsx @@ -1,25 +1,60 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import Button from '@material-ui/core/Button'; +import CalendarToday from '@material-ui/icons/CalendarToday'; +import IconButton from '@material-ui/core/IconButton'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'clsx'; -export const OpenButton = React.memo(({ - text, onVisibilityToggle, ...restProps +const styles = ({ spacing }) => ({ + textButton: { + '@media (max-width: 700px)': { + display: 'none', + }, + }, + iconButton: { + '@media (min-width: 700px)': { + display: 'none', + }, + '@media (max-width: 500px)': { + width: spacing(4), + height: spacing(4), + padding: spacing(0), + }, + }, +}); + +const OpenButtonBase = React.memo(({ + text, onVisibilityToggle, classes, className, ...restProps }) => ( - + <> + + + + + )); -OpenButton.propTypes = { +OpenButtonBase.propTypes = { onVisibilityToggle: PropTypes.func.isRequired, text: PropTypes.string, className: PropTypes.string, + classes: PropTypes.object.isRequired, }; -OpenButton.defaultProps = { +OpenButtonBase.defaultProps = { text: '', className: undefined, }; + +export const OpenButton = withStyles(styles, { name: 'OpenButton' })(OpenButtonBase); diff --git a/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/open-button.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/open-button.test.jsx index 6f01934f7c..ab071378e3 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/open-button.test.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/open-button.test.jsx @@ -1,5 +1,7 @@ import * as React from 'react'; -import { createShallow } from '@material-ui/core/test-utils'; +import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import Button from '@material-ui/core/Button'; +import IconButton from '@material-ui/core/IconButton'; import { OpenButton } from './open-button'; describe('DateNavigator', () => { @@ -7,26 +9,51 @@ describe('DateNavigator', () => { onVisibilityToggle: jest.fn(), }; let shallow; + let classes; beforeAll(() => { shallow = createShallow({ dive: true }); + classes = getClasses(); }); describe('OpenButton', () => { - it('should pass rest props to the root element', () => { + it('should pass rest props to buttons', () => { const tree = shallow(( )); - expect(tree.props().data) + expect(tree.find(Button).at(0).props().data) + .toMatchObject({ a: 1 }); + expect(tree.find(IconButton).at(0).props().data) .toMatchObject({ a: 1 }); }); + it('should pass className to buttons', () => { + const tree = shallow(( + + )); + + const button = tree.find(Button).at(0); + expect(button.is('.custom-class')) + .toBeTruthy(); + expect(button.is(`.${classes.textButton}`)) + .toBeTruthy(); + + const iconButton = tree.find(IconButton).at(0); + expect(iconButton.is('.custom-class')) + .toBeTruthy(); + expect(iconButton.is(`.${classes.iconButton}`)) + .toBeTruthy(); + }); it('should handle onClink event', () => { - const button = shallow(( + const tree = shallow(( )); - button.simulate('click'); + tree.find(Button).at(0).simulate('click'); + expect(defaultProps.onVisibilityToggle) + .toBeCalledTimes(1); + + tree.find(IconButton).at(0).simulate('click'); expect(defaultProps.onVisibilityToggle) - .toBeCalled(); + .toBeCalledTimes(2); }); }); }); From cb517236793becc801918f53c87e1adf85dcd2ec Mon Sep 17 00:00:00 2001 From: "Eugeniy Aryamnov (DevExpress)" Date: Mon, 28 Oct 2019 14:35:00 +0300 Subject: [PATCH 04/11] Fix vertical view --- .../layouts/vertical-view-layout.jsx | 23 +++++++++++-------- .../layouts/vertical-view-layout.test.jsx | 15 ++++++++++++ 2 files changed, 29 insertions(+), 9 deletions(-) diff --git a/packages/dx-react-scheduler-material-ui/src/templates/layouts/vertical-view-layout.jsx b/packages/dx-react-scheduler-material-ui/src/templates/layouts/vertical-view-layout.jsx index 627a7a0ae4..eb90a5bec1 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/layouts/vertical-view-layout.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/layouts/vertical-view-layout.jsx @@ -21,6 +21,12 @@ const styles = theme => ({ timeTable: { position: 'relative', }, + timeScale: { + width: theme.spacing(9), + }, + mainTable: { + width: `calc(100% - ${theme.spacing(9)}px)`, + }, }); class VerticalViewLayoutBase extends React.PureComponent { @@ -74,25 +80,24 @@ class VerticalViewLayoutBase extends React.PureComponent { container direction="row" > - +
- +
- +
- +
- +
- - - +
+
- +
diff --git a/packages/dx-react-scheduler-material-ui/src/templates/layouts/vertical-view-layout.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/layouts/vertical-view-layout.test.jsx index 35abbbccff..f55b9f4c1a 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/layouts/vertical-view-layout.test.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/layouts/vertical-view-layout.test.jsx @@ -52,4 +52,19 @@ describe('Vertical View Layout', () => { expect(scrollingStrategy) .toBeCalledTimes(1); }); + + it('should render its components correctly', () => { + const tree = shallow(( + + )); + + expect(tree.find(`.${classes.stickyHeader}`).exists()) + .toBeTruthy(); + expect(tree.find(`.${classes.mainTable}`)) + .toHaveLength(2); + expect(tree.find(`.${classes.timeScale}`)) + .toHaveLength(2); + expect(tree.find(`.${classes.timeTable}`).exists()) + .toBeTruthy(); + }); }); From 0f47ad144f905a98b0ff153863c3e3230e3d2e78 Mon Sep 17 00:00:00 2001 From: "Eugeniy Aryamnov (DevExpress)" Date: Mon, 28 Oct 2019 14:46:38 +0300 Subject: [PATCH 05/11] Fix redux demo --- .../material-ui/demo.jsx | 31 ++++++++++++++----- 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-redux-integration/material-ui/demo.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-redux-integration/material-ui/demo.jsx index fef922c44f..207c72d1ef 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-redux-integration/material-ui/demo.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-redux-integration/material-ui/demo.jsx @@ -29,7 +29,7 @@ const styles = ({ spacing, palette }) => ({ alignItems: 'center', }, textField: { - width: '100px', + width: '75px', marginLeft: spacing(1), marginTop: 0, marginBottom: 0, @@ -43,11 +43,12 @@ const styles = ({ spacing, palette }) => ({ paddingLeft: spacing(1), paddingRight: spacing(1), width: spacing(10), + '@media (max-width: 800px)': { + width: spacing(2), + fontSize: '0.75rem', + }, }, selectedButton: { - paddingLeft: spacing(1), - paddingRight: spacing(1), - width: spacing(10), background: palette.primary[400], color: palette.primary[50], '&:hover': { @@ -59,6 +60,16 @@ const styles = ({ spacing, palette }) => ({ borderLeft: `1px solid ${palette.primary[50]}!important`, }, }, + longButtonText: { + '@media (max-width: 800px)': { + display: 'none', + }, + }, + shortButtonText: { + '@media (min-width: 800px)': { + display: 'none', + }, + }, title: { fontWeight: 'bold', overflow: 'hidden', @@ -118,6 +129,7 @@ const styles = ({ spacing, palette }) => ({ }); const LOCATIONS = ['Room 1', 'Room 2', 'Room 3']; +const LOCATIONS_SHORT = [1, 2, 3]; const Appointment = withStyles(styles, { name: 'Appointment' })(({ classes, data, ...restProps }) => ( { }; const getButtonClass = (locations, classes, location) => ( - locations.indexOf(location) > -1 ? classes.selectedButton : classes.button + locations.indexOf(location) > -1 && classes.selectedButton ); const LocationSelector = withStyles(styles, { name: 'LocationSelector' })(({ onLocationsChange, locations, classes }) => ( - {LOCATIONS.map(location => ( + {LOCATIONS.map((location, index) => ( ))} From 073c218bc267613834a61728dd4bb28ae8550616 Mon Sep 17 00:00:00 2001 From: "Eugeniy Aryamnov (DevExpress)" Date: Mon, 28 Oct 2019 15:04:01 +0300 Subject: [PATCH 06/11] Fix form --- .../src/templates/appointment-form/recurrence/layout.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layout.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layout.jsx index e3ef998007..523f3ad287 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layout.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layout.jsx @@ -58,7 +58,10 @@ const styles = ({ spacing }) => ({ }, }, invisible: { - maxHeight: '500px', + maxHeight: 0, + '@media (min-width: 700px)': { + maxHeight: '500px', + }, }, label: { width: '8em', From 1b979c40150064d5af2b744a52e9dafb55e1e378 Mon Sep 17 00:00:00 2001 From: "Eugeniy Aryamnov (DevExpress)" Date: Mon, 28 Oct 2019 16:17:19 +0300 Subject: [PATCH 07/11] Refactor --- .../src/templates/date-navigator/navigation-button.jsx | 2 +- .../src/templates/date-navigator/open-button.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/navigation-button.jsx b/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/navigation-button.jsx index e7904514f0..096b9acfa4 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/navigation-button.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/navigation-button.jsx @@ -11,7 +11,7 @@ const styles = ({ spacing }) => ({ '@media (max-width: 500px)': { width: spacing(4), height: spacing(4), - padding: spacing(0), + padding:0, }, }, }); diff --git a/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/open-button.jsx b/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/open-button.jsx index 8ee1ddbbc2..5df5a7514f 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/open-button.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/open-button.jsx @@ -19,7 +19,7 @@ const styles = ({ spacing }) => ({ '@media (max-width: 500px)': { width: spacing(4), height: spacing(4), - padding: spacing(0), + padding: 0, }, }, }); From 2ddba669ce9cc138b9f2a50744de897e713d36d5 Mon Sep 17 00:00:00 2001 From: "Eugeniy Aryamnov (DevExpress)" Date: Mon, 28 Oct 2019 17:59:27 +0300 Subject: [PATCH 08/11] Apply suggestions from review --- .../src/demo-data/tasks.js | 3 ++ .../material-ui/demo.jsx | 22 ++++++++++++- .../material-ui/custom-formatting.jsx | 2 +- .../templates/confirmation-dialog/layout.jsx | 26 ++++++++++++--- .../confirmation-dialog/layout.test.jsx | 14 ++++++-- .../date-navigator/navigation-button.jsx | 2 +- .../templates/edit-recurrence-menu/layout.jsx | 33 ++++++++++++++++--- .../edit-recurrence-menu/layout.test.jsx | 18 ++++++++-- 8 files changed, 105 insertions(+), 15 deletions(-) diff --git a/packages/dx-react-scheduler-demos/src/demo-data/tasks.js b/packages/dx-react-scheduler-demos/src/demo-data/tasks.js index 6f7dec4a34..57db75e52d 100644 --- a/packages/dx-react-scheduler-demos/src/demo-data/tasks.js +++ b/packages/dx-react-scheduler-demos/src/demo-data/tasks.js @@ -213,18 +213,21 @@ export const priorities = [ title: 'Low', color: '#81c784', activeColor: '#43a047', + shortTitle: 'L', }, { id: 2, title: 'Medium', color: '#4fc3f7', activeColor: '#039be5', + shortTitle: 'M', }, { id: 3, title: 'High', color: '#ff8a65', activeColor: '#f4511e', + shortTitle: 'H', }, ]; diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-appearance-customization/material-ui/demo.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-appearance-customization/material-ui/demo.jsx index 86c900462e..59984d3d55 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-appearance-customization/material-ui/demo.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-appearance-customization/material-ui/demo.jsx @@ -37,6 +37,8 @@ const filterTasks = (items, priorityId) => items.filter(task => ( !priorityId || task.priorityId === priorityId )); const getPriorityById = priorityId => priorities.find(({ id }) => id === priorityId).title; +const getShortPriorityById = priorityId => priorities + .find(({ id }) => id === priorityId).shortTitle; const createClassesByPriorityId = ( priorityId, classes, @@ -71,6 +73,11 @@ const styles = theme => ({ prioritySelector: { marginLeft: theme.spacing(2), minWidth: 140, + '@media (max-width: 500px)': { + minWidth: 0, + fontSize: '0.75rem', + marginLeft: theme.spacing(0.5), + }, }, prioritySelectorItem: { display: 'flex', @@ -83,6 +90,16 @@ const styles = theme => ({ marginRight: theme.spacing(2), display: 'inline-block', }, + priorityText: { + '@media (max-width: 500px)': { + display: 'none', + }, + }, + priorityShortText: { + '@media (min-width: 500px)': { + display: 'none', + }, + }, defaultBullet: { background: theme.palette.divider, }, @@ -138,14 +155,17 @@ const styles = theme => ({ const PrioritySelectorItem = ({ id, classes }) => { let bulletClass = classes.defaultBullet; let text = 'All Tasks'; + let shortText = 'All'; if (id) { bulletClass = createClassesByPriorityId(id, classes, { background: true }); text = getPriorityById(id); + shortText = getShortPriorityById(id); } return (
- {text} + {text} + {shortText}
); }; diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-localization/material-ui/custom-formatting.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-localization/material-ui/custom-formatting.jsx index d98ca7206f..23be739a9b 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-localization/material-ui/custom-formatting.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-localization/material-ui/custom-formatting.jsx @@ -12,7 +12,7 @@ import { appointments } from '../../../demo-data/appointments'; const formatDayScaleDate = (date, options) => { const momentDate = moment(date); const { weekday } = options; - return momentDate.format(weekday ? 'dddd' : 'D'); + return momentDate.format(weekday ? 'dd' : 'D'); }; const formatTimeScaleDate = date => moment(date).format('hh:mm:ss'); diff --git a/packages/dx-react-scheduler-material-ui/src/templates/confirmation-dialog/layout.jsx b/packages/dx-react-scheduler-material-ui/src/templates/confirmation-dialog/layout.jsx index 4abb2bb9f2..c442715ac8 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/confirmation-dialog/layout.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/confirmation-dialog/layout.jsx @@ -2,20 +2,35 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import DialogActions from '@material-ui/core/DialogActions'; import DialogTitle from '@material-ui/core/DialogTitle'; +import { withStyles } from '@material-ui/core/styles'; -export const Layout = React.memo(({ +const styles = ({ typography }) => ({ + title: { + ...typography.h6, + }, + '@media (max-width: 500px)': { + title: { + fontSize: '1.1rem', + }, + }, +}); + +const LayoutBase = React.memo(({ buttonComponent: Button, handleCancel, handleConfirm, getMessage, isDeleting, appointmentData, + classes, ...restProps }) => (
- {getMessage(isDeleting ? 'confirmDeleteMessage' : 'confirmCancelMessage')} + + {getMessage(isDeleting ? 'confirmDeleteMessage' : 'confirmCancelMessage')} +