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,36 +37,39 @@
         <em>No template variables defined</em>
         <br /> <br />
 			</div>
-      <table class="grafana-options-table">
+      <table class="filter-table filter-table--hover">
-        <tr ng-repeat="variable in variables">
+      	<thead>
-          <td style="width: 1%">
+      		<tr>
-            <span class="template-variable">
+						<th>Variable</th>
-              ${{variable.name}}
+						<th>Definition</th>
-            </span>
+						<th colspan="5"></th>
-          </td>
+					</tr>
-          <td class="max-width" style="max-width: 200px;">
+				</thead>
-            {{variable.query}}
+				<tbody>
-          </td>
+					<tr ng-repeat="variable in variables">
+						<td style="width: 1%">
+							<span ng-click="edit(variable)" class="pointer template-variable">
+								${{variable.name}}
+							</span>
+						</td>
+						<td style="max-width: 200px;" ng-click="edit(variable)" class="pointer max-width">
+							{{variable.query}}
+						</td>
 
-          <td style="width: 1%"><i ng-click="_.move(variables,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
+						<td style="width: 1%"><i ng-click="_.move(variables,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
-          <td style="width: 1%"><i ng-click="_.move(variables,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>
+						<td style="width: 1%"><i ng-click="_.move(variables,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>
-          <td style="width: 1%">
+						<td style="width: 1%">
-            <a ng-click="duplicate(variable)" class="btn btn-inverse btn-mini">
+							<a ng-click="duplicate(variable)" class="btn btn-inverse btn-mini">
-              Duplicate
+								Duplicate
-            </a>
+							</a>
-          </td>
+						</td>
-          <td style="width: 1%">
+						<td style="width: 1%">
-            <a ng-click="edit(variable)" class="btn btn-inverse btn-mini">
+							<a ng-click="removeVariable(variable)" class="btn btn-danger btn-mini">
-              <i class="fa fa-edit"></i>
+								<i class="fa fa-remove"></i>
-              Edit
+							</a>
-            </a>
+						</td>
-          </td>
+					</tr>
-          <td style="width: 1%">
+				</tbody>
-            <a ng-click="removeVariable(variable)" class="btn btn-danger btn-mini">
-              <i class="fa fa-remove"></i>
-            </a>
-          </td>
-        </tr>
       </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 {
+  tbody {
-  background-color: $list-item-bg;
+    tr:nth-child(odd) {
-  border-bottom: 3px solid $page-bg;
+      background: $dark-2;
-}
+    }
+  }
 
-.filter-table th {
+  thead {
-  width: auto;
+    tr {
-  padding: $table-cell-padding;
+      background: linear-gradient(0deg, #3c3f5a, #292f44);
-  text-align: left;
+    }
-}
+  }
 
-.filter-table td {
+  th {
-  padding: $table-cell-padding;
+    width: auto;
+    padding: $table-cell-padding;
+    text-align: left;
+    line-height: 30px;
+    height: 30px;
+    white-space: nowrap;
+  }
+
+  td {
+    padding: $table-cell-padding;
+    line-height: 30px;
+    height: 30px;
+    border-bottom: 1px solid black;
+    white-space: nowrap;
 
-  &.filter-table__switch-cell {
+    &.filter-table__switch-cell {
-    padding: 0;
+      padding: 0;
-    border-right: 3px solid $page-bg;
+      border-right: 3px solid $page-bg;
+    }
   }
-}
 
-.filter-table .ellipsis {
+  .ellipsis {
-  display: block;
+    display: block;
-  width: 100%;
+    width: 100%;
-  white-space: nowrap;
+    white-space: nowrap;
-  overflow: hidden;
+    overflow: hidden;
-  text-overflow: ellipsis;
+    text-overflow: ellipsis;
-}
+  }
 
-.filter-table .expanded {
+  .expanded {
-  border-color: $panel-bg;
+    border-color: $panel-bg;
-}
+  }
 
-.filter-table .expanded > td {
+  .expanded > td {
-  padding-bottom: 0;
+    padding-bottom: 0;
-}
+  }
+
+  .filter-table__avatar {
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+  }
 
-.filter-table__avatar {
+  &--hover {
-  width: 25px;
+    tbody tr:hover {
-  height: 25px;
+      background: $dark-3;
-  border-radius: 50%;
+    }
+  }
 }

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;