Refactoring....

kode-team · May 30, 2020 · 33e051e · 33e051e
1 parent 64a61b3
commit 33e051e
Show file tree

Hide file tree

Showing 20 changed files with 71 additions and 49 deletions.
diff --git a/dist/editor.js b/dist/editor.js
diff --git a/dist/main.css b/dist/main.css
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!doctype html> <html> <head> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-139740394-1"></script> <link rel=icon href=icon.png sizes=128x128> <script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-139740394-1")</script> <script>!function(e,n,a,t){e.dmndata=[],e.jenniferFront=function(e){window.dmndata.push(e)},e.dmnaid=t,e.dmnatime=new Date,e.dmnanocookie=!1,e.dmnajennifer="JENNIFER_FRONT@INTG";var d=6e4*Math.floor((new Date).getTime()/6e4),c=n.createElement(a);c.src="https://d-collect.jennifersoft.com/"+t+"/demian.js?"+d,c.async=!0,n.getElementsByTagName(a)[0].parentNode.appendChild(c)}(window,document,"script","cc474308-b29c-af41-7393-409d285dca6e")</script> <meta charset=utf-8 /> <title>Fantastic Web Design Tool</title> <meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no"/> <meta name=description content="You can make simply web with Web editor. "/> <meta name=keywords content=html5,css,svg,editor> <meta name=author content=easylogic> <meta property=og:title content="Fantastic Web Design Tool"/> <meta property=og:type content=website /> <meta property=og:description content="You can make simply web with Web editor. "/> <meta property=og:url content=https://www.easylogic.studio /> <meta property=og:image content=https://www.easylogic.studio/images/editor.png /> <meta property=twitter:card content=summary_large_image> <meta property=twitter:url content=https://www.easylogic.studio> <meta property=twitter:title content="Fantastic Web Design Tool"> <meta property=twitter:description content="You can make simply web with Web editor. "> <meta property=twitter:image content=https://www.easylogic.studio/images/editor.png> <meta name="apple-mobile-web-app-title" content="EasyLogic Studio" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" /><link rel="manifest" href="manifest.d340e7a054029504e2ef48b504944d74.json" crossorigin="use-credentials" /><link href="main.d06ee2cb6410bd1849a4.css" rel="stylesheet"></head> <body><script type="text/javascript" src="main.3d45da54b176e9d5d62d.js"></script></body> </html> 
+<!doctype html> <html> <head> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-139740394-1"></script> <link rel=icon href=icon.png sizes=128x128> <script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-139740394-1")</script> <script>!function(e,n,a,t){e.dmndata=[],e.jenniferFront=function(e){window.dmndata.push(e)},e.dmnaid=t,e.dmnatime=new Date,e.dmnanocookie=!1,e.dmnajennifer="JENNIFER_FRONT@INTG";var d=6e4*Math.floor((new Date).getTime()/6e4),c=n.createElement(a);c.src="https://d-collect.jennifersoft.com/"+t+"/demian.js?"+d,c.async=!0,n.getElementsByTagName(a)[0].parentNode.appendChild(c)}(window,document,"script","cc474308-b29c-af41-7393-409d285dca6e")</script> <meta charset=utf-8 /> <title>Fantastic Web Design Tool</title> <meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no"/> <meta name=description content="You can make simply web with Web editor. "/> <meta name=keywords content=html5,css,svg,editor> <meta name=author content=easylogic> <meta property=og:title content="Fantastic Web Design Tool"/> <meta property=og:type content=website /> <meta property=og:description content="You can make simply web with Web editor. "/> <meta property=og:url content=https://www.easylogic.studio /> <meta property=og:image content=https://www.easylogic.studio/images/editor.png /> <meta property=twitter:card content=summary_large_image> <meta property=twitter:url content=https://www.easylogic.studio> <meta property=twitter:title content="Fantastic Web Design Tool"> <meta property=twitter:description content="You can make simply web with Web editor. "> <meta property=twitter:image content=https://www.easylogic.studio/images/editor.png> <meta name="apple-mobile-web-app-title" content="EasyLogic Studio" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" /><link rel="manifest" href="manifest.d340e7a054029504e2ef48b504944d74.json" crossorigin="use-credentials" /><link href="main.b7cffefb94633c2507fd.css" rel="stylesheet"></head> <body><script type="text/javascript" src="main.3ef0ac450d8ae77bc9d5.js"></script></body> </html> 
diff --git a/docs/main.3d45da54b176e9d5d62d.js → docs/main.3ef0ac450d8ae77bc9d5.js b/docs/main.3d45da54b176e9d5d62d.js → docs/main.3ef0ac450d8ae77bc9d5.js
diff --git a/docs/main.b7cffefb94633c2507fd.css b/docs/main.b7cffefb94633c2507fd.css
diff --git a/docs/main.d06ee2cb6410bd1849a4.css b/docs/main.d06ee2cb6410bd1849a4.css
diff --git a/docs/service-worker.js b/docs/service-worker.js
diff --git a/src/csseditor/ui/property-editor/InputRangeEditor.js b/src/csseditor/ui/property-editor/InputRangeEditor.js
@@ -58,7 +58,7 @@ export default class InputRangeEditor extends UIElement {
                 [layoutClass] : true 
             })
         })}>
-            ${label ? `<label>${label}</label>` : '' }
+            ${label ? `<label title="${label}">${label}</label>` : '' }
             <div class='range-editor-type' data-type='range'>
                 <div class='area'>
                     <input type='number' ref='$propertyNumber' value="${realValue}" min="${min}" max="${max}" step="${step}" tabIndex="1" />

diff --git a/src/csseditor/ui/property-editor/NumberRangeEditor.js b/src/csseditor/ui/property-editor/NumberRangeEditor.js
@@ -43,7 +43,7 @@ export default class NumberRangeEditor extends UIElement {
 
         return /*html*/`
         <div class='number-range-editor ${hasLabel} ${isRemovable} ${layoutClass}' data-selected-type='${type}'>
-            ${label ? `<label>${label}</label>` : '' }
+            ${label ? `<label title="${label}">${label}</label>` : '' }
             <div class='range-editor-type' data-type='range'>
                 <div class='area'>
                     <input type='range' ref='$property' value="${realValue}" min="${min}" max="${max}" step="${step}" />

diff --git a/src/csseditor/ui/property-editor/RangeEditor.js b/src/csseditor/ui/property-editor/RangeEditor.js
@@ -72,7 +72,7 @@ export default class RangeEditor extends UIElement {
                 [layoutClass] : true 
             })
         })}>
-            ${label ? `<label>${label}</label>` : '' }
+            ${label ? `<label title="${label}">${label}</label>` : '' }
             <div class='range-editor-type' data-type='range'>
                 <input type='range' ref='$property' value="${realValue}" min="${min}" max="${max}" step="${step}" /> 
                 <div class='area' ref='$rangeArea'>

diff --git a/src/csseditor/ui/property-editor/SelectEditor.js b/src/csseditor/ui/property-editor/SelectEditor.js
@@ -27,7 +27,7 @@ export default class SelectEditor extends UIElement {
         var hasTabIndex = !!tabIndex ? 'tabIndex="1"' : ''
         return /*html*/`
             <div class='select-editor ${hasLabel}'>
-                ${label ? `<label>${label}</label>` : '' }
+                ${label ? `<label title="${label}">${label}</label>` : '' }
                 <select ref='$options' ${hasTabIndex}></select>
             </div>
         `

diff --git a/src/csseditor/ui/property-editor/SelectIconEditor.js b/src/csseditor/ui/property-editor/SelectIconEditor.js
@@ -29,7 +29,7 @@ export default class SelectIconEditor extends UIElement {
         var hasLabel = !!label ? 'has-label' : ''
         return /*html*/`
             <div class='select-icon-editor ${hasLabel}'>
-                ${label ? `<label>${label}</label>` : '' }
+                ${label ? `<label title="${label}">${label}</label>` : '' }
                 <div class='items' ref='$options'></div>
             </div>
         `

diff --git a/src/csseditor/ui/property-editor/StrokeDashArrayEditor.js b/src/csseditor/ui/property-editor/StrokeDashArrayEditor.js
@@ -64,14 +64,15 @@ export default class StrokeDashArrayEditor extends UIElement {
         <div class='dasharray-item'>
           <NumberRangeEditor 
             ref='$${num}' 
-            label='${num}' 
+            label='${num}'
             key='${index}' 
             value="0" 
             min="0"
             max="1000"
             step="1"
             onchange="changeRangeEditor" 
           />
+          <button type="button" data-index="${index}" class='delete'>${icon.remove2}</button>
         </div>
       `
     });
@@ -90,6 +91,15 @@ export default class StrokeDashArrayEditor extends UIElement {
     this.refresh();
   }
 
+  [CLICK('$body .delete')] (e) {
+    const index = +e.$dt.attr('data-index');
+
+    this.state.value.splice(index, 1);
+
+    this.refresh();
+    this.modifyStrokeDashArray();    
+  }
+
 
   modifyStrokeDashArray () {
     this.parent.trigger(this.props.onchange, this.props.key,  this.toStringValue(), this.props.params);

diff --git a/src/csseditor/ui/property/BackgroundColorProperty.js b/src/csseditor/ui/property/BackgroundColorProperty.js
@@ -32,8 +32,8 @@ export default class BackgroundColorProperty extends BaseProperty {
             ref='$zIndex' 
             key='z-index' 
             label='${this.$i18n('background.color.property.zindex')}'
-            min="-1"
-            max="100000"
+            min="-1000"
+            max="1000"
             step="1"
             onchange="changeSelect" />
         </div>

diff --git a/src/scss/csseditor/editor/input-range-editor.scss b/src/scss/csseditor/editor/input-range-editor.scss
@@ -19,8 +19,10 @@ $border-radius: 3px;
             text-align: left;
             vertical-align: middle;
             padding: 2px 0px 2px 0px;
-
             font-size: 11px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;            
         }
 
         &.block {

diff --git a/src/scss/csseditor/editor/number-range-editor.scss b/src/scss/csseditor/editor/number-range-editor.scss
@@ -15,8 +15,10 @@
             text-align: left;
             vertical-align: middle;
             padding: 7px 0px 2px 0px;
-
-            font-size: 12px;
+            font-size: 11px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;            
         }
 
         &.block {

diff --git a/src/scss/csseditor/editor/range-editor.scss b/src/scss/csseditor/editor/range-editor.scss
@@ -16,8 +16,10 @@ $border-radius: 3px;
             text-align: left;
             vertical-align: middle;
             padding: 7px 0px 2px 0px;
-
             font-size: 11px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;            
         }
 
         &.block {

diff --git a/src/scss/csseditor/editor/select-editor.scss b/src/scss/csseditor/editor/select-editor.scss
@@ -20,6 +20,9 @@
             vertical-align: middle;
             padding: 6px 4px 2px 0px;
             font-size: 11px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
 
         }
 

diff --git a/src/scss/csseditor/editor/select-icon-editor.scss b/src/scss/csseditor/editor/select-icon-editor.scss
@@ -13,7 +13,9 @@
             vertical-align: middle;
             padding: 6px 4px 2px 0px;
             font-size: 11px;
-
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
         }
     }
 

diff --git a/src/scss/csseditor/editor/stroke-dasharray-editor.scss b/src/scss/csseditor/editor/stroke-dasharray-editor.scss
@@ -1,17 +1,18 @@
 .stroke-dasharray-editor {
     .dasharray-item {
         margin-bottom: 3px;   
+        display:grid;
+        grid-template-columns: 1fr 20px;
+        grid-column-gap: 2px;
 
     }
 
 
     > .tools {
         label {
-            color: $font-color;
-            svg {
-                width: 16px;
-                height: 16px;
-            }
+            color: $selected-font-color;
+            vertical-align: middle;
+            cursor: pointer;
         }
     }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html> <html> <head> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-139740394-1"></script> <link rel=icon href=icon.png sizes=128x128> <script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer\|\|[],gtag("js",new Date),gtag("config","UA-139740394-1")</script> <script>!function(e,n,a,t){e.dmndata=[],e.jenniferFront=function(e){window.dmndata.push(e)},e.dmnaid=t,e.dmnatime=new Date,e.dmnanocookie=!1,e.dmnajennifer="JENNIFER_FRONT@INTG";var d=6e4*Math.floor((new Date).getTime()/6e4),c=n.createElement(a);c.src="https://d-collect.jennifersoft.com/"+t+"/demian.js?"+d,c.async=!0,n.getElementsByTagName(a)[0].parentNode.appendChild(c)}(window,document,"script","cc474308-b29c-af41-7393-409d285dca6e")</script> <meta charset=utf-8 /> <title>Fantastic Web Design Tool</title> <meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no"/> <meta name=description content="You can make simply web with Web editor. "/> <meta name=keywords content=html5,css,svg,editor> <meta name=author content=easylogic> <meta property=og:title content="Fantastic Web Design Tool"/> <meta property=og:type content=website /> <meta property=og:description content="You can make simply web with Web editor. "/> <meta property=og:url content=https://www.easylogic.studio /> <meta property=og:image content=https://www.easylogic.studio/images/editor.png /> <meta property=twitter:card content=summary_large_image> <meta property=twitter:url content=https://www.easylogic.studio> <meta property=twitter:title content="Fantastic Web Design Tool"> <meta property=twitter:description content="You can make simply web with Web editor. "> <meta property=twitter:image content=https://www.easylogic.studio/images/editor.png> <meta name="apple-mobile-web-app-title" content="EasyLogic Studio" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" /><link rel="manifest" href="manifest.d340e7a054029504e2ef48b504944d74.json" crossorigin="use-credentials" /><link href="main.d06ee2cb6410bd1849a4.css" rel="stylesheet"></head> <body><script type="text/javascript" src="main.3d45da54b176e9d5d62d.js"></script></body> </html>
		<!doctype html> <html> <head> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-139740394-1"></script> <link rel=icon href=icon.png sizes=128x128> <script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer\|\|[],gtag("js",new Date),gtag("config","UA-139740394-1")</script> <script>!function(e,n,a,t){e.dmndata=[],e.jenniferFront=function(e){window.dmndata.push(e)},e.dmnaid=t,e.dmnatime=new Date,e.dmnanocookie=!1,e.dmnajennifer="JENNIFER_FRONT@INTG";var d=6e4*Math.floor((new Date).getTime()/6e4),c=n.createElement(a);c.src="https://d-collect.jennifersoft.com/"+t+"/demian.js?"+d,c.async=!0,n.getElementsByTagName(a)[0].parentNode.appendChild(c)}(window,document,"script","cc474308-b29c-af41-7393-409d285dca6e")</script> <meta charset=utf-8 /> <title>Fantastic Web Design Tool</title> <meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no"/> <meta name=description content="You can make simply web with Web editor. "/> <meta name=keywords content=html5,css,svg,editor> <meta name=author content=easylogic> <meta property=og:title content="Fantastic Web Design Tool"/> <meta property=og:type content=website /> <meta property=og:description content="You can make simply web with Web editor. "/> <meta property=og:url content=https://www.easylogic.studio /> <meta property=og:image content=https://www.easylogic.studio/images/editor.png /> <meta property=twitter:card content=summary_large_image> <meta property=twitter:url content=https://www.easylogic.studio> <meta property=twitter:title content="Fantastic Web Design Tool"> <meta property=twitter:description content="You can make simply web with Web editor. "> <meta property=twitter:image content=https://www.easylogic.studio/images/editor.png> <meta name="apple-mobile-web-app-title" content="EasyLogic Studio" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" /><link rel="manifest" href="manifest.d340e7a054029504e2ef48b504944d74.json" crossorigin="use-credentials" /><link href="main.b7cffefb94633c2507fd.css" rel="stylesheet"></head> <body><script type="text/javascript" src="main.3ef0ac450d8ae77bc9d5.js"></script></body> </html>