Merge pull request #386 from w33ble/icons

Vis and Toolbar Icons
elastic · Sep 25, 2014 · 2135b44 · 2135b44
2 parents 374e3f5 + a1b9941
commit 2135b44
Show file tree

Hide file tree

Showing 12 changed files with 28 additions and 18 deletions.
diff --git a/bower.json b/bower.json
@@ -34,7 +34,7 @@
     "elasticsearch": "*",
     "Faker": "~1.1.0",
     "FileSaver": "*",
-    "font-awesome": "~4.0.3",
+    "font-awesome": "~4.2.0",
     "gridster": "~0.5.0",
     "inflection": "~1.3.5",
     "jquery": "~2.1.0",

diff --git a/src/kibana/apps/dashboard/index.html b/src/kibana/apps/dashboard/index.html
@@ -30,11 +30,11 @@
       </form>
 
       <div class="button-group">
-        <button ng-click="newDashboard()"><i class="fa fa-file-o"></i></button>
-        <button ng-click="openAdd()"><i class="fa fa-plus"></i></button>
+        <button ng-click="newDashboard()"><i class="fa fa-file-new-o"></i></button>
         <button ng-click="openSave()"><i class="fa fa-save"></i></button>
-        <button ng-click="openLoad()"><i class="fa fa-folder-open"></i></button>
-        <button ng-click="openShare()"><i class="fa fa-code"></i></button>
+        <button ng-click="openLoad()"><i class="fa fa-folder-open-o"></i></button>
+        <button ng-click="openShare()"><i class="fa fa-external-link"></i></button>
+        <button ng-click="openAdd()"><i class="fa fa-plus-circle"></i></button>
       </div>
     </navbar>
   </nav>

diff --git a/src/kibana/apps/discover/index.html b/src/kibana/apps/discover/index.html
@@ -21,9 +21,9 @@
     </form>
 
     <div class="button-group">
-      <button ng-click="newQuery()"><i class="fa fa-file-o"></i></button>
+      <button ng-click="newQuery()"><i class="fa fa-file-new-o"></i></button>
       <button ng-click="toggleSave()"><i class="fa fa-save"></i></button>
-      <button ng-click="toggleLoad()"><i class="fa fa-folder-open"></i></button>
+      <button ng-click="toggleLoad()"><i class="fa fa-folder-open-o"></i></button>
       <button ng-click="toggleConfig()"><i class="fa fa-gear"></i></button>
     </div>
   </navbar>

diff --git a/src/kibana/apps/visualize/editor/editor.html b/src/kibana/apps/visualize/editor/editor.html
@@ -44,7 +44,7 @@
     </div>
 
     <div class="button-group">
-      <button ng-click="startOver()"><i class="fa fa-file-o"></i></button>
+      <button ng-click="startOver()"><i class="fa fa-file-new-o"></i></button>
 
       <!-- normal save -->
       <button ng-if="!editableVis.dirty" ng-click="toggleSave()">
@@ -56,8 +56,8 @@
         <i class="fa fa-save"></i>
       </button>
 
-      <button ng-click="toggleLoad()"><i class="fa fa-folder-open"></i></button>
-      <button ng-click="toggleShare()"><i class="fa fa-code"></i></button>
+      <button ng-click="toggleLoad()"><i class="fa fa-folder-open-o"></i></button>
+      <button ng-click="toggleShare()"><i class="fa fa-external-link"></i></button>
       <button ng-click="fetch()"><i class="fa fa-refresh"></i></button>
     </div>
   </navbar>

diff --git a/src/kibana/apps/visualize/styles/main.less b/src/kibana/apps/visualize/styles/main.less
@@ -10,4 +10,8 @@
   }
 }
 
+.visualizations .visualization i {
+  margin-right: @padding-base-horizontal;
+}
+
 @import "../editor/editor.less";
diff --git a/src/kibana/apps/visualize/wizard/step_2.html b/src/kibana/apps/visualize/wizard/step_2.html
@@ -3,12 +3,12 @@ <h1>
   <span class="pull-right label label-default">Step 2</span>
 </h1>
 
-<ul class="list-group list-group-menu">
-  <a class="list-group-item list-group-menu-item"
+<ul class="visualizations list-group list-group-menu">
+  <a class="visualization list-group-item list-group-menu-item"
   	ng-repeat="type in visTypes"
   	ng-href="{{ visTypeUrl(type) }}">
     <li>
-      <i ng-class="type.icon"></i>{{type.title}}
+      <i class="fa" ng-class="type.icon"></i>{{type.title}}
     </li>
   </a>
 </ul>
diff --git a/src/kibana/components/vis_types/histogram.js b/src/kibana/components/vis_types/histogram.js
@@ -6,7 +6,7 @@ define(function (require) {
     return new VisType({
       name: 'histogram',
       title: 'Vertical bar chart',
-      icon: 'icon-chart-bar',
+      icon: 'fa-bar-chart',
       vislibParams: {
         shareYAxis: true,
         addTooltip: true,

diff --git a/src/kibana/components/vis_types/line.js b/src/kibana/components/vis_types/line.js
@@ -6,7 +6,7 @@ define(function (require) {
     return new VisType({
       name: 'line',
       title: 'Line chart',
-      icon: 'icon-chart-bar',
+      icon: 'fa-line-chart',
       vislibParams: {
         shareYAxis: true,
         addTooltip: true,

diff --git a/src/kibana/components/vis_types/pie.js b/src/kibana/components/vis_types/pie.js
@@ -7,7 +7,7 @@ define(function (require) {
     return new VisType({
       name: 'pie',
       title: 'Pie chart',
-      icon: 'icon-chart-bar',
+      icon: 'fa-pie-chart',
       vislibParams: {
         addEvents: true,
         addTooltip: true,

diff --git a/src/kibana/partials/saved_object_finder.html b/src/kibana/partials/saved_object_finder.html
@@ -20,7 +20,7 @@
       ng-href="{{ makeUrl(hit) }}"
       ng-click="onChoose(hit, $event)">
       <li>
-        <i ng-class="hit.icon"></i> {{hit.title}}
+        <i class="fa" ng-if="hit.icon" ng-class="hit.icon"></i> {{hit.title}}
         <p ng-if="hit.description" ng-bind="hit.description"></p>
       </li>
     </a>

diff --git a/src/kibana/styles/_font_icons.less b/src/kibana/styles/_font_icons.less
@@ -0,0 +1,5 @@
+// shims for font-awesome
+
+// new file icon
+.@{fa-css-prefix}-file-new-o:before { content: @fa-var-file-o; }
+.@{fa-css-prefix}-file-new-o:after { content: @fa-var-plus; position: relative; margin-left: -1.0em; font-size: 0.5em; }
diff --git a/src/kibana/styles/main.less b/src/kibana/styles/main.less
@@ -16,8 +16,9 @@
 // call outs
 @import "./_callout.less";
 
-// call outs
+// font icons
 @import "./icon_font.css";
+@import "./_font_icons.less";
 
 // FontAwesome fills for glyphicons in bootstrap components
 @import "./_glyphicons.less";