From e812829d83b1fd296b25fbc244f89e9b38f687a9 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期一, 28 九月 2020 09:28:15 +0800
Subject: [PATCH] 2020-09-28
---
src/mob/colorsketch/index.jsx | 16 +
src/mob/controller/index.jsx | 2
src/menu/stylecontroller/index.jsx | 335 +++++++++++++++++-------------------
src/menu/actioncomponent/dragaction/index.jsx | 5
src/menu/components/card/cardcellcomponent/elementform/index.jsx | 13 +
src/menu/components/card/data-card/index.jsx | 44 ++++
src/menu/components/card/cardcellcomponent/dragaction/card.jsx | 1
src/menu/components/card/cardcellcomponent/formconfig.jsx | 9 +
src/menu/components/chart/antv-bar/index.jsx | 3
src/menu/stylecontroller/index.scss | 64 ++++++
src/menu/components/card/data-card/index.scss | 19 +-
src/mob/colorsketch/index.scss | 2
src/menu/components/tabs/antv-tabs/index.jsx | 3
src/menu/menushell/index.scss | 8
14 files changed, 303 insertions(+), 221 deletions(-)
diff --git a/src/menu/actioncomponent/dragaction/index.jsx b/src/menu/actioncomponent/dragaction/index.jsx
index 8afabe7..0f4bc9e 100644
--- a/src/menu/actioncomponent/dragaction/index.jsx
+++ b/src/menu/actioncomponent/dragaction/index.jsx
@@ -55,14 +55,9 @@
copycard.uuid = Utils.getuuid()
copycard.origin = false
copycard.copyType = 'action'
- copycard.label = copycard.label + '(copy)'
copycard.focus = true
copycard.originCard = card
-
- if (copycard.OpenType === 'popview') { // 寰呭畬鍠�
- copycard.linkTab = ''
- }
let _val = fromJS(copycard).toJS()
diff --git a/src/menu/components/card/cardcellcomponent/dragaction/card.jsx b/src/menu/components/card/cardcellcomponent/dragaction/card.jsx
index d382708..345717e 100644
--- a/src/menu/components/card/cardcellcomponent/dragaction/card.jsx
+++ b/src/menu/components/card/cardcellcomponent/dragaction/card.jsx
@@ -102,6 +102,7 @@
<div className="mk-popover-control">
<Icon className="edit" title="edit" type="edit" onClick={() => editCard(id)} />
<Icon className="close" title="close" type="close" onClick={() => delCard(id)} />
+ {/* <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> */}
</div>
} trigger="hover">
<div ref={node => drag(drop(node))} className={'ant-col card-cell ant-col-' + card.width} style={_style}>
diff --git a/src/menu/components/card/cardcellcomponent/elementform/index.jsx b/src/menu/components/card/cardcellcomponent/elementform/index.jsx
index e3f6386..ea5a9c6 100644
--- a/src/menu/components/card/cardcellcomponent/elementform/index.jsx
+++ b/src/menu/components/card/cardcellcomponent/elementform/index.jsx
@@ -13,6 +13,7 @@
number: ['eleType', 'datatype', 'value', 'format', 'fontSize', 'fontWeight', 'width', 'height', 'color', 'align', 'padding', 'prefix', 'postfix'],
picture: ['eleType', 'datatype', 'width', 'lenWidRadio', 'radius', 'padding', 'url'],
icon: ['eleType', 'icon', 'fontSize', 'width', 'height', 'color', 'align', 'padding', 'tooltip'],
+ link: ['eleType', 'datatype', 'value', 'labelfield', 'fontSize', 'width', 'height', 'color', 'align', 'padding', 'prefix'],
slider: ['eleType', 'field', 'width', 'color', 'padding', 'maxValue'],
splitline: ['eleType', 'color', 'width', 'padding'],
}
@@ -59,6 +60,16 @@
})
}
})
+ } else if (item.key === 'labelfield') {
+ item.options = []
+ config.columns.forEach(col => {
+ if (/^Nvarchar/ig.test(col.datatype)) {
+ item.options.push({
+ value: col.field,
+ text: col.label
+ })
+ }
+ })
}
return item
@@ -69,7 +80,7 @@
getOptions = (eleType, datatype) => {
let _options = fromJS(cardTypeOptions[eleType]).toJS() // 閫夐」鍒楄〃
- if (['text', 'number', 'picture'].includes(eleType)) {
+ if (['text', 'number', 'picture', 'link'].includes(eleType)) {
if (datatype === 'dynamic') {
_options.push('field')
}
diff --git a/src/menu/components/card/cardcellcomponent/formconfig.jsx b/src/menu/components/card/cardcellcomponent/formconfig.jsx
index 40fa793..082a0c0 100644
--- a/src/menu/components/card/cardcellcomponent/formconfig.jsx
+++ b/src/menu/components/card/cardcellcomponent/formconfig.jsx
@@ -23,6 +23,7 @@
{ value: 'number', text: '鏁板��'},
{ value: 'picture', text: '鍥剧墖'},
{ value: 'icon', text: '鍥炬爣'},
+ { value: 'link', text: '閾炬帴'},
{ value: 'slider', text: '杩涘害鏉�'},
{ value: 'splitline', text: '鍒嗗壊绾�'},
]
@@ -62,6 +63,14 @@
required: true
},
{
+ type: 'select',
+ key: 'labelfield',
+ label: '鎻愮ず瀛楁',
+ initVal: card.labelfield || '',
+ required: false,
+ options: []
+ },
+ {
type: 'text',
key: 'prefix',
label: '鍓嶇紑',
diff --git a/src/menu/components/card/data-card/index.jsx b/src/menu/components/card/data-card/index.jsx
index 7c7d866..fa7ef3e 100644
--- a/src/menu/components/card/data-card/index.jsx
+++ b/src/menu/components/card/data-card/index.jsx
@@ -2,7 +2,7 @@
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
-import { Icon, Popover } from 'antd'
+import { Icon, Popover, Switch } from 'antd'
import asyncComponent from '@/utils/asyncComponent'
import asyncIconComponent from '@/utils/asyncIconComponent'
@@ -15,7 +15,7 @@
const SettingComponent = asyncIconComponent(() => import('@/menu/datasource'))
const WrapComponent = asyncIconComponent(() => import('./wrapsetting'))
-const ActionComponent = asyncComponent(() => import('@/menu/actioncomponent'))
+// const ActionComponent = asyncComponent(() => import('@/menu/actioncomponent'))
const CardCellComponent = asyncComponent(() => import('../cardcellcomponent'))
class antvBarLineChart extends Component {
@@ -27,7 +27,8 @@
state = {
dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
- card: null
+ card: null,
+ back: false
}
UNSAFE_componentWillMount () {
@@ -60,9 +61,10 @@
subtype: card.subtype,
setting: { interType: 'system' },
wrap: { name: card.name, width: 24, cardWidth: 6, addable: 'false', switch: 'false' },
+ style: { marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px' },
columns: [],
scripts: [],
- action: [],
+ // action: [],
elements: []
}
this.setState({
@@ -77,7 +79,7 @@
}
componentDidMount () {
-
+ MKEmitter.addListener('submitStyle', this.getStyle)
}
shouldComponentUpdate (nextProps, nextState) {
@@ -91,6 +93,7 @@
this.setState = () => {
return
}
+ MKEmitter.removeListener('submitStyle', this.getStyle)
}
updateComponent = (component) => {
@@ -148,17 +151,41 @@
}
changeStyle = () => {
- // MKEmitter.emit('changeStyle', card.uuid, newcard)
+ const { card } = this.state
+
+ MKEmitter.emit('changeStyle', [card.uuid], ['font', 'background', 'border'], {})
+ }
+
+ changeOutStyle = () => {
+ const { card } = this.state
+
+ MKEmitter.emit('changeStyle', [card.uuid], ['background', 'border', 'padding', 'margin'], card.style)
+ }
+
+ getStyle = (comIds, style) => {
+ const { card } = this.state
+
+ if (comIds[0] !== card.uuid) return
+
+ this.setState({
+ card: {...card, style}
+ })
+ console.log(style)
+ }
+
+ changeSide = () => {
+ this.setState(prev => ({ back: !prev.back }))
}
render() {
const { card } = this.state
return (
- <div className="menu-data-card-edit-box">
+ <div className="menu-data-card-edit-box" style={card.style}>
<Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
<div className="mk-popover-control">
<WrapComponent config={card} updateConfig={this.updateComponent} />
+ <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeOutStyle} type="font-colors" />
<Icon className="close" title="delete" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} />
<SettingComponent config={card} updateConfig={this.updateComponent} />
</div>
@@ -167,13 +194,14 @@
</Popover>
<div className={'ant-col card-item ant-col-' + (card.wrap.cardWidth || 6)} style={{height: card.wrap.height ? card.wrap.height + 'px' : 'auto'}}>
<CardCellComponent config={card} updateElement={this.updateComponent}/>
- <ActionComponent plus="false" config={card} updateaction={this.updateComponent}/>
+ {/* <ActionComponent plus="false" config={card} updateaction={this.updateComponent}/> */}
<div className="card-control">
<Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
<div className="mk-popover-control">
<Icon className="plus" title="娣诲姞鍏冪礌" onClick={this.addElement} type="plus" />
<Icon className="plus" title="娣诲姞鎸夐挳" onClick={this.addButton} type="plus-square" />
<Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" />
+ <Switch size="small" onClick={this.changeSide} defaultChecked />
</div>
} trigger="hover">
<Icon type="tool" />
diff --git a/src/menu/components/card/data-card/index.scss b/src/menu/components/card/data-card/index.scss
index 3644084..01e2c57 100644
--- a/src/menu/components/card/data-card/index.scss
+++ b/src/menu/components/card/data-card/index.scss
@@ -2,27 +2,28 @@
position: relative;
box-sizing: border-box;
background: #ffffff;
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-size: cover;
.card-control {
position: absolute;
top: 0px;
- right: 0px;
- width: 26px;
- height: 27px;
- z-index: 1;
- background: #ffffff;
+ left: 0px;
.anticon-tool {
- padding: 5px;
+ right: auto;
+ left: 1px;
}
}
.anticon-tool {
position: absolute;
z-index: 1;
font-size: 16px;
- right: 0;
- top: 0;
+ right: 1px;
+ top: 1px;
cursor: pointer;
- padding: 10px;
+ padding: 5px;
+ background: #ffffff;
}
.card-item {
diff --git a/src/menu/components/chart/antv-bar/index.jsx b/src/menu/components/chart/antv-bar/index.jsx
index e800e66..c3e22df 100644
--- a/src/menu/components/chart/antv-bar/index.jsx
+++ b/src/menu/components/chart/antv-bar/index.jsx
@@ -84,6 +84,7 @@
name: _plot.name,
subtype: card.subtype,
setting: { interType: 'system' },
+ style: { marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px' },
columns: [],
scripts: [],
search: [],
@@ -642,7 +643,7 @@
const { card } = this.state
return (
- <div className="menu-line-chart-edit-box" style={{height: card.plot.height || 400}}>
+ <div className="menu-line-chart-edit-box" style={{...card.style, height: card.plot.height || 400}}>
<div className="chart-header">
<span className="chart-title">{card.plot.title || ''}</span>
<SearchComponent
diff --git a/src/menu/components/tabs/antv-tabs/index.jsx b/src/menu/components/tabs/antv-tabs/index.jsx
index a397db3..f1d986c 100644
--- a/src/menu/components/tabs/antv-tabs/index.jsx
+++ b/src/menu/components/tabs/antv-tabs/index.jsx
@@ -47,6 +47,7 @@
width: 24,
name: tabs.name,
setting: {width: 24, position: 'top', tabStyle: 'line', name: tabs.name},
+ style: { marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px' },
subtabs: [
{ uuid: Utils.getuuid(), parentId: tabs.uuid, floor: tabs.floor, label: 'Tab 1', icon: '', components: [] },
{ uuid: Utils.getuuid(), parentId: tabs.uuid, floor: tabs.floor, label: 'Tab 2', icon: '', components: [] },
@@ -206,7 +207,7 @@
const { tabs, dict, labelvisible, editab } = this.state
return (
- <div className="menu-tabs-edit-box">
+ <div className="menu-tabs-edit-box" style={tabs.style}>
<Tabs defaultActiveKey="1" tabPosition={tabs.setting.position} type={tabs.setting.tabStyle}>
{tabs.subtabs.map((tab, index) => (
<TabPane tab={
diff --git a/src/menu/menushell/index.scss b/src/menu/menushell/index.scss
index 8ac5399..18ca1c9 100644
--- a/src/menu/menushell/index.scss
+++ b/src/menu/menushell/index.scss
@@ -4,14 +4,6 @@
width: 100%;
background-size: 100%;
- >.ant-row {
- margin-left: -4px;
- margin-right: -4px;
- margin-top: -4px;
- >.ant-col {
- padding: 8px;
- }
- }
.anticon {
cursor: unset;
}
diff --git a/src/menu/stylecontroller/index.jsx b/src/menu/stylecontroller/index.jsx
index f4171c8..82cbd05 100644
--- a/src/menu/stylecontroller/index.jsx
+++ b/src/menu/stylecontroller/index.jsx
@@ -1,8 +1,9 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
-import { Collapse, Form, Input, Col, Icon, InputNumber, Select, Radio, Popover, Menu, Drawer } from 'antd'
+import { Collapse, Form, Input, Col, Icon, InputNumber, Select, Radio, Drawer } from 'antd'
+import MKEmitter from '@/utils/events.js'
import zhCN from '@/locales/zh-CN/mob.js'
import enUS from '@/locales/en-US/mob.js'
import ColorSketch from '@/mob/colorsketch'
@@ -21,54 +22,73 @@
state = {
dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
card: null,
+ comIds: [],
fontColor: '#000000',
- backgroundColor: '#ffffff',
bgimages: [],
- marginTop: '',
- marginTopVal: '',
- marginBottom: '',
- marginBottomVal: '',
- }
-
- UNSAFE_componentWillReceiveProps (nextProps) {
- if (!is(fromJS(this.props.editElem), fromJS(nextProps.editElem))) {
- this.setState({
- card: null
- }, () => {
- if (!nextProps.editElem) return
- let _card = fromJS(nextProps.editElem).toJS()
- let bgImg = _card.backgroundImage || ''
-
- if (bgImg && /^linear-gradient/.test(bgImg)) {
- bgImg = bgImg.replace('linear-gradient(', '')
- bgImg = bgImg.replace(')', '')
- } else if (bgImg && /^url/.test(bgImg)) {
- bgImg = bgImg.replace('url(', '')
- bgImg = bgImg.replace(')', '')
- }
-
- this.setState({
- card: _card,
- fontColor: _card.color || '#000000',
- backgroundColor: _card.backgroundColor || '#ffffff',
- backgroundImage: bgImg,
- marginTop: _card.marginTop ? _card.marginTop : '',
- marginTopVal: _card.marginTop ? parseInt(_card.marginTop) : '',
- marginBottom: _card.marginBottom ? _card.marginBottom : '',
- marginBottomVal: _card.marginBottomVal ? parseInt(_card.marginBottomVal) : ''
- })
- })
- }
+ backgroundImage: '',
+ options: [],
}
shouldComponentUpdate (nextProps, nextState) {
return !is(fromJS(this.state), fromJS(nextState))
}
- updateStyle = (style) => {
- const { card } = this.state
+ componentDidMount () {
+ MKEmitter.addListener('changeStyle', this.initStyle)
+ }
- this.props.updateStyle({componentId: card.componentId, classId: card.classId, uuid: card.uuid, style})
+ /**
+ * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊锛屾竻闄ゅ揩鎹烽敭璁剧疆
+ */
+ componentWillUnmount () {
+ this.setState = () => {
+ return
+ }
+ MKEmitter.removeListener('changeStyle', this.initStyle)
+ }
+
+ initStyle = (comIds, options, style = {}) => {
+ let backgroundImage = ''
+ if (style.backgroundImage) {
+ if (/^url/ig.test(style.backgroundImage)) {
+ backgroundImage = style.backgroundImage.replace(/^url\(/ig, '').replace(/\)$/ig, '')
+ } else if (/^linear-gradient/ig.test(style.backgroundImage)) {
+ backgroundImage = style.backgroundImage.replace(/^linear-gradient\(/ig, '').replace(/\)$/ig, '')
+ }
+ }
+
+ this.setState({
+ visible: true,
+ comIds: comIds,
+ card: fromJS(style).toJS(),
+ options: options,
+ backgroundImage
+ })
+ }
+
+ onCloseDrawer = () => {
+ this.setState({
+ visible: false,
+ comIds: [],
+ card: null,
+ options: [],
+ backgroundImage: ''
+ })
+ }
+
+ updateStyle = (style) => {
+ const { comIds, card } = this.state
+
+ let _style = {
+ ...card,
+ ...style
+ }
+
+ this.setState({
+ card: _style,
+ })
+
+ MKEmitter.emit('submitStyle', comIds, _style)
}
/**
@@ -155,19 +175,7 @@
* @description 淇敼鑳屾櫙棰滆壊 锛岄鑹叉帶浠�
*/
changeBackgroundColor = (val) => {
- this.setState({
- backgroundColor: val
- })
this.updateStyle({backgroundColor: val})
- }
-
- /**
- * @description 淇敼瀛椾綋棰滆壊 锛屾墜鍔ㄨ緭鍏�
- */
- changeBackgroundColorInput = (e) => {
- this.setState({
- backgroundColor: e.target.value
- })
}
imgChange = (list) => {
@@ -183,12 +191,6 @@
}
changeBackgroundImageInput = (e) => {
- this.setState({
- backgroundImage: e.target.value
- })
- }
-
- submitBackgroundImage = (e) => {
let val = e.target.value
val = val.replace(/^\s*|\s*$/ig, '')
@@ -197,68 +199,35 @@
} else if (/^#|,/ig.test(val)) {
val = `linear-gradient(${val})`
}
-
+ this.setState({backgroundImage: e.target.value})
this.updateStyle({backgroundImage: val})
}
- submitBorder = (val, type) => {
- this.updateStyle({[type]: val})
+ submitBorder = (val) => {
+ let border = '0px'
+ if (!/,\s0\)$/.test(val)) {
+ border = `1px solid ${val}`
+ }
+ this.updateStyle({border: border})
}
- changeBorderRadius = (val) => {
- let value = parseFloat(val)
-
- if (isNaN(value) || value < 0 || value > 500) return
-
- this.updateStyle({borderRadius: `${value}px`})
- }
-
- changeMarginTop = (e) => {
+ changeBorderRadius = (e) => {
let val = e.target.value
- let _val = parseInt(val)
-
- this.setState({
- marginTop: val
- })
-
- if (isNaN(_val)) return
-
- this.setState({
- marginTopVal: _val
- })
+ this.updateStyle({borderRadius: val})
}
- submitMarginTop = (val) => {
- this.setState({
- marginTop: val
- })
- this.updateStyle({marginTop: val})
- }
+ changeMarginOrPadding = (val, type) => {
+ val = parseInt(val)
- changeMarginBottom = (e) => {
- let val = e.target.value
- let _val = parseInt(val)
+ if (isNaN(val)) {
+ val = 0
+ }
- this.setState({
- marginBottom: val
- })
-
- if (isNaN(_val)) return
-
- this.setState({
- marginBottomVal: _val
- })
- }
-
- submitMarginBottom = (val) => {
- this.setState({
- marginBottom: val
- })
- this.updateStyle({marginBottom: val})
+ this.updateStyle({[type]: `${val}px`})
}
render () {
- const { card, fontColor, backgroundColor, backgroundImage, bgimages, marginTop, marginTopVal, marginBottom, marginBottomVal } = this.state
+ const { card, options, backgroundImage, bgimages } = this.state
const formItemLayout = {
labelCol: {
xs: { span: 24 },
@@ -272,20 +241,26 @@
return (
<Drawer
- title="鏍峰紡淇敼"
+ title={
+ <div className="header-logo">
+ <img src="http://cloud.mk9h.cn/Content/images/upload/2020-03-26/2020032615132185788026_xiazai.png" alt=""/>
+ </div>
+ }
placement="left"
width="300"
+ className="menu-style-drawer"
closable={true}
- maskStyle={{opacity: 0.2}}
+ onClose={this.onCloseDrawer}
+ maskStyle={{opacity: 0.1}}
visible={this.state.visible}
>
- <div className="mob-controller">
+ <div className="menu-style-controller">
<Form {...formItemLayout}>
- {card ? <Collapse expandIconPosition="right" defaultActiveKey={card.items[0]} accordion={true}>
- {card.items.includes('font') ? <Panel header="瀛椾綋" key="font">
+ {card ? <Collapse expandIconPosition="right" destroyInactivePanel={true} defaultActiveKey={options[0]} accordion={true}>
+ {options.includes('font') ? <Panel header="瀛椾綋" key="font">
<Col span={12}>
<Form.Item colon={false} label={<Icon title="瀛椾綋澶у皬" type="font-size" />}>
- <InputNumber defaultValue={card.fontSize || 14} min={12} max={100} precision={0} onChange={this.changeFontSize} />
+ <InputNumber defaultValue={card.fontSize} min={12} max={100} precision={0} onChange={this.changeFontSize} />
</Form.Item>
</Col>
<Col span={12}>
@@ -324,7 +299,6 @@
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
<ColorSketch value={card.color || '#000000'} onChange={this.changeFontColor} />
- <Input value={fontColor} onChange={this.changeFontColorInput} />
</Form.Item>
</Col>
<Col span={24}>
@@ -368,15 +342,14 @@
</Form.Item>
</Col>
</Panel> : null}
- {card.items.includes('background') ? <Panel header="鑳屾櫙" key="background">
+ {options.includes('background') ? <Panel header="鑳屾櫙" key="background">
<Col span={24}>
<Form.Item
colon={false}
label={<Icon title="鑳屾櫙棰滆壊" type="bg-colors" />}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <ColorSketch color={card.backgroundColor || '#ffffff'} changeColor={this.changeBackgroundColor} />
- <Input value={backgroundColor} onChange={this.changeBackgroundColorInput} />
+ <ColorSketch value={card.backgroundColor || '#ffffff'} onChange={this.changeBackgroundColor} />
</Form.Item>
</Col>
<Col span={24}>
@@ -386,54 +359,18 @@
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
<FileUpload value={bgimages} maxFile={2} fileType="text" onChange={this.imgChange}/>
- <Input placeholder="" value={backgroundImage} autoComplete="off" onBlur={this.submitBackgroundImage} onPressEnter={this.submitBackgroundImage} onChange={this.changeBackgroundImageInput} />
+ <Input placeholder="" value={backgroundImage} autoComplete="off" onChange={this.changeBackgroundImageInput} />
</Form.Item>
</Col>
</Panel> : null}
- {card.items.includes('border') ? <Panel header="杈规" key="border">
+ {options.includes('border') ? <Panel header="杈规" key="border">
<Col span={24}>
<Form.Item
colon={false}
- label={<Icon title="澶栬竟妗�" type="border-outer" />}
+ label={<Icon title="杈规" type="border-outer" />}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <Input placeholder="" defaultValue={card.border || ''} autoComplete="off" onBlur={(e) => this.submitBorder(e.target.value, 'border')} onPressEnter={(e) => this.submitBorder(e.target.value, 'border')}/>
- </Form.Item>
- </Col>
- <Col span={24}>
- <Form.Item
- colon={false}
- label={<Icon title="宸﹁竟妗�" type="border-left" />}
- labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
- >
- <Input placeholder="" defaultValue={card.borderLeft || ''} autoComplete="off" onBlur={(e) => this.submitBorder(e.target.value, 'borderLeft')} onPressEnter={(e) => this.submitBorder(e.target.value, 'borderLeft')}/>
- </Form.Item>
- </Col>
- <Col span={24}>
- <Form.Item
- colon={false}
- label={<Icon title="鍙宠竟妗�" type="border-right" />}
- labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
- >
- <Input placeholder="" defaultValue={card.borderRight || ''} autoComplete="off" onBlur={(e) => this.submitBorder(e.target.value, 'borderRight')} onPressEnter={(e) => this.submitBorder(e.target.value, 'borderRight')}/>
- </Form.Item>
- </Col>
- <Col span={24}>
- <Form.Item
- colon={false}
- label={<Icon title="涓婅竟妗�" type="border-top" />}
- labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
- >
- <Input placeholder="" defaultValue={card.borderTop || ''} autoComplete="off" onBlur={(e) => this.submitBorder(e.target.value, 'borderTop')} onPressEnter={(e) => this.submitBorder(e.target.value, 'borderTop')}/>
- </Form.Item>
- </Col>
- <Col span={24}>
- <Form.Item
- colon={false}
- label={<Icon title="涓嬭竟妗�" type="border-bottom" />}
- labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
- >
- <Input placeholder="" defaultValue={card.borderBottom || ''} autoComplete="off" onBlur={(e) => this.submitBorder(e.target.value, 'borderBottom')} onPressEnter={(e) => this.submitBorder(e.target.value, 'borderBottom')}/>
+ <ColorSketch defaultValue={card.border ? card.border.replace(/^1px solid /ig, '').replace('0px', 'transparent') : 'transparent'} onChange={this.submitBorder} />
</Form.Item>
</Col>
<Col span={24}>
@@ -442,41 +379,81 @@
label={<Icon title="鍦嗚" type="radius-setting" />}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <InputNumber defaultValue={card.borderRadius || 0} min={0} max={500} precision={0} onChange={this.changeBorderRadius}/>
+ <Radio.Group onChange={this.changeBorderRadius} defaultValue={card.borderRadius || ''}>
+ <Radio value="0px">鏃�</Radio>
+ <Radio value="2px">2px</Radio>
+ <Radio value="4px">4px</Radio>
+ <Radio value="25%">25%</Radio>
+ <Radio value="50%">50%</Radio>
+ </Radio.Group>
</Form.Item>
</Col>
</Panel> : null}
- {card.items.includes('margin') ? <Panel header="澶栬竟璺�" key="margin">
+ {options.includes('margin') ? <Panel header="澶栬竟璺�" key="margin">
<Col span={12}>
<Form.Item
colon={false}
- label={<Icon title="涓婅竟璺�" type="vertical-align-top"/>}
+ label={<Icon title="涓婅竟璺�" type="arrow-up"/>}
>
- <Popover placement="bottom" overlayClassName="margin-popover" content={
- marginTopVal !== '' ?
- <Menu>
- <Menu.Item onClick={() => this.submitMarginTop(`${marginTopVal}px`)}>{marginTopVal} px</Menu.Item>
- <Menu.Item onClick={() => this.submitMarginTop(`${marginTopVal}vh`)}>{marginTopVal} vh</Menu.Item>
- </Menu> : null
- } trigger="hover">
- <Input value={marginTop} onChange={this.changeMarginTop}/>
- </Popover>
+ <InputNumber defaultValue={card.marginTop || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'marginTop')}/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
colon={false}
- label={<Icon title="涓嬭竟璺�" type="vertical-align-bottom"/>}
+ label={<Icon title="涓嬭竟璺�" type="arrow-down"/>}
>
- <Popover placement="bottom" overlayClassName="margin-popover" content={
- marginBottomVal !== '' ?
- <Menu>
- <Menu.Item onClick={() => this.submitMarginBottom(`${marginBottomVal}px`)}>{marginBottomVal} px</Menu.Item>
- <Menu.Item onClick={() => this.submitMarginBottom(`${marginBottomVal}vh`)}>{marginBottomVal} vh</Menu.Item>
- </Menu> : null
- } trigger="hover">
- <Input value={marginBottom} onChange={this.changeMarginBottom}/>
- </Popover>
+ <InputNumber defaultValue={card.marginBottom || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'marginBottom')}/>
+ </Form.Item>
+ </Col>
+ <Col span={12}>
+ <Form.Item
+ colon={false}
+ label={<Icon title="宸﹁竟璺�" type="arrow-left"/>}
+ >
+ <InputNumber defaultValue={card.marginLeft || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'marginLeft')}/>
+ </Form.Item>
+ </Col>
+ <Col span={12}>
+ <Form.Item
+ colon={false}
+ label={<Icon title="鍙宠竟璺�" type="arrow-right"/>}
+ >
+ <InputNumber defaultValue={card.marginRight || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'marginRight')}/>
+ </Form.Item>
+ </Col>
+ </Panel> : null}
+ {options.includes('padding') ? <Panel header="鍐呰竟璺�" key="padding">
+ <Col span={12}>
+ <Form.Item
+ colon={false}
+ label={<Icon title="涓婅竟璺�" type="arrow-up"/>}
+ >
+ <InputNumber defaultValue={card.paddingTop || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'paddingTop')}/>
+ </Form.Item>
+ </Col>
+ <Col span={12}>
+ <Form.Item
+ colon={false}
+ label={<Icon title="涓嬭竟璺�" type="arrow-down"/>}
+ >
+ <InputNumber defaultValue={card.paddingBottom || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'paddingBottom')}/>
+ </Form.Item>
+ </Col>
+ <Col span={12}>
+ <Form.Item
+ colon={false}
+ label={<Icon title="宸﹁竟璺�" type="arrow-left"/>}
+ >
+ <InputNumber defaultValue={card.paddingLeft || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'paddingLeft')}/>
+ </Form.Item>
+ </Col>
+ <Col span={12}>
+ <Form.Item
+ colon={false}
+ label={<Icon title="鍙宠竟璺�" type="arrow-right"/>}
+ >
+ <InputNumber defaultValue={card.paddingRight || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'paddingRight')}/>
</Form.Item>
</Col>
</Panel> : null}
diff --git a/src/menu/stylecontroller/index.scss b/src/menu/stylecontroller/index.scss
index 6acbf69..3205800 100644
--- a/src/menu/stylecontroller/index.scss
+++ b/src/menu/stylecontroller/index.scss
@@ -1,7 +1,7 @@
-.mob-controller {
+.menu-style-controller {
width: 100%;
- height: 100%;
overflow: hidden;
+
>.ant-form >.ant-collapse {
border: 0;
background: #262E3F;
@@ -77,6 +77,9 @@
}
}
.ant-radio-group {
+ span {
+ color: rgba(255, 255, 255, 0.65);
+ }
.ant-radio-button-wrapper {
background: transparent;
color: rgba(255, 255, 255, 0.65);
@@ -144,4 +147,61 @@
.ant-popover-arrow {
display: none;
}
+}
+
+.menu-style-drawer {
+ .ant-drawer-body {
+ height: calc(100vh - 50px);
+ overflow-y: auto;
+ }
+ .ant-drawer-body::-webkit-scrollbar {
+ width: 7px;
+ }
+ .ant-drawer-body::-webkit-scrollbar-thumb {
+ border-radius: 5px;
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13);
+ background: rgba(0, 0, 0, 0.13);
+ }
+ .ant-drawer-body::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ border: 1px solid rgba(0, 0, 0, 0.07);
+ background: rgba(0, 0, 0, 0);
+ }
+ .ant-drawer-wrapper-body {
+ background: #262E3F;
+ .ant-drawer-header {
+ background: #001529;
+ padding: 0px;
+ height: 48px;
+ border-radius: 0;
+ border: 0;
+ .header-logo {
+ width: 180px;
+ line-height: 48px;
+ height: 48px;
+ img {
+ max-width: 100%;
+ max-height: 100%;
+ }
+ }
+ .ant-drawer-close {
+ height: 48px;
+ width: 48px;
+ line-height: 48px;
+ color: rgba(255, 255, 255, 0.65);
+ }
+ }
+ }
+ .ant-drawer-body {
+ padding: 0;
+ .color-sketch-block {
+ .color-sketch-block-inner {
+ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
+ }
+ .color-sketch-value {
+ color: rgba(255, 255, 255, 0.65);
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/src/mob/colorsketch/index.jsx b/src/mob/colorsketch/index.jsx
index 9580369..42744cb 100644
--- a/src/mob/colorsketch/index.jsx
+++ b/src/mob/colorsketch/index.jsx
@@ -6,36 +6,42 @@
import './index.scss'
+const presetColors = [
+ '#f5222d', '#fa541c', '#fa8c16', '#faad14', '#fadb14', '#a0d911', '#52c41a', '#13c2c2', '#1890ff', '#2f54eb', '#722ed1',
+ '#eb2f96', '#595959', '#ffa39e', '#ffbb96', '#ffd591', '#ffe58f', '#fffb8f', '#eaff8f', '#b7eb8f', '#87e8de', '#91d5ff',
+ '#adc6ff', '#d3adf7', '#ffadd2', '#d9d9d9', '#000000', '#ffffff', 'transparent'
+]
+
class ColorSketch extends Component {
static propTpyes = {
+ defaultValue: PropTypes.any,
value: PropTypes.any,
onChange: PropTypes.func
}
state = {
- color: this.props.value,
+ color: this.props.defaultValue || this.props.value,
}
handleChange = (color) => {
let _color = `rgba(${ color.rgb.r }, ${ color.rgb.g }, ${ color.rgb.b }, ${ color.rgb.a })`
this.setState({ color: _color }, () => {
- this.props.onChange(_color)
+ this.props.onChange && this.props.onChange(_color)
})
}
UNSAFE_componentWillReceiveProps(nextProps) {
- if (nextProps.value !== this.state.color) {
+ if (nextProps.value && nextProps.value !== this.state.color) {
this.setState({ color: nextProps.value })
}
}
render() {
const { color } = this.state
-
return (
<div className="color-sketch-block">
<Popover content={
- <SketchPicker color={ color } onChange={ this.handleChange } />
+ <SketchPicker color={ color } presetColors={presetColors} onChange={ this.handleChange } />
} overlayClassName="color-sketch-popover" placement="bottomRight" title="" trigger="click">
<div className="color-sketch-block-inner" style={ {background: color} }></div>
</Popover>
diff --git a/src/mob/colorsketch/index.scss b/src/mob/colorsketch/index.scss
index b616d14..b27171f 100644
--- a/src/mob/colorsketch/index.scss
+++ b/src/mob/colorsketch/index.scss
@@ -28,7 +28,7 @@
.ant-popover-inner-content {
padding: 0;
.sketch-picker {
- width: 210px!important;
+ width: 250px!important;
}
}
}
\ No newline at end of file
diff --git a/src/mob/controller/index.jsx b/src/mob/controller/index.jsx
index 7b3ba2f..c74fa7a 100644
--- a/src/mob/controller/index.jsx
+++ b/src/mob/controller/index.jsx
@@ -367,7 +367,7 @@
label={<Icon title="鑳屾櫙棰滆壊" type="bg-colors" />}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <ColorSketch color={card.backgroundColor || '#ffffff'} changeColor={this.changeBackgroundColor} />
+ <ColorSketch value={card.backgroundColor || '#ffffff'} onChange={this.changeBackgroundColor} />
<Input value={backgroundColor} onChange={this.changeBackgroundColorInput} />
</Form.Item>
</Col>
--
Gitblit v1.8.0