Merge pull request #14423 from grafana/14378-develop-table-options-ux

Removed side menu for column styles

public/app/plugins/panel/table/column_options.html

-<div class="edit-tab-with-sidemenu">
-  <aside class="edit-sidemenu-aside">
-    <ul class="edit-sidemenu">
-      <li ng-repeat="style in editor.panel.styles" ng-class="{active: editor.activeStyleIndex === $index}">
-        <a ng-click="editor.activeStyleIndex = $index">{{style.pattern || 'New rule'}}</a>
-      </li>
-      <li>
-        <a class="pointer" ng-click="editor.addColumnStyle()">
-          <i class="fa fa-plus"></i>&nbsp;Add
-        </a>
-      </li>
-    </ul>
-  </aside>
-
-  <div class="edit-tab-content" ng-repeat="style in editor.panel.styles" ng-if="editor.activeStyleIndex === $index">
-
+<div class="edit-tab-content" ng-repeat="style in editor.panel.styles">
+  <p class="column-styles-heading">{{style.pattern || 'New rule'}}</p>
   <div class="section gf-form-group">
   <div class="section gf-form-group">
     <h5 class="section-heading">Options</h5>
     <h5 class="section-heading">Options</h5>
     <div class="gf-form-inline">
     <div class="gf-form-inline">
@@ -182,7 +168,8 @@
           <span>
           <span>
               This title appears when user hovers pointer over the cell with link. Use the same variables as for URL.
               This title appears when user hovers pointer over the cell with link. Use the same variables as for URL.
           </span>
           </span>
-          </info-popover></label>
+        </info-popover>
+      </label>
       <input type="text" class="gf-form-input width-29" ng-model="style.linkTooltip" ng-blur="editor.render()" ng-model-onblur
       <input type="text" class="gf-form-input width-29" ng-model="style.linkTooltip" ng-blur="editor.render()" ng-model-onblur
           data-placement="right">
           data-placement="right">
     </div>
     </div>
@@ -190,11 +177,14 @@
   </div>
   </div>
 
 
   <div class="clearfix"></div>
   <div class="clearfix"></div>
-
+  <div class="gf-form-group">
     <button class="btn btn-danger btn-small" ng-click="editor.removeColumnStyle(style)">
     <button class="btn btn-danger btn-small" ng-click="editor.removeColumnStyle(style)">
       <i class="fa fa-trash"></i> Remove Rule
       <i class="fa fa-trash"></i> Remove Rule
     </button>
     </button>
-    <br />
-    <br />
-
   </div>
   </div>
+</div>
+<div class="gf-form-button-row">
+  <button class="btn btn-inverse" ng-click="editor.addColumnStyle()">
+    <i class="fa fa-plus"></i>&nbsp;Add column style
+  </button>
+</div>

public/sass/components/edit_sidemenu.scss

@@ -28,6 +28,10 @@
   }
   }
 }
 }
 
 
+.column-styles-heading {
+  border-bottom: 1px solid $gray-1;
+}
+
 @include media-breakpoint-down(sm) {
 @include media-breakpoint-down(sm) {
   .edit-tab-with-sidemenu {
   .edit-tab-with-sidemenu {
     flex-direction: column;
     flex-direction: column;