add baidu style

css/common/bootstrap.less

@@ -38,8 +38,19 @@
 }
 
 .dropdown-menu {
-    a {
+    margin-top: 0;
+    border-radius: 0;
+    background: #323842;
+    border: none;
+    >li>a {
         cursor: pointer;
+        color: #B6CBDD;
+
+        &:hover,
+        &:focus {
+            color: #FFF;
+            background: #232830;
+        }
     }
 }
 
@@ -73,18 +84,62 @@ hr {
     background: #F9F9F9;
 }
 
+.btn-groups {
+    line-height: 50px;
+
+    >.split {
+        width: 1px;
+        height: 30px;
+        line-height: 30px;
+        background: #D8D8D8;
+        margin: 0 8px;
+        display: inline-block;
+        vertical-align: middle;
+    }
+}
+
 .btn-flat {
     border-radius: 0;
     color: #FFF;
     background: #738089;
 
     &:hover,
-    &:focus {
+    &:focus, {
-        color: #FFF;
+        background: #323842;
-        background: darken(#738089, 10%);
+        color: #B6CBDD;
+        outline: none;
     }
 
-    .ico {
+    >.ico-left {
         margin-right: 8px;
     }
+
+    >.ico {
+        pointer-events: none;
+    }
+
+    >.drop {
+        display: inline-block;
+    }
+}
+
+.btn-new {
+    color: #FFF;
+    background: #4A90E2;
+}
+
+.btn-preview {
+    color: #FFF;
+    background: #28B4A0;
+}
+
+.btn-ico {
+    padding: 5px 10px;
+    font-size: 12px;
+    line-height: 1.5;
+    >.ico {
+        font-size: 16px;
+        line-height: 18px;
+        margin-right: 0;
+    }
 }

css/common/common.less

@@ -48,11 +48,6 @@ body, html {
     min-width: 1024px;
     top: 0;
 
-    .btn {
-        margin-right: 10px;
-        margin-top: 10px;
-    }
-
     >.logo {
         width: 180px;
         height: 50px;
@@ -66,16 +61,6 @@ body, html {
     }
 }
 
-
-#export-btn {
-    margin-right: 10px;
-    margin-top: 10px;
-    display: inline-block;
-    .btn {
-      margin: 0;
-    }
-}
-
 .container {
     display: flex;
     flex: 1;

css/common/glyf-list.less

@@ -56,6 +56,9 @@
         .glyf {
             border-color: #232830;
         }
+        .name {
+            color: #FFF;
+        }
     }
 
     >.glyf-item:hover {
@@ -65,6 +68,9 @@
         .i-del {
             display: block;
         }
+        .i-edit {
+            display: block;
+        }
     }
 
     >.compound {
@@ -79,13 +85,6 @@
             fill: blue!important;
         }
     }
-
-
-    >.glyf-item:hover {
-        .i-edit {
-            display: block;
-        }
-    }
 }
 
 

css/common/ico.less

@@ -67,6 +67,38 @@
     .i-ico('\e003');
 }
 
+.i-undo {
+    .i-ico('\e001');
+}
+
+.i-redo {
+    .i-ico('\e002');
+}
+
+.i-down {
+    .i-ico('\e00e');
+}
+
+.i-left {
+    .i-ico('\e00a');
+}
+
+.i-ttf {
+    .i-ico('\e00f');
+}
+
+.i-woff {
+    .i-ico('\e010');
+}
+
+.i-zip {
+    .i-ico('\e011');
+}
+
+.i-save {
+    .i-ico('\e022');
+}
+
 .close-editor {
     position: absolute;
     right: 0;

demo/css/editor.css

@@ -56,6 +56,30 @@ a:hover {
 .i-add:before {
   content: '\e003';
 }
+.i-undo:before {
+  content: '\e001';
+}
+.i-redo:before {
+  content: '\e002';
+}
+.i-down:before {
+  content: '\e00e';
+}
+.i-left:before {
+  content: '\e00a';
+}
+.i-ttf:before {
+  content: '\e00f';
+}
+.i-woff:before {
+  content: '\e010';
+}
+.i-zip:before {
+  content: '\e011';
+}
+.i-save:before {
+  content: '\e022';
+}
 .close-editor {
   position: absolute;
   right: 0;

index.html

@@ -10,32 +10,47 @@
 
     <section class="navbar" role="navigation">
         <div class="logo"></div>
-        <div class="action-groups">
+        <div class="action-groups btn-groups">
-            <div class="btn-group">
-                <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">
-                    插入
-                    <span class="caret"></span>
-                </button>
 
+            <button data-action="add-new" type="button" class="btn btn-flat btn-new btn-sm"><i class="ico ico-left i-add"></i>新字形</button>
+
+            <i class="split"></i>
+
+            <button data-action="undo" type="button" class="btn btn-flat btn-ico"><i class="ico i-undo"></i></button>
+            <button data-action="redo" type="button" class="btn btn-flat btn-ico"><i class="ico i-redo"></i></button>
+
+            <i class="split"></i>
+
+            <div class="btn-group">
+                <button type="button" class="btn btn-flat btn-sm dropdown-toggle" data-toggle="dropdown">
+                    导入
+                    <span class="ico i-down"></span>
+                </button>
                 <ul class="dropdown-menu" role="menu">
-                    <li data-action="add-new"><a>新字形</a></li>
                     <li data-action="import"  title="导入ttf,woff,svg,eot格式字体文件"><a>从文件中导入</a></li>
                     <li data-action="add-online"><a>在线字体</a></li>
                     <li data-action="add-url"><a>字体URL</a></li>
                 </ul>
             </div>
 
-            <a id="export-btn" href="#" data-action="export" data-type="ttf" class="btn btn-success btn-sm">导出ttf</a>
+            <i class="split"></i>
-            <a id="export-btn-woff" href="#" data-action="export" data-type="woff" class="btn btn-success btn-sm">导出woff</a>
-            <a id="export-btn-zip" href="#" data-action="export" data-type="zip" class="btn btn-success btn-sm" title="包含ttf,woff,eot,svg等格式">导出zip</a>
 
-            <button data-action="save" type="button" class="btn btn-warning btn-sm">保存项目</button>
+            <a id="export-btn" href="#" data-action="export" data-type="ttf" class="btn btn-flat btn-ico" title="导出ttf"><i class="ico i-ttf"></i></a>
+            <a id="export-btn-woff" href="#" data-action="export" data-type="woff" class="btn btn-flat btn-ico" title="导出woff"><i class="ico i-woff"></i></a>
+            <a id="export-btn-zip" href="#" data-action="export" data-type="zip" class="btn btn-flat btn-ico" title="导出zip,包含ttf,woff,eot,svg等格式"><i class="ico i-zip"></i></a>
+
+            <i class="split"></i>
+
+
+            <button data-action="save" type="button" class="btn btn-flat btn-sm"><i class="ico ico-left i-save"></i>保存项目</button>
+
+            <i class="split"></i>
 
             <div class="btn-group">
 
-                <button type="button" class="btn btn-info btn-sm dropdown-toggle" data-toggle="dropdown">
+                <button type="button" class="btn btn-flat btn-sm dropdown-toggle" data-toggle="dropdown">
                     调整字形
-                    <span class="caret"></span>
+                    <span class="drop ico i-down"></span>
                 </button>
 
                 <ul class="dropdown-menu" role="menu">
@@ -47,9 +62,9 @@
 
             <div class="btn-group">
 
-                <button type="button" class="btn btn-info btn-sm dropdown-toggle" data-toggle="dropdown">
+                <button type="button" class="btn btn-flat btn-sm dropdown-toggle" data-toggle="dropdown">
                     设置
-                    <span class="caret"></span>
+                    <span class="drop ico i-down"></span>
                 </button>
 
                 <ul class="dropdown-menu" role="menu">
@@ -60,11 +75,13 @@
                 </ul>
             </div>
 
+            <i class="split"></i>
+
             <div class="btn-group">
 
-                <button type="button" class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown">
+                <button type="button" class="btn btn-flat btn-preview btn-sm dropdown-toggle" data-toggle="dropdown">
                     预览
-                    <span class="caret"></span>
+                    <span class="drop ico i-down"></span>
                 </button>
 
                 <ul class="dropdown-menu" role="menu">
@@ -80,7 +97,7 @@
 
     <section class="sidebar">
         <div class="project-btns action-groups">
-            <button data-action="new" type="button" class="btn btn-flat btn-sm" title="新建ttf字体文件"><i class="ico i-new"></i>新建</button><button data-action="open" type="button" class="btn btn-flat btn-sm" title="打开ttf,woff,eot格式字体文件"><i class="ico i-open"></i>打开</button>
+            <button data-action="new" type="button" class="btn btn-flat btn-sm" title="新建ttf字体文件"><i class="ico ico-left i-new"></i>新建</button><button data-action="open" type="button" class="btn btn-flat btn-sm" title="打开ttf,woff,eot格式字体文件"><i class="ico ico-left i-open"></i>打开</button>
         </div>
         <div class="project">
             <div class="project-title">项目列表</div>

src/ttf/ttfwriter.js

@@ -57,7 +57,7 @@ define(
 
             ttf.head.modified = Date.now();
 
-            if (!ttf.glyf) {
+            if (!ttf.glyf || ttf.glyf.length === 0) {
                 error.raise(10201);
             }