From e0cf86a313c130c9fcce1fee971cf057518bb4a5 Mon Sep 17 00:00:00 2001 From: jim Date: Tue, 5 Jun 2018 20:30:54 +0800 Subject: [PATCH] Increase color weakness --- src/components/Charts/Bar/index.js | 2 +- src/components/Charts/Pie/index.js | 2 +- src/components/Charts/TagCloud/index.js | 2 +- src/components/Charts/WaterWave/index.js | 2 +- src/components/GlobalHeader/RightContent.js | 15 ++++----- src/components/HeaderSearch/index.js | 2 +- src/components/SettingDarwer/index.js | 34 +++++++++++++++++++-- src/index.less | 4 +++ src/routes/Forms/AdvancedForm.js | 2 +- src/routes/Profile/AdvancedProfile.js | 2 +- 10 files changed, 49 insertions(+), 18 deletions(-) diff --git a/src/components/Charts/Bar/index.js b/src/components/Charts/Bar/index.js index 1a2d5c70..c91e6701 100644 --- a/src/components/Charts/Bar/index.js +++ b/src/components/Charts/Bar/index.js @@ -12,7 +12,7 @@ class Bar extends Component { }; componentDidMount() { - window.addEventListener('resize', this.resize); + window.addEventListener('resize', this.resize, { passive: true }); } componentWillUnmount() { diff --git a/src/components/Charts/Pie/index.js b/src/components/Charts/Pie/index.js index 0d1c4aca..b17dc88b 100644 --- a/src/components/Charts/Pie/index.js +++ b/src/components/Charts/Pie/index.js @@ -19,7 +19,7 @@ export default class Pie extends Component { }; componentDidMount() { - window.addEventListener('resize', this.resize); + window.addEventListener('resize', this.resize, { passive: true }); } componentDidUpdate(preProps) { diff --git a/src/components/Charts/TagCloud/index.js b/src/components/Charts/TagCloud/index.js index 2c45e05e..5e8ca584 100644 --- a/src/components/Charts/TagCloud/index.js +++ b/src/components/Charts/TagCloud/index.js @@ -23,7 +23,7 @@ class TagCloud extends Component { this.initTagCloud(); this.renderChart(); }); - window.addEventListener('resize', this.resize); + window.addEventListener('resize', this.resize, { passive: true }); } componentDidUpdate(preProps) { diff --git a/src/components/Charts/WaterWave/index.js b/src/components/Charts/WaterWave/index.js index 2da301a0..c1369c42 100644 --- a/src/components/Charts/WaterWave/index.js +++ b/src/components/Charts/WaterWave/index.js @@ -17,7 +17,7 @@ export default class WaterWave extends PureComponent { this.renderChart(); this.resize(); }); - window.addEventListener('resize', this.resize); + window.addEventListener('resize', this.resize, { passive: true }); } componentWillUnmount() { diff --git a/src/components/GlobalHeader/RightContent.js b/src/components/GlobalHeader/RightContent.js index 3998e407..35d41309 100644 --- a/src/components/GlobalHeader/RightContent.js +++ b/src/components/GlobalHeader/RightContent.js @@ -12,7 +12,7 @@ export default class GlobalHeaderRight extends PureComponent { if (notices.length === 0) { return {}; } - const newNotices = notices.map((notice) => { + const newNotices = notices.map(notice => { const newNotice = { ...notice }; if (newNotice.datetime) { newNotice.datetime = moment(notice.datetime).fromNow(); @@ -69,15 +69,15 @@ export default class GlobalHeaderRight extends PureComponent { className = `${styles.right} ${styles.dark}`; } return ( -
+
{ + onSearch={value => { console.log('input', value); // eslint-disable-line }} - onPressEnter={(value) => { + onPressEnter={value => { console.log('enter', value); // eslint-disable-line }} /> @@ -87,6 +87,7 @@ export default class GlobalHeaderRight extends PureComponent { href="http://pro.ant.design/docs/getting-started" rel="noopener noreferrer" className={styles.action} + title="使用文档" > @@ -124,11 +125,7 @@ export default class GlobalHeaderRight extends PureComponent { {currentUser.name ? ( - + {currentUser.name} diff --git a/src/components/HeaderSearch/index.js b/src/components/HeaderSearch/index.js index 855e7ac1..5912dc50 100644 --- a/src/components/HeaderSearch/index.js +++ b/src/components/HeaderSearch/index.js @@ -75,10 +75,10 @@ export default class HeaderSearch extends PureComponent { onChange={this.onChange} > { this.input = node; }} + placeholder={placeholder} onKeyDown={this.onKeyDown} onBlur={this.leaveSearchMode} /> diff --git a/src/components/SettingDarwer/index.js b/src/components/SettingDarwer/index.js index e4a534e3..ce8c6abb 100644 --- a/src/components/SettingDarwer/index.js +++ b/src/components/SettingDarwer/index.js @@ -21,10 +21,13 @@ const Body = ({ children, title, style }) => ( @connect(({ setting }) => ({ setting })) class SettingDarwer extends PureComponent { componentDidMount() { - const { themeColor } = this.props.setting; + const { themeColor, colorWeak } = this.props.setting; if (themeColor !== '#1890FF') { this.colorChange(themeColor); } + if (colorWeak === 'open') { + document.body.className = 'colorWeak'; + } } getLayOutSetting = () => { const { grid, fixedHeader, autoHideHeader, fixSiderbar } = this.props.setting; @@ -85,6 +88,13 @@ class SettingDarwer extends PureComponent { nextState.grid = 'Fluid'; } } + if (key === 'colorWeak') { + if (value === 'open') { + document.body.className = 'colorWeak'; + } else { + document.body.className = ''; + } + } this.setState(nextState, () => { this.props.dispatch({ type: 'setting/changeSetting', @@ -112,7 +122,7 @@ class SettingDarwer extends PureComponent { }, 200); }; render() { - const { collapse, silderTheme, themeColor, layout } = this.props.setting; + const { collapse, silderTheme, themeColor, layout, colorWeak } = this.props.setting; return (
@@ -177,6 +187,26 @@ class SettingDarwer extends PureComponent { dataSource={this.getLayOutSetting()} renderItem={item => {item.title}} /> + + + + + this.changeSetting('colorWeak', value)} + style={{ width: 80 }} + > + close + open + , + ]} + > + 色弱模式 + +
diff --git a/src/index.less b/src/index.less index d8b1560f..9383a5b2 100644 --- a/src/index.less +++ b/src/index.less @@ -5,6 +5,10 @@ body, overflow: auto; } +:global(.colorWeak) { + filter: invert(80%); +} + :global(.ant-layout) { min-height: 100%; } diff --git a/src/routes/Forms/AdvancedForm.js b/src/routes/Forms/AdvancedForm.js index ecb0f247..074390b7 100644 --- a/src/routes/Forms/AdvancedForm.js +++ b/src/routes/Forms/AdvancedForm.js @@ -62,7 +62,7 @@ class AdvancedForm extends PureComponent { width: '100%', }; componentDidMount() { - window.addEventListener('resize', this.resizeFooterToolbar); + window.addEventListener('resize', this.resizeFooterToolbar, { passive: true }); } componentWillUnmount() { window.removeEventListener('resize', this.resizeFooterToolbar); diff --git a/src/routes/Profile/AdvancedProfile.js b/src/routes/Profile/AdvancedProfile.js index 727dbb30..5289b677 100644 --- a/src/routes/Profile/AdvancedProfile.js +++ b/src/routes/Profile/AdvancedProfile.js @@ -197,7 +197,7 @@ export default class AdvancedProfile extends Component { }); this.setStepDirection(); - window.addEventListener('resize', this.setStepDirection); + window.addEventListener('resize', this.setStepDirection, { passive: true }); } componentWillUnmount() { -- GitLab