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