Skip to content

Commit 9533dc4

Browse files
wangshihao111wangshihao111
committed
feat: 优化交互
1 parent 5cb101b commit 9533dc4

4 files changed

Lines changed: 44 additions & 12 deletions

File tree

‎src/setter/style-setter/pro/background/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -348,6 +348,7 @@ export default (props: fontProps) => {
348348
<Row title={'透明度'} styleKey="opacity" {...props}>
349349
<div className="opacity-container">
350350
<Range
351+
disabled={isCssVarBind(styleData.opacity)}
351352
style={{ marginLeft: '10px', marginRight: '10px', width: '104px' }}
352353
value={!isEmptyValue(styleData.opacity) ? styleData.opacity * 100 : 0}
353354
onChange={(val) => onOpacityChange('opacity', parseInt(val) / 100)}

‎src/setter/style-setter/pro/layout/index.less‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@bindColor: #bcd1fa;
2+
13
.layout-style-container {
24
.inner-row-contaienr {
35
display: flex;
@@ -44,6 +46,10 @@
4446
-webkit-transition: all 0.3s ease;
4547
transition: all 0.3s ease;
4648

49+
&.css-var-bind {
50+
border-top: 20px solid @bindColor;
51+
}
52+
4753
.next-input.next-medium {
4854
position: absolute;
4955
left: 0;
@@ -77,6 +83,9 @@
7783
border-right: 20px solid #d6e4ff;
7884
-webkit-transition: all 0.3s ease;
7985
transition: all 0.3s ease;
86+
&.css-var-bind {
87+
border-right: 20px solid @bindColor;
88+
}
8089
.next-input.next-medium {
8190
position: absolute;
8291
top: 0;
@@ -116,6 +125,9 @@
116125
border-bottom: 20px solid #d6e4ff;
117126
-webkit-transition: all 0.3s ease;
118127
transition: all 0.3s ease;
128+
&.css-var-bind {
129+
border-bottom: 20px solid @bindColor;
130+
}
119131
.next-input.next-medium {
120132
position: absolute;
121133
left: 0;
@@ -147,6 +159,9 @@
147159
border-left: 20px solid #d6e4ff;
148160
-webkit-transition: all 0.3s ease;
149161
transition: all 0.3s ease;
162+
&.css-var-bind {
163+
border-left: 20px solid @bindColor;
164+
}
150165
.next-input.next-medium {
151166
position: absolute;
152167
top: 0;
@@ -186,6 +201,9 @@
186201
border-top: 20px solid #d6e4ff;
187202
-webkit-transition: all 0.3s ease;
188203
transition: all 0.3s ease;
204+
&.css-var-bind {
205+
border-top: 20px solid @bindColor;
206+
}
189207
.next-input.next-medium {
190208
position: absolute;
191209
left: 0;
@@ -219,6 +237,9 @@
219237
border-bottom: 20px solid #d6e4ff;
220238
-webkit-transition: all 0.3s ease;
221239
transition: all 0.3s ease;
240+
&.css-var-bind {
241+
border-bottom: 20px solid @bindColor;
242+
}
222243
.next-input.next-medium {
223244
position: absolute;
224245
left: 0;
@@ -252,6 +273,9 @@
252273
border-right: 20px solid #d6e4ff;
253274
-webkit-transition: all 0.3s ease;
254275
transition: all 0.3s ease;
276+
&.css-var-bind {
277+
border-right: 20px solid @bindColor;
278+
}
255279
.next-input.next-medium {
256280
position: absolute;
257281
top: 0;
@@ -291,6 +315,9 @@
291315
border-left: 20px solid #d6e4ff;
292316
-webkit-transition: all 0.3s ease;
293317
transition: all 0.3s ease;
318+
&.css-var-bind {
319+
border-left: 20px solid @bindColor;
320+
}
294321
.next-input.next-medium {
295322
position: absolute;
296323
top: 0;

‎src/setter/style-setter/pro/layout/layoutBox.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import * as React from 'react';
2+
import cls from 'classnames';
23
import './index.less';
34
import { StyleData, onStyleChange } from '../../utils/types';
45
import { addUnit, isCssVarBind, removeUnit as originRemoveUnit } from '../../utils';
@@ -69,7 +70,7 @@ export default (props: layoutBoxProps) => {
6970
<div className="layout-box-container">
7071
{layoutPropsConfig.isShowMargin && (
7172
<>
72-
<div className="margin-top-div">
73+
<div className={cls("margin-top-div", isCssVarBind(styleData.marginTop) && 'css-var-bind')}>
7374
<LayoutInput
7475
className="next-noborder"
7576
placeholder="0"
@@ -79,7 +80,7 @@ export default (props: layoutBoxProps) => {
7980
onKeyDown={(e) => onInputKeyDown(e.key, 'marginTop')}
8081
/>
8182
</div>
82-
<div className="margin-right-div">
83+
<div className={cls("margin-right-div", isCssVarBind(styleData.marginBottom) && 'css-var-bind')}>
8384
<LayoutInput
8485
className="next-noborder"
8586
placeholder="0"
@@ -89,7 +90,7 @@ export default (props: layoutBoxProps) => {
8990
onKeyDown={(e) => onInputKeyDown(e.key, 'marginRight')}
9091
/>
9192
</div>
92-
<div className="margin-bottom-div">
93+
<div className={cls("margin-bottom-div", isCssVarBind(styleData.marginBottom) && 'css-var-bind')}>
9394
<span className="help-txt">MARGIN</span>
9495
<LayoutInput
9596
className="next-noborder"
@@ -100,7 +101,7 @@ export default (props: layoutBoxProps) => {
100101
onKeyDown={(e) => onInputKeyDown(e.key, 'marginBottom')}
101102
/>
102103
</div>
103-
<div className="margin-left-div">
104+
<div className={cls("margin-left-div", isCssVarBind(styleData.marginLeft) && 'css-var-bind')}>
104105
<LayoutInput
105106
className="next-noborder"
106107
placeholder="0"
@@ -115,7 +116,7 @@ export default (props: layoutBoxProps) => {
115116

116117
{layoutPropsConfig.isShowPadding && (
117118
<>
118-
<div className="padding-top-div">
119+
<div className={cls("padding-top-div", isCssVarBind(styleData.paddingTop) && 'css-var-bind')}>
119120
<LayoutInput
120121
className="next-noborder"
121122
placeholder="0"
@@ -125,7 +126,7 @@ export default (props: layoutBoxProps) => {
125126
onKeyDown={(e) => onInputKeyDown(e.key, 'paddingTop')}
126127
/>
127128
</div>
128-
<div className="padding-right-div">
129+
<div className={cls("padding-right-div", isCssVarBind(styleData.paddingRight) && 'css-var-bind')}>
129130
<LayoutInput
130131
className="next-noborder"
131132
placeholder="0"
@@ -135,7 +136,7 @@ export default (props: layoutBoxProps) => {
135136
onKeyDown={(e) => onInputKeyDown(e.key, 'paddingRight')}
136137
/>
137138
</div>
138-
<div className="padding-bottom-div">
139+
<div className={cls("padding-bottom-div", isCssVarBind(styleData.paddingBottom) && 'css-var-bind')}>
139140
<span className="help-txt">PADDING</span>
140141
<LayoutInput
141142
className="next-noborder"
@@ -146,7 +147,7 @@ export default (props: layoutBoxProps) => {
146147
onKeyDown={(e) => onInputKeyDown(e.key, 'paddingBottom')}
147148
/>
148149
</div>
149-
<div className="padding-left-div">
150+
<div className={cls("padding-left-div", isCssVarBind(styleData.paddingLeft) && 'css-var-bind')}>
150151
<LayoutInput
151152
className="next-noborder"
152153
placeholder="0"

‎src/setter/style-setter/pro/position/index.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@ import { useEffect } from 'react';
55
import PositionBox from '../position/positionBox';
66
import { StyleData, onStyleChange } from '../../utils/types';
77
import positionConfig from './config.json';
8-
const Panel = Collapse.Panel;
8+
import { isCssVarBind } from '../../utils';
9+
10+
const {Panel} = Collapse;
911

1012
interface layoutProps {
1113
styleData: StyleData | any;
@@ -37,21 +39,22 @@ export default (props: layoutProps) => {
3739
<Select
3840
dataSource={position.dataList}
3941
value={styleData.position}
40-
hasClear={true}
42+
hasClear
4143
onChange={(val) => onStyleChange([{ styleKey: 'position', value: val }])}
4244
/>
4345
</Row>
4446

45-
{styleData['position'] && styleData['position'] != 'static' && (
47+
{styleData.position && styleData.position != 'static' && (
4648
<PositionBox styleData={styleData} onStyleChange={onStyleChange} {...props} />
4749
)}
4850

4951
<Row title={'zIndex'} styleData={styleData} styleKey="zIndex">
5052
<NumberPicker
53+
disabled={isCssVarBind(styleData.zIndex)}
5154
step={1}
5255
precision={2}
5356
onChange={onZIndexChange}
54-
value={styleData['zIndex']}
57+
value={styleData.zIndex}
5558
/>
5659
</Row>
5760

0 commit comments

Comments
 (0)