Skip to content

Commit

Permalink
Refactoring.....
Browse files Browse the repository at this point in the history
  • Loading branch information
@easylogic
easylogic committed Jun 10, 2019
1 parent 000a134 commit 38f4da2
Show file tree
Hide file tree
Showing 15 changed files with 129 additions and 398 deletions.
106 changes: 17 additions & 89 deletions docs/bundle.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3368,9 +3368,9 @@ html, body {
width: 100%;
}
.csseditor .border-item {
display: grid;
grid-template-columns: 1fr 3fr;
grid-column-gap: 10px;
height: 85px;
}
.csseditor .border-item .border-direction {
position: relative;
Expand Down Expand Up @@ -3482,14 +3482,16 @@ html, body {
border-radius: 100%;
}
.csseditor .border-slice-item {
grid-template-columns: 0.6fr 3fr !important;
display: grid;
grid-template-columns: 50px 1fr;
grid-column-gap: 2px;
}
.csseditor .border-slice-item.has-list {
grid-template-columns: 1fr !important;
.csseditor .border-slice-item.full {
grid-template-columns: 1fr;
}
.csseditor .border-slice-item .slice-selector {
display: flex;
grid-template-columns: 1fr;
display: grid;
grid-template-columns: 1fr 1fr;
}
.csseditor .border-slice-item .slice-selector[data-selected-value=all] button[data-value=all] {
background-color: black;
Expand Down Expand Up @@ -3528,37 +3530,13 @@ html, body {
.csseditor .border-slice-item .slice-selector button svg path {
fill: #cccccc;
}
.csseditor .border-slice-item .slice-value {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-column-gap: 3px;
}
.csseditor .border-slice-item .slice-value input,
.csseditor .border-slice-item .slice-value select {
width: 100%;
outline: none;
}
.csseditor .border-slice-item .slice-setting-box {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-column-gap: 4px;
grid-row-gap: 2px;
}
.csseditor .border-slice-item .slice-setting-box > div {
display: grid;
grid-template-columns: 46px 1fr 60px 60px;
grid-column-gap: 4px;
text-align: center;
}
.csseditor .border-slice-item .slice-setting-box > div > * {
vertical-align: middle;
}
.csseditor .border-slice-item .slice-setting-box > div input,
.csseditor .border-slice-item .slice-setting-box > div select {
width: 100%;
outline: none;
}
.csseditor .border-slice-item .slice-setting-box > div label {
.csseditor .border-slice-item .slice-setting-box > div > label {
display: inline-block;
vertical-align: middle;
margin-right: 2px;
Expand All @@ -3568,7 +3546,7 @@ html, body {
margin-top: 2px;
text-align: right;
}
.csseditor .border-slice-item .slice-setting-box > div label.title {
.csseditor .border-slice-item .slice-setting-box > div > label.title {
font-weight: bold;
text-align: left;
}
Expand Down Expand Up @@ -4575,12 +4553,16 @@ html, body {
width: 100%;
height: 100%;
}
.csseditor .border-radius-editor {
.csseditor .border-radius-editor .border-radius-item {
display: grid;
grid-template-columns: 50px 1fr;
}
.csseditor .border-radius-editor .border-radius-item.full {
grid-template-columns: 1fr;
}
.csseditor .border-radius-editor .radius-selector {
display: flex;
grid-template-columns: 1fr;
display: grid;
grid-template-columns: 1fr 1fr;
}
.csseditor .border-radius-editor .radius-selector[data-selected-value=all] button[data-value=all] {
background-color: black;
Expand Down Expand Up @@ -4619,60 +4601,6 @@ html, body {
.csseditor .border-radius-editor .radius-selector button svg path {
fill: #cccccc;
}
.csseditor .border-radius-editor .radius-value {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-column-gap: 3px;
}
.csseditor .border-radius-editor .radius-value input,
.csseditor .border-radius-editor .radius-value select {
width: 100%;
outline: none;
}
.csseditor .border-radius-editor .radius-setting-box {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 4px;
grid-row-gap: 2px;
}
.csseditor .border-radius-editor .radius-setting-box > div {
display: grid;
grid-template-columns: 20px 1fr 1.4fr;
text-align: center;
}
.csseditor .border-radius-editor .radius-setting-box > div > * {
vertical-align: middle;
}
.csseditor .border-radius-editor .radius-setting-box > div input,
.csseditor .border-radius-editor .radius-setting-box > div select {
width: 100%;
outline: none;
}
.csseditor .border-radius-editor .radius-setting-box > div label {
width: 16px;
height: 16px;
display: inline-block;
vertical-align: middle;
border: 2px solid #333;
margin-right: 2px;
cursor: pointer;
outline: none;
position: relative;
margin-top: 2px;
}
.csseditor .border-radius-editor .radius-setting-box > div label.border-top-left-radius {
border-top-left-radius: 10px;
}
.csseditor .border-radius-editor .radius-setting-box > div label.border-top-right-radius {
border-top-right-radius: 10px;
}
.csseditor .border-radius-editor .radius-setting-box > div label.border-bottom-left-radius {
border-bottom-left-radius: 10px;
}
.csseditor .border-radius-editor .radius-setting-box > div label.border-bottom-right-radius {
border-bottom-right-radius: 10px;
}
.csseditor .transform-editor .label {
height: 20px;
margin-top: 2px;
Expand Down
2 changes: 1 addition & 1 deletion docs/main.js
View file

Large diffs are not rendered by default.

110 changes: 26 additions & 84 deletions src/csseditor/ui/control/panel/property/BorderImageProperty.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import icon from "../../../icon/icon";
import { EMPTY_STRING } from "../../../../../util/css/types";
import { EVENT } from "../../../../../util/UIElement";
import { CHANGE_SELECTION, CHANGE_ARTBOARD, CHANGE_EDITOR } from "../../../../types/event";
import RangeEditor from "../../shape/property-editor/RangeEditor";

const typeList = [
{ key: "top", title: "Top" },
Expand All @@ -20,7 +21,6 @@ const keyList = typeList.map(it => it.key);

const names = {
image: "Image",
static: "Static",
"static-gradient": "Static",
"linear-gradient": "Linear",
"repeating-linear-gradient": `${icon.repeat} Linear`,
Expand All @@ -41,7 +41,14 @@ const types = {
"repeating-conic-gradient": "gradient"
};



export default class BorderImageProperty extends BaseProperty {
components() {
return {
RangeEditor
}
}
getTitle() {
return "Border Image";
}
Expand Down Expand Up @@ -122,6 +129,17 @@ export default class BorderImageProperty extends BaseProperty {
`
}

[EVENT('changeBorderImage')] (key, value) {

if (key === 'border-image-slice') {
keyList.forEach(type => {
this.children[`$${type}Slice`].setValue(value)
});
}

this.setBorderImageProperty()
}

getBody() {

var current = editor.selection.current || {borderImage: { image: {}}} ;
Expand All @@ -137,52 +155,25 @@ export default class BorderImageProperty extends BaseProperty {
</button>
</div>
<div class="slice-value">
<input type="range" min="0" max="100" ref="$range" value="0" />
<input type="number" min="0" max="100" ref="$number" value="0" />
<select ref="$unit">
<option value="px">px</option>
<option value="%">%</option>
<option value="em">em</option>
</select>
<RangeEditor ref='$allSlice' key='border-image-slice' onchange='changeBorderImage' />
</div>
</div>
<div
class="property-item border-slice-item has-list"
class="property-item border-slice-item full has-list"
ref="$partitialSetting"
style="display: none;"
>
<label></label>
<div class="slice-setting-box" ref="$sliceSettingBox">
${typeList.map(it => {
return `
<div>
<label class='title'>${it.title}</label>
</div>
<div>
<label>Slice</label>
<input type="range" ref="$${
it.key
}SliceRange" min="0" value="0" data-key="${it.key}" data-type='Slice' />
<input type="number" ref="$${
it.key
}Slice" min="0" value="0" data-key="${it.key}" data-type='Slice' />
<select ref="$${it.key}SliceUnit" data-key="${it.key}">
<option value='px'>px</option>
<option value='%'>%</option>
</select>
<RangeEditor ref='$${it.key}Slice' label='Slice' key='border-image-slice-${it.key}' onchange='changeBorderImage' />
</div>
<div>
<label>Width</label>
<input type="range" ref="$${
it.key
}WidthRange" min="0" value="0" data-key="${it.key}" data-type='Width'/>
<input type="number" ref="$${
it.key
}Width" min="0" value="0" data-key="${it.key}" data-type='Width' />
<select ref="$${it.key}WidthUnit" data-key="${it.key}">
<option value='px'>px</option>
<option value='%'>%</option>
</select>
<RangeEditor ref='$${it.key}Width' label='Width' key='border-image-width-${it.key}' onchange='changeBorderImage' />
</div>
`;
})}
Expand All @@ -191,48 +182,6 @@ export default class BorderImageProperty extends BaseProperty {
`;
}

[INPUT("$range")](e) {
var value = this.getRef("$range").value;
this.getRef("$number").val(value);

keyList.forEach(type => {
this.getRef("$", type, "Slice").val(value);
this.getRef("$", type, "SliceRange").val(value);
});

this.setBorderImageProperty();
}

[INPUT("$number")](e) {
var value = this.getRef("$number").value;
this.getRef("$range").val(value);

keyList.forEach(type => {
this.getRef("$", type, "Slice").val(value);
this.getRef("$", type, "SliceRange").val(value);
});
this.setBorderImageProperty();
}

[CHANGE("$unit")](e) {
var unit = this.getRef("$unit").value;
keyList.forEach(type => {
this.getRef("$", type, "SliceUnit").val(unit);
});
this.setBorderImageProperty();
}

[INPUT("$el input[type=range][data-key]")](e) {
var [key, type] = e.$delegateTarget.attrs('data-key', 'data-type');
this.getRef('$', key, `${type}`).val(e.$delegateTarget.value);
this.setBorderImageProperty();
}

[INPUT("$el input[type=number][data-key]")](e) {
var [key, type] = e.$delegateTarget.attrs('data-key', 'data-type');
this.getRef('$', key, `${type}Range`).val(e.$delegateTarget.value);
this.setBorderImageProperty();
}

[CHANGE("$sliceSettingBox select")](e) {
this.setBorderImageProperty();
Expand Down Expand Up @@ -396,7 +345,7 @@ export default class BorderImageProperty extends BaseProperty {
var type = this.refs.$selector.attr("data-selected-value");

if (type === "all") {
var len = new Length(this.getRef("$range").value, this.getRef("$unit").value)
var len = this.children.$allSlice.getValue()
borderImage.reset({
slice: {
top: len.clone(),
Expand All @@ -408,15 +357,8 @@ export default class BorderImageProperty extends BaseProperty {

} else {
keyList.forEach(type => {
borderImage.slice[type] = new Length(
this.getRef("$", type, "Slice").value,
this.getRef("$", type, "SliceUnit").value
);

borderImage.width[type] = new Length(
this.getRef("$", type, "Width").value,
this.getRef("$", type, "WidthUnit").value
);
borderImage.slice[type] = this.children[`$${type}Slice`].getValue()
borderImage.width[type] = this.children[`$${type}Width`].getValue()
});
}

Expand Down
2 changes: 1 addition & 1 deletion src/csseditor/ui/control/panel/property/FontProperty.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export default class FontProperty extends BaseProperty {
/>
</div>
<div class='property-item'>
<RangeEditor ref='$size' label='line-height' key="font-size" onchange="changeRangeEditor" />
<RangeEditor ref='$lineHeight' label='line-height' key="font-size" onchange="changeRangeEditor" />
</div>
<div class='property-item'>
<SelectEditor
Expand Down
6 changes: 3 additions & 3 deletions src/csseditor/ui/control/panel/property/FontSpacingProperty.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,15 @@ export default class FontSpacingProperty extends BaseProperty {
getBody() {
return `
<div class="property-item font-item">
<RangeEditor ref='$size' label='Letter' key="letter-spacing" onchange="changeRangeEditor" />
<RangeEditor ref='$letter' label='Letter' key="letter-spacing" onchange="changeRangeEditor" />
</div>
<div class="property-item font-item">
<RangeEditor ref='$size' label='Word' key="word-spacing" onchange="changeRangeEditor" />
<RangeEditor ref='$word' label='Word' key="word-spacing" onchange="changeRangeEditor" />
</div>
<div class="property-item font-item">
<RangeEditor ref='$size' label='Indent' key="text-indent" onchange="changeRangeEditor" />
<RangeEditor ref='$indent' label='Indent' key="text-indent" onchange="changeRangeEditor" />
</div>
`;
}
Expand Down
2 changes: 1 addition & 1 deletion src/csseditor/ui/control/panel/property/TextShadowProperty.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default class TextShadowProperty extends BaseProperty {
<div class="property-item full text-shadow-item" ref="$shadowList"></div>
`;
}

[LOAD("$shadowList")]() {
var current = editor.selection.current || {};
return `
Expand Down
Loading

0 comments on commit 38f4da2

Please sign in to comment.