modify command mode

add editor command

css/common/bootstrap.less

@@ -133,6 +133,11 @@ hr {
     background: #28B4A0;
 }
 
+.btn-confirm {
+    color: #FFF;
+    background: #4A90E2;
+}
+
 .btn-ico {
     padding: 5px 10px;
     font-size: 12px;
@@ -148,12 +153,14 @@ hr {
 // 命令组
 .command-groups {
     height: 40px;
-    line-height: 40px;
     padding-left: 8px;
+    overflow: hidden;
     background: rgba(112, 119, 128, 0.8);
 
     >li {
+
         float: left;
+        line-height: 40px;
         padding: 0 8px;
         color: #FFF;
         cursor: pointer;
@@ -166,11 +173,20 @@ hr {
             text-decoration: underline;
         }
 
+        >.ico {
+            font-size: 20px;
+            text-decoration: none;
+        }
+
         &:hover {
             background: lighten(#707781, 10%);
         }
     }
 
+    >li[data-theme="ico"] {
+        padding: 0 12px;
+    }
+
     >li[data-disabled] {
         color: #B9BDC1;
     }
@@ -178,4 +194,12 @@ hr {
     >li[data-on] {
         background: darken(#707781, 10%);
     }
+
+    >[data-split] {
+        padding: 0;
+        width: 1px;
+        height: 40px;
+        background: lighten(#707781, 15%);
+        pointer-events: none;
+    }
 }

css/common/common.less

@@ -127,11 +127,38 @@ body, html {
     position: fixed;
     width: 70%;
     top: @top-height;
+    padding-top: @command-groups-height;
     bottom: 0;
     z-index: 1;
     background: #FEFEFE;
     border-right: 1px solid #DDD;
     display: none;
+
+    .command-groups {
+        background: rgba(112, 119, 128, 1);
+        margin-top: -40px;
+    }
+    
+    .close-editor {
+        position: absolute;
+        right: 0;
+        top: 0;
+        padding-right: 5px;
+        z-index: 100;
+        font-size: 20px;
+        line-height: 38px;
+        color: #FFF;
+        display: none;
+        &:hover {
+            cursor: pointer
+        }
+    }
+
+    &:hover {
+        .close-editor {
+            display: block;
+        }
+    }
 }
 
 .editor.editing {

css/common/editor.less

@@ -92,9 +92,3 @@
     }
 }
 
-.editor:hover {
-    .close-editor {
-        display: block;
-    }
-}
-

css/common/ico.less

@@ -33,8 +33,13 @@
     .icon();
 }
 
+.i-leave {
+    .i-ico('\e00c');
+}
+
 .i-edit,
-.i-del {
+.i-del,
+.i-leave {
     font-size: 12px;
     &:hover {
         cursor: pointer;
@@ -99,18 +104,62 @@
     .i-ico('\e022');
 }
 
-.close-editor {
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: 100;
-    padding: 0 3px;
-    z-index: 100;
-    font-size: 14px;
-    background: #FFF;
-    border-left: 1px solid #000;
-    display: none;
-    &:hover {
-        cursor: pointer
-    }
+
+
+// glyf编辑器
+
+.i-upshape {
+    .i-ico('\e014');
 }
+
+.i-downshape {
+    .i-ico('\e00b');
+}
+
+.i-reversepoints {
+    .i-ico('\e00d');
+}
+
+.i-alignleft {
+    .i-ico('\e006');
+}
+
+.i-aligncenter {
+    .i-ico('\e004');
+}
+
+.i-alignright {
+    .i-ico('\e007');
+}
+
+.i-aligntop {
+    .i-ico('\e008');
+}
+
+.i-alignmiddle {
+    .i-ico('\e005');
+}
+
+.i-aligndescent {
+    .i-ico('\e009');
+}
+
+.i-alignbaseline {
+    .i-ico('\e009');
+}
+
+.i-rotateleft {
+    .i-ico('\e01c');
+}
+
+.i-rotateright {
+    .i-ico('\e01d');
+}
+
+.i-flip {
+    .i-ico('\e013');
+}
+
+.i-mirror {
+    .i-ico('\e012');
+}