Pretty icons and tooltips

app/styles/app.scss

@@ -8,6 +8,7 @@ $navbar-default-link-color:                #777 !default;
 $navbar-default-link-hover-color:          #333 !default;
 $navbar-default-link-hover-bg:             transparent !default;
 $navbar-default-link-active-color:         #555 !default;
+$header-icon-color:                        #c6b5ad !default;
 
 $topbar-height: 60px;
 $topbar-control-height: 32px;
@@ -19,6 +20,7 @@ $code-header-height: 60px;
 }
 
 @import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap";
+@import "vendor/twiddlicon/twiddlicon.scss";
 
 button {
   @extend .btn;
@@ -282,8 +284,45 @@ body {
     }
 
     .glyphicon {
-      color: $navbar-default-link-color;
+      font-size: 0.8em;
+    }
+
+    .twiddlicon {
+      font-size: 1em;
+    }
+
+    .glyphicon, .twiddlicon {
+      text-align:center;
+      color: $header-icon-color;
+      text-shadow: 1px 1px 0px white;
       cursor: pointer;
+      padding: 2px;
+    }
+
+    .twiddlicon:hover{
+      color: #faf4f1;
+      background-color: #d6c3ba;
+      border-radius: 20%;
+      padding: 2px;
+      text-shadow: 1px 1px 0px #ad9488;
+    }
+
+    .glyphicon-plus {
+      padding-bottom: 3px;
+      padding-left: 3px;
+    }
+
+    .glyphicon:hover {
+      color: #faf4f1;
+      background-color: #d6c3ba;
+      border-radius: 20%;
+      padding: 2px;
+      text-shadow: 1px 1px 0px #ad9488;
+    }
+
+    .glyphicon-plus:hover {
+      padding-bottom: 3px;
+      padding-left: 3px;
     }
   }
 

app/templates/components/file-editor-column.hbs

@@ -1,7 +1,9 @@
 <div class="header">
   {{#if showFileTreeOpenIcon}}
     <span class="nav-left">
-      <span class="glyphicon glyphicon-chevron-right" {{action 'showFileTree'}} title="Show project explorer tree"></span>
+      <span class="hint--bottom hint--rounded" data-hint="Show project files" >
+        <span class="glyphicon glyphicon-chevron-right" {{action 'showFileTree'}}></span>
+      </span>
     </span>
   {{/if}}
   <ul class="nav nav-pills file-picker">
@@ -29,9 +31,13 @@
   </ul>
 
   <span class="nav-right">
-    <span class="glyphicon glyphicon-remove" {{action 'removeColumn' col}} title="Hide this panel"></span>
+    <span class="hint--bottom hint--rounded" data-hint="Hide this panel">
+      <span class="glyphicon glyphicon-remove" {{action 'removeColumn' col}}></span>
+    </span>
     {{#if isLastColumn}}
-      <span class="glyphicon glyphicon-plus" {{action 'addColumn'}} title="Show another panel"></span>
+      <span class="hint--bottom hint--rounded" data-hint="Show another panel">
+        <span class="glyphicon glyphicon-plus hint--bottom hint--rounded" {{action 'addColumn'}}></span>
+      </span>
     {{/if}}
   </span>
 </div>

app/templates/components/file-tree.hbs

@@ -1,12 +1,18 @@
 <div class="header">
   <div class="nav-left">
     &nbsp;
-    <span class="glyphicon glyphicon-resize-full flip-horizontal" {{action 'expandAll'}} title="Expand All"></span>
+    <span class="hint--bottom hint--rounded" data-hint="Expand All">
+      <span class="twiddlicon twiddlicon-expand-all" {{action 'expandAll'}}></span>
+    </span>
     &nbsp;
-    <span class="glyphicon glyphicon-resize-small flip-horizontal" {{action 'collapseAll'}} title="Collapse All"></span>
+    <span class="hint--bottom hint--rounded" data-hint="Collapse All">
+      <span class="twiddlicon twiddlicon-collapse-all" {{action 'collapseAll'}}></span>
+    </span>
   </div>
   <div class="nav-right">
-    <span class="glyphicon glyphicon-chevron-left" {{action 'hideFileTree'}} title="Hide project explorer tree"></span>
+    <span class="hint--bottom hint--rounded" data-hint="Hide project files">
+        <span class="glyphicon glyphicon-chevron-left" {{action 'hideFileTree'}}></span>
+    </span>
   </div>
 </div>
 {{ember-jstree data=fileTreeData

ember-cli-build.js

@@ -45,8 +45,15 @@ module.exports = function() {
   });
 
   app.import('bower_components/ember/ember-template-compiler.js');
+  app.import('vendor/hint.css');
   app.import('vendor/drags.js');
 
+  var twiddlicons = pickFiles('vendor/twiddlicon/',{
+    srcDir: '/',
+    include: ['**/*.woff', '**/*.eot', '**/*.ttf', '**/*.svg'],
+    destDir: '/assets'
+  });
+
   var loaderTree = pickFiles('bower_components', {
     srcDir: '/loader.js',
     files: ['loader.js'],
@@ -63,7 +70,7 @@ module.exports = function() {
     outputFile: '/assets/twiddle-deps.js',
   });
 
-  return mergeTrees([app.toTree(), twiddleVendorTree, loaderTree]);
+  return mergeTrees([app.toTree(), twiddleVendorTree, loaderTree, twiddlicons]);
 };
 
 // This copies code out of ember-cli's blueprints into

tests/integration/components/file-tree-test.js

@@ -67,11 +67,11 @@ test('can expand and collapse all', function(assert) {
 
   assert.equal(this.$('.jstree-anchor').length, 2, "There are 2 initial nodes");
 
-  this.$('.glyphicon-resize-full').click();
+  this.$('.twiddlicon-expand-all').click();
 
   assert.equal(this.$('.jstree-anchor').length, 3, "There are 3 nodes once you expand all");
 
-  this.$('.glyphicon-resize-small').click();
+  this.$('.twiddlicon-collapse-all').click();
 
   assert.equal(this.$('.jstree-anchor').length, 2, "There are 2 nodes once you collapse all");
 });