Refactoring....

kode-team · Dec 5, 2019 · 78c5147 · 78c5147
1 parent 50ececb
commit 78c5147
Show file tree

Hide file tree

Showing 11 changed files with 39 additions and 28 deletions.
diff --git a/docs/bundle.css b/docs/bundle.css
diff --git a/docs/bundle.css.gz b/docs/bundle.css.gz
diff --git a/docs/main.js b/docs/main.js
diff --git a/docs/main.js.gz b/docs/main.js.gz
diff --git a/src/csseditor/ui/property/BaseProperty.js b/src/csseditor/ui/property/BaseProperty.js
@@ -23,7 +23,11 @@ export default class BaseProperty extends UIElement {
             : /*html*/`
             <div class='property-title' ref="$title">
                 <label> 
-                  ${this.hasKeyframe() ? `<span class='add-timeline-property' data-property='${this.getKeyframeProperty()}'></span>` : ''} 
+                  ${
+                    this.hasKeyframe() ? 
+                    /*html*/`<span class='add-timeline-property' data-property='${this.getKeyframeProperty()}'></span>` 
+                    : ''
+                  } 
                   <span ref='$propertyTitle'>${this.getTitle()}</span>
                   <span class='icon'>${icon.chevron_right}</span>
                 </label>

diff --git a/src/csseditor/ui/view/SelectionToolView.js b/src/csseditor/ui/view/SelectionToolView.js
@@ -381,7 +381,12 @@ const SelectionToolBind = class extends SelectionToolEvent {
     }
 
     [BIND('$selectionTool')] () {
+
+        var current = editor.selection.current;
+        var hasLayout = current && current.isLayoutItem()
+
         return {
+            'data-is-layout-item': hasLayout,
             // 1개의 객체를 선택 했을 때 move 판은 이벤트를 걸지 않기 
             'data-selection-length': editor.selection.length
         }

diff --git a/src/scss/csseditor/editor/select-icon-editor.scss b/src/scss/csseditor/editor/select-icon-editor.scss
@@ -18,11 +18,13 @@
     }
 
     .items {
-        // border:1px solid $border-color;
+        border:1px solid $border-color;
         outline: none;
         line-height: 1;
         background-color: transparent;
         height: 24px;
+        border-radius: 5px;
+        background-color: rgb(80, 80, 80);
 
         cursor: pointer;
         display:flex;
@@ -32,27 +34,14 @@
             text-align: center;
             vertical-align: middle;
             padding: 6px 2px;
-            border:1px solid $select-icon-editor-border-color;
             color: white;
             border-right: 0px;
             white-space: pre-wrap;
             word-break: break-all;
             overflow: hidden;
             font-size: 10px;
-            // line-height: 1.3;
             text-transform: uppercase;
 
-            &:first-child {
-                border-top-left-radius: 3px;
-                border-bottom-left-radius: 3px;
-            }
-
-            &:last-child {
-                border-right:1px solid $select-icon-editor-border-color;                
-                border-top-right-radius: 3px;
-                border-bottom-right-radius: 3px;
-            }
-
             svg {
                 width: 16px;
                 height: 16px;
@@ -65,7 +54,8 @@
             &.selected {
                 background-color: $select-icon-editor-selected-color;
                 // border-color: $selected-border-color;
-
+                box-shadow: 0px 0px 10px 0 $select-icon-editor-selected-shadow-color;
+                border-radius: 5px;
                 color: white;
             }
 

diff --git a/src/scss/csseditor/property/property-view.scss b/src/scss/csseditor/property/property-view.scss
@@ -222,12 +222,9 @@
     }
   }
 
-  &.show {
-    // background-color: $property-show-background-color;
-
+  &.show {    
     > .property-title {
-      border-bottom: 1px solid $property-border-color;
-      // background-color: black;  
+      box-shadow: 0 1px 5px 0px black;
       > label {
         .icon {
           transform: rotate(90deg);

diff --git a/src/scss/csseditor/selection-view.scss b/src/scss/csseditor/selection-view.scss
@@ -145,6 +145,20 @@
     &[data-selected-position="to bottom left"] [data-position="to bottom left"] { &:before { opacity: 1; } }
     &[data-selected-position="to bottom right"] [data-position="to bottom right"] { &:before { opacity: 1; } }  
 
+    &[data-is-layout-item="true"][data-selection-length="1"] {
+      [data-position='move'],
+      [data-position='to top'],
+      [data-position='to top left'],
+      [data-position='to top right'],
+      [data-position='to bottom'],
+      [data-position='to bottom left'],
+      [data-position='to bottom right'],
+      [data-position='to left'],
+      [data-position='to right'] {
+        display: none;
+      }
+    }
+
     .selection-tool-item { 
       position: absolute;
       transform: translate(-50%, -50%);

diff --git a/src/scss/themes/csseditor/dark.scss b/src/scss/themes/csseditor/dark.scss
@@ -123,6 +123,7 @@ $transition-item-background-color: #435cb5;
 
 // select icon editor 
 $select-icon-editor-selected-color: #435cb5;
+$select-icon-editor-selected-shadow-color: black;
 $select-icon-editor-border-color: black;
 
 $grid-box-editor-button-background-color: #435cb5;
diff --git a/src/util/functions/func.js b/src/util/functions/func.js
@@ -180,21 +180,21 @@ export function CSS_TO_STRING(style, postfix = '') {
       .filter(key => newStyle[key])
       .map(key => `${key}: ${newStyle[key]}`)
       .join(";" + postfix);
-  }
+}
 
 
-export function STRING_TO_CSS (str = '') {
+export function STRING_TO_CSS (str = '', splitChar = ';', keySplitChar = ':') {
 
     str = str + "";
 
     var style = {}
 
     if (str === '') return style;
 
-    str.split(';').forEach(it => {
-       var [key, ...value] = it.split(':').map(it => it.trim())
+    str.split(splitChar).forEach(it => {
+       var [key, ...value] = it.split(keySplitChar).map(it => it.trim())
        if (key != '') {
-        style[key] = value.join(':'); 
+        style[key] = value.join(keySplitChar); 
        }
     })