tsai
/
ant-design-pro
mirror of https://github.com/ant-design/ant-design-pro
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Modify the style

pull/1290/head
jim 8 years ago
parent
93267fc782
commit
7eb045c651
2 changed files with 117 additions and 118 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 164
      src/components/Sidebar/index.js
  2. 71
      src/components/Sidebar/index.less

164
src/components/Sidebar/index.js
View File

@ -1,5 +1,6 @@
import React, { PureComponent, Fragment } from 'react';
import { Select, List, Switch, Divider, Radio } from 'antd';
import DrawerMenu from 'rc-drawer-menu';
import styles from './index.less';
import ThemeColor from './ThemeColor';
import LayoutSeting from './LayoutSetting';
@ -90,16 +91,11 @@ class Sidebar extends PureComponent {
{
title: 'Fix Siderbar',
isShow: layout === 'sidemenu',
action: [
<Switch
checked={!!this.state.fixSiderbar}
onChange={this.fixSiderbar}
/>,
],
action: [<Switch checked={!!this.state.fixSiderbar} onChange={this.fixSiderbar} />],
},
].filter(item => item.isShow);
};
fixSiderbar = (checked) => {
fixSiderbar = checked => {
this.changeSetting('fixSiderbar', checked);
};
changeSetting = (key, value) => {
@ -118,9 +114,9 @@ class Sidebar extends PureComponent {
}
});
};
propsToState = (props) => {
propsToState = props => {
const nextState = {};
Object.keys(props).forEach((key) => {
Object.keys(props).forEach(key => {
if (props[key] && this.defaultstate[key] !== undefined) {
nextState[key] = props[key];
}
@ -135,82 +131,84 @@ class Sidebar extends PureComponent {
display: 'block',
};
return (
<div
className={`${styles.sidebar} ${
this.state.collapse ? styles.show : ''
}`}
>
<div className={styles.mini_bar} onClick={this.togglerContent}>
<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>
)}
<>
<div className={styles.sidebar}>
<div className={styles.mini_bar} onClick={this.togglerContent}>
<img
alt="logo"
src="https://gw.alipayobjects.com/zos/rmsportal/ApQgLmeZDNJMomKNvavq.svg"
/>
</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>
</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>
</>
);
}
}

71
src/components/Sidebar/index.less
View File

@ -16,47 +16,48 @@
text-align: center;
font-size: 24px;
background: white;
position: fixed;
bottom: 50px;
right: 50px;
box-shadow: 0 0 6px 0 rgba(0, 21, 41, 0.35);
img {
width: 28px;
height: 28px;
}
}
.content {
width: 336px;
background: white;
box-shadow: 0 0 6px 0 rgba(0, 21, 41, 0.35);
box-shadow: -3px 0 10px 3px rgba(183, 183, 183, 0.3);
:global {
.ant-switch-checked {
background-color: #87d068;
}
.ant-list-item {
padding-top: 7px;
padding-bottom: 7px;
}
}
.content {
width: 336px;
:global {
.ant-switch-checked {
background-color: #87d068;
}
.ant-list-item {
padding-top: 7px;
padding-bottom: 7px;
}
}
.color_block {
width: 38px;
height: 22px;
margin: 4px;
margin-right: 12px;
display: inline-block;
vertical-align: middle;
background: #002140;
border-radius: 2px;
}
.color_block_title {
display: inline-block;
font-size: 14px;
color: rgba(0, 0, 0, 0.65);
line-height: 22px;
}
.bodyTitle {
font-size: 14px;
color: rgba(0, 0, 0, 0.85);
line-height: 22px;
margin-bottom: 10px;
}
}
.color_block {
width: 38px;
height: 22px;
margin: 4px;
margin-right: 12px;
display: inline-block;
vertical-align: middle;
background: #002140;
border-radius: 2px;
}
.color_block_title {
display: inline-block;
font-size: 14px;
color: rgba(0, 0, 0, 0.65);
line-height: 22px;
}
.bodyTitle {
font-size: 14px;
color: rgba(0, 0, 0, 0.85);
line-height: 22px;
margin-bottom: 10px;
}

Write Preview
Loading…
Cancel
Save