New Design for Visualize

src/plugins/kibana/public/visualize/styles/main.less

@@ -3,44 +3,98 @@
 @import (reference) "~ui/styles/list-group-menu";
 
 .vis-wizard {
-  h1 {
-    margin-top: 45px;
-  }
-}
+  margin-right: 0;
+  margin-left: 0;
+  padding-left: 0;
+  padding-right: 0;
+
+  @media (min-width: @screen-lg) {
+    .wizard {
+      padding: 0;
+      display: flex;
 
-.wizard-vis-type {
-  .list-group-item();
-  .list-group-menu .list-group-menu-item();
+      .wizard-column {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding: 0px 2.5px;
+
+        .wizard-row {
+          flex: 1;
+          background-color: @kibanaGray6;
+        }
+      }
+    }
+  }
 
-  // overrided for tablet and desktop
-  @media (min-width: @screen-md-min) {
-    display: flex;
-    align-items: flex-start;
+  h3 {
+    margin-top: 35px;
+    padding: 0px 15px;
   }
 
-  &-heading {
-    flex: 0 0 200px;
-    display: flex;
-    align-items: center;
-    font-size: 1.2em;
-
-    .fa {
-      flex: 0 0 auto;
-      margin-right: @padding-base-horizontal;
-      font-size: 1.5em;
-      text-align: center;
+  .wizard-row {
+    .panel {
+      margin-bottom: 0;
+      border: none;
+    }
+
+    .panel-default > .panel-heading {
+      background-color: @kibanaGray6;
+    }
+
+    .list-group {
+      margin-bottom: 0;
+
+      .list-group-item {
+        border-radius: 0;
+        border: none;
+      }
     }
 
-    h4 {
-      flex: 1 0 auto;
+    .striped {
+      li:nth-child(odd) {
+        background-color: @white;
+      }
+
+      li:nth-child(even) {
+        background-color: @kibanaGray6;
+      }
     }
   }
 
-  &-description {
-    flex: 1 1 auto;
-    color: @wizard-vis-type-description-color;
+  .wizard-type {
+    flex: 1;
+    .list-group-item();
+    .list-group-menu .list-group-menu-item();
+
+    border: none;
+    border-radius: 0;
+    background-color: @kibanaGray6;
+
+    &-heading {
+      flex: 0 0 200px;
+      display: flex;
+      align-items: center;
+      font-size: 1.2em;
+
+      .fa {
+        flex: 0 0 auto;
+        margin-right: @padding-base-horizontal;
+        font-size: 1.5em;
+        text-align: center;
+        color: @saved-object-finder-icon-color;
+      }
+
+      h4 {
+        flex: 1 0 auto;
+      }
+    }
+
+    &-description {
+      flex: 1 1 auto;
+      color: @wizard-vis-type-description-color;
+    }
   }
 }
 
-
 @import "../editor/styles/_editor.less";

src/plugins/kibana/public/visualize/wizard/step_1.html

@@ -1,24 +1,22 @@
-<h1>
-  Create a new visualization <br class="visible-xs">
-  <span class="pull-right label label-default hidden-xs">Step 1</span>
-  <span class="label label-default visible-xs">Step 1</span>
-</h1>
-
-<div class="wizard-vis-types">
-  <a class="wizard-vis-type"
-     ng-repeat="type in visTypes.inTitleOrder"
-     ng-href="{{ visTypeUrl(type) }}">
-    <div class="wizard-vis-type-heading">
-      <i aria-hidden="true" class="fa fa-fw" ng-class="type.icon"></i>
-      <h4>{{type.title}}</h4>
+<div class="wizard">
+  <div class="wizard-column">
+    <h3>Create New Visualization</h3>
+    <div class="wizard-row">
+      <a class="wizard-type" ng-repeat="type in visTypes.inTitleOrder" ng-href="{{ visTypeUrl(type) }}">
+        <div class="wizard-type-heading">
+          <i aria-hidden="true" class="fa fa-fw" ng-class="type.icon"></i>
+          <h4>{{type.title}}</h4>
+        </div>
+        <p class="wizard-type-description">{{type.description}}</p>
+      </a>
     </div>
-    <p class="wizard-vis-type-description">{{type.description}}</p>
-  </a>
+  </div>
+  <div class="wizard-column">
+    <h3>Or, Open a Saved Visualization</h3>
+    <saved-object-finder
+      title="Saved Visualizations"
+      type="visualizations"
+      class="wizard-row">
+    </saved-object-finder>
+  </div>
 </div>
-
-<h1>Or, open a saved visualization</h1>
-
-<saved-object-finder
-        title="Saved Visualizations"
-        type="visualizations">
-</saved-object-finder>

src/plugins/kibana/public/visualize/wizard/step_2.html

@@ -1,37 +1,26 @@
-<h1>
-  Select a search source
-  <span class="pull-right label label-default hidden-xs">Step 2</span>
-  <span class="label label-default visible-xs">Step 2</span>
-</h1>
-<ul class="list-group list-group-menu" ng-switch on="stepTwoMode">
-  <li ng-click="stepTwoMode='new'"
-      ng-class="{'active': stepTwoMode=='new'}"
-      class="list-group-item list-group-menu-item">
-    From a new search
-  </li>
-  <li class="list-group-item" ng-switch-when="new">
+<div class="wizard">
+  <div class="wizard-column">
+    <h3>From a New Search</h3>
     <!-- Index patterns -->
-    Select an index pattern
-    <div class="form-group">
-      <select
-              class="form-control"
-              ng-model="indexPattern.selection"
-              ng-options="pattern as pattern for pattern in indexPattern.list | orderBy:'toString()'">
-      </select>
+    <div class="wizard-row">
+      <div class="panel panel-default">
+        <div class="panel-heading">Index Patterns</div>
+      </div>
+      <ul class="striped list-group">
+        <li class="list-group-item" ng-repeat="pattern in indexPattern.list | orderBy: 'toString()'">
+          <a class="index-link" kbn-href="{{ makeUrl(pattern) }}">{{pattern}}</a>
+        </li>
+      </ul>
     </div>
-  </li>
-
-  <li ng-click="stepTwoMode='saved'"
-      ng-class="{'active': stepTwoMode=='saved'}"
-      class="list-group-item list-group-menu-item">
-    From a saved search
-  </li>
-  <li class="list-group-item" ng-switch-when="saved">
+  </div>
+  <div class="wizard-column">
+    <h3>Or, From a Saved Search</h3>
     <!-- Saved searches -->
     <saved-object-finder
-            title="Saved Searches"
-            type="searches"
-            make-url="step2WithSearchUrl">
+        title="Saved Searches"
+        type="searches"
+        class="wizard-row"
+        make-url="step2WithSearchUrl">
     </saved-object-finder>
-  </li>
-</ul>
+  </div>
+</div>

src/plugins/kibana/public/visualize/wizard/wizard.js

@@ -8,7 +8,7 @@ import uiModules from 'ui/modules';
 
 
 const templateStep = function (num, txt) {
-  return '<div ng-controller="VisualizeWizardStep' + num + '" class="container vis-wizard">' + txt + '</div>';
+  return '<div ng-controller="VisualizeWizardStep' + num + '" class="container-fluid vis-wizard">' + txt + '</div>';
 };
 
 const module = uiModules.get('app/visualize', ['kibana/courier']);
@@ -56,16 +56,8 @@ module.controller('VisualizeWizardStep2', function ($route, $scope, $location, t
     list: $route.current.locals.indexPatternIds
   };
 
-  $scope.$watch('stepTwoMode', function (mode) {
-    if (mode === 'new') {
-      if ($scope.indexPattern.list && $scope.indexPattern.list.length === 1) {
-        $scope.indexPattern.selection = $scope.indexPattern.list[0];
-      }
-    }
-  });
-
-  $scope.$watch('indexPattern.selection', function (pattern) {
+  $scope.makeUrl = function (pattern) {
     if (!pattern) return;
-    kbnUrl.change('/visualize/create?type={{type}}&indexPattern={{pattern}}', {type: type, pattern: pattern});
-  });
+    return `/visualize/create?type=${type}&indexPattern=${pattern}`;
+  };
 });

src/ui/public/directives/saved_object_finder.js

@@ -48,6 +48,23 @@ module.directive('savedObjectFinder', function ($location, $injector, kbnUrl, Pr
 
       filterResults();
 
+      /**
+       * Boolean that keeps track of whether hits are sorted ascending (true)
+       * or descending (false) by title
+       * @type {Boolean}
+       */
+      self.isAscending = true;
+
+      /**
+       * Sorts saved object finder hits either ascending or descending
+       * @param  {Array} hits Array of saved finder object hits
+       * @return {Array} Array sorted either ascending or descending
+       */
+      self.sortHits = function (hits) {
+        self.isAscending = !self.isAscending;
+        self.hits = self.isAscending ? _.sortBy(hits, 'title') : _.sortBy(hits, 'title').reverse();
+      };
+
       /**
        * Passed the hit objects and will determine if the
        * hit should have a url in the UI, returns it if so

src/ui/public/paginated_table/paginated_table.html

@@ -33,5 +33,4 @@
   <!-- auto-inserted by the paginate directive... -->
   <!-- <paginate-controls></paginate-controls> -->
   <div class="pagination-container" ng-transclude></div>
-
 </paginate>

src/ui/public/partials/saved_object_finder.html

@@ -1,26 +1,42 @@
-<form role="form">
-  <div class="form-group finder-form">
-    <div class="finder-form-options">
-      <a class="small" ng-click="finder.manageObjects(finder.properties.name)">manage {{finder.properties.nouns}}</a>
+<form role="form" class="form-inline">
+  <div class="container-fluid">
+    <div class="row">
+      <div class="input-group form-group finder-form col-md-7">
+        <span class="input-group-addon">
+          <i class="fa fa-search"></i>
+        </span>
+        <input
+          input-focus
+          ng-model="filter"
+          ng-attr-placeholder="{{finder.properties.nouns}} Filter..."
+          ng-keydown="finder.filterKeyDown($event)"
+          class="form-control"
+          name="filter"
+          type="text"
+          autocomplete="off" />
+      </div>
+      <div class="finder-hit-count col-md-2">
+        <span>{{finder.hitCount}} of {{finder.hitCount}}</span>
+      </div>
+      <div class="finder-manage-object col-md-2">
+        <a class="small" ng-click="finder.manageObjects(finder.properties.name)">Manage {{finder.properties.nouns}}</a>
+      </div>
     </div>
-    <div class="clearfix visible-xs-block"></div>
-    <input
-      input-focus
-      ng-model="filter"
-      ng-attr-placeholder="{{finder.properties.noun}} Filter"
-      ng-keydown="finder.filterKeyDown($event)"
-      class="form-control"
-      name="filter"
-      type="text"
-      autocomplete="off" />
-
-    <span class="finder-hit-count"><strong>{{finder.hitCount}}</strong> {{finder.hitCountNoun()}}</span>
   </div>
 </form>
-<paginate list="finder.hits" per-page="{{perPage}}">
-  <ul
-    class="list-group list-group-menu"
-    ng-class="{'select-mode': finder.selector.enabled}">
+<paginate list="finder.hits" per-page="20">
+  <ul class="li-striped list-group list-group-menu" ng-class="{'select-mode': finder.selector.enabled}">
+
+    <li class="list-group-item list-group-menu-item">
+      <span class="paginate-heading">
+        Name
+        <i
+          class="fa"
+          ng-click="finder.sortHits(finder.hits)"
+          ng-class="finder.isAscending ? 'fa-caret-up' : 'fa-caret-down'">
+        </i>
+      </span>
+    </li>
 
     <li
       class="list-group-item list-group-menu-item"
@@ -29,19 +45,20 @@
       ng-keydown="finder.hitKeyDown($event, page, paginate)"
       ng-click="finder.onChoose(hit, $event)">
 
-      <a
-        ng-href="{{finder.makeUrl(hit)}}"
-        ng-blur="finder.hitBlur($event)"
-        ng-click="finder.preventClick($event)">
-
-        <i aria-hidden="true" class="fa" ng-if="hit.icon" ng-class="hit.icon"></i> {{hit.title}}
-        <p ng-if="hit.description" ng-bind="hit.description"></p>
+      <a ng-href="{{finder.makeUrl(hit)}}"
+          ng-blur="finder.hitBlur($event)"
+          ng-click="finder.preventClick($event)">
+          <i aria-hidden="true" class="finder-type fa" ng-if="hit.icon" ng-class="hit.icon"></i>
+          <span>{{hit.title}}</span>
+          <p ng-if="hit.description" ng-bind="hit.description"></p>
       </a>
     </li>
+
     <li
       class="list-group-item list-group-no-results"
       ng-if="finder.hits.length === 0">
       <p ng-bind="'No matching ' + finder.properties.nouns + ' found.'"></p>
     </li>
+
   </ul>
 </paginate>