Merge pull request #426 from rashidkpc/feature/floating-vis-buttons

float the apply/discard buttons at the bottom. Closes #420
elastic · Sep 30, 2014 · 14300ec · 14300ec
2 parents b33fc7f + 7a7ad10
commit 14300ec
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 9 deletions.
diff --git a/src/kibana/apps/visualize/editor/editor.less b/src/kibana/apps/visualize/editor/editor.less
@@ -1,6 +1,11 @@
 .vis-editor {
   .flex-parent();
 
+  @vis-editor-sidebar-basis: (100/12) * 2%; // two of twelve columns
+  @vis-editor-sidebar-min-width: 350px;
+  @vis-editor-nesting-width: 8px;
+  @vis-editor-agg-editor-spacing: 5px;
+
   navbar {
     .bitty-modal-container {
       position: relative;
@@ -33,12 +38,28 @@
 
   &-sidebar {
     .flex-parent(0, 0, auto);
+
     overflow: auto;
 
     // overrided for tablet and desktop
     @media (min-width: @screen-md-min) {
       .flex-basis(@vis-editor-sidebar-basis);
       min-width: @vis-editor-sidebar-min-width;
+      max-width: @vis-editor-sidebar-min-width;
+      margin-bottom: (@input-height-base * 2) - 3;
+    }
+
+    &-buttons {
+      // overrides for tablet and desktop
+      @media (min-width: @screen-md-min) {
+        position: absolute;
+        bottom: 0;
+        min-width: @vis-editor-sidebar-min-width;
+      }
+    }
+
+    .sidebar-item {
+      border-top: 0 !important;
     }
 
     .sidebar-container {
@@ -79,7 +100,6 @@
     &-group {
       .flex-parent();
       color: @text-color;
-      margin-bottom: 10px;
     }
 
     &-header {

diff --git a/src/kibana/apps/visualize/editor/sidebar.html b/src/kibana/apps/visualize/editor/sidebar.html
@@ -29,13 +29,15 @@
         </vis-editor-agg-group>
 
         <!-- apply/discard -->
-        <li class="sidebar-item" ng-if="vis.dirty">
+        <li class="vis-editor-sidebar-buttons sidebar-item">
           <button
+            ng-disabled="!vis.dirty"
             type="submit"
             class="sidebar-item-button success">
             Apply
           </button>
           <button
+            ng-disabled="!vis.dirty"
             type="button"
             ng-click="reset()"
             class="sidebar-item-button warn">

diff --git a/src/kibana/apps/visualize/styles/main.less b/src/kibana/apps/visualize/styles/main.less
@@ -19,4 +19,4 @@
   font-size: 1.2em;
 }
 
-@import "../editor/editor.less";
+@import "../editor/editor.less";
diff --git a/src/kibana/styles/_variables.less b/src/kibana/styles/_variables.less
@@ -16,9 +16,4 @@
 @sidebar-active-color: @component-active-color;
 @sidebar-active-bg: @component-active-bg;
 @sidebar-active-hover-bg: @component-active-bg;
-@sidebar-active-hover-color: @component-active-color;
-
-@vis-editor-sidebar-basis: (100/12) * 2%; // two of twelve columns
-@vis-editor-sidebar-min-width: 350px;
-@vis-editor-nesting-width: 8px;
-@vis-editor-agg-editor-spacing: 5px;
+@sidebar-active-hover-color: @component-active-color;