Skip to content

Commit 2fadda6

Browse files
easylogiceasylogic
committed
Refactoring....
1 parent 8bc653a commit 2fadda6

File tree

21 files changed

+148
-174
lines changed

21 files changed

+148
-174
lines changed

‎docs/bundle.css‎

Lines changed: 60 additions & 88 deletions
Large diffs are not rendered by default.

‎docs/bundle.css.gz‎

45 Bytes
Binary file not shown.

‎docs/main.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/main.js.gz‎

168 Bytes
Binary file not shown.

‎src/csseditor/ui/property-editor/CubicBezierEditor.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,10 @@ export default class CubicBezierEditor extends UIElement {
1212
key: this.props.key,
1313
currentBezier: getPredefinedCubicBezier( this.props.value || 'linear'),
1414
currentBezierIndex: 0,
15-
selectedColor: '#ac48ff',
16-
animatedColor: '#ac48ff66'
15+
selectedColor: '#609de2',
16+
animatedColor: '#609de266',
17+
curveColor: '#609de2',
18+
baseLineColor: 'rgba(117, 117, 117, 0.46)'
1719
}
1820
}
1921

@@ -131,7 +133,7 @@ export default class CubicBezierEditor extends UIElement {
131133
var context = $canvas.context();
132134

133135
context.lineWidth = 1;
134-
context.strokeStyle = 'rgba(255, 255, 255, 0.2)';
136+
context.strokeStyle = this.state.baseLineColor;
135137
// Draw Guide Line
136138

137139
context.beginPath();
@@ -158,7 +160,7 @@ export default class CubicBezierEditor extends UIElement {
158160
context.closePath();
159161

160162
context.lineWidth = 2;
161-
context.strokeStyle = 'white';
163+
context.strokeStyle = this.state.curveColor;
162164

163165
var x1 = currentBezier[0] * width
164166
var y1 = currentBezier[1] == 0 ? height : (1 - currentBezier[1]) * height

‎src/csseditor/ui/property/ColorAssetsProperty.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,11 +48,14 @@ export default class ColorAssetsProperty extends BaseProperty {
4848
<div class='preview' data-index="${index}"><div class='color-view' style='background-color: ${objectInfo.color};'></div></div>
4949
<div class='title'>
5050
<div>
51-
<input type='text' class='name' data-key='name' value='${objectInfo.name}' placeholder="name" />
51+
<input type='text' class='color' data-key='color' readonly value='${objectInfo.color}' placeholder="color" />
5252
</div>
5353
<div>
54-
<input type='text' class='var' data-key='variable' value='${objectInfo.variable}' placeholder="--var" />
54+
<input type='text' class='name' data-key='name' value='${objectInfo.name}' placeholder="name" />
5555
</div>
56+
<!--<div>
57+
<input type='text' class='var' data-key='variable' value='${objectInfo.variable}' placeholder="--var" />
58+
</div>-->
5659
</div>
5760
<div class='tools'>
5861
<button type="button" class='copy'>${icon.copy}</button>

‎src/csseditor/ui/property/KeyFrameProperty.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,19 +36,21 @@ export default class KeyFrameProperty extends BaseProperty {
3636
<div class='title'>
3737
<div class='name'>${keyframe.name}</div>
3838
<div class='tools'>
39-
<button type="button" class="del" data-index="${index}">
40-
${icon.remove2}
41-
</button>
39+
<button type="button" class="del" data-index="${index}">${icon.remove2}</button>
4240
</div>
4341
</div>
4442
<div class='offset-list'>
4543
<div class='container'>
4644
${keyframe.offsets.map(o => {
47-
var title = `${o.offset} ${o.properties.map(p => p.key).join(',')}`
48-
return `<div data-title='${title}' class='offset' style='left: ${o.offset}; background-color: ${o.color}'></div>`
45+
return `
46+
<div class='offset' style='left: ${o.offset}; background-color: ${o.color}'></div>
47+
`
4948
}).join('')}
5049
</div>
5150
</div>
51+
<div class='keyframe-code'>
52+
<pre>${keyframe.toCSSText()}</pre>
53+
</div>
5254
</div>
5355
`
5456
}

‎src/csseditor/ui/property/TransitionProperty.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export default class TransitionProperty extends BaseProperty {
1818
getTitle() {
1919
return "Transition";
2020
}
21+
2122
getBody() {
2223
return `<div class='property-item transition-list' ref='$transitionList'></div>`;
2324
}

‎src/csseditor/ui/view/CommandView.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,9 +113,9 @@ export default class CommandView extends UIElement {
113113

114114
[COMMAND('switch.theme')] () {
115115
if (editor.theme === 'dark') {
116-
editor.theme = 'light'
116+
editor.changeTheme('light')
117117
} else if (editor.theme === 'light') {
118-
editor.theme = 'dark'
118+
editor.changeTheme('dark')
119119
}
120120

121121
this.emit('changeTheme')

‎src/editor/css-property/Keyframe.js‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -128,20 +128,23 @@ export class Keyframe extends Property {
128128

129129

130130
toOffsetString (it) {
131-
return `${it.offset.toString()} {
132-
${it.properties.map(p => {
133-
if (this.isMultiStyle(p.key)) {
134-
return this.getMultiStyleString(p)
135-
} else {
136-
var value = p.value.toString();
137-
138-
if (value) {
139-
return `${p.key}: ${value};`
140-
} else {
141-
return '';
142-
}
143-
}
144-
}).join('')}
131+
132+
var tabString = ' '
133+
134+
return ` ${it.offset.toString()} {
135+
${tabString}${it.properties.map(p => {
136+
if (this.isMultiStyle(p.key)) {
137+
return this.getMultiStyleString(p)
138+
} else {
139+
var value = p.value.toString();
140+
141+
if (value) {
142+
return `${p.key}: ${value};`
143+
} else {
144+
return '';
145+
}
146+
}
147+
}).join('').replace(/\;/g, ';\n' + tabString).trim()}
145148
}`
146149
}
147150

0 commit comments

Comments
 (0)