From efad1f9eff8d6af31f5b15edceee7b855b3db957 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期三, 22 十二月 2021 00:00:28 +0800 Subject: [PATCH] 2021-12-22 --- src/menu/stylecombcontroller/index.jsx | 95 ++++++++++++++++++++++++++++++----------------- 1 files changed, 61 insertions(+), 34 deletions(-) diff --git a/src/menu/stylecombcontroller/index.jsx b/src/menu/stylecombcontroller/index.jsx index f7b3ffa..e9b5f91 100644 --- a/src/menu/stylecombcontroller/index.jsx +++ b/src/menu/stylecombcontroller/index.jsx @@ -1,7 +1,34 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Collapse, Form, Col, Icon, InputNumber, Select, Radio, Drawer, Button } from 'antd' +import { Collapse, Form, Col, InputNumber, Select, Radio, Drawer, Button } from 'antd' +import { + ColumnHeightOutlined, + FontSizeOutlined, + BoldOutlined, + LineHeightOutlined, + ColumnWidthOutlined, + FontColorsOutlined, + ItalicOutlined, + AlignLeftOutlined, + AlignCenterOutlined, + AlignRightOutlined, + UnderlineOutlined, + StrikethroughOutlined, + BgColorsOutlined, + BorderOutlined, + BorderOuterOutlined, + BorderLeftOutlined, + BorderRightOutlined, + BorderTopOutlined, + BorderBottomOutlined, + RadiusSettingOutlined, + ArrowUpOutlined, + ArrowDownOutlined, + ArrowLeftOutlined, + ArrowRightOutlined, + SwapOutlined, +} from '@ant-design/icons' import MKEmitter from '@/utils/events.js' import ColorSketch from '@/mob/colorsketch' @@ -254,7 +281,7 @@ <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={''} options={['px', 'vh', 'vw']} onChange={this.changeHeight}/> @@ -263,12 +290,12 @@ </Panel> : null} {options.includes('font') ? <Panel header="瀛椾綋" key="font"> <Col span={12}> - <Form.Item colon={false} label={<Icon title="瀛椾綋澶у皬" type="font-size" />}> + <Form.Item colon={false} label={<FontSizeOutlined title="瀛椾綋澶у皬"/>}> <InputNumber defaultValue={''} min={12} max={100} precision={0} onChange={this.changeFontSize} /> </Form.Item> </Col> <Col span={12}> - <Form.Item colon={false} label={<Icon title="瀛椾綋绮楃粏" type="bold" />}> + <Form.Item colon={false} label={<BoldOutlined title="瀛椾綋绮楃粏"/>}> <Select defaultValue={''} onChange={this.boldChange}> <Option value="normal">normal</Option> <Option value="bold">bold</Option> @@ -287,19 +314,19 @@ </Form.Item> </Col> <Col span={12}> - <Form.Item colon={false} label={<Icon title="琛岄珮" type="line-height" />}> + <Form.Item colon={false} label={<LineHeightOutlined title="琛岄珮" />}> <InputNumber defaultValue={''} 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" />}> + <Form.Item colon={false} label={<ColumnWidthOutlined title="瀛楅棿璺�"/>}> <InputNumber defaultValue={''} min={0} max={100} precision={0} onChange={this.changeLetterSpacing}/> </Form.Item> </Col> <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 onChange={this.changeFontColor} /> @@ -313,7 +340,7 @@ > <Radio.Group defaultValue={''} onChange={this.changeFontStyle}> <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> @@ -325,9 +352,9 @@ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <Radio.Group className="text-align" defaultValue={''} 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.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> @@ -339,8 +366,8 @@ > <Radio.Group className="text-decoration" defaultValue={''} onChange={this.changeTextDecoration}> <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> @@ -350,7 +377,7 @@ <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 onChange={this.changeBackgroundColor} /> @@ -361,22 +388,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 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={'solid'} onChange={this.changeBorderStyle}> @@ -414,7 +441,7 @@ <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={''} options={['px']} onChange={this.changeBorderWidth}/> : null} @@ -427,7 +454,7 @@ <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 onChange={this.changeBorderColor} /> : null} @@ -440,7 +467,7 @@ <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={'0px'} options={['px', '%']} onChange={(val) => this.changeNormalStyle(val, 'borderRadius')}/> @@ -451,7 +478,7 @@ <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 onChange={this.changeShadowColor} /> @@ -462,7 +489,7 @@ <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={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginTop')}/> @@ -471,7 +498,7 @@ <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={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginBottom')}/> @@ -480,7 +507,7 @@ <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={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginLeft')}/> @@ -489,7 +516,7 @@ <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={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginRight')}/> @@ -500,7 +527,7 @@ <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={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingTop')}/> @@ -509,7 +536,7 @@ <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={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingBottom')}/> @@ -518,7 +545,7 @@ <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={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingLeft')}/> @@ -527,7 +554,7 @@ <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={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingRight')}/> @@ -538,7 +565,7 @@ <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={''} onChange={(e) => this.changeNormalStyle(e.target.value, 'float')}> -- Gitblit v1.8.0