refactoring...

kode-team · Jan 13, 2021 · 750e813 · 750e813
1 parent 17158fd
commit 750e813
Show file tree

Hide file tree

Showing 16 changed files with 46 additions and 94 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> <meta http-equiv=Pragma content=no-cache> <meta http-equiv=Expires content=-1> <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.css?b5133ebfbad321779889" rel="stylesheet"></head> <body><script type="text/javascript" src="main.js?112aadb45dc557fae452"></script></body> </html> 
+<!doctype html> <html> <head> <meta http-equiv=Pragma content=no-cache> <meta http-equiv=Expires content=-1> <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.css?a827b80d0e08544b7f20" rel="stylesheet"></head> <body><script type="text/javascript" src="main.js?62eb9a401eca7d91944c"></script></body> </html> 
diff --git a/docs/main.css b/docs/main.css
diff --git a/docs/main.js b/docs/main.js
diff --git a/docs/service-worker.js b/docs/service-worker.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@easylogic/editor",
-  "version": "0.10.2",
+  "version": "0.10.3",
   "description": "Fantastic Web Design Tool ",
   "main": "./dist/editor.js",
   "directories": {

diff --git a/src/assets/extension/manifest.json b/src/assets/extension/manifest.json
@@ -1,6 +1,6 @@
 {
   "manifest_version": 2,
-  "version": "0.10.2",
+  "version": "0.10.3",
   "name": "EasyLogic Studio",
   "description": "Fantastic Web Design Tool ",
   "author": "easylogic",

diff --git a/src/assets/whale/manifest.json b/src/assets/whale/manifest.json
@@ -1,6 +1,6 @@
 {
   "manifest_version": 2,
-  "version": "0.10.2",
+  "version": "0.10.3",
   "name": "EasyLogic Studio",
   "description": "Fantastic Web Design Tool, Web 디자인 툴  ",
   "author": "easylogic",

diff --git a/src/scss/csseditor/editor/input-range-editor.scss b/src/scss/csseditor/editor/input-range-editor.scss
@@ -11,18 +11,23 @@ $border-radius: 3px;
 
     &.has-label {
         grid-template-columns: 60px 1fr;
+
+        &.compact {
+            grid-template-columns: 30px 1fr;
+        }
+
         &.is-removable {
             grid-template-columns: 60px 1fr 12px;
         }
 
         label {
             text-align: left;
             vertical-align: middle;
-            padding: 2px 0px 2px 0px;
-            font-size: 11px;
+            padding: 4px 0px 2px 0px;
+            font-size: 13px;
             white-space: nowrap;
             text-overflow: ellipsis;
-            overflow: hidden;            
+            overflow: hidden;
         }
 
         &.block {

diff --git a/src/scss/themes/csseditor/dark.scss b/src/scss/themes/csseditor/dark.scss
@@ -8,7 +8,7 @@ $selected-color-2: #fc554f81;
 
 $selection-tool-border-color: #3a89f0;
 
-$background-color: #1b1b20; 
+$background-color: #141416; 
 $header-background-color: #1b1b20;
 $selected-background-color: #535353; 
 $font-color: #ffffff;

diff --git a/src/ui/control/Inspector.js b/src/ui/control/Inspector.js
@@ -41,7 +41,7 @@ export default class Inspector extends UIElement {
 
                 <!-- Default Property --> 
                 <PositionProperty />
-                <SizeProperty /> 
+                <!--SizeProperty / --> 
                 <AppearanceProperty />
                 
                 <!-- SVG Item --> 

diff --git a/src/ui/property-editor/InputRangeEditor.js b/src/ui/property-editor/InputRangeEditor.js
@@ -19,6 +19,7 @@ export default class InputRangeEditor extends UIElement {
         return {
             removable: this.props.removable === 'true',
             label: this.props.label || '',
+            compact: this.props.compact === 'true',
             min: +this.props.min || 0,
             max: +this.props.max || 100,
             step: +this.props.step || 1,
@@ -36,7 +37,7 @@ export default class InputRangeEditor extends UIElement {
 
     [LOAD('$body')] () {
 
-        var { min, max, step, label, removable, layout } = this.state
+        var { min, max, step, label, compact, removable, layout } = this.state
 
         var value = +this.state.value.value.toString()
 
@@ -54,6 +55,7 @@ export default class InputRangeEditor extends UIElement {
             class="${OBJECT_TO_CLASS({
                 'input-range-editor': true,
                 'has-label': !!label,
+                'compact': !!compact,
                 'is-removable': removable,
                 [layoutClass] : true 
             })}"

diff --git a/src/ui/property/PositionProperty.js b/src/ui/property/PositionProperty.js
@@ -18,8 +18,10 @@ export default class PositionProperty extends BaseProperty {
     var current = this.$selection.current;
     if (!current) return '';
 
-    if (this.children.$x)  this.children.$x.setValue(current.x);
-    if (this.children.$y)  this.children.$y.setValue(current.y);
+    this.children.$x.setValue(current.x || Length.z());
+    this.children.$y.setValue(current.y || Length.z());
+    this.children.$width.setValue(current.width || Length.z());
+    this.children.$height.setValue(current.height || Length.z());    
   }
 
   isHideHeader() {
@@ -28,25 +30,35 @@ export default class PositionProperty extends BaseProperty {
 
   getBody() {
     return /*html*/`
-      <div class="position-item" ref="$positionItem">
+      <div class="position-item" ref="$positionItem" style='padding: 5px 0px;'>
         <div style='display: grid;grid-template-columns: repeat(2, 1fr); grid-column-gap: 10px;'>
           <div class='property-item animation-property-item' style='padding: 0px;'>
             <div class='group'>
               <span class='add-timeline-property' data-property='x'></span>
             </div>
-            <InputRangeEditor ref='$x' key='x' min="-1000" max='1000' onchange='changRangeEditor' />
+            <InputRangeEditor ref='$x' label="X" compact="true"  key='x' min="-1000" max='1000' onchange='changRangeEditor' />
           </div>
           <div class='property-item animation-property-item' style='padding: 0px;'>
             <div class='group'>
               <span class='add-timeline-property' data-property='y'></span>
             </div>
-            <InputRangeEditor ref='$y' key='y' min="-1000" max='1000' onchange='changRangeEditor' />
+            <InputRangeEditor ref='$y' label="Y" compact="true"  key='y' min="-1000" max='1000' onchange='changRangeEditor' />
           </div>
         </div>
-        <div style='display: grid;grid-template-columns: repeat(2, 1fr); grid-column-gap: 10px; text-align: center;padding: 4px 0px;'>
-          <span>${this.$i18n('position.property.X')}</span>
-          <span>${this.$i18n('position.property.Y')}</span>
-        </div>    
+        <div style='display: grid;grid-template-columns: repeat(2, 1fr); grid-column-gap: 10px; padding-top: 10px;'>
+          <div class='property-item animation-property-item' style='padding:0px'>
+            <div class='group'>
+              <span class='add-timeline-property' data-property='width'></span>
+            </div>
+            <InputRangeEditor ref='$width' label="W" compact="true" key='width' min="0" max='3000' onchange='changRangeEditor' />
+          </div>
+          <div class='property-item animation-property-item' style='padding:0px'>
+            <div class='group'>
+              <span class='add-timeline-property' data-property='height'></span>      
+            </div>
+            <InputRangeEditor ref='$height' label="H" compact="true" key='height' min="0" max='3000' onchange='changRangeEditor' />
+          </div>      
+        </div>        
       </div>
     `;
   }
@@ -56,14 +68,16 @@ export default class PositionProperty extends BaseProperty {
     if (current) {
       this.children.$x.setValue(current.x);
       this.children.$y.setValue(current.y);      
+      this.children.$width.setValue(current.width);
+      this.children.$height.setValue(current.height);         
     }
 
   }
 
 
   [EVENT('changRangeEditor')] (key, value) {
 
-    this.command('setAttribute', 'change position', { 
+    this.command('setAttribute', 'change position or size', { 
       [key]: value
     })
 

diff --git a/src/ui/property/SizeProperty.js b/src/ui/property/SizeProperty.js
diff --git a/src/ui/property/index.js b/src/ui/property/index.js
@@ -1,6 +1,5 @@
 import AppearanceProperty from "./AppearanceProperty";
 import BorderRadiusProperty from "./BorderRadiusProperty";
-import SizeProperty from "./SizeProperty";
 import BoxShadowProperty from "./BoxShadowProperty";
 import BoxModelProperty from "./BoxModelProperty";
 import ContentProperty from "./ContentProperty"; 
@@ -107,7 +106,6 @@ export default {
   ContentProperty,
   BoxModelProperty,
   BoxShadowProperty,
-  SizeProperty,
   BorderRadiusProperty,
   AppearanceProperty,
 };