icon

static/css/base.css

@@ -48,19 +48,32 @@ ul {
     font-style: normal;
 }
 
-font-ico {
+.font-ico {
     font-family: 'icomoon';
-	speak: none;
-	font-style: normal;
-	font-weight: normal;
-	font-variant: normal;
-	text-transform: none;
-	line-height: 1;
-
     /* Better Font Rendering =========== */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
+
+.ico-play:before {
+    content: "\e605";
+}
+
+.ico-save:before {
+    content: "\f0c7";
+}
+
+.ico-fullscreen:before {
+    content: "\e601";
+}
+
+.ico-format:before {
+    content: "\e60b";
+}
+
+.icon-buildrun:before {
+    content: "\e607";
+}
 /* end reset & function */
 
 /* start frame */
@@ -109,11 +122,12 @@ font-ico {
 }
 
 .tabs > div {
-    background-color: #D1D1D1;
-    float: left;
-    border-right: 1px solid #9B9B9B;
-    padding: 2px 5px;
+    background-color: #d1d1d1;
+    border-right: 1px solid #9b9b9b;
     color: #333;
+    float: left;
+    line-height: 19px;
+    padding: 0 5px
 }
 
 .tabs > div.current {
@@ -121,7 +135,17 @@ font-ico {
 }
 
 .tabs .ico-close {
+    color: #666;
+}
+
+.tabs .ico-close:hover {
+    color: #333;
+}
+
+.tabs .ico-close:before {
+    content: "\e60a";
     cursor: pointer;
+
 }
 /* end tabs */
 
@@ -175,6 +199,18 @@ font-ico {
     padding: 5px;
     text-decoration: none;
 }
+
+.toolbars > span {
+    color: #666;
+    cursor: pointer;
+    font-size: 16px;
+    line-height: 25px;
+    margin-right: 5px;
+}
+
+.toolbars > span:hover {
+    color: #333;
+}
 /* end menu */
 
 /* start editor */
@@ -183,6 +219,14 @@ font-ico {
     width: 100%
 }
 
+.edit-header .ico {
+    background-image: url("../images/ico-file.png");
+    float: left;
+    height: 16px;
+    margin: 2px 0 0 -2px;
+    width: 16px;
+}
+
 .CodeMirror-focused .cm-matchhighlight {
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
     background-position: bottom;

static/js/editor.js

@@ -186,7 +186,8 @@ var editors = {
 
         editors.tabs.add({
             id: id,
-            title: '<span title="' + wide.curNode.path + '">' + wide.curNode.name + '</span>',
+            title: '<span title="' + wide.curNode.path + '"><span class="' 
+                    + wide.curNode.iconSkin + 'ico"></span>' + wide.curNode.name + '</span>',
             content: '<textarea id="editor' + id + '"></textarea>'
         });
 

static/js/tabs.js

@@ -33,7 +33,7 @@ $.extend(Tabs.prototype, {
         $tabsPanel.children("div").hide();
 
         $tabs.append('<div class="current" data-index="' + data.id + '">'
-                + data.title + '<span class="ico-close"> X</span></div>');
+                + data.title + '<span class="ico-close font-ico"></span></div>');
         $tabsPanel.append('<div data-index="' + data.id + '">' + data.content
                 + '</div>');
     },

view/index.html

@@ -93,10 +93,10 @@
             </ul>
 
             <div class="toolbars fn-right">
-                <button onclick="wide.run()">{{.i18n.build_n_run}}</button>
-                <button onclick="wide.save()">{{.i18n.save}}</button>
-                <button onclick="wide.fmt()">{{.i18n.format}}</button>
-                <span class="fn-none ico-fullscreen" onclick="editors.fullscreen()">{{.i18n.full_screen}}</span>
+                <span onclick="wide.run()" class="font-ico icon-buildrun" title="{{.i18n.build_n_run}}"></span>
+                <span onclick="wide.save()" title="{{.i18n.save}}" class="font-ico ico-save"></span>
+                <span onclick="wide.fmt()" class="ico-format font-ico" title="{{.i18n.format}}"></span>
+                <span class="fn-none font-ico ico-fullscreen" onclick="editors.fullscreen()" title="{{.i18n.full_screen}}"></span>
             </div>
         </div>
 
@@ -137,7 +137,6 @@
                     <div class="tabs">
                         <div class="current" data-index="files_3">
                             <span title="Output">Output</span>
-                            <span class="ico-close">X</span>
                         </div>
                     </div>
                     <div class="tabs-panel">