Skip to content

GitLab

P
pro-blocks
Commit 78a2070b authored by jim's avatar jim
Browse files
Options

new setting bar style

parent c1c36b61
Show whitespace changes
Inline Side-by-side
Showing with 325 additions and 80 deletions
src/components/SettingDarwer/BlockChecbox.js 0 → 100644
View file @ 78a2070b
import { Icon } from 'antd';
import React from 'react';
import style from './index.less';
const BlockChecbox = ({ value, onChange, list }) => {
return (
<div className={style.blockChecbox} key={value}>
{list.map(item => {
return (
<div
key={item.key}
className={style.item}
onClick={() => {
onChange(item.key);
}}
>
<img src={item.url} alt={item.key} />
<div
className={style.selectIcon}
style={{
display: value === item.key ? 'block' : 'none',
}}
>
<Icon type="check" />
</div>
</div>
);
})}
</div>
);
};
export default BlockChecbox;
src/components/Sidebar/ThemeColor.js → src/components/SettingDarwer/ThemeColor.js
View file @ 78a2070b
import { Icon } from 'antd';
import React from 'react'; import React from 'react';
import styles from './ThemeColor.less'; import styles from './ThemeColor.less';
const Tag = ({ color, ...rest }) => { const Tag = ({ color, check, ...rest }) => {
return ( return (
<div <div
{...rest} {...rest}
style={{ style={{
backgroundColor: color, backgroundColor: color,
}} }}
/> >
{check ? <Icon type="check" /> : ''}
</div>
); );
}; };
...@@ -18,34 +21,31 @@ const ThemeColor = ({ colors, value, onChange }) => { ...@@ -18,34 +21,31 @@ const ThemeColor = ({ colors, value, onChange }) => {
colorList = [ colorList = [
'#F5222D', '#F5222D',
'#FA541C', '#FA541C',
'#FA8C16',
'#FAAD14', '#FAAD14',
'#FADB14',
'#A0D911',
'#52C41A',
'#13C2C2', '#13C2C2',
'#52C41A',
'#1890FF', '#1890FF',
'#2F54EB', '#2F54EB',
'#722ED1', '#722ED1',
'#EB2F96',
]; ];
} }
return ( return (
<div className={styles.themeColor}> <div className={styles.themeColor}>
<h3 className={styles.title}>主题颜色</h3> <h3 className={styles.title}>主题色</h3>
<div className={styles.content}>
{colorList.map(color => { {colorList.map(color => {
const classname =
value === color ? `${styles.colorBlock} ${styles.active}` : styles.colorBlock;
return ( return (
<Tag <Tag
className={classname} className={styles.colorBlock}
key={color} key={color}
color={color} color={color}
check={value === color}
onClick={() => onChange && onChange(color)} onClick={() => onChange && onChange(color)}
/> />
); );
})} })}
</div> </div>
</div>
); );
}; };
......
src/components/Sidebar/ThemeColor.less → src/components/SettingDarwer/ThemeColor.less
View file @ 78a2070b
.themeColor { .themeColor {
overflow: hidden; overflow: hidden;
margin-top: 15px; margin-top: 24px;
margin-left: -5px;
margin-right: -5px;
.title { .title {
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;
margin-bottom: 5px; margin-bottom: 12px;
} }
.colorBlock { .colorBlock {
width: 16px; width: 20px;
height: 16px; height: 20px;
border-radius: 2px; border-radius: 2px;
float: left; float: left;
cursor: pointer; cursor: pointer;
margin: 5px; margin-right: 8px;
&.active { text-align: center;
width: 18px; color: #fff;
height: 18px; font-weight: bold;
margin: 4px;
border: 2px solid hsl(90, 100%, 50%);
box-shadow: 0 0 4px 0 hsl(90, 100%, 50%);
}
} }
} }
src/components/Sidebar/index.js → src/components/SettingDarwer/index.js
View file @ 78a2070b
import React, { PureComponent, Fragment } from 'react'; import React, { PureComponent } from 'react';
import { Select, message, List, Switch, Divider, Radio } from 'antd'; import { Select, message, List, Switch, Divider } from 'antd';
import DrawerMenu from 'rc-drawer-menu'; import DrawerMenu from 'rc-drawer-menu';
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';
import LayoutSeting from './LayoutSetting'; import BlockChecbox from './BlockChecbox';
const RadioGroup = Radio.Group;
const ColorBlock = ({ color, title }) => (
<Fragment>
<div
className={styles.color_block}
style={{
backgroundColor: color,
}}
/>
<div className={styles.color_block_title}>{title}</div>
</Fragment>
);
const Body = ({ children, title, style }) => ( const Body = ({ children, title, style }) => (
<div <div
style={{ style={{
padding: 15,
...style, ...style,
marginBottom: 24,
}} }}
> >
<h3 className={styles.bodyTitle}>{title}</h3> <h3 className={styles.title}>{title}</h3>
{children} {children}
</div> </div>
); );
@connect(({ setting }) => ({ setting })) @connect(({ setting }) => ({ setting }))
class Sidebar extends PureComponent { class SettingDarwer extends PureComponent {
componentDidMount() { componentDidMount() {
const { themeColor } = this.props.setting; const { themeColor } = this.props.setting;
if (themeColor !== '#1890FF') { if (themeColor !== '#1890FF') {
...@@ -40,16 +27,16 @@ class Sidebar extends PureComponent { ...@@ -40,16 +27,16 @@ class Sidebar extends PureComponent {
} }
} }
getLayOutSetting = () => { getLayOutSetting = () => {
const { grid, fixedHeader, autoHideHeader, fixSiderbar, layout } = this.props.setting; const { grid, fixedHeader, autoHideHeader, fixSiderbar } = this.props.setting;
return [ return [
{ {
title: '栅格模式', title: '栅格模式',
isShow: true,
action: [ action: [
<Select <Select
value={grid} value={grid}
size="small"
onSelect={value => this.changeSetting('grid', value)} onSelect={value => this.changeSetting('grid', value)}
style={{ width: 120 }} style={{ width: 80 }}
> >
<Select.Option value="Wide">Wide</Select.Option> <Select.Option value="Wide">Wide</Select.Option>
<Select.Option value="Fluid">Fluid</Select.Option> <Select.Option value="Fluid">Fluid</Select.Option>
...@@ -58,19 +45,19 @@ class Sidebar extends PureComponent { ...@@ -58,19 +45,19 @@ class Sidebar extends PureComponent {
}, },
{ {
title: 'Fixed Header', title: 'Fixed Header',
isShow: true,
action: [ action: [
<Switch <Switch
size="small"
checked={!!fixedHeader} checked={!!fixedHeader}
onChange={checked => this.changeSetting('fixedHeader', checked)} onChange={checked => this.changeSetting('fixedHeader', checked)}
/>, />,
], ],
}, },
{ {
title: '↳ 下滑时隐藏 Header', title: '下滑时隐藏 Header',
isShow: true,
action: [ action: [
<Switch <Switch
size="small"
checked={!!autoHideHeader} checked={!!autoHideHeader}
onChange={checked => this.changeSetting('autoHideHeader', checked)} onChange={checked => this.changeSetting('autoHideHeader', checked)}
/>, />,
...@@ -78,13 +65,15 @@ class Sidebar extends PureComponent { ...@@ -78,13 +65,15 @@ class Sidebar extends PureComponent {
}, },
{ {
title: 'Fix Siderbar', title: 'Fix Siderbar',
isShow: layout === 'sidemenu', action: [
action: [<Switch checked={!!fixSiderbar} onChange={this.fixSiderbar} />], <Switch
size="small"
checked={!!fixSiderbar}
onChange={checked => this.changeSetting('fixSiderbar', checked)}
/>,
],
}, },
].filter(item => item.isShow); ];
};
fixSiderbar = checked => {
this.changeSetting('fixSiderbar', checked);
}; };
changeSetting = (key, value) => { changeSetting = (key, value) => {
const nextState = { ...this.props.setting }; const nextState = { ...this.props.setting };
...@@ -109,6 +98,7 @@ class Sidebar extends PureComponent { ...@@ -109,6 +98,7 @@ class Sidebar extends PureComponent {
colorChange = color => { colorChange = color => {
this.changeSetting('themeColor', color); this.changeSetting('themeColor', color);
const hideMessage = message.loading('正在编译主题！', 0); const hideMessage = message.loading('正在编译主题！', 0);
setTimeout(() => {
window.less window.less
.modifyVars({ .modifyVars({
'@primary-color': color, '@primary-color': color,
...@@ -119,14 +109,12 @@ class Sidebar extends PureComponent { ...@@ -119,14 +109,12 @@ class Sidebar extends PureComponent {
.catch(() => { .catch(() => {
message.error(`Failed to update theme`); message.error(`Failed to update theme`);
}); });
}, 200);
}; };
render() { render() {
const radioStyle = { const { collapse, silderTheme, themeColor, layout } = this.props.setting;
display: 'block',
};
const { collapse, silderTheme, themeColor, layout, colorWeak } = this.props.setting;
return ( return (
<div className={styles.sidebar}> <div className={styles.settingDarwer}>
<div className={styles.mini_bar} onClick={this.togglerContent}> <div className={styles.mini_bar} onClick={this.togglerContent}>
<img <img
alt="logo" alt="logo"
...@@ -140,62 +128,55 @@ class Sidebar extends PureComponent { ...@@ -140,62 +128,55 @@ class Sidebar extends PureComponent {
open={collapse} open={collapse}
placement="right" placement="right"
width="336px" width="336px"
onMaskClick={this.togglerContent}
>
<div className={styles.content}>
<Body
title="整体风格设置"
style={{ style={{
paddingBottom: 10, zIndex: 999,
}} }}
onMaskClick={this.togglerContent}
> >
<RadioGroup <div className={styles.content}>
onChange={({ target }) => this.changeSetting('silderTheme', target.value)} <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} value={silderTheme}
> onChange={value => this.changeSetting('silderTheme', value)}
<Radio style={radioStyle} value="dark"> />
<ColorBlock color="#002140" title="深色导航" />
</Radio>
<Radio style={radioStyle} value="light">
<ColorBlock color="#E9E9E9" title="浅色导航" />
</Radio>
</RadioGroup>
<ThemeColor value={themeColor} onChange={this.colorChange} />
</Body> </Body>
<Divider style={{ margin: 0 }} />
<ThemeColor value={themeColor} onChange={this.colorChange} />
<Divider />
<Body title="导航设置 "> <Body title="导航设置 ">
<LayoutSeting <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} value={layout}
onChange={value => this.changeSetting('layout', value)} onChange={value => this.changeSetting('layout', value)}
/> />
<List
split={false}
dataSource={this.getLayOutSetting()}
renderItem={item => <List.Item actions={item.action}>{item.title}</List.Item>}
/>
</Body> </Body>
<Divider style={{ margin: 0 }} />
<Body title="其他设置">
<List <List
split={false} split={false}
dataSource={[ dataSource={this.getLayOutSetting()}
{
title: '色弱模式',
action: [
<Select
value={colorWeak}
onSelect={value => this.changeSetting('colorWeak', value)}
style={{ width: 120 }}
>
<Select.Option value="open">打开</Select.Option>
<Select.Option value="close">关闭</Select.Option>
</Select>,
],
},
]}
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> </DrawerMenu>
</div> </div>
...@@ -203,4 +184,4 @@ class Sidebar extends PureComponent { ...@@ -203,4 +184,4 @@ class Sidebar extends PureComponent {
} }
} }
export default Sidebar; export default SettingDarwer;
src/components/Sidebar/index.less → src/components/SettingDarwer/index.less
View file @ 78a2070b
.sidebar { @import '~antd/lib/style/themes/default.less';
.settingDarwer {
.mini_bar { .mini_bar {
width: 50px; width: 50px;
height: 45px; height: 45px;
...@@ -26,51 +28,50 @@ ...@@ -26,51 +28,50 @@
} }
.content { .content {
width: 336px; width: 273px;
height: 100%; height: 100%;
padding: 24px;
background: #fff; background: #fff;
:global {
.ant-switch-checked {
background-color: #87d068;
}
.ant-list-item {
padding-top: 7px;
padding-bottom: 7px;
}
}
} }
.layoutSetting { .blockChecbox {
margin: 5px;
display: flex; display: flex;
.item { .item {
margin-right: 16px;
position: relative;
// box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
border-radius: 4px;
cursor: pointer; cursor: pointer;
width: 70px; img {
height: 44px; width: 48px;
text-align: center; }
margin: 8px; }
.selectIcon {
position: absolute;
top: 0;
right: 0;
width: 100%;
padding-top: 15px;
padding-left: 24px;
height: 100%;
color: @primary-color;
font-size: 14px;
font-weight: bold;
} }
} }
.color_block { .color_block {
width: 38px; width: 38px;
height: 22px; height: 22px;
margin: 4px; margin: 4px;
border-radius: 4px;
cursor: pointer; cursor: pointer;
margin-right: 12px; margin-right: 12px;
display: inline-block; display: inline-block;
vertical-align: middle; 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 { .title {
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: 12px;
} }
src/components/Sidebar/LayoutSetting.js deleted 100644 → 0
View file @ c1c36b61
import { Tooltip } from 'antd';
import React from 'react';
import NavSate from './navState';
import style from './index.less';
const LayoutSetting = ({ value, onChange }) => {
return (
<div className={style.layoutSetting}>
{['sidemenu', 'topmenu'].map(layout => (
<div className={style.item} onClick={() => onChange && onChange(layout)} key={layout}>
<NavSate type={layout} state={value === layout ? 'active' : 'default'} alt={layout} />
</div>
))}
<Tooltip title="等待后期实现！">
<div key="topside" className={style.item}>
<NavSate type="topside" state="disable" alt="topside" />
</div>
</Tooltip>
</div>
);
};
export default LayoutSetting;
src/components/Sidebar/navState.js deleted 100644 → 0
View file @ c1c36b61
import React from 'react';
const UrlMap = {
sidemenu: {
active: 'https://gw.alipayobjects.com/zos/rmsportal/WEqgEeCsLvecmwJwbhif.svg',
default: 'https://gw.alipayobjects.com/zos/rmsportal/bjdhEDZlJzyMlyGbFQQd.svg',
disable: 'https://gw.alipayobjects.com/zos/rmsportal/VeCtUculrOjKzkzSzrye.svg',
},
topside: {
active: 'https://gw.alipayobjects.com/zos/rmsportal/RbntcRzDHttDvYfKxsPc.svg',
default: 'https://gw.alipayobjects.com/zos/rmsportal/gqjBdnSHfVYIFvpGbLZV.svg',
disable: 'https://gw.alipayobjects.com/zos/rmsportal/VlSlQQkUGdbcOZdbUgMp.svg',
},
topmenu: {
active: 'https://gw.alipayobjects.com/zos/rmsportal/nWoQtAGvMihfwxKZEzAi.svg',
default: 'https://gw.alipayobjects.com/zos/rmsportal/tbfuZcaGaYQGyeaiTaDg.svg',
disable: 'https://gw.alipayobjects.com/zos/rmsportal/VYNKTivFAQOBBbZkkWNb.svg',
},
};
const navState = ({ alt, type, state }) => {
const url = UrlMap[type][state];
return <img src={url} alt={alt} />;
};
export default navState;
src/layouts/BasicLayout.js
View file @ 78a2070b
...@@ -10,7 +10,7 @@ import SiderMenu from '../components/SiderMenu'; ...@@ -10,7 +10,7 @@ import SiderMenu from '../components/SiderMenu';
import NotFound from '../routes/Exception/404'; import NotFound from '../routes/Exception/404';
import { getRoutes } from '../utils/utils'; import { getRoutes } from '../utils/utils';
import Authorized from '../utils/Authorized'; import Authorized from '../utils/Authorized';
import Sidebar from '../components/Sidebar'; import SettingDarwer from '../components/SettingDarwer';
import logo from '../assets/logo.svg'; import logo from '../assets/logo.svg';
import Footer from './Footer'; import Footer from './Footer';
import Header from './Header'; import Header from './Header';
...@@ -176,7 +176,7 @@ class BasicLayout extends React.PureComponent { ...@@ -176,7 +176,7 @@ class BasicLayout extends React.PureComponent {
<Context.Provider value={this.getContext()}> <Context.Provider value={this.getContext()}>
<div className={classNames(params)}> <div className={classNames(params)}>
{layout} {layout}
<Sidebar /> <SettingDarwer />
</div> </div>
</Context.Provider> </Context.Provider>
)} )}
......
webpack.config.js
View file @ 78a2070b
...@@ -5,7 +5,7 @@ const path = require('path'); ...@@ -5,7 +5,7 @@ const path = require('path');
export default webpackConfig => { export default webpackConfig => {
const options = { const options = {
antDir: path.join(__dirname, './node_modules/antd'), antDir: path.join(__dirname, './node_modules/antd'),
stylesDir: path.join(__dirname, './src'), stylesDir: path.join(__dirname, './src/'),
varFile: path.join(__dirname, './node_modules/antd/lib/style/themes/default.less'), varFile: path.join(__dirname, './node_modules/antd/lib/style/themes/default.less'),
mainLessFile: path.join(__dirname, './src/index.less'), mainLessFile: path.join(__dirname, './src/index.less'),
themeVariables: ['@primary-color'], themeVariables: ['@primary-color'],
......
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