From 3c1ea77339e2894c6574efd50c846cb624d5a9ca Mon Sep 17 00:00:00 2001
From: Rashid Khan <rashidkpc@gmail.com>
Date: Tue, 4 Nov 2014 14:54:13 -0700
Subject: [PATCH] Tweak vis option styling, make section collapsed by default

---
 .../plugins/vis_types/controls/vislib_basic_options.html  | 4 ++--
 src/kibana/plugins/vis_types/vislib/editors/area.html     | 3 +--
 .../plugins/vis_types/vislib/editors/histogram.html       | 8 ++++----
 src/kibana/plugins/visualize/editor/styles/editor.less    | 5 ++++-
 src/kibana/plugins/visualize/editor/vis_options.html      | 7 ++++---
 5 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/kibana/plugins/vis_types/controls/vislib_basic_options.html b/src/kibana/plugins/vis_types/controls/vislib_basic_options.html
index db004fc8d9d84c..ea208be4efde25 100644
--- a/src/kibana/plugins/vis_types/controls/vislib_basic_options.html
+++ b/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
diff --git a/src/kibana/plugins/vis_types/vislib/editors/area.html b/src/kibana/plugins/vis_types/vislib/editors/area.html
index 35214b9822eaf5..118ec8b49161d9 100644
--- a/src/kibana/plugins/vis_types/vislib/editors/area.html
+++ b/src/kibana/plugins/vis_types/vislib/editors/area.html
@@ -1,5 +1,3 @@
-<vislib-basic-options></vislib-basic-options>
-
 <!-- vis type specific options -->
 <div>
   <label>
@@ -7,3 +5,4 @@
     <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>
diff --git a/src/kibana/plugins/vis_types/vislib/editors/histogram.html b/src/kibana/plugins/vis_types/vislib/editors/histogram.html
index ef2348c77dad76..2e7ce2a23c176b 100644
--- a/src/kibana/plugins/vis_types/vislib/editors/histogram.html
+++ b/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>
diff --git a/src/kibana/plugins/visualize/editor/styles/editor.less b/src/kibana/plugins/visualize/editor/styles/editor.less
index 87dd8f61f02e12..2a615d75102772 100644
--- a/src/kibana/plugins/visualize/editor/styles/editor.less
+++ b/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 {
diff --git a/src/kibana/plugins/visualize/editor/vis_options.html b/src/kibana/plugins/visualize/editor/vis_options.html
index 03e7665fc7ca39..22a7517abe83d2 100644
--- a/src/kibana/plugins/visualize/editor/vis_options.html
+++ b/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>