Skip to content

GitLab

A
ant-design-pro
Commit 7eb045c6 authored by jim's avatar jim
Browse files
Options

Modify the style

parent 93267fc7
Hide whitespace changes
Inline Side-by-side
Showing with 117 additions and 118 deletions
src/components/Sidebar/index.js
View file @ 7eb045c6
import React, { PureComponent, Fragment } from 'react'; import React, { PureComponent, Fragment } from 'react';
import { Select, List, Switch, Divider, Radio } from 'antd'; import { Select, List, Switch, Divider, Radio } from 'antd';
import DrawerMenu from 'rc-drawer-menu';
import styles from './index.less'; import styles from './index.less';
import ThemeColor from './ThemeColor'; import ThemeColor from './ThemeColor';
import LayoutSeting from './LayoutSetting'; import LayoutSeting from './LayoutSetting';
...@@ -90,16 +91,11 @@ class Sidebar extends PureComponent { ...@@ -90,16 +91,11 @@ class Sidebar extends PureComponent {
{ {
title: 'Fix Siderbar', title: 'Fix Siderbar',
isShow: layout === 'sidemenu', isShow: layout === 'sidemenu',
action: [ action: [<Switch checked={!!this.state.fixSiderbar} onChange={this.fixSiderbar} />],
<Switch
checked={!!this.state.fixSiderbar}
onChange={this.fixSiderbar}
/>,
],
}, },
].filter(item => item.isShow); ].filter(item => item.isShow);
}; };
fixSiderbar = (checked) => { fixSiderbar = checked => {
this.changeSetting('fixSiderbar', checked); this.changeSetting('fixSiderbar', checked);
}; };
changeSetting = (key, value) => { changeSetting = (key, value) => {
...@@ -118,9 +114,9 @@ class Sidebar extends PureComponent { ...@@ -118,9 +114,9 @@ class Sidebar extends PureComponent {
} }
}); });
}; };
propsToState = (props) => { propsToState = props => {
const nextState = {}; const nextState = {};
Object.keys(props).forEach((key) => { Object.keys(props).forEach(key => {
if (props[key] && this.defaultstate[key] !== undefined) { if (props[key] && this.defaultstate[key] !== undefined) {
nextState[key] = props[key]; nextState[key] = props[key];
} }
...@@ -135,82 +131,84 @@ class Sidebar extends PureComponent { ...@@ -135,82 +131,84 @@ class Sidebar extends PureComponent {
display: 'block', display: 'block',
}; };
return ( return (
<div <>
className={`${styles.sidebar} ${ <div className={styles.sidebar}>
this.state.collapse ? styles.show : '' <div className={styles.mini_bar} onClick={this.togglerContent}>
}`} <img
> alt="logo"
<div className={styles.mini_bar} onClick={this.togglerContent}> src="https://gw.alipayobjects.com/zos/rmsportal/ApQgLmeZDNJMomKNvavq.svg"
<img
alt="logo"
src="https://gw.alipayobjects.com/zos/rmsportal/ApQgLmeZDNJMomKNvavq.svg"
/>
</div>
<div className={styles.content}>
<Body
title="整体风格设置"
style={{
paddingBottom: 10,
}}
>
<RadioGroup
onChange={({ target }) =>
this.changeSetting('silderTheme', target.value)
}
value={this.state.silderTheme}
>
<Radio style={radioStyle} value="dark">
<ColorBlock color="#002140" title="深色导航" />
</Radio>
<Radio style={radioStyle} value="ligth">
<ColorBlock color="#E9E9E9" title="浅色导航" />
</Radio>
</RadioGroup>
<ThemeColor
value={this.state.themeColor}
onChange={color => this.changeSetting('themeColor', color)}
/>
</Body>
<Divider style={{ margin: 0 }} />
<Body title="导航设置 ">
<LayoutSeting
value={this.state.layout}
onChange={layout => this.changeSetting('layout', layout)}
/>
<List
split={false}
dataSource={this.getLayOutSetting()}
renderItem={item => (
<List.Item actions={item.action}>{item.title}</List.Item>
)}
/> />
</Body> </div>
<Divider style={{ margin: 0 }} />
<Body title="其他设置">
<List
split={false}
dataSource={[
{
title: '色弱模式',
action: [
<Select
value={this.state.colorWeak}
onSelect={value => this.changeSetting('colorWeak', value)}
style={{ width: 120 }}
>
<Select.Option value="open">打开</Select.Option>
<Select.Option value="colse">关闭</Select.Option>
</Select>,
],
},
]}
renderItem={item => (
<List.Item actions={item.action}>{item.title}</List.Item>
)}
/>
</Body>
</div> </div>
</div> <DrawerMenu
parent={null}
level={null}
iconChild={null}
open={this.state.collapse}
placement="right"
width="336px"
onMaskClick={this.togglerContent}
>
<div className={styles.content}>
<Body
title="整体风格设置"
style={{
paddingBottom: 10,
}}
>
<RadioGroup
onChange={({ target }) => this.changeSetting('silderTheme', target.value)}
value={this.state.silderTheme}
>
<Radio style={radioStyle} value="dark">
<ColorBlock color="#002140" title="深色导航" />
</Radio>
<Radio style={radioStyle} value="ligth">
<ColorBlock color="#E9E9E9" title="浅色导航" />
</Radio>
</RadioGroup>
<ThemeColor
value={this.state.themeColor}
onChange={color => this.changeSetting('themeColor', color)}
/>
</Body>
<Divider style={{ margin: 0 }} />
<Body title="导航设置 ">
<LayoutSeting
value={this.state.layout}
onChange={layout => this.changeSetting('layout', layout)}
/>
<List
split={false}
dataSource={this.getLayOutSetting()}
renderItem={item => <List.Item actions={item.action}>{item.title}</List.Item>}
/>
</Body>
<Divider style={{ margin: 0 }} />
<Body title="其他设置">
<List
split={false}
dataSource={[
{
title: '色弱模式',
action: [
<Select
value={this.state.colorWeak}
onSelect={value => this.changeSetting('colorWeak', value)}
style={{ width: 120 }}
>
<Select.Option value="open">打开</Select.Option>
<Select.Option value="colse">关闭</Select.Option>
</Select>,
],
},
]}
renderItem={item => <List.Item actions={item.action}>{item.title}</List.Item>}
/>
</Body>
</div>
</DrawerMenu>
</>
); );
} }
} }
......
src/components/Sidebar/index.less
View file @ 7eb045c6
...@@ -16,47 +16,48 @@ ...@@ -16,47 +16,48 @@
text-align: center; text-align: center;
font-size: 24px; font-size: 24px;
background: white; background: white;
position: fixed;
bottom: 50px;
right: 50px;
box-shadow: 0 0 6px 0 rgba(0, 21, 41, 0.35); box-shadow: 0 0 6px 0 rgba(0, 21, 41, 0.35);
img { img {
width: 28px; width: 28px;
height: 28px; height: 28px;
} }
} }
.content { }
width: 336px;
background: white; .content {
box-shadow: 0 0 6px 0 rgba(0, 21, 41, 0.35); width: 336px;
box-shadow: -3px 0 10px 3px rgba(183, 183, 183, 0.3); :global {
:global { .ant-switch-checked {
.ant-switch-checked { background-color: #87d068;
background-color: #87d068; }
} .ant-list-item {
.ant-list-item { padding-top: 7px;
padding-top: 7px; padding-bottom: 7px;
padding-bottom: 7px;
}
} }
} }
.color_block { }
width: 38px; .color_block {
height: 22px; width: 38px;
margin: 4px; height: 22px;
margin-right: 12px; margin: 4px;
display: inline-block; margin-right: 12px;
vertical-align: middle; display: inline-block;
background: #002140; vertical-align: middle;
border-radius: 2px; background: #002140;
} border-radius: 2px;
.color_block_title { }
display: inline-block; .color_block_title {
font-size: 14px; display: inline-block;
color: rgba(0, 0, 0, 0.65); font-size: 14px;
line-height: 22px; color: rgba(0, 0, 0, 0.65);
} line-height: 22px;
.bodyTitle { }
font-size: 14px; .bodyTitle {
color: rgba(0, 0, 0, 0.85); font-size: 14px;
line-height: 22px; color: rgba(0, 0, 0, 0.85);
margin-bottom: 10px; line-height: 22px;
} margin-bottom: 10px;
} }
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment