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 { 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>
</>
);
}
}
......
src/components/Sidebar/index.less
View file @ 7eb045c6
......@@ -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;
}
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