From 30273c297c59887434f44a75df75f13db6c8885c Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 29 九月 2020 09:15:54 +0800
Subject: [PATCH] 2020-09-29
---
src/menu/stylecontroller/index.jsx | 57 ++++++++++++++++-----------------------------------------
1 files changed, 16 insertions(+), 41 deletions(-)
diff --git a/src/menu/stylecontroller/index.jsx b/src/menu/stylecontroller/index.jsx
index 82cbd05..bd24434 100644
--- a/src/menu/stylecontroller/index.jsx
+++ b/src/menu/stylecontroller/index.jsx
@@ -7,6 +7,7 @@
import zhCN from '@/locales/zh-CN/mob.js'
import enUS from '@/locales/en-US/mob.js'
import ColorSketch from '@/mob/colorsketch'
+import StyleInput from './styleInput'
import FileUpload from '@/tabviews/zshare/fileupload'
import './index.scss'
@@ -23,7 +24,6 @@
dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
card: null,
comIds: [],
- fontColor: '#000000',
bgimages: [],
backgroundImage: '',
options: [],
@@ -135,19 +135,7 @@
* @description 淇敼瀛椾綋棰滆壊 锛岄鑹叉帶浠�
*/
changeFontColor = (val) => {
- this.setState({
- fontColor: val
- })
this.updateStyle({color: val})
- }
-
- /**
- * @description 淇敼瀛椾綋棰滆壊 锛屾墜鍔ㄨ緭鍏�
- */
- changeFontColorInput = (e) => {
- this.setState({
- fontColor: e.target.value
- })
}
/**
@@ -211,19 +199,12 @@
this.updateStyle({border: border})
}
- changeBorderRadius = (e) => {
- let val = e.target.value
+ changeBorderRadius = (val) => {
this.updateStyle({borderRadius: val})
}
changeMarginOrPadding = (val, type) => {
- val = parseInt(val)
-
- if (isNaN(val)) {
- val = 0
- }
-
- this.updateStyle({[type]: `${val}px`})
+ this.updateStyle({[type]: val})
}
render () {
@@ -243,7 +224,7 @@
<Drawer
title={
<div className="header-logo">
- <img src="http://cloud.mk9h.cn/Content/images/upload/2020-03-26/2020032615132185788026_xiazai.png" alt=""/>
+ <img src={window.GLOB.mainlogo} alt=""/>
</div>
}
placement="left"
@@ -284,12 +265,12 @@
</Col>
<Col span={12}>
<Form.Item colon={false} label={<Icon title="琛岄棿璺�" type="line-height" />}>
- <InputNumber defaultValue={card.lineHeight || 1.5} min={1} max={10} precision={1} onChange={this.changeLineHeight} />
+ <InputNumber defaultValue={card.lineHeight} 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" />}>
- <InputNumber defaultValue={card.letterSpacing || 0} min={0} max={100} precision={0} onChange={this.changeLetterSpacing}/>
+ <InputNumber defaultValue={card.letterSpacing} min={0} max={100} precision={0} onChange={this.changeLetterSpacing}/>
</Form.Item>
</Col>
<Col span={24}>
@@ -298,7 +279,7 @@
label={<Icon title="瀛椾綋棰滆壊" type="font-colors" />}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <ColorSketch value={card.color || '#000000'} onChange={this.changeFontColor} />
+ <ColorSketch value={card.color || 'rgba(0, 0, 0, 0.85)'} onChange={this.changeFontColor} />
</Form.Item>
</Col>
<Col span={24}>
@@ -379,13 +360,7 @@
label={<Icon title="鍦嗚" type="radius-setting" />}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <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>
+ <StyleInput defaultValue={card.borderRadius || ''} width={210} options={['px', '%']} onChange={this.changeBorderRadius}/>
</Form.Item>
</Col>
</Panel> : null}
@@ -395,7 +370,7 @@
colon={false}
label={<Icon title="涓婅竟璺�" type="arrow-up"/>}
>
- <InputNumber defaultValue={card.marginTop || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'marginTop')}/>
+ <StyleInput defaultValue={card.marginTop} width={80} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'marginTop')}/>
</Form.Item>
</Col>
<Col span={12}>
@@ -403,7 +378,7 @@
colon={false}
label={<Icon title="涓嬭竟璺�" type="arrow-down"/>}
>
- <InputNumber defaultValue={card.marginBottom || 0} min={0} max={1000} precision={0} onChange={(val) => this.changeMarginOrPadding(val, 'marginBottom')}/>
+ <StyleInput defaultValue={card.marginBottom} width={80} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'marginBottom')}/>
</Form.Item>
</Col>
<Col span={12}>
@@ -411,7 +386,7 @@
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')}/>
+ <StyleInput defaultValue={card.marginLeft} width={80} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'marginLeft')}/>
</Form.Item>
</Col>
<Col span={12}>
@@ -419,7 +394,7 @@
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')}/>
+ <StyleInput defaultValue={card.marginRight} width={80} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'marginRight')}/>
</Form.Item>
</Col>
</Panel> : null}
@@ -429,7 +404,7 @@
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')}/>
+ <StyleInput defaultValue={card.paddingTop} width={80} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'paddingTop')}/>
</Form.Item>
</Col>
<Col span={12}>
@@ -437,7 +412,7 @@
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')}/>
+ <StyleInput defaultValue={card.paddingBottom} width={80} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'paddingBottom')}/>
</Form.Item>
</Col>
<Col span={12}>
@@ -445,7 +420,7 @@
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')}/>
+ <StyleInput defaultValue={card.paddingLeft} width={80} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'paddingLeft')}/>
</Form.Item>
</Col>
<Col span={12}>
@@ -453,7 +428,7 @@
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')}/>
+ <StyleInput defaultValue={card.paddingRight} width={80} options={['px', 'vh', 'vw']} onChange={(val) => this.changeMarginOrPadding(val, 'paddingRight')}/>
</Form.Item>
</Col>
</Panel> : null}
--
Gitblit v1.8.0