ux: table design work

public/app/core/components/search/search.html

@@ -70,7 +70,6 @@
 						<span class="search-item__body">
 							<div class="search-item__body-title">{{::item.title}}</div>
 							<div class="search-item__body-sub-title" ng-show="item.folderTitle && section.hideHeader">
-								<i class="fa fa-folder-o"></i>
 								{{::item.folderTitle}}
 							</div>
 						</span>

public/app/core/routes/routes.ts

@@ -174,6 +174,7 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
   .when('/login', {
     templateUrl: 'public/app/partials/login.html',
     controller : 'LoginCtrl',
+    pageClass: 'page-login',
   })
   .when('/invite/:code', {
     templateUrl: 'public/app/partials/signup_invited.html',

public/app/features/templating/partials/editor.html

@@ -37,14 +37,22 @@
         <em>No template variables defined</em>
         <br /> <br />
 			</div>
-      <table class="grafana-options-table">
+      <table class="filter-table filter-table--hover">
+      	<thead>
+      		<tr>
+						<th>Variable</th>
+						<th>Definition</th>
+						<th colspan="5"></th>
+					</tr>
+				</thead>
+				<tbody>
 					<tr ng-repeat="variable in variables">
 						<td style="width: 1%">
-            <span class="template-variable">
+							<span ng-click="edit(variable)" class="pointer template-variable">
 								${{variable.name}}
 							</span>
 						</td>
-          <td class="max-width" style="max-width: 200px;">
+						<td style="max-width: 200px;" ng-click="edit(variable)" class="pointer max-width">
 							{{variable.query}}
 						</td>
 
@@ -56,17 +64,12 @@
 							</a>
 						</td>
 						<td style="width: 1%">
-            <a ng-click="edit(variable)" class="btn btn-inverse btn-mini">
-              <i class="fa fa-edit"></i>
-              Edit
-            </a>
-          </td>
-          <td style="width: 1%">
 							<a ng-click="removeVariable(variable)" class="btn btn-danger btn-mini">
 								<i class="fa fa-remove"></i>
 							</a>
 						</td>
 					</tr>
+				</tbody>
       </table>
     </div>
 

public/sass/_variables.scss

@@ -155,7 +155,7 @@ $link-hover-decoration:   none !default;
 //
 // Customizes the `.table` component with basic values, each used across all table variations.
 
-$table-cell-padding:            .75rem !default;
+$table-cell-padding:            4px 10px !default;
 $table-sm-cell-padding:         .3rem !default;
 
 // Forms

public/sass/components/_filter-table.scss

@@ -13,47 +13,67 @@
 
 .filter-table {
   width: 100%;
-  border-collapse: collapse;
-}
+  border-collapse: separate;
 
-.filter-table tr {
-  background-color: $list-item-bg;
-  border-bottom: 3px solid $page-bg;
-}
+  tbody {
+    tr:nth-child(odd) {
+      background: $dark-2;
+    }
+  }
+
+  thead {
+    tr {
+      background: linear-gradient(0deg, #3c3f5a, #292f44);
+    }
+  }
 
-.filter-table th {
+  th {
     width: auto;
     padding: $table-cell-padding;
     text-align: left;
-}
+    line-height: 30px;
+    height: 30px;
+    white-space: nowrap;
+  }
 
-.filter-table td {
+  td {
     padding: $table-cell-padding;
+    line-height: 30px;
+    height: 30px;
+    border-bottom: 1px solid black;
+    white-space: nowrap;
 
     &.filter-table__switch-cell {
       padding: 0;
       border-right: 3px solid $page-bg;
     }
-}
+  }
 
-.filter-table .ellipsis {
+  .ellipsis {
     display: block;
     width: 100%;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-}
+  }
 
-.filter-table .expanded {
+  .expanded {
     border-color: $panel-bg;
-}
+  }
 
-.filter-table .expanded > td {
+  .expanded > td {
     padding-bottom: 0;
-}
+  }
 
-.filter-table__avatar {
+  .filter-table__avatar {
     width: 25px;
     height: 25px;
     border-radius: 50%;
+  }
+
+  &--hover {
+    tbody tr:hover {
+      background: $dark-3;
+    }
+  }
 }

public/sass/components/_navbar.scss

@@ -6,7 +6,7 @@
   padding-left: $side-menu-width;
   box-shadow: $navbarShadow;
   z-index: 1;
-  background-color: $navbarBackground;
+  background: $navbarBackground;
 }
 
 .navbar-inner {

public/sass/pages/_login.scss

@@ -8,6 +8,12 @@
   padding-top: $spacer * 5; /* BAD HACK - experiement to see how it looks */
 }
 
+.page-login {
+  .sidemenu {
+    display: none;
+  }
+}
+
 .login-form {
   display: inline-block;
   max-width: 24rem;