Merge pull request #2 from rashidkpc/pr/1783

Tweak vis option styling, make section collapsed by default

src/kibana/plugins/vis_types/controls/vislib_basic_options.html

@@ -1,11 +1,11 @@
 <div>
-  <div>
+  <div class="vis-option-item">
     <label>
       <input type="checkbox" ng-model="vis.params.addTooltip">
       Show Tooltip
     </label>
   </div>
-  <div>
+  <div class="vis-option-item">
     <label>
       <input type="checkbox" ng-model="vis.params.addLegend">
       Show Legend

src/kibana/plugins/vis_types/vislib/editors/area.html

@@ -1,9 +1,8 @@
-<vislib-basic-options></vislib-basic-options>
-
 <!-- vis type specific options -->
 <div>
   <label>
     Chart Mode
     <select ng-model="vis.params.mode" ng-options="mode for mode in vis.type.params.modes"></select>
   </label>
 </div>
+<vislib-basic-options></vislib-basic-options>

src/kibana/plugins/vis_types/vislib/editors/histogram.html

@@ -1,9 +1,9 @@
-<vislib-basic-options></vislib-basic-options>
-
 <!-- vis type specific options -->
-<div>
+<div class="vis-option-item form-group">
   <label>
     Bar Mode
-    <select ng-model="vis.params.mode" ng-options="mode for mode in vis.type.params.modes"></select>
   </label>
+  <select class="form-control" ng-model="vis.params.mode" ng-options="mode for mode in vis.type.params.modes"></select>
 </div>
+
+<vislib-basic-options></vislib-basic-options>

src/kibana/plugins/visualize/editor/styles/editor.less

@@ -84,7 +84,10 @@
 
   .visualization-options {
     padding: @vis-editor-agg-editor-spacing;
-    padding-left: @vis-editor-agg-editor-spacing * 4;
+
+    .form-group {
+      margin-bottom: 5px;
+    }
   }
 
   nesting-indicator {

src/kibana/plugins/visualize/editor/vis_options.html

@@ -1,7 +1,8 @@
 <li class="sidebar-item">
-  <div class="sidebar-item-title">
-    visualization options
+  <div class="sidebar-item-title" ng-click="showVisOptions = !showVisOptions">
+    view options
+    <i class="fa fa-caret-down" ng-class="{'fa-caret-down': showVisOptions, 'fa-caret-right': !showVisOptions}"></i>
   </div>
 
-  <div class="visualization-options"></div>
+  <div class="visualization-options" ng-show="!!showVisOptions"></div>
 </li>