Skip to content

GitLab

P
pro-blocks
Commit 85e9fa71 authored by 陈帅's avatar 陈帅
Browse files
Options

Add copy setting button look #1751

parent 1595c7d3
Hide whitespace changes
Inline Side-by-side
Showing with 114 additions and 94 deletions
src/components/SettingDarwer/index.js
View file @ 85e9fa71
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { Select, message, List, Switch, Divider, Icon } from 'antd'; import { Select, message, List, Switch, Divider, Icon } from 'antd';
import DrawerMenu from 'rc-drawer'; import DrawerMenu from 'rc-drawer';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { connect } from 'dva'; import { connect } from 'dva';
import styles from './index.less'; import styles from './index.less';
import ThemeColor from './ThemeColor'; import ThemeColor from './ThemeColor';
...@@ -145,108 +146,117 @@ class SettingDarwer extends PureComponent { ...@@ -145,108 +146,117 @@ class SettingDarwer extends PureComponent {
}; };
render() { render() {
const { const { setting } = this.props;
setting: { collapse, silderTheme, themeColor, layout, colorWeak }, const { collapse, silderTheme, themeColor, layout, colorWeak } = setting;
} = this.props;
return ( return (
<div className={styles.settingDarwer}> <DrawerMenu
<DrawerMenu parent={null}
parent={null} level={null}
level={null} open={collapse}
open={collapse} mask={false}
mask={false} onHandleClick={this.togglerContent}
onHandleClick={this.togglerContent} handler={
handler={ <div className="drawer-handle">
<div className="drawer-handle"> {!collapse ? (
{!collapse ? ( <Icon
<Icon type="setting"
type="setting" style={{
style={{ color: '#FFF',
color: '#FFF', fontSize: 20,
fontSize: 20, }}
}}
/>
) : (
<Icon
type="close"
style={{
color: '#FFF',
fontSize: 20,
}}
/>
)}
</div>
}
placement="right"
width="336px"
style={{
zIndex: 999,
}}
onMaskClick={this.togglerContent}
>
<div className={styles.content}>
<Body title="整体风格设置">
<BlockChecbox
list={[
{
key: 'dark',
url: 'https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg',
},
{
key: 'light',
url: 'https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg',
},
]}
value={silderTheme}
onChange={value => this.changeSetting('silderTheme', value)}
/> />
</Body> ) : (
<Icon
<ThemeColor value={themeColor} onChange={this.colorChange} /> type="close"
style={{
color: '#FFF',
fontSize: 20,
}}
/>
)}
</div>
}
placement="right"
width="336px"
style={{
zIndex: 999,
}}
onMaskClick={this.togglerContent}
>
<div className={styles.content}>
<CopyToClipboard
text={JSON.stringify(setting)}
onCopy={() => message.success('copy success')}
>
<div className={styles.clipboard}>
<img
src="https://gw.alipayobjects.com/zos/rmsportal/YuWymXLusbplhCwgZwMT.svg"
alt="Copy To Clipboard"
width={18}
/>
</div>
</CopyToClipboard>
<Body title="整体风格设置">
<BlockChecbox
list={[
{
key: 'dark',
url: 'https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg',
},
{
key: 'light',
url: 'https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg',
},
]}
value={silderTheme}
onChange={value => this.changeSetting('silderTheme', value)}
/>
</Body>
<Divider /> <ThemeColor value={themeColor} onChange={this.colorChange} />
<Body title="导航设置 "> <Divider />
<BlockChecbox
list={[
{
key: 'sidemenu',
url: 'https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg',
},
{
key: 'topmenu',
url: 'https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg',
},
]}
value={layout}
onChange={value => this.changeSetting('layout', value)}
/>
</Body>
<List <Body title="导航设置 ">
split={false} <BlockChecbox
dataSource={this.getLayOutSetting()} list={[
renderItem={item => <List.Item actions={item.action}>{item.title}</List.Item>} {
key: 'sidemenu',
url: 'https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg',
},
{
key: 'topmenu',
url: 'https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg',
},
]}
value={layout}
onChange={value => this.changeSetting('layout', value)}
/> />
</Body>
<Divider /> <List
split={false}
dataSource={this.getLayOutSetting()}
renderItem={item => <List.Item actions={item.action}>{item.title}</List.Item>}
/>
<Body title="其他设置 "> <Divider />
<List.Item
actions={[ <Body title="其他设置 ">
<Switch <List.Item
size="small" actions={[
checked={!!colorWeak} <Switch
onChange={checked => this.changeSetting('colorWeak', checked)} size="small"
/>, checked={!!colorWeak}
]} onChange={checked => this.changeSetting('colorWeak', checked)}
> />,
色弱模式 ]}
</List.Item> >
</Body> 色弱模式
</div> </List.Item>
</DrawerMenu> </Body>
</div> </div>
</DrawerMenu>
); );
} }
} }
......
src/components/SettingDarwer/index.less
View file @ 85e9fa71
...@@ -5,6 +5,15 @@ ...@@ -5,6 +5,15 @@
min-height: 100%; min-height: 100%;
padding: 24px; padding: 24px;
background: #fff; background: #fff;
position: relative;
.clipboard {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
width: 16px;
height: 16px;
}
} }
.blockChecbox { .blockChecbox {
......
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