add baidu style

2014-12-07 18:28:26 +08:00 · 2014-12-07 18:28:26 +08:00 · 05d4b4c1dd
commit 05d4b4c1dd
parent a06a8cc97f
8 changed files with 158 additions and 46 deletions
--- a/css/common/bootstrap.less
+++ b/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 {
-        color: #FFF;
-        background: darken(#738089, 10%);
+    &:focus, {
+        background: #323842;
+        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;
+    }
 }
--- a/css/common/common.less
+++ b/css/common/common.less
@ -47,11 +47,6 @@ body, html {
    height: 51px;
    min-width: 1024px;
    top: 0;
-    
-    .btn {
-        margin-right: 10px;
-        margin-top: 10px;
-    }

    >.logo {
        width: 180px;
@ -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;
--- a/css/common/glyf-list.less
+++ b/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;
-        }
-    }
 }


--- a/css/common/ico.less
+++ b/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;
--- a/demo/css/editor.css
+++ b/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;
--- a/font/fonteditor.ttf
+++ b/font/fonteditor.ttf
--- a/index.html
+++ b/index.html
@ -10,32 +10,47 @@

    <section class="navbar" role="navigation">
        <div class="logo"></div>
-        <div class="action-groups">
-            <div class="btn-group">
-                <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">
-                    插入
-                    <span class="caret"></span>
-                </button>
+        <div class="action-groups btn-groups">

+            <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>
-            <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>
+            <i class="split"></i>

-            <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>
--- a/src/ttf/ttfwriter.js
+++ b/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);
            }