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">
     <h5 class="section-heading">Options</h5>
     <div class="gf-form-inline">
@@ -182,7 +168,8 @@
           <span>
               This title appears when user hovers pointer over the cell with link. Use the same variables as for URL.
           </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
           data-placement="right">
     </div>
@@ -190,11 +177,14 @@
   </div>
 
   <div class="clearfix"></div>
-
+  <div class="gf-form-group">
     <button class="btn btn-danger btn-small" ng-click="editor.removeColumnStyle(style)">
       <i class="fa fa-trash"></i> Remove Rule
     </button>
-    <br />
-    <br />
-
   </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) {
   .edit-tab-with-sidemenu {
     flex-direction: column;