From 2aa5ab63b4bbce5c36dbb3511b205b3b5f6af9bd Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 07 五月 2024 11:34:20 +0800
Subject: [PATCH] 2024-05-07
---
src/menu/stylecontroller/index.jsx | 983 +++++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 770 insertions(+), 213 deletions(-)
diff --git a/src/menu/stylecontroller/index.jsx b/src/menu/stylecontroller/index.jsx
index 1185818..c5ed9e0 100644
--- a/src/menu/stylecontroller/index.jsx
+++ b/src/menu/stylecontroller/index.jsx
@@ -1,34 +1,64 @@
import React, {Component} from 'react'
-import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
-import { Collapse, Form, Input, Col, Icon, InputNumber, Select, Radio, Drawer, Button } from 'antd'
+import { Collapse, Form, Col, InputNumber, Input, Select, Radio, Drawer, Button, message, Checkbox } from 'antd'
+import {
+ ColumnHeightOutlined,
+ FontSizeOutlined,
+ BoldOutlined,
+ LineHeightOutlined,
+ ColumnWidthOutlined,
+ FontColorsOutlined,
+ ItalicOutlined,
+ AlignLeftOutlined,
+ AlignCenterOutlined,
+ AlignRightOutlined,
+ UnderlineOutlined,
+ StrikethroughOutlined,
+ BgColorsOutlined,
+ PictureOutlined,
+ BorderOutlined,
+ BorderOuterOutlined,
+ BorderLeftOutlined,
+ BorderRightOutlined,
+ BorderTopOutlined,
+ BorderBottomOutlined,
+ RadiusSettingOutlined,
+ ArrowUpOutlined,
+ ArrowDownOutlined,
+ ArrowLeftOutlined,
+ ArrowRightOutlined,
+ SwapOutlined,
+ EnterOutlined,
+ DragOutlined,
+ EyeOutlined
+} from '@ant-design/icons'
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'
+import asyncComponent from '@/utils/asyncComponent'
import StyleInput from './styleInput'
-import FileUpload from '@/tabviews/zshare/fileupload'
+import SysColorSketch from './syscolorsketch'
+import MainLogo from '@/assets/img/main-logo.png'
import './index.scss'
const { Panel } = Collapse
const { Option } = Select
+const ColorSketch = asyncComponent(() => import('@/mob/colorsketch'))
+const PasteBoard = asyncComponent(() => import('@/components/pasteboard'))
+const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent'))
class MobController extends Component {
- static propTpyes = {
- editElem: PropTypes.any,
- updateStyle: PropTypes.func,
- }
-
state = {
- dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
card: null,
- comIds: [],
- bgimages: [],
+ fonts: null,
backgroundImage: '',
options: [],
- borposition: 'outer'
+ borposition: 'outer',
+ type: '',
+ logo: sessionStorage.getItem('CloudLogo') || MainLogo
}
+
+ callback = null
+ timer = null
shouldComponentUpdate (nextProps, nextState) {
return !is(fromJS(this.state), fromJS(nextState))
@@ -48,78 +78,140 @@
MKEmitter.removeListener('changeStyle', this.initStyle)
}
- initStyle = (comIds, options, style = {}) => {
+ initStyle = (options, style = {}, callback, type) => {
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, '')
+ if (style.backgroundImage && /^url/ig.test(style.backgroundImage)) {
+ backgroundImage = style.backgroundImage.replace(/^url\(/ig, '').replace(/\)$/ig, '')
+ }
+ let fonts = null
+ if (options.includes('font')) {
+ fonts = ['fontSize', 'fontWeight', 'lineHeight', 'letterSpacing', 'color', 'fontStyle', 'textAlign', 'textDecoration']
+ } else if (options.includes('font1')) {
+ fonts = ['fontSize', 'fontWeight', 'color']
+ if (options[0] === 'font1') {
+ options[0] = 'font'
+ }
+ } else if (options.includes('font2')) {
+ fonts = ['fontSize', 'fontWeight', 'lineHeight', 'letterSpacing', 'color', 'fontStyle', 'textAlign', 'textDecoration', 'textIndent', 'wordBreak']
+ if (options[0] === 'font2') {
+ options[0] = 'font'
+ }
+ }
+
+ this.callback = callback
+ this.timer = null
+
+ let card = fromJS(style).toJS()
+ let borposition = 'outer'
+
+ if (!card.borderWidth) {
+ if (card.borderLeftWidth) {
+ borposition = 'left'
+ } else if (card.borderRightWidth) {
+ borposition = 'right'
+ } else if (card.borderTopWidth) {
+ borposition = 'top'
+ } else if (card.borderBottomWidth) {
+ borposition = 'bottom'
}
}
this.setState({
visible: true,
- comIds: comIds,
- card: fromJS(style).toJS(),
+ type: type || '',
+ fonts: fonts,
+ card: card,
options: options,
- borposition: 'outer',
+ borposition: borposition,
backgroundImage
})
+ window.GLOB.styling = true
}
onCloseDrawer = () => {
- let { card } = this.state
+ let card = fromJS(this.state.card).toJS()
- let check = false
- if (card.borderWidth === '0px') {
+ if (card.borderWidth === '0px' || !card.borderWidth) {
delete card.borderWidth
delete card.borderColor
- check = true
- } else if (card.borderLeftWidth === '0px') {
- delete card.borderLeftWidth
- delete card.borderLeftColor
- check = true
- } else if (card.borderRightWidth === '0px') {
- delete card.borderRightWidth
- delete card.borderRightWidth
- check = true
- } else if (card.borderTopWidth === '0px') {
- delete card.borderTopWidth
- delete card.borderTopWidth
- check = true
- } else if (card.borderBottomWidth === '0px') {
- delete card.borderBottomWidth
- delete card.borderBottomWidth
- check = true
}
- if (check) {
- MKEmitter.emit('submitStyle', this.state.comIds, card)
+ if (card.borderLeftWidth === '0px' || !card.borderLeftWidth) {
+ delete card.borderLeftWidth
+ delete card.borderLeftColor
+ }
+ if (card.borderRightWidth === '0px' || !card.borderRightWidth) {
+ delete card.borderRightWidth
+ delete card.borderRightColor
+ }
+ if (card.borderTopWidth === '0px' || !card.borderTopWidth) {
+ delete card.borderTopWidth
+ delete card.borderTopColor
+ }
+ if (card.borderBottomWidth === '0px' || !card.borderBottomWidth) {
+ delete card.borderBottomWidth
+ delete card.borderBottomColor
+ }
+
+ if (/0px 0px 0px | transparent/.test(card.boxShadow)) {
+ delete card.hShadow
+ delete card.vShadow
+ delete card.shadowBlur
+ delete card.shadowColor
+ delete card.boxShadow
+ }
+
+ if (!is(fromJS(this.state.card), fromJS(card))) {
+ this.callback && this.callback(card)
}
this.setState({
visible: false,
- comIds: [],
card: null,
options: [],
backgroundImage: ''
})
+ window.GLOB.styling = false
+ this.callback = null
}
- updateStyle = (style) => {
- const { comIds, card } = this.state
+ updateStyle = (style, delay) => {
+ const { card } = this.state
let _style = {
...card,
...style
}
+ Object.keys(style).forEach(key => {
+ if (!_style[key] && _style[key] !== 0) {
+ delete _style[key]
+ }
+ })
+
+ if (_style.position === 'relative') {
+ _style.zIndex = 1
+ } else if (_style.position === 'absolute') {
+ _style.zIndex = 2
+ } else if (_style.position === 'fixed') {
+ _style.zIndex = 3
+ } else {
+ delete _style.zIndex
+ }
+
this.setState({
card: _style,
})
- MKEmitter.emit('submitStyle', comIds, _style)
+ this.timer && clearTimeout(this.timer)
+
+ if (delay) {
+ this.timer = setTimeout(() => {
+ this.callback && this.callback(_style)
+ }, 300)
+ } else {
+ this.callback && this.callback(_style)
+ }
}
/**
@@ -128,9 +220,15 @@
changeFontSize = (val) => {
let value = parseInt(val)
- if (isNaN(value) || value < 12 || value > 100) return
+ if (isNaN(value)) return
- this.updateStyle({fontSize: `${value}px`})
+ if (value < 12) {
+ value = 12
+ } else if (value > 300) {
+ value = 300
+ }
+
+ this.updateStyle({fontSize: `${value}px`}, true)
}
/**
@@ -141,7 +239,7 @@
if (isNaN(value) || value < 1 || value > 10) return
- this.updateStyle({lineHeight: value})
+ this.updateStyle({lineHeight: value}, true)
}
/**
@@ -152,82 +250,96 @@
if (isNaN(value) || value < 0 || value > 100) return
- this.updateStyle({letterSpacing: `${value}px`})
+ this.updateStyle({letterSpacing: `${value}px`}, true)
}
/**
- * @description 淇敼瀛椾綋绮楃粏
+ * @description 棣栬缂╄繘
*/
- boldChange = (val) => {
- this.updateStyle({fontWeight: val})
+ changeTextIndent = (val) => {
+ let value = parseFloat(val)
+
+ if (isNaN(value) || value < 0 || value > 100) return
+
+ this.updateStyle({textIndent: `${value}px`}, true)
}
- /**
- * @description 淇敼瀛椾綋棰滆壊 锛岄鑹叉帶浠�
- */
- changeFontColor = (val) => {
- this.updateStyle({color: val})
- }
+ changeBackground = (val) => {
+ const { card } = this.state
- /**
- * @description 瀛椾綋瀵归綈
- */
- changeTextAlign = (e) => {
- this.updateStyle({textAlign: e.target.value})
- }
+ let _style = { ...card }
- /**
- * @description 瀛椾綋鏍峰紡锛屽�炬枩
- */
- changeFontStyle = (e) => {
- this.updateStyle({fontStyle: e.target.value})
- }
+ _style.background = val
- /**
- * @description 瀛椾綋瑁呴グ锛屼笅鍒掔嚎銆佽疮绌跨嚎銆佷笂鍒掔嚎
- */
- changeTextDecoration = (e) => {
- this.updateStyle({textDecoration: e.target.value})
- }
+ delete _style.backgroundColor
+ delete _style.backgroundImage
- /**
- * @description 淇敼鑳屾櫙棰滆壊 锛岄鑹叉帶浠�
- */
- changeBackgroundColor = (val) => {
- this.updateStyle({backgroundColor: val})
+ if (!val) {
+ delete _style.background
+ }
+
+ this.setState({
+ card: _style,
+ })
+
+ if (!val || /(^linear-gradient|^radial-gradient)\(.*\)$/.test(val)) {
+ this.callback && this.callback(_style)
+ }
}
/**
* @description 淇敼闃村奖棰滆壊 锛岄鑹叉帶浠�
*/
changeShadowColor = (val) => {
- this.updateStyle({shadow: val})
+ const { card } = this.state
+
+ let boxShadow = `${card.hShadow || '0px'} ${card.vShadow || '0px'} ${card.shadowBlur || '0px'} ${val || 'transparent'}`
+
+ this.updateStyle({shadowColor: val, boxShadow})
}
- imgChange = (list) => {
- if (list[0] && list[0].response) {
- this.setState({
- bgimages: [],
- backgroundImage: list[0].response
- })
- this.updateStyle({backgroundImage: `url(${list[0].response})`})
+ /**
+ * @description 淇敼闃村奖棰滆壊 锛岄鑹叉帶浠�
+ */
+ changeShadowBlur = (val) => {
+ const { card } = this.state
+
+ let boxShadow = `${card.hShadow || '0px'} ${card.vShadow || '0px'} ${val || '0px'} ${card.shadowColor || 'transparent'}`
+
+ this.updateStyle({shadowBlur: val, boxShadow})
+ }
+
+ /**
+ * @description 淇敼闃村奖棰滆壊 锛岄鑹叉帶浠�
+ */
+ changeHShadow = (val) => {
+ const { card } = this.state
+
+ let boxShadow = `${val || '0px'} ${card.vShadow || '0px'} ${card.shadowBlur || '0px'} ${card.shadowColor || 'transparent'}`
+
+ this.updateStyle({hShadow: val, boxShadow})
+ }
+
+ /**
+ * @description 淇敼闃村奖棰滆壊 锛岄鑹叉帶浠�
+ */
+ changeVShadow = (val) => {
+ const { card } = this.state
+
+ let boxShadow = `${card.hShadow || '0px'} ${val || '0px'} ${card.shadowBlur || '0px'} ${card.shadowColor || 'transparent'}`
+
+ this.updateStyle({vShadow: val, boxShadow})
+ }
+
+ imgChange = (val) => {
+ this.setState({
+ backgroundImage: val
+ })
+ if (val) {
+ this.updateStyle({backgroundImage: `url(${val})`})
} else {
- this.setState({bgimages: list})
+ this.updateStyle({backgroundImage: ''})
}
- }
-
- changeBackgroundImageInput = (e) => {
- let val = e.target.value
- val = val.replace(/^\s*|\s*$/ig, '')
-
- if (/^http|^\/\//.test(val)) {
- val = `url(${val})`
- } else if (/,/ig.test(val) && !/^(radial-gradient|linear-gradient)/ig.test(val)) {
- val = `linear-gradient(${val})`
- }
-
- this.setState({backgroundImage: e.target.value})
- this.updateStyle({backgroundImage: val})
}
changeBorderStyle = (val) => {
@@ -287,21 +399,177 @@
this.updateStyle(_style)
}
- changeHeight = (val) => {
- let _val = val
- if (_val === '0px') {
- _val = 'auto'
- }
-
- this.updateStyle({height: _val})
- }
-
changeNormalStyle = (val, type) => {
this.updateStyle({[type]: val})
}
+ copy = () => {
+ const { card, options } = this.state
+
+ let msg = { copyType: 'style' }
+
+ msg.data = card
+ msg.options = options
+
+ try {
+ msg = window.btoa(window.encodeURIComponent(JSON.stringify(msg)))
+ } catch (e) {
+ console.warn('Stringify Failure')
+ msg = ''
+ }
+
+ if (msg) {
+ let oInput = document.createElement('input')
+ oInput.value = msg
+ document.body.appendChild(oInput)
+ oInput.select()
+ document.execCommand('Copy')
+ document.body.removeChild(oInput)
+ message.success('澶嶅埗鎴愬姛銆�')
+ }
+ }
+
+ paste = (res, callback) => {
+ const { options } = this.state
+
+ if (res.copyType !== 'style') {
+ message.warning('閰嶇疆淇℃伅鏍煎紡閿欒锛�', 5)
+ return
+ }
+
+ let style = res.data || {}
+
+ if (JSON.stringify(res.options) !== JSON.stringify(options)) {
+ res.options.forEach(n => {
+ if (options.includes(n)) return
+
+ if (n === 'width') {
+ delete style.width
+ } else if (n === 'height') {
+ delete style.height
+ } else if (n === 'font') {
+ if (options.includes('font1')) {
+ ['lineHeight', 'letterSpacing', 'fontStyle', 'textAlign', 'textDecoration'].forEach(m => {
+ delete style[m]
+ })
+ } else if (options.includes('font2')) {
+
+ } else {
+ ['fontSize', 'fontWeight', 'lineHeight', 'letterSpacing', 'color', 'fontStyle', 'textAlign', 'textDecoration'].forEach(m => {
+ delete style[m]
+ })
+ }
+ } else if (n === 'font1') {
+ if (options.includes('font') || options.includes('font2')) {
+
+ } else {
+ ['fontSize', 'fontWeight', 'color'].forEach(m => {
+ delete style[m]
+ })
+ }
+ } else if (n === 'font2') {
+ if (options.includes('font')) {
+ ['textIndent', 'wordBreak'].forEach(m => {
+ delete style[m]
+ })
+ } else if (options.includes('font1')) {
+ ['lineHeight', 'letterSpacing', 'fontStyle', 'textAlign', 'textDecoration', 'textIndent', 'wordBreak'].forEach(m => {
+ delete style[m]
+ })
+ } else {
+ ['fontSize', 'fontWeight', 'lineHeight', 'letterSpacing', 'color', 'fontStyle', 'textAlign', 'textDecoration', 'textIndent', 'wordBreak'].forEach(m => {
+ delete style[m]
+ })
+ }
+ } else if (n === 'background') {
+ if (!options.includes('backgroundColor')) {
+ delete style.backgroundColor
+ }
+ delete style.backgroundImage
+ delete style.backgroundSize
+ delete style.backgroundRepeat
+ delete style.backgroundPosition
+ } else if (n === 'backgroundColor') {
+ if (!options.includes('background')) {
+ delete style.backgroundColor
+ }
+ } else if (n === 'border') {
+ Object.keys(style).forEach(key => {
+ if (!/border/.test(key)) return
+ delete style[key]
+ })
+ } else if (n === 'shadow') {
+ delete style.boxShadow
+ delete style.hShadow
+ delete style.vShadow
+ delete style.shadowBlur
+ delete style.shadowColor
+ } else if (n === 'margin') {
+ delete style.marginTop
+ delete style.marginBottom
+ delete style.marginLeft
+ delete style.marginRight
+ } else if (n === 'padding') {
+ delete style.paddingTop
+ delete style.paddingBottom
+ delete style.paddingLeft
+ delete style.paddingRight
+ } else if (n === 'float') {
+ delete style.float
+ } else if (n === 'minHeight') {
+ delete style.minHeight
+ } else if (n === 'clear') {
+ delete style.clear
+ } else if (n === 'display') {
+ delete style.display
+ } else if (n === 'position') {
+ delete style.position
+ delete style.top
+ delete style.bottom
+ delete style.left
+ delete style.right
+ } else if (n === 'transform') {
+ delete style.transform
+ } else if (n === 'overflow') {
+ delete style.overflow
+ }
+ })
+ }
+
+ let backgroundImage = ''
+ if (style.backgroundImage && /^url/ig.test(style.backgroundImage)) {
+ backgroundImage = style.backgroundImage.replace(/^url\(/ig, '').replace(/\)$/ig, '')
+ }
+
+ let borposition = 'outer'
+
+ if (!style.borderWidth) {
+ if (style.borderLeftWidth) {
+ borposition = 'left'
+ } else if (style.borderRightWidth) {
+ borposition = 'right'
+ } else if (style.borderTopWidth) {
+ borposition = 'top'
+ } else if (style.borderBottomWidth) {
+ borposition = 'bottom'
+ }
+ }
+
+ this.setState({
+ card: style,
+ borposition,
+ backgroundImage
+ })
+
+ this.callback && this.callback(style)
+
+ callback()
+
+ message.success('绮樿创鎴愬姛銆�')
+ }
+
render () {
- const { card, options, backgroundImage, bgimages, borposition } = this.state
+ const { card, options, backgroundImage, borposition, fonts, type, logo } = this.state
const formItemLayout = {
labelCol: {
xs: { span: 24 },
@@ -317,7 +585,7 @@
<Drawer
title={
<div className="header-logo">
- <img src={window.GLOB.mainlogo} alt=""/>
+ <img src={logo} alt=""/>
</div>
}
placement="left"
@@ -329,29 +597,40 @@
maskStyle={{opacity: 0.1}}
visible={this.state.visible}
>
- <div className="menu-style-controller">
+ <div className={'menu-style-controller ' + (type || '')}>
<Form {...formItemLayout}>
{card ? <Collapse expandIconPosition="right" destroyInactivePanel={true} defaultActiveKey={options[0]}>
+ {options.includes('width') ? <Panel header="瀹藉害" key="width">
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<ColumnWidthOutlined title="瀹藉害"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <StyleInput clear={true} defaultValue={card.width || ''} options={['px', 'vh', 'vw', '%', 'auto']} onChange={(val) => this.changeNormalStyle(val, 'width')}/>
+ </Form.Item>
+ </Col>
+ </Panel> : null}
{options.includes('height') ? <Panel header="楂樺害" key="height">
<Col span={24}>
<Form.Item
colon={false}
- label={<Icon title="楂樺害" type="column-height" />}
+ label={<ColumnHeightOutlined title="楂樺害"/>}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <StyleInput defaultValue={card.height || ''} options={['px']} onChange={this.changeHeight}/>
+ <StyleInput clear={true} defaultValue={card.height || ''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'height')}/>
</Form.Item>
</Col>
</Panel> : null}
- {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} />
+ {fonts ? <Panel header="瀛椾綋" key="font">
+ {fonts.includes('fontSize') ? <Col span={12}>
+ <Form.Item colon={false} label={<FontSizeOutlined title="瀛椾綋澶у皬"/>}>
+ <InputNumber defaultValue={card.fontSize || 14} min={12} max={300} precision={0} onChange={this.changeFontSize} />
</Form.Item>
- </Col>
- <Col span={12}>
- <Form.Item colon={false} label={<Icon title="瀛椾綋绮楃粏" type="bold" />}>
- <Select defaultValue={card.fontWeight || 'normal'} onChange={this.boldChange}>
+ </Col> : null}
+ {fonts.includes('fontWeight') ? <Col span={12}>
+ <Form.Item colon={false} label={<BoldOutlined title="瀛椾綋绮楃粏"/>}>
+ <Select defaultValue={card.fontWeight || 'normal'} onChange={(val) => this.changeNormalStyle(val, 'fontWeight')}>
<Option value="normal">normal</Option>
<Option value="bold">bold</Option>
<Option value="bolder">bolder</Option>
@@ -367,85 +646,189 @@
<Option value="900">900</Option>
</Select>
</Form.Item>
- </Col>
- <Col span={12}>
- <Form.Item colon={false} label={<Icon title="琛岄珮" type="line-height" />}>
+ </Col> : null}
+ {fonts.includes('lineHeight') ? <Col span={12}>
+ <Form.Item colon={false} label={<LineHeightOutlined title="琛岄珮"/>}>
<InputNumber defaultValue={card.lineHeight || 1.5} min={1} max={10} precision={1} onChange={this.changeLineHeight} />
</Form.Item>
- </Col>
- <Col span={12}>
- <Form.Item colon={false} label={<Icon title="瀛楅棿璺�" type="column-width" />}>
+ </Col> : null}
+ {fonts.includes('letterSpacing') ? <Col span={12}>
+ <Form.Item colon={false} label={<ColumnWidthOutlined title="瀛楅棿璺�"/>}>
<InputNumber defaultValue={card.letterSpacing || 0} min={0} max={100} precision={0} onChange={this.changeLetterSpacing}/>
</Form.Item>
- </Col>
- <Col span={24}>
+ </Col> : null}
+ {fonts.includes('textIndent') ? <Col span={12}>
+ <Form.Item colon={false} label={<AlignRightOutlined title="棣栬缂╄繘"/>}>
+ <InputNumber defaultValue={card.textIndent || 0} min={0} max={100} precision={0} onChange={this.changeTextIndent}/>
+ </Form.Item>
+ </Col> : null}
+ {fonts.includes('wordBreak') ? <Col span={12}>
+ <Form.Item colon={false} label={<EnterOutlined title="鑷姩鎹㈣"/>}>
+ <Select defaultValue={card.wordBreak || 'normal'} onChange={(val) => this.changeNormalStyle(val, 'wordBreak')}>
+ <Option value="normal">normal</Option>
+ <Option value="break-all">break-all</Option>
+ </Select>
+ </Form.Item>
+ </Col> : null}
+ {fonts.includes('color') ? <Col span={24}>
<Form.Item
colon={false}
- label={<Icon title="瀛椾綋棰滆壊" type="font-colors" />}
+ label={<FontColorsOutlined title="瀛椾綋棰滆壊"/>}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <ColorSketch value={card.color || 'rgba(0, 0, 0, 0.85)'} onChange={this.changeFontColor} />
+ <ColorSketch value={card.color || ''} onChange={(val) => this.changeNormalStyle(val, 'color')} />
</Form.Item>
- </Col>
- <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<BgColorsOutlined title="绯荤粺鑹�"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <SysColorSketch onChange={(val) => this.changeNormalStyle(val, 'color')} />
+ </Form.Item>
+ </Col> : null}
+ {fonts.includes('fontStyle') ? <Col span={24}>
<Form.Item
colon={false}
label={' '}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <Radio.Group defaultValue={card.fontStyle || 'normal'} onChange={this.changeFontStyle}>
+ <Radio.Group defaultValue={card.fontStyle || 'normal'} onChange={(e) => this.changeNormalStyle(e.target.value, 'fontStyle')}>
<Radio.Button value="normal"><span title="鏍囧噯">N</span></Radio.Button>
- <Radio.Button value="italic"><Icon title="鏂滀綋" type="italic" /></Radio.Button>
+ <Radio.Button value="italic"><ItalicOutlined title="鏂滀綋"/></Radio.Button>
<Radio.Button value="oblique" style={{fontStyle: 'oblique'}}><span title="鍊炬枩">B</span></Radio.Button>
</Radio.Group>
</Form.Item>
- </Col>
- <Col span={24}>
+ </Col> : null}
+ {fonts.includes('textAlign') ? <Col span={24}>
<Form.Item
colon={false}
label={' '}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <Radio.Group className="text-align" defaultValue={card.textAlign || 'left'} onChange={this.changeTextAlign}>
- <Radio.Button value="left"><Icon title="宸﹀榻�" type="align-left" /></Radio.Button>
- <Radio.Button value="center"><Icon title="灞呬腑瀵归綈" type="align-center" /></Radio.Button>
- <Radio.Button value="right"><Icon title="鍙冲榻�" type="align-right" /></Radio.Button>
+ <Radio.Group className="text-align" defaultValue={card.textAlign || 'left'} onChange={(e) => this.changeNormalStyle(e.target.value, 'textAlign')}>
+ <Radio.Button value="left"><AlignLeftOutlined title="宸﹀榻�"/></Radio.Button>
+ <Radio.Button value="center"><AlignCenterOutlined title="灞呬腑瀵归綈"/></Radio.Button>
+ <Radio.Button value="right"><AlignRightOutlined title="鍙冲榻�"/></Radio.Button>
</Radio.Group>
</Form.Item>
- </Col>
- <Col span={24}>
+ </Col> : null}
+ {fonts.includes('textDecoration') ? <Col span={24}>
<Form.Item
colon={false}
label={' '}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <Radio.Group className="text-decoration" defaultValue={card.textDecoration || 'none'} onChange={this.changeTextDecoration}>
+ <Radio.Group className="text-decoration" defaultValue={card.textDecoration || 'none'} onChange={(e) => this.changeNormalStyle(e.target.value, 'textDecoration')}>
<Radio.Button value="none"><span title="鏍囧噯">N</span></Radio.Button>
- <Radio.Button value="underline"><Icon title="涓嬪垝绾�" type="underline" /></Radio.Button>
- <Radio.Button value="line-through"><Icon title="涓垝绾�" type="strikethrough" /></Radio.Button>
+ <Radio.Button value="underline"><UnderlineOutlined title="涓嬪垝绾�"/></Radio.Button>
+ <Radio.Button value="line-through"><StrikethroughOutlined title="涓垝绾�"/></Radio.Button>
<Radio.Button value="overline" style={{textDecoration: 'overline'}}><span title="涓婂垝绾�">O</span></Radio.Button>
</Radio.Group>
</Form.Item>
- </Col>
- </Panel> : null}
- {options.includes('background') || options.includes('backgroundColor') ? <Panel header="鑳屾櫙" key="background">
- <Col span={24}>
+ </Col> : null}
+ {options.includes('fontFamily') ? <Col span={24}>
<Form.Item
colon={false}
- label={<Icon title="鑳屾櫙棰滆壊" type="bg-colors" />}
+ label=" "
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <ColorSketch value={card.backgroundColor || '#ffffff'} onChange={this.changeBackgroundColor} />
+ <Checkbox.Group options={[
+ { label: '寰蒋闆呴粦', value: 'Microsoft YaHei' },
+ { label: '瀹嬩綋', value: 'Simsun' },
+ { label: '榛戜綋', value: 'Simhei' },
+ { label: '浠垮畫', value: 'FangSong' },
+ { label: '妤蜂綋', value: 'KaiTi' },
+ // { label: 'Helvetica', value: 'Helvetica' },
+ // { label: 'Arial', value: 'Arial' },
+ // { label: 'Verdana', value: 'Verdana' },
+ // { label: 'Georgia', value: 'Georgia' },
+ ]} defaultValue={card.fontFamily} onChange={(val) => this.changeNormalStyle(val, 'fontFamily')} />
+ </Form.Item>
+ </Col> : null}
+ </Panel> : null}
+ {options.includes('background') || options.includes('backgroundColor') ? <Panel header="鑳屾櫙" key="background">
+ <Col span={24} className="bg-color-panel">
+ <Form.Item
+ colon={false}
+ label={<BgColorsOutlined title="鑳屾櫙棰滆壊"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <ColorSketch allowClear={true} value={card.backgroundColor || ''} onChange={(val) => this.changeNormalStyle(val, 'backgroundColor')} />
+ </Form.Item>
+ <Form.Item
+ colon={false}
+ label={<BgColorsOutlined title="绯荤粺鑹�"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <SysColorSketch onChange={(val) => this.changeNormalStyle(val, 'backgroundColor')} />
</Form.Item>
</Col>
+ {window.develop === true ? <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<BgColorsOutlined title="鑳屾櫙棰滆壊"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <Input value={card.background || ''} onChange={(e) => this.changeBackground(e.target.value)} />
+ </Form.Item>
+ </Col> : null}
+ {!options.includes('backgroundColor') ? <Col span={24} className="bg-image-panel">
+ <Form.Item
+ colon={false}
+ label={<PictureOutlined title="鑳屾櫙鍥剧墖"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <SourceComponent value={backgroundImage} type="" placement="right" onChange={this.imgChange}/>
+ </Form.Item>
+ </Col> : null}
{!options.includes('backgroundColor') ? <Col span={24}>
<Form.Item
colon={false}
- label={<Icon title="鑳屾櫙鍥剧墖" type="picture" />}
+ label="姣斾緥"
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <FileUpload accept=".jpg,.png,.gif,.svg" value={bgimages} maxFile={2} fileType="text" onChange={this.imgChange}/>
- <Input placeholder="" value={backgroundImage} autoComplete="off" onChange={this.changeBackgroundImageInput} />
+ <Select defaultValue={card.backgroundSize || 'cover'} onChange={(val) => this.changeNormalStyle(val, 'backgroundSize')}>
+ <Option value="100%">100%</Option>
+ <Option value="100% 100%">100% 100%</Option>
+ <Option value="auto 100%">auto 100%</Option>
+ <Option value="100% auto">100% auto</Option>
+ <Option value="auto">auto</Option>
+ <Option value="contain">contain</Option>
+ <Option value="cover">cover</Option>
+ </Select>
+ </Form.Item>
+ </Col> : null}
+ {!options.includes('backgroundColor') ? <Col span={24}>
+ <Form.Item
+ colon={false}
+ label="閲嶅"
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <Select defaultValue={card.backgroundRepeat || 'no-repeat'} onChange={(val) => this.changeNormalStyle(val, 'backgroundRepeat')}>
+ <Option value="repeat">repeat</Option>
+ <Option value="no-repeat">no-repeat</Option>
+ <Option value="repeat-x">repeat-x</Option>
+ <Option value="repeat-y">repeat-y</Option>
+ </Select>
+ </Form.Item>
+ </Col> : null}
+ {!options.includes('backgroundColor') ? <Col span={24}>
+ <Form.Item
+ colon={false}
+ label="浣嶇疆"
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <Select defaultValue={card.backgroundPosition || 'center'} onChange={(val) => this.changeNormalStyle(val, 'backgroundPosition')}>
+ <Option value="center">center</Option>
+ <Option value="center top">center top</Option>
+ <Option value="center bottom">center bottom</Option>
+ <Option value="left top">left top</Option>
+ <Option value="left center">left center</Option>
+ <Option value="left bottom">left bottom</Option>
+ <Option value="right top">right top</Option>
+ <Option value="right center">right center</Option>
+ <Option value="right bottom">right bottom</Option>
+ </Select>
</Form.Item>
</Col> : null}
</Panel> : null}
@@ -453,22 +836,22 @@
<Col span={24}>
<Form.Item
colon={false}
- label={<Icon title="杈规浣嶇疆" type="border" />}
+ label={<BorderOutlined title="杈规浣嶇疆"/>}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <Radio.Group className="border-position" defaultValue={'outer'} onChange={(e) => this.setState({borposition: e.target.value})}>
- <Radio value="outer"><Icon title="澶栬竟妗�" type="border-outer" /></Radio>
- <Radio value="left"><Icon title="宸﹁竟妗�" type="border-left" /></Radio>
- <Radio value="right"><Icon title="鍙宠竟妗�" type="border-right" /></Radio>
- <Radio value="top"><Icon title="涓婅竟妗�" type="border-top" /></Radio>
- <Radio value="bottom"><Icon title="涓嬭竟妗�" type="border-bottom" /></Radio>
+ <Radio.Group className="border-position" defaultValue={borposition} onChange={(e) => this.setState({borposition: e.target.value})}>
+ <Radio value="outer"><BorderOuterOutlined title="澶栬竟妗�"/></Radio>
+ <Radio value="left"><BorderLeftOutlined title="宸﹁竟妗�"/></Radio>
+ <Radio value="right"><BorderRightOutlined title="鍙宠竟妗�"/></Radio>
+ <Radio value="top"><BorderTopOutlined title="涓婅竟妗�"/></Radio>
+ <Radio value="bottom"><BorderBottomOutlined title="涓嬭竟妗�"/></Radio>
</Radio.Group>
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
colon={false}
- label={<Icon title="杈规鏍峰紡" type="border-outer" />}
+ label={<BorderOuterOutlined title="杈规鏍峰紡"/>}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
{borposition === 'outer' ? <Select defaultValue={card.borderStyle || 'solid'} onChange={this.changeBorderStyle}>
@@ -506,36 +889,43 @@
<Col span={24}>
<Form.Item
colon={false}
- label={<Icon title="杈规瀹藉害" type="column-width" />}
+ label={<ColumnWidthOutlined title="杈规瀹藉害"/>}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- {borposition === 'outer' ? <StyleInput defaultValue={card.borderWidth || '0px'} options={['px']} onChange={this.changeBorderWidth}/> : null}
- {borposition === 'left' ? <StyleInput defaultValue={card.borderLeftWidth || '0px'} options={['px']} onChange={this.changeBorderWidth}/> : null}
- {borposition === 'right' ? <StyleInput defaultValue={card.borderRightWidth || '0px'} options={['px']} onChange={this.changeBorderWidth}/> : null}
- {borposition === 'top' ? <StyleInput defaultValue={card.borderTopWidth || '0px'} options={['px']} onChange={this.changeBorderWidth}/> : null}
- {borposition === 'bottom' ? <StyleInput defaultValue={card.borderBottomWidth || '0px'} options={['px']} onChange={this.changeBorderWidth}/> : null}
+ {borposition === 'outer' ? <StyleInput defaultValue={card.borderWidth || ''} options={['px']} onChange={this.changeBorderWidth}/> : null}
+ {borposition === 'left' ? <StyleInput defaultValue={card.borderLeftWidth || ''} options={['px']} onChange={this.changeBorderWidth}/> : null}
+ {borposition === 'right' ? <StyleInput defaultValue={card.borderRightWidth || ''} options={['px']} onChange={this.changeBorderWidth}/> : null}
+ {borposition === 'top' ? <StyleInput defaultValue={card.borderTopWidth || ''} options={['px']} onChange={this.changeBorderWidth}/> : null}
+ {borposition === 'bottom' ? <StyleInput defaultValue={card.borderBottomWidth || ''} options={['px']} onChange={this.changeBorderWidth}/> : null}
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
colon={false}
- label={<Icon title="杈规棰滆壊" type="bg-colors" />}
+ label={<BgColorsOutlined title="杈规棰滆壊"/>}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- {borposition === 'outer' ? <ColorSketch defaultValue={card.borderColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
- {borposition === 'left' ? <ColorSketch defaultValue={card.borderLeftColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
- {borposition === 'right' ? <ColorSketch defaultValue={card.borderRightColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
- {borposition === 'top' ? <ColorSketch defaultValue={card.borderTopColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
- {borposition === 'bottom' ? <ColorSketch defaultValue={card.borderBottomColor || 'transparent'} onChange={this.changeBorderColor} /> : null}
+ {borposition === 'outer' ? <ColorSketch allowClear={true} value={card.borderColor || ''} onChange={this.changeBorderColor} /> : null}
+ {borposition === 'left' ? <ColorSketch allowClear={true} value={card.borderLeftColor || ''} onChange={this.changeBorderColor} /> : null}
+ {borposition === 'right' ? <ColorSketch allowClear={true} value={card.borderRightColor || ''} onChange={this.changeBorderColor} /> : null}
+ {borposition === 'top' ? <ColorSketch allowClear={true} value={card.borderTopColor || ''} onChange={this.changeBorderColor} /> : null}
+ {borposition === 'bottom' ? <ColorSketch allowClear={true} value={card.borderBottomColor || ''} onChange={this.changeBorderColor} /> : null}
+ </Form.Item>
+ <Form.Item
+ colon={false}
+ label={<BgColorsOutlined title="绯荤粺鑹�"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <SysColorSketch onChange={this.changeBorderColor} />
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
colon={false}
- label={<Icon title="鍦嗚" type="radius-setting" />}
+ label={<RadiusSettingOutlined title="鍦嗚"/>}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <StyleInput defaultValue={card.borderRadius || '0px'} options={['px', '%']} onChange={(val) => this.changeNormalStyle(val, 'borderRadius')}/>
+ <StyleInput clear={true} defaultValue={card.borderRadius || ''} options={['px', '%']} onChange={(val) => this.changeNormalStyle(val, 'borderRadius')}/>
</Form.Item>
</Col>
</Panel> : null}
@@ -543,10 +933,44 @@
<Col span={24}>
<Form.Item
colon={false}
- label={<Icon title="闃村奖棰滆壊" type="bg-colors" />}
+ label={<BgColorsOutlined title="闃村奖棰滆壊"/>}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <ColorSketch value={card.shadow || 'transparent'} onChange={this.changeShadowColor} />
+ <ColorSketch allowClear={true} value={card.shadowColor || ''} onChange={this.changeShadowColor} />
+ </Form.Item>
+ <Form.Item
+ colon={false}
+ label={<BgColorsOutlined title="绯荤粺鑹�"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <SysColorSketch onChange={this.changeShadowColor} />
+ </Form.Item>
+ </Col>
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<ColumnWidthOutlined title="妯＄硦璺濈"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <StyleInput defaultValue={card.shadowBlur || '0px'} options={['px']} onChange={this.changeShadowBlur}/>
+ </Form.Item>
+ </Col>
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<ArrowRightOutlined title="姘村钩浣嶇疆"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <StyleInput defaultValue={card.hShadow || '0px'} options={['px']} onChange={this.changeHShadow}/>
+ </Form.Item>
+ </Col>
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<ArrowDownOutlined title="鍨傜洿浣嶇疆"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <StyleInput defaultValue={card.vShadow || '0px'} options={['px']} onChange={this.changeVShadow}/>
</Form.Item>
</Col>
</Panel> : null}
@@ -554,37 +978,37 @@
<Col span={24}>
<Form.Item
colon={false}
- label={<Icon title="涓婅竟璺�" type="arrow-up"/>}
+ label={<ArrowUpOutlined title="涓婅竟璺�"/>}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <StyleInput defaultValue={card.marginTop || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginTop')}/>
+ <StyleInput clear={true} defaultValue={card.marginTop || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginTop')}/>
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
colon={false}
- label={<Icon title="涓嬭竟璺�" type="arrow-down"/>}
+ label={<ArrowDownOutlined title="涓嬭竟璺�"/>}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <StyleInput defaultValue={card.marginBottom || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginBottom')}/>
+ <StyleInput clear={true} defaultValue={card.marginBottom || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginBottom')}/>
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
colon={false}
- label={<Icon title="宸﹁竟璺�" type="arrow-left"/>}
+ label={<ArrowLeftOutlined title="宸﹁竟璺�"/>}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <StyleInput defaultValue={card.marginLeft || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginLeft')}/>
+ <StyleInput clear={true} defaultValue={card.marginLeft || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginLeft')}/>
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
colon={false}
- label={<Icon title="鍙宠竟璺�" type="arrow-right"/>}
+ label={<ArrowRightOutlined title="鍙宠竟璺�"/>}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <StyleInput defaultValue={card.marginRight || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginRight')}/>
+ <StyleInput clear={true} defaultValue={card.marginRight || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginRight')}/>
</Form.Item>
</Col>
</Panel> : null}
@@ -592,59 +1016,192 @@
<Col span={24}>
<Form.Item
colon={false}
- label={<Icon title="涓婅竟璺�" type="arrow-up"/>}
+ label={<ArrowUpOutlined title="涓婅竟璺�"/>}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <StyleInput defaultValue={card.paddingTop || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingTop')}/>
+ <StyleInput clear={true} defaultValue={card.paddingTop || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingTop')}/>
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
colon={false}
- label={<Icon title="涓嬭竟璺�" type="arrow-down"/>}
+ label={<ArrowDownOutlined title="涓嬭竟璺�"/>}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <StyleInput defaultValue={card.paddingBottom || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingBottom')}/>
+ <StyleInput clear={true} defaultValue={card.paddingBottom || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingBottom')}/>
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
colon={false}
- label={<Icon title="宸﹁竟璺�" type="arrow-left"/>}
+ label={<ArrowLeftOutlined title="宸﹁竟璺�"/>}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <StyleInput defaultValue={card.paddingLeft || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingLeft')}/>
+ <StyleInput clear={true} defaultValue={card.paddingLeft || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingLeft')}/>
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
colon={false}
- label={<Icon title="鍙宠竟璺�" type="arrow-right"/>}
+ label={<ArrowRightOutlined title="鍙宠竟璺�"/>}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <StyleInput defaultValue={card.paddingRight || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingRight')}/>
+ <StyleInput clear={true} defaultValue={card.paddingRight || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingRight')}/>
</Form.Item>
</Col>
</Panel> : null}
- {options.includes('float') ? <Panel header="娴姩" key="float">
+ {options.includes('float') ? <Panel header="瀵归綈鏂瑰紡" key="float">
<Col span={24}>
<Form.Item
colon={false}
- label={<Icon title="娴姩" type="swap" />}
+ label={<SwapOutlined title="瀵归綈"/>}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <Radio.Group defaultValue={card.float || 'left'} onChange={(e) => this.changeNormalStyle(e.target.value, 'float')}>
- <Radio value="left">宸︽诞鍔�</Radio>
- <Radio value="right">鍙虫诞鍔�</Radio>
- <Radio value="none">涓嶆诞鍔�</Radio>
+ <Radio.Group style={{whiteSpace: 'nowrap'}} defaultValue={card.float || 'left'} onChange={(e) => this.changeNormalStyle(e.target.value, 'float')}>
+ <Radio value="left">宸�</Radio>
+ <Radio value="center">灞呬腑</Radio>
+ <Radio value="right">鍙�</Radio>
</Radio.Group>
+ </Form.Item>
+ </Col>
+ </Panel> : null}
+ {options.includes('minHeight') ? <Panel header="鏈�灏忛珮搴�" key="minHeight">
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<ColumnHeightOutlined title="鏈�灏忛珮搴�"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <StyleInput clear={true} defaultValue={card.minHeight || ''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'minHeight')}/>
+ </Form.Item>
+ </Col>
+ </Panel> : null}
+ {options.includes('clear') ? <Panel header="娴姩" key="clear">
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<SwapOutlined title="娴姩"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <Radio.Group style={{whiteSpace: 'nowrap'}} defaultValue={card.clear || 'none'} onChange={(e) => this.changeNormalStyle(e.target.value, 'clear')}>
+ <Radio value="none">宸︽诞鍔�</Radio>
+ <Radio value="left">涓嶆诞鍔�</Radio>
+ <Radio value="right">鍙虫诞鍔�</Radio>
+ </Radio.Group>
+ </Form.Item>
+ </Col>
+ </Panel> : null}
+ {options.includes('display') ? <Panel header="鏄剧ず" key="display">
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<SwapOutlined title="鏄剧ず"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <Radio.Group style={{whiteSpace: 'nowrap'}} defaultValue={card.display || 'block'} onChange={(e) => this.changeNormalStyle(e.target.value, 'display')}>
+ <Radio value="block">鍧楃骇鍏冪礌</Radio>
+ <Radio value="inline-block">琛屽唴鍧楀厓绱�</Radio>
+ </Radio.Group>
+ </Form.Item>
+ </Col>
+ </Panel> : null}
+ {options.includes('overflow') ? <Panel header="婧㈠嚭" key="overflow">
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<EyeOutlined title="婧㈠嚭"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <Radio.Group style={{whiteSpace: 'nowrap'}} defaultValue={card.overflow || 'hidden'} onChange={(e) => this.changeNormalStyle(e.target.value, 'overflow')}>
+ <Radio value="hidden">闅愯棌</Radio>
+ <Radio value="visible">鏄剧ず</Radio>
+ </Radio.Group>
+ </Form.Item>
+ </Col>
+ </Panel> : null}
+ {options.includes('position') ? <Panel header="瀹氫綅" key="position">
+ <div style={{paddingLeft: '35px', fontSize: '12px'}}>娉細瀹氫綅鏁堟灉璇峰湪杩愯鐜涓煡鐪嬨��</div>
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<SwapOutlined title="瀹氫綅"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 3 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 21 }} }
+ >
+ <Radio.Group style={{whiteSpace: 'nowrap'}} defaultValue={card.position || 'unset'} onChange={(e) => this.changeNormalStyle(e.target.value, 'position')}>
+ <Radio value="unset">鏃�</Radio>
+ <Radio value="relative">鐩稿</Radio>
+ <Radio value="absolute">缁濆</Radio>
+ <Radio value="fixed">鍥哄畾</Radio>
+ </Radio.Group>
+ </Form.Item>
+ </Col>
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<ArrowUpOutlined title="涓�"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 3 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 21 }} }
+ >
+ <StyleInput clear={true} defaultValue={card.top || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'top')}/>
+ </Form.Item>
+ </Col>
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<ArrowDownOutlined title="涓�"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 3 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 21 }} }
+ >
+ <StyleInput clear={true} defaultValue={card.bottom || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'bottom')}/>
+ </Form.Item>
+ </Col>
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<ArrowLeftOutlined title="宸�"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 3 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 21 }} }
+ >
+ <StyleInput clear={true} defaultValue={card.left || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'left')}/>
+ </Form.Item>
+ </Col>
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<ArrowRightOutlined title="鍙�"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 3 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 21 }} }
+ >
+ <StyleInput clear={true} defaultValue={card.right || ''} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'right')}/>
+ </Form.Item>
+ </Col>
+ </Panel> : null}
+ {options.includes('transform') ? <Panel header="浣嶇疆鍙樻崲" key="transform">
+ <div style={{paddingLeft: '50px', fontSize: '12px'}}>娉細鍙樻崲鏁堟灉璇峰湪杩愯鐜涓煡鐪嬨��</div>
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<DragOutlined title="鍙樻崲"/>}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <Select defaultValue={card.transform || ''} onChange={(val) => this.changeNormalStyle(val, 'transform')}>
+ <Option value="">鏃�</Option>
+ <Option value="translateY(-50%)">涓婄Щ50%</Option>
+ <Option value="translateY(50%)">涓嬬Щ50%</Option>
+ <Option value="translateX(-50%)">宸︾Щ50%</Option>
+ <Option value="translateX(50%)">鍙崇Щ50%</Option>
+ <Option value="translate(-50%, -50%)">宸︿笂绉�50%</Option>
+ <Option value="translate(-50%, 50%)">宸︿笅绉�50%</Option>
+ <Option value="translate(50%, -50%)">鍙充笂绉�50%</Option>
+ <Option value="translate(50%, 50%)">鍙充笅绉�50%</Option>
+ </Select>
</Form.Item>
</Col>
</Panel> : null}
</Collapse> : null}
</Form>
- <div style={{textAlign: 'right'}}>
- <Button style={{margin: '30px 10px 30px 0px'}} onClick={this.onCloseDrawer}>鍏抽棴</Button>
+ <div style={{textAlign: 'right', lineHeight: '60px', marginBottom: '30px'}}>
+ <div style={{float: 'left'}}>
+ <Button onClick={() => this.copy()} className="mk-border-green" style={{marginRight: '10px'}}>澶嶅埗</Button>
+ <PasteBoard getPasteValue={this.paste}><Button style={{borderColor: 'rgb(64, 169, 255)', color: 'rgb(64, 169, 255)'}}>绮樿创</Button></PasteBoard>
+ </div>
+ <Button style={{marginRight: '10px'}} onClick={this.onCloseDrawer}>鍏抽棴</Button>
</div>
</div>
</Drawer>
--
Gitblit v1.8.0