ux: alternative row design

public/app/core/components/row_ctrl.ts

@@ -4,25 +4,29 @@ import _ from 'lodash';
 
 export class DashboardRowCtrl {
   static template = `
-    <a class="dashboard-row__title pointer" ng-click="ctrl.toggle()">
-      <span class="dashboard-row__chevron">
+    <div class="dashboard-row__center">
+      <div class="dashboard-row__actions-left">
         <i class="fa fa-chevron-down" ng-hide="ctrl.panel.collapse"></i>
         <i class="fa fa-chevron-right" ng-show="ctrl.panel.collapse"></i>
-      </span>
-      <span class="dashboard-row__title-text">
-        {{ctrl.panel.title | interpolateTemplateVars:this}}
-      </span>
-    </a>
-    <div class="dashboard-row__panel_count">
-        ({{ctrl.panel.hiddenPanels.length}} hidden panels)
-    </div>
-    <div class="dashboard-row__actions">
-      <a class="pointer" ng-click="ctrl.openSettings()"><span class="fa fa-cog"></i></a>
-    </div>
-    <div class="dashboard-row__drag grid-drag-handle">
+      </div>
+      <a class="dashboard-row__title pointer" ng-click="ctrl.toggle()">
+        <span class="dashboard-row__title-text">
+          {{ctrl.panel.title | interpolateTemplateVars:this}}
+        </span>
+      </a>
+      <div class="dashboard-row__actions-right">
+        <a class="pointer" ng-click="ctrl.openSettings()"><span class="fa fa-cog"></i></a>
+      </div>
     </div>
+
+  <div class="dashboard-row__panel_count">
+    ({{ctrl.panel.hiddenPanels.length}} hidden panels)
+  </div>
+  <div class="dashboard-row__drag grid-drag-handle">
+  </div>
   `;
 
+
   dashboard: any;
   panel: any;
 

public/sass/components/_row.scss

@@ -5,7 +5,8 @@ $dashboard-row-height: 30px;
   height: $dashboard-row-height;
   line-height: $dashboard-row-height;
   align-items: center;
-  padding: 0 0.5rem;
+  align-content: center;
+  justify-content: center;
 
   &--collapse {
     background: $panel-bg;
@@ -22,11 +23,8 @@ $dashboard-row-height: 30px;
   }
 
   &:hover {
-    .dashboard-row__chevron {
-      color: $link-color;
-    }
-
-    .dashboard-row__actions {
+    .dashboard-row__actions-left,
+    .dashboard-row__actions-right {
       visibility: visible;
       opacity: 1;
       transition: opacity 200ms ease-in-out 100ms;
@@ -34,29 +32,39 @@ $dashboard-row-height: 30px;
   }
 }
 
+.dashboard-row__center {
+  position: relative;
+}
+
 .dashboard-row__title {
+  @include brand-bottom-border();
+
   position: relative;
-  flex-grow: 1;
-  display: flex;
-  flex-direction: row;
-  margin-right: $panel-margin;
-  margin-left: 0;
+  flex-grow: 0;
   font-size: 1.15rem;
   font-weight: $font-weight-semi-bold;
+  padding: 0rem 1rem 0.3rem 1rem;
 }
 
-.dashboard-row__chevron {
+.dashboard-row__actions-left {
+  position: absolute;
+  left: -23px;
   font-size: $font-size-xs;
   color: $text-muted;
-  position: relative;
   top: 1px;
+  visibility: hidden;
+  opacity: 0;
 }
 
-.dashboard-row__actions {
+.dashboard-row__actions-right {
+  position: absolute;
+  right: -40px;
   padding-right: 1rem;
   font-size: $font-size-sm;
   visibility: hidden;
   opacity: 0;
+  top: 0px;
+
   a {
     color: $text-color-weak;
     padding-left: $spacer;
@@ -67,7 +75,6 @@ $dashboard-row-height: 30px;
 }
 
 .dashboard-row__title-text {
-  padding-left: 0.4rem;
   color: $text-color;
 }
 
@@ -77,6 +84,9 @@ $dashboard-row-height: 30px;
   font-size: $font-size-sm;
   font-weight: normal;
   display: none;
+  position: absolute;
+  right: 30px;
+  top: 0;
 }
 
 .dashboard-row__drag {
@@ -86,6 +96,9 @@ $dashboard-row-height: 30px;
   background: url("../img/grab_dark.svg") no-repeat 50% 50%;
   background-size: 8px;
   visibility: hidden;
+  position: absolute;
+  top: 0;
+  right: 0;
 }
 
 .panels-wrapper {