From 6257816acce548a113081578140058cd99e83160 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期一, 05 十月 2020 10:01:16 +0800
Subject: [PATCH] 2020-10-05
---
src/menu/stylecontroller/index.jsx | 66 ++++++++++++++++++++++++---------
1 files changed, 48 insertions(+), 18 deletions(-)
diff --git a/src/menu/stylecontroller/index.jsx b/src/menu/stylecontroller/index.jsx
index bd24434..33ff5a1 100644
--- a/src/menu/stylecontroller/index.jsx
+++ b/src/menu/stylecontroller/index.jsx
@@ -184,19 +184,29 @@
if (/^http|^\/\//.test(val)) {
val = `url(${val})`
- } else if (/^#|,/ig.test(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})
}
- submitBorder = (val) => {
- let border = '0px'
- if (!/,\s0\)$/.test(val)) {
- border = `1px solid ${val}`
+ changeBorderWidth = (val) => {
+ this.updateStyle({borderWidth: val})
+ }
+
+ changeBorderColor = (val) => {
+ this.updateStyle({borderColor: val})
+ }
+
+ changeHeight = (val) => {
+ let _val = val
+ if (_val === '0px') {
+ _val = 'auto'
}
- this.updateStyle({border: border})
+
+ this.updateStyle({height: _val})
}
changeBorderRadius = (val) => {
@@ -238,6 +248,17 @@
<div className="menu-style-controller">
<Form {...formItemLayout}>
{card ? <Collapse expandIconPosition="right" destroyInactivePanel={true} defaultActiveKey={options[0]} accordion={true}>
+ {options.includes('height') ? <Panel header="楂樺害" key="height">
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<Icon title="楂樺害" type="column-height" />}
+ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
+ >
+ <StyleInput defaultValue={card.height || ''} options={['px']} onChange={this.changeHeight}/>
+ </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" />}>
@@ -264,7 +285,7 @@
</Form.Item>
</Col>
<Col span={12}>
- <Form.Item colon={false} label={<Icon title="琛岄棿璺�" type="line-height" />}>
+ <Form.Item colon={false} label={<Icon title="琛岄珮" type="line-height" />}>
<InputNumber defaultValue={card.lineHeight} min={1} max={10} precision={1} onChange={this.changeLineHeight} />
</Form.Item>
</Col>
@@ -348,10 +369,19 @@
<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 }} }
>
- <ColorSketch defaultValue={card.border ? card.border.replace(/^1px solid /ig, '').replace('0px', 'transparent') : 'transparent'} onChange={this.submitBorder} />
+ <StyleInput defaultValue={card.borderWidth || ''} options={['px']} onChange={this.changeBorderWidth}/>
+ </Form.Item>
+ </Col>
+ <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 defaultValue={card.borderColor || 'transparent'} onChange={this.changeBorderColor} />
</Form.Item>
</Col>
<Col span={24}>
@@ -360,7 +390,7 @@
label={<Icon title="鍦嗚" type="radius-setting" />}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <StyleInput defaultValue={card.borderRadius || ''} width={210} options={['px', '%']} onChange={this.changeBorderRadius}/>
+ <StyleInput defaultValue={card.borderRadius || ''} options={['px', '%']} onChange={this.changeBorderRadius}/>
</Form.Item>
</Col>
</Panel> : null}
@@ -370,7 +400,7 @@
colon={false}
label={<Icon title="涓婅竟璺�" type="arrow-up"/>}
>
- <StyleInput defaultValue={card.marginTop} width={80} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'marginTop')}/>
+ <StyleInput defaultValue={card.marginTop} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'marginTop')}/>
</Form.Item>
</Col>
<Col span={12}>
@@ -378,7 +408,7 @@
colon={false}
label={<Icon title="涓嬭竟璺�" type="arrow-down"/>}
>
- <StyleInput defaultValue={card.marginBottom} width={80} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'marginBottom')}/>
+ <StyleInput defaultValue={card.marginBottom} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'marginBottom')}/>
</Form.Item>
</Col>
<Col span={12}>
@@ -386,7 +416,7 @@
colon={false}
label={<Icon title="宸﹁竟璺�" type="arrow-left"/>}
>
- <StyleInput defaultValue={card.marginLeft} width={80} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'marginLeft')}/>
+ <StyleInput defaultValue={card.marginLeft} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'marginLeft')}/>
</Form.Item>
</Col>
<Col span={12}>
@@ -394,7 +424,7 @@
colon={false}
label={<Icon title="鍙宠竟璺�" type="arrow-right"/>}
>
- <StyleInput defaultValue={card.marginRight} width={80} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'marginRight')}/>
+ <StyleInput defaultValue={card.marginRight} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'marginRight')}/>
</Form.Item>
</Col>
</Panel> : null}
@@ -404,7 +434,7 @@
colon={false}
label={<Icon title="涓婅竟璺�" type="arrow-up"/>}
>
- <StyleInput defaultValue={card.paddingTop} width={80} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'paddingTop')}/>
+ <StyleInput defaultValue={card.paddingTop} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'paddingTop')}/>
</Form.Item>
</Col>
<Col span={12}>
@@ -412,7 +442,7 @@
colon={false}
label={<Icon title="涓嬭竟璺�" type="arrow-down"/>}
>
- <StyleInput defaultValue={card.paddingBottom} width={80} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'paddingBottom')}/>
+ <StyleInput defaultValue={card.paddingBottom} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'paddingBottom')}/>
</Form.Item>
</Col>
<Col span={12}>
@@ -420,7 +450,7 @@
colon={false}
label={<Icon title="宸﹁竟璺�" type="arrow-left"/>}
>
- <StyleInput defaultValue={card.paddingLeft} width={80} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'paddingLeft')}/>
+ <StyleInput defaultValue={card.paddingLeft} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'paddingLeft')}/>
</Form.Item>
</Col>
<Col span={12}>
@@ -428,7 +458,7 @@
colon={false}
label={<Icon title="鍙宠竟璺�" type="arrow-right"/>}
>
- <StyleInput defaultValue={card.paddingRight} width={80} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'paddingRight')}/>
+ <StyleInput defaultValue={card.paddingRight} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'paddingRight')}/>
</Form.Item>
</Col>
</Panel> : null}
--
Gitblit v1.8.0