add viewer command

css/common/bootstrap.less

@@ -142,4 +142,40 @@ hr {
         line-height: 18px;
         margin-right: 0;
     }
+}
+
+
+// 命令组
+.command-groups {
+    height: 40px;
+    line-height: 40px;
+    padding-left: 8px;
+    background: rgba(112, 119, 128, 0.8);
+
+    >li {
+        float: left;
+        padding: 0 8px;
+        color: #FFF;
+        cursor: pointer;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+
+        >i {
+            font-style: normal;
+            text-decoration: underline;
+        }
+
+        &:hover {
+            background: lighten(#707781, 10%);
+        }
+    }
+
+    >li[data-disabled] {
+        color: #B9BDC1;
+    }
+
+    >li[data-on] {
+        background: darken(#707781, 10%);
+    }
 }

css/common/common.less

@@ -76,18 +76,29 @@ body, html {
 
 .main {
     margin-left: 180px;
-    padding-top: @top-height;
+    padding-top: @top-height + @command-groups-height;
     height: 100%;
     background: #BCC5CD;
+
     .glyf-list {
         padding: 10px 0 0 10px;
     }
+
+    .command-groups {
+        margin-top: -40px;
+        display: none;
+    }
 }
 
 
 
 .main.editing {
     margin-left: 70%;
+    padding-top: @top-height;
+    
+    .command-groups {
+        display: none;
+    }
 }
 
 // loading 动画

css/common/def.less

@@ -1,5 +1,6 @@
 
-
-
 // 头部高度
-@top-height: 50px;
+@top-height: 50px;
+
+// 菜单组高度
+@command-groups-height: 40px;