Skip to content

GitLab

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

Modify the style

parent 93267fc7
Show 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,17 +131,24 @@ class Sidebar extends PureComponent {
display: 'block',
};
return (
<div
className={`${styles.sidebar} ${
this.state.collapse ? styles.show : ''
}`}
>
<>
<div className={styles.sidebar}>
<div className={styles.mini_bar} onClick={this.togglerContent}>
<img
alt="logo"
src="https://gw.alipayobjects.com/zos/rmsportal/ApQgLmeZDNJMomKNvavq.svg"
/>
</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="整体风格设置"
......@@ -154,9 +157,7 @@ class Sidebar extends PureComponent {
}}
>
<RadioGroup
onChange={({ target }) =>
this.changeSetting('silderTheme', target.value)
}
onChange={({ target }) => this.changeSetting('silderTheme', target.value)}
value={this.state.silderTheme}
>
<Radio style={radioStyle} value="dark">
......@@ -180,9 +181,7 @@ class Sidebar extends PureComponent {
<List
split={false}
dataSource={this.getLayOutSetting()}
renderItem={item => (
<List.Item actions={item.action}>{item.title}</List.Item>
)}
renderItem={item => <List.Item actions={item.action}>{item.title}</List.Item>}
/>
</Body>
<Divider style={{ margin: 0 }} />
......@@ -204,13 +203,12 @@ class Sidebar extends PureComponent {
],
},
]}
renderItem={item => (
<List.Item actions={item.action}>{item.title}</List.Item>
)}
renderItem={item => <List.Item actions={item.action}>{item.title}</List.Item>}
/>
</Body>
</div>
</div>
</DrawerMenu>
</>
);
}
}
......
src/components/Sidebar/index.less
View file @ 7eb045c6
......@@ -16,17 +16,19 @@
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 {
}
.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;
......@@ -36,8 +38,8 @@
padding-bottom: 7px;
}
}
}
.color_block {
}
.color_block {
width: 38px;
height: 22px;
margin: 4px;
......@@ -46,17 +48,16 @@
vertical-align: middle;
background: #002140;
border-radius: 2px;
}
.color_block_title {
}
.color_block_title {
display: inline-block;
font-size: 14px;
color: rgba(0, 0, 0, 0.65);
line-height: 22px;
}
.bodyTitle {
}
.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