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 { Select, message, List, Switch, Divider, Icon } from 'antd';
import DrawerMenu from 'rc-drawer';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { connect } from 'dva';
import styles from './index.less';
import ThemeColor from './ThemeColor';
......@@ -145,108 +146,117 @@ class SettingDarwer extends PureComponent {
};
render() {
const {
setting: { collapse, silderTheme, themeColor, layout, colorWeak },
} = this.props;
const { setting } = this.props;
const { collapse, silderTheme, themeColor, layout, colorWeak } = setting;
return (
<div className={styles.settingDarwer}>
<DrawerMenu
parent={null}
level={null}
open={collapse}
mask={false}
onHandleClick={this.togglerContent}
handler={
<div className="drawer-handle">
{!collapse ? (
<Icon
type="setting"
style={{
color: '#FFF',
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)}
<DrawerMenu
parent={null}
level={null}
open={collapse}
mask={false}
onHandleClick={this.togglerContent}
handler={
<div className="drawer-handle">
{!collapse ? (
<Icon
type="setting"
style={{
color: '#FFF',
fontSize: 20,
}}
/>
</Body>
<ThemeColor value={themeColor} onChange={this.colorChange} />
) : (
<Icon
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="导航设置 ">
<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>
<Divider />
<List
split={false}
dataSource={this.getLayOutSetting()}
renderItem={item => <List.Item actions={item.action}>{item.title}</List.Item>}
<Body title="导航设置 ">
<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>
<Divider />
<List
split={false}
dataSource={this.getLayOutSetting()}
renderItem={item => <List.Item actions={item.action}>{item.title}</List.Item>}
/>
<Body title="其他设置 ">
<List.Item
actions={[
<Switch
size="small"
checked={!!colorWeak}
onChange={checked => this.changeSetting('colorWeak', checked)}
/>,
]}
>
色弱模式
</List.Item>
</Body>
</div>
</DrawerMenu>
</div>
<Divider />
<Body title="其他设置 ">
<List.Item
actions={[
<Switch
size="small"
checked={!!colorWeak}
onChange={checked => this.changeSetting('colorWeak', checked)}
/>,
]}
>
色弱模式
</List.Item>
</Body>
</div>
</DrawerMenu>
);
}
}
......
src/components/SettingDarwer/index.less
View file @ 85e9fa71
......@@ -5,6 +5,15 @@
min-height: 100%;
padding: 24px;
background: #fff;
position: relative;
.clipboard {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
width: 16px;
height: 16px;
}
}
.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