ux(dashboard): new row tabs look

torkelo · torkelo · commit c6757bed72e1 · 2016-10-29T13:51:16.000+02:00
diff --git a/public/app/features/dashboard/row/row.html b/public/app/features/dashboard/row/row.html
@@ -12,12 +12,12 @@
     </div>
 
     <div class="dash-row-header-actions">
-      <a class="pointer dash-row-header-action-add-panel" ng-click="ctrl.showAddPanel()">
+      <a class="pointer dash-row-header-action-add-panel" ng-click="ctrl.showAddPanel()" ng-class="{active: ctrl.dropView===1}">
         Add Panel
         <i class="fa fa-plus" ng-hide="ctrl.dropView===1"></i>
         <i class="fa fa-remove" ng-show="ctrl.dropView===1"></i>
       </a>
-      <a class="pointer dash-row-header-action-show-options" ng-click="ctrl.showRowOptions()">
+      <a class="pointer dash-row-header-action-show-options" ng-click="ctrl.showRowOptions()" ng-class="{active: ctrl.dropView===2}">
         Row Options
         <i class="fa fa-cog" ng-hide="ctrl.dropView===2"></i>
         <i class="fa fa-remove" ng-show="ctrl.dropView===2"></i>
diff --git a/public/sass/components/_row.scss b/public/sass/components/_row.scss
@@ -44,15 +44,25 @@
   position: absolute;
   color: $text-muted;
   font-size: $font-size-sm;
-  bottom: 5px;
+  bottom: 0px;
   right: 1rem;
   a {
+    display: inline-block;
+    padding: 6px 11px;
     color: $text-muted;
     padding-left: 1rem;
     &:hover {
       color: $link-hover-color;
     }
   }
+  a.active {
+    color: $link-color;
+    background: $panel-bg;
+    border: $panel-border;
+    border-bottom: none;
+    position: relative;
+    top: 1px;
+  }
 }
 
 .dash-row-header-add-panel {
