From fc5e9a10e451f5fbebdf3aa5e2c668cdd38bc5f2 Mon Sep 17 00:00:00 2001 From: Gildas Garcia Date: Mon, 10 Jun 2019 12:21:12 +0200 Subject: [PATCH 1/5] [RFR] Use theme to store sidebar width Fixes #2375 --- UPGRADE.md | 23 ++++++++++++++ docs/Theming.md | 30 ++++++++++++------- .../ra-ui-materialui/src/createMuiTheme.ts | 11 +++++++ packages/ra-ui-materialui/src/defaultTheme.ts | 4 +++ .../ra-ui-materialui/src/layout/Sidebar.js | 17 +---------- 5 files changed, 59 insertions(+), 26 deletions(-) create mode 100644 packages/ra-ui-materialui/src/createMuiTheme.ts diff --git a/UPGRADE.md b/UPGRADE.md index 11790001434..44cfe13b6d8 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -187,3 +187,26 @@ If you had custom exporter on `List` components, here's how to migrate: + downloadCSV(csv, 'posts'); +}); ``` + +## Customizing the SideBar size is done through theme + +The `` component used to accept `size` and `closedSize` prop to control its width. + +You can now customize those values by providing a custom material-ui theme. + +```jsx +import { createMuiTheme } from 'react-admin'; + +const theme = createMuiTheme({ + sidebar: { + width: 300, // The default value is 240 + closedWidth: 70, // The default value is 55 + }, +}); + +const App = () => ( + + // ... + +); +``` \ No newline at end of file diff --git a/docs/Theming.md b/docs/Theming.md index 56d412c2616..a02772c5af0 100644 --- a/docs/Theming.md +++ b/docs/Theming.md @@ -269,7 +269,7 @@ export const PostList = (props) => ( Material UI also supports [complete theming](http://www.material-ui.com/#/customization/themes) out of the box. Material UI ships two base themes: light and dark. React-admin uses the light one by default. To use the dark one, pass it to the `` component, in the `theme` prop (along with `createMuiTheme()`). ```jsx -import { createMuiTheme } from '@material-ui/core/styles'; +import { createMuiTheme } from 'react-admin'; const theme = createMuiTheme({ palette: { @@ -284,6 +284,8 @@ const App = () => ( ); ``` +Note that we use `createMuiTheme` from `react-admin`. This ensures your theme contains the custom values needed for some `react-admin` components such as the ``. + ![Dark theme](./img/dark-theme.png) ## Writing a Custom Theme @@ -291,7 +293,7 @@ const App = () => ( If you need more fine tuning, you'll need to write your own `theme` object, following [Material UI themes documentation](https://material-ui.com/customization/themes/). Material UI merges custom theme objects with the default theme. ```jsx -import { createMuiTheme } from '@material-ui/core/styles'; +import { createMuiTheme } from 'react-admin'; import indigo from '@material-ui/core/colors/indigo'; import pink from '@material-ui/core/colors/pink'; import red from '@material-ui/core/colors/red'; @@ -324,7 +326,7 @@ const myTheme = createMuiTheme({ }); ``` -The `muiTheme` object contains the following keys: +The `myTheme` object contains the following keys: * `breakpoints` * `direction` @@ -337,6 +339,8 @@ The `muiTheme` object contains the following keys: * `transitions` * `spacing` * `zIndex` +* `sidebar.width` +* `sidebar.closedWidth` **Tip**: Check [Material UI default theme documentation](https://material-ui.com/customization/default-theme/) to see the default values and meaning for these keys. @@ -441,17 +445,23 @@ const MyAppBar = props => ; ### Sidebar Customization -You can specify the `Sidebar` size by setting the `size` property: +You can specify the `Sidebar` width by setting the `width` and `closedWidth` property on your custom material-ui them: ```jsx -import { Sidebar } from 'react-admin'; +import { createMuiTheme } from 'react-admin'; -const MySidebar = props => ; -const MyLayout = props => ; +const theme = createMuiTheme({ + sidebar: { + width: 300, // The default value is 240 + closedWidth: 70, // The default value is 55 + }, +}); +const App = () => ( + + // ... + +); ``` ### Layout From Scratch diff --git a/packages/ra-ui-materialui/src/createMuiTheme.ts b/packages/ra-ui-materialui/src/createMuiTheme.ts new file mode 100644 index 00000000000..eb36bb854bb --- /dev/null +++ b/packages/ra-ui-materialui/src/createMuiTheme.ts @@ -0,0 +1,11 @@ +import { createMuiTheme as baseCreateMuiTheme } from '@material-ui/core/styles'; +import merge from 'lodash/merge'; +import defaultTheme from './defaultTheme'; + +const createMuiTheme = customTheme => { + const theme = merge({}, defaultTheme, customTheme); + return baseCreateMuiTheme(theme); +}; + +export default createMuiTheme; + diff --git a/packages/ra-ui-materialui/src/defaultTheme.ts b/packages/ra-ui-materialui/src/defaultTheme.ts index 1e2cfd43563..e72c4ee8c71 100644 --- a/packages/ra-ui-materialui/src/defaultTheme.ts +++ b/packages/ra-ui-materialui/src/defaultTheme.ts @@ -12,4 +12,8 @@ export default { fontWeight: 400, }, }, + sidebar: { + width: 240, + closedWidth: 55, + }, }; diff --git a/packages/ra-ui-materialui/src/layout/Sidebar.js b/packages/ra-ui-materialui/src/layout/Sidebar.js index c8b53901e4d..1b1e618cf5c 100644 --- a/packages/ra-ui-materialui/src/layout/Sidebar.js +++ b/packages/ra-ui-materialui/src/layout/Sidebar.js @@ -18,6 +18,7 @@ const styles = theme => position: 'relative', height: 'auto', overflowX: 'hidden', + width: props => props.open ? theme.sidebar.width : theme.sidebar.closedWidth, transition: theme.transitions.create('width', { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, @@ -56,10 +57,8 @@ class Sidebar extends PureComponent { const { children, classes, - closedSize, open, setSidebarVisibility, - size, width, ...rest } = this.props; @@ -72,7 +71,6 @@ class Sidebar extends PureComponent { open={open} PaperProps={{ className: classes.drawerPaper, - style: { width: size }, }} onClose={this.toggleSidebar} {...rest} @@ -88,9 +86,6 @@ class Sidebar extends PureComponent { open={open} PaperProps={{ className: classes.drawerPaper, - style: { - width: open ? size : closedSize, - }, }} onClose={this.toggleSidebar} {...rest} @@ -107,9 +102,6 @@ class Sidebar extends PureComponent { open={open} PaperProps={{ className: classes.drawerPaper, - style: { - width: open ? size : closedSize, - }, }} onClose={this.toggleSidebar} {...rest} @@ -125,18 +117,11 @@ class Sidebar extends PureComponent { Sidebar.propTypes = { children: PropTypes.node.isRequired, classes: PropTypes.object, - closedSize: PropTypes.number, open: PropTypes.bool.isRequired, setSidebarVisibility: PropTypes.func.isRequired, - size: PropTypes.number, width: PropTypes.string, }; -Sidebar.defaultProps = { - size: DRAWER_WIDTH, - closedSize: CLOSED_DRAWER_WIDTH, -}; - const mapStateToProps = state => ({ open: state.admin.ui.sidebarOpen, locale: state.locale, // force redraw on locale change From 591f04da52cdba8e53b6fd10b87a8521d5d3f76d Mon Sep 17 00:00:00 2001 From: Gildas Garcia Date: Mon, 10 Jun 2019 12:32:09 +0200 Subject: [PATCH 2/5] Linting --- packages/ra-ui-materialui/src/createMuiTheme.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/ra-ui-materialui/src/createMuiTheme.ts b/packages/ra-ui-materialui/src/createMuiTheme.ts index eb36bb854bb..c0a2bb0fab7 100644 --- a/packages/ra-ui-materialui/src/createMuiTheme.ts +++ b/packages/ra-ui-materialui/src/createMuiTheme.ts @@ -8,4 +8,3 @@ const createMuiTheme = customTheme => { }; export default createMuiTheme; - From f4697b4be5d8719985b00ca3704e948415430f8b Mon Sep 17 00:00:00 2001 From: Gildas Garcia Date: Mon, 10 Jun 2019 14:19:30 +0200 Subject: [PATCH 3/5] Review --- UPGRADE.md | 2 +- docs/Theming.md | 12 ++++-------- packages/ra-ui-materialui/src/layout/Sidebar.js | 9 ++++----- 3 files changed, 9 insertions(+), 14 deletions(-) diff --git a/UPGRADE.md b/UPGRADE.md index 44cfe13b6d8..c0705188e44 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -195,7 +195,7 @@ The `` component used to accept `size` and `closedSize` prop to control You can now customize those values by providing a custom material-ui theme. ```jsx -import { createMuiTheme } from 'react-admin'; +import { createMuiTheme } from '@material-ui/core/styles'; const theme = createMuiTheme({ sidebar: { diff --git a/docs/Theming.md b/docs/Theming.md index a02772c5af0..9b2c0e13253 100644 --- a/docs/Theming.md +++ b/docs/Theming.md @@ -269,7 +269,7 @@ export const PostList = (props) => ( Material UI also supports [complete theming](http://www.material-ui.com/#/customization/themes) out of the box. Material UI ships two base themes: light and dark. React-admin uses the light one by default. To use the dark one, pass it to the `` component, in the `theme` prop (along with `createMuiTheme()`). ```jsx -import { createMuiTheme } from 'react-admin'; +import { createMuiTheme } from '@material-ui/core/styles'; const theme = createMuiTheme({ palette: { @@ -284,8 +284,6 @@ const App = () => ( ); ``` -Note that we use `createMuiTheme` from `react-admin`. This ensures your theme contains the custom values needed for some `react-admin` components such as the ``. - ![Dark theme](./img/dark-theme.png) ## Writing a Custom Theme @@ -293,7 +291,7 @@ Note that we use `createMuiTheme` from `react-admin`. This ensures your theme co If you need more fine tuning, you'll need to write your own `theme` object, following [Material UI themes documentation](https://material-ui.com/customization/themes/). Material UI merges custom theme objects with the default theme. ```jsx -import { createMuiTheme } from 'react-admin'; +import { createMuiTheme } from '@material-ui/core/styles'; import indigo from '@material-ui/core/colors/indigo'; import pink from '@material-ui/core/colors/pink'; import red from '@material-ui/core/colors/red'; @@ -339,9 +337,7 @@ The `myTheme` object contains the following keys: * `transitions` * `spacing` * `zIndex` -* `sidebar.width` -* `sidebar.closedWidth` - +* **Tip**: Check [Material UI default theme documentation](https://material-ui.com/customization/default-theme/) to see the default values and meaning for these keys. Once your theme is defined, pass it to the `` component, in the `theme` prop. @@ -448,7 +444,7 @@ const MyAppBar = props => ; You can specify the `Sidebar` width by setting the `width` and `closedWidth` property on your custom material-ui them: ```jsx -import { createMuiTheme } from 'react-admin'; +import { createMuiTheme } from '@material-ui/core/styles'; const theme = createMuiTheme({ sidebar: { diff --git a/packages/ra-ui-materialui/src/layout/Sidebar.js b/packages/ra-ui-materialui/src/layout/Sidebar.js index 1b1e618cf5c..cacfdefff18 100644 --- a/packages/ra-ui-materialui/src/layout/Sidebar.js +++ b/packages/ra-ui-materialui/src/layout/Sidebar.js @@ -6,19 +6,18 @@ import Drawer from '@material-ui/core/Drawer'; import { withStyles, createStyles } from '@material-ui/core/styles'; import withWidth from '@material-ui/core/withWidth'; import { setSidebarVisibility } from 'ra-core'; - +import lodashGet from 'lodash/get'; import Responsive from './Responsive'; -export const DRAWER_WIDTH = 240; -export const CLOSED_DRAWER_WIDTH = 55; - const styles = theme => createStyles({ drawerPaper: { position: 'relative', height: 'auto', overflowX: 'hidden', - width: props => props.open ? theme.sidebar.width : theme.sidebar.closedWidth, + width: props => props.open + ? lodashGet(theme, 'sidebar.width', DRAWER_WIDTH) + : lodashGet(theme, 'sidebar.closedWidth', CLOSED_DRAWER_WIDTH), transition: theme.transitions.create('width', { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, From e46660041d95e1faad1aeb44f8e447eb0687bcc2 Mon Sep 17 00:00:00 2001 From: Gildas Garcia Date: Mon, 10 Jun 2019 15:00:03 +0200 Subject: [PATCH 4/5] Fix stupid removal --- packages/ra-ui-materialui/src/layout/Sidebar.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/ra-ui-materialui/src/layout/Sidebar.js b/packages/ra-ui-materialui/src/layout/Sidebar.js index cacfdefff18..32597459f11 100644 --- a/packages/ra-ui-materialui/src/layout/Sidebar.js +++ b/packages/ra-ui-materialui/src/layout/Sidebar.js @@ -9,6 +9,9 @@ import { setSidebarVisibility } from 'ra-core'; import lodashGet from 'lodash/get'; import Responsive from './Responsive'; +export const DRAWER_WIDTH = 240; +export const CLOSED_DRAWER_WIDTH = 55; + const styles = theme => createStyles({ drawerPaper: { From cdd8ec693e905f9944441b5b70b908393f8ef81f Mon Sep 17 00:00:00 2001 From: Gildas Garcia Date: Tue, 11 Jun 2019 09:37:08 +0200 Subject: [PATCH 5/5] Remove useless file --- packages/ra-ui-materialui/src/createMuiTheme.ts | 10 ---------- 1 file changed, 10 deletions(-) delete mode 100644 packages/ra-ui-materialui/src/createMuiTheme.ts diff --git a/packages/ra-ui-materialui/src/createMuiTheme.ts b/packages/ra-ui-materialui/src/createMuiTheme.ts deleted file mode 100644 index c0a2bb0fab7..00000000000 --- a/packages/ra-ui-materialui/src/createMuiTheme.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { createMuiTheme as baseCreateMuiTheme } from '@material-ui/core/styles'; -import merge from 'lodash/merge'; -import defaultTheme from './defaultTheme'; - -const createMuiTheme = customTheme => { - const theme = merge({}, defaultTheme, customTheme); - return baseCreateMuiTheme(theme); -}; - -export default createMuiTheme;