From 269f0759a64927c2ea06a9d7de92ecfd0be7df5b Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期一, 13 七月 2020 10:00:04 +0800
Subject: [PATCH] 2020-07-13
---
src/mob/controller/index.jsx | 169 +++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 160 insertions(+), 9 deletions(-)
diff --git a/src/mob/controller/index.jsx b/src/mob/controller/index.jsx
index c6f5e17..6e822f7 100644
--- a/src/mob/controller/index.jsx
+++ b/src/mob/controller/index.jsx
@@ -1,7 +1,7 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
-import { Collapse, Form, Input, Col, Icon, InputNumber, Select, Radio } from 'antd'
+import { Collapse, Form, Input, Col, Icon, InputNumber, Select, Radio, Popover, Menu } from 'antd'
import zhCN from '@/locales/zh-CN/mob.js'
import enUS from '@/locales/en-US/mob.js'
@@ -23,7 +23,11 @@
card: null,
fontColor: '#000000',
backgroundColor: '#ffffff',
- bgimages: []
+ bgimages: [],
+ marginTop: '',
+ marginTopVal: '',
+ marginBottom: '',
+ marginBottomVal: '',
}
UNSAFE_componentWillReceiveProps (nextProps) {
@@ -48,6 +52,10 @@
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) : ''
})
})
}
@@ -205,8 +213,71 @@
this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {backgroundImage: val}})
}
+ submitBorder = (val, type) => {
+ const { card } = this.state
+
+ this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {[type]: val}})
+ }
+
+ changeBorderRadius = (val) => {
+ const { card } = this.state
+ let value = parseFloat(val)
+
+ if (isNaN(value) || value < 0 || value > 500) return
+
+ this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {borderRadius: `${value}px`}})
+ }
+
+ changeMarginTop = (e) => {
+ let val = e.target.value
+ let _val = parseInt(val)
+
+ this.setState({
+ marginTop: val
+ })
+
+ if (isNaN(_val)) return
+
+ this.setState({
+ marginTopVal: _val
+ })
+ }
+
+ submitMarginTop = (val) => {
+ const { card } = this.state
+
+ this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {marginTop: val}})
+ this.setState({
+ marginTop: val
+ })
+ }
+
+ changeMarginBottom = (e) => {
+ let val = e.target.value
+ let _val = parseInt(val)
+
+ this.setState({
+ marginBottom: val
+ })
+
+ if (isNaN(_val)) return
+
+ this.setState({
+ marginBottomVal: _val
+ })
+ }
+
+ submitMarginBottom = (val) => {
+ const { card } = this.state
+
+ this.props.updateStyle({componentId: card.componentId, uuid: card.uuid, style: {marginBottom: val}})
+ this.setState({
+ marginBottom: val
+ })
+ }
+
render () {
- const { card, fontColor, backgroundColor, backgroundImage, bgimages } = this.state
+ const { card, fontColor, backgroundColor, backgroundImage, bgimages, marginTop, marginTopVal, marginBottom, marginBottomVal } = this.state
const formItemLayout = {
labelCol: {
xs: { span: 24 },
@@ -331,15 +402,95 @@
</Col>
</Panel> : null}
{card.items.includes('border') ? <Panel header="杈规" key="border">
- <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} />
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ 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')}/>
+ </Form.Item>
+ </Col>
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ 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}/>
</Form.Item>
</Col>
</Panel> : null}
- <Panel header="鍏朵粬" key="3">
- 鍏朵粬
- </Panel>
+ {card.items.includes('margin') ? <Panel header="澶栬竟璺�" key="margin">
+ <Col span={12}>
+ <Form.Item
+ colon={false}
+ label={<Icon title="涓婅竟璺�" type="vertical-align-top"/>}
+ >
+ <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>
+ </Form.Item>
+ </Col>
+ <Col span={12}>
+ <Form.Item
+ colon={false}
+ label={<Icon title="涓嬭竟璺�" type="vertical-align-bottom"/>}
+ >
+ <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>
+ </Form.Item>
+ </Col>
+ </Panel> : null}
</Collapse> : null}
</Form>
</div>
--
Gitblit v1.8.0