From f6a1ab6a58215cf7546976a86eb6face1a7be32f Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 30 七月 2021 15:37:17 +0800
Subject: [PATCH] 2021-07-30
---
src/menu/stylecontroller/index.jsx | 161 ++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 145 insertions(+), 16 deletions(-)
diff --git a/src/menu/stylecontroller/index.jsx b/src/menu/stylecontroller/index.jsx
index 595e8ff..d1c5585 100644
--- a/src/menu/stylecontroller/index.jsx
+++ b/src/menu/stylecontroller/index.jsx
@@ -65,7 +65,7 @@
}
onCloseDrawer = () => {
- let { card } = this.state
+ let card = fromJS(this.state.card).toJS()
let check = false
if (card.borderWidth === '0px') {
@@ -78,15 +78,15 @@
check = true
} else if (card.borderRightWidth === '0px') {
delete card.borderRightWidth
- delete card.borderRightWidth
+ delete card.borderRightColor
check = true
} else if (card.borderTopWidth === '0px') {
delete card.borderTopWidth
- delete card.borderTopWidth
+ delete card.borderTopColor
check = true
} else if (card.borderBottomWidth === '0px') {
delete card.borderBottomWidth
- delete card.borderBottomWidth
+ delete card.borderBottomColor
check = true
}
@@ -194,10 +194,68 @@
}
/**
+ * @description 淇敼鑳屾櫙澶у皬
+ */
+ changeBackgroundSize = (val) => {
+ this.updateStyle({backgroundSize: val})
+ }
+
+ /**
+ * @description 淇敼鑳屾櫙浣嶇疆
+ */
+ changeBackgroundPositon= (val) => {
+ this.updateStyle({backgroundPositon: val})
+ }
+
+ /**
+ * @description 淇敼鑳屾櫙閲嶅璁剧疆
+ */
+ changeBackgroundRepeat = (val) => {
+ this.updateStyle({backgroundRepeat: val})
+ }
+
+ /**
* @description 淇敼闃村奖棰滆壊 锛岄鑹叉帶浠�
*/
changeShadowColor = (val) => {
- this.updateStyle({shadow: val})
+ const { card } = this.state
+
+ let boxShadow = `${card.hShadow || '0px'} ${card.vShadow || '0px'} ${card.shadowBlur || '0px'} ${val}`
+
+ this.updateStyle({shadowColor: val, boxShadow})
+ }
+
+ /**
+ * @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) => {
@@ -329,7 +387,7 @@
label={<Icon title="瀹藉害" type="column-width" />}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <StyleInput defaultValue={card.width || ''} options={['px', 'vh', 'vw']} onChange={this.changeWidth}/>
+ <StyleInput defaultValue={card.width || ''} options={['px', 'vh', 'vw', '%']} onChange={this.changeWidth}/>
</Form.Item>
</Col>
</Panel> : null}
@@ -448,6 +506,50 @@
<SourceComponent value={backgroundImage} type="" placement="right" onChange={this.imgChange}/>
</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.backgroundSize || 'cover'} onChange={this.changeBackgroundSize}>
+ <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={this.changeBackgroundRepeat}>
+ <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.backgroundPositon || 'center'} onChange={this.changeBackgroundPositon}>
+ <Option value="center">center</Option>
+ <Option value="top">top</Option>
+ <Option value="bottom">bottom</Option>
+ </Select>
+ </Form.Item>
+ </Col> : null}
</Panel> : null}
{options.includes('border') ? <Panel header="杈规" key="border">
<Col span={24}>
@@ -546,7 +648,34 @@
label={<Icon title="闃村奖棰滆壊" type="bg-colors" />}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <ColorSketch value={card.shadow || 'transparent'} onChange={this.changeShadowColor} />
+ <ColorSketch value={card.shadowColor || 'transparent'} onChange={this.changeShadowColor} />
+ </Form.Item>
+ </Col>
+ <Col span={24}>
+ <Form.Item
+ colon={false}
+ label={<Icon title="妯＄硦璺濈" type="column-width" />}
+ 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={<Icon title="姘村钩浣嶇疆" type="arrow-right" />}
+ 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={<Icon title="鍨傜洿浣嶇疆" type="arrow-down" />}
+ 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}
@@ -557,7 +686,7 @@
label={<Icon title="涓婅竟璺�" type="arrow-up"/>}
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 defaultValue={card.marginTop || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginTop')}/>
</Form.Item>
</Col>
<Col span={24}>
@@ -566,7 +695,7 @@
label={<Icon title="涓嬭竟璺�" type="arrow-down"/>}
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 defaultValue={card.marginBottom || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginBottom')}/>
</Form.Item>
</Col>
<Col span={24}>
@@ -575,7 +704,7 @@
label={<Icon title="宸﹁竟璺�" type="arrow-left"/>}
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 defaultValue={card.marginLeft || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginLeft')}/>
</Form.Item>
</Col>
<Col span={24}>
@@ -584,7 +713,7 @@
label={<Icon title="鍙宠竟璺�" type="arrow-right"/>}
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 defaultValue={card.marginRight || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginRight')}/>
</Form.Item>
</Col>
</Panel> : null}
@@ -595,7 +724,7 @@
label={<Icon title="涓婅竟璺�" type="arrow-up"/>}
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 defaultValue={card.paddingTop || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingTop')}/>
</Form.Item>
</Col>
<Col span={24}>
@@ -604,7 +733,7 @@
label={<Icon title="涓嬭竟璺�" type="arrow-down"/>}
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 defaultValue={card.paddingBottom || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingBottom')}/>
</Form.Item>
</Col>
<Col span={24}>
@@ -613,7 +742,7 @@
label={<Icon title="宸﹁竟璺�" type="arrow-left"/>}
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 defaultValue={card.paddingLeft || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingLeft')}/>
</Form.Item>
</Col>
<Col span={24}>
@@ -622,7 +751,7 @@
label={<Icon title="鍙宠竟璺�" type="arrow-right"/>}
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 defaultValue={card.paddingRight || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingRight')}/>
</Form.Item>
</Col>
</Panel> : null}
@@ -633,7 +762,7 @@
label={<Icon title="娴姩" type="swap" />}
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.Group style={{whiteSpace: 'nowrap'}} defaultValue={card.float || 'left'} onChange={(e) => this.changeNormalStyle(e.target.value, 'float')}>
<Radio value="left">宸︽诞鍔�</Radio>
<Radio value="right">鍙虫诞鍔�</Radio>
<Radio value="none">涓嶆诞鍔�</Radio>
--
Gitblit v1.8.0