From 88da3a99e17ef8b9d3c32d98e2c6f3eebea85ac6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Tue, 6 Jun 2017 11:03:56 +0200
Subject: [PATCH] refactoring: trying to remove all the css overrides in
 history tab and make the styles more more inline with best practice css, and
 if needed use modifier overrides instead

---
 public/app/core/components/switch.ts          |   3 +-
 .../features/dashboard/history/history.html   | 123 +++++++++---------
 public/sass/components/_filter-table.scss     |  17 ++-
 public/sass/components/_gf-form.scss          |   4 -
 public/sass/components/_switch.scss           |  17 ++-
 public/sass/pages/_history.scss               |  58 ---------
 6 files changed, 87 insertions(+), 135 deletions(-)

diff --git a/public/app/core/components/switch.ts b/public/app/core/components/switch.ts
index 889398d5138..371b1ffe112 100644
--- a/public/app/core/components/switch.ts
+++ b/public/app/core/components/switch.ts
@@ -7,7 +7,7 @@ import coreModule from 'app/core/core_module';
 import Drop from 'tether-drop';
 
 var template = `
-<label for="check-{{ctrl.id}}" class="gf-form-label {{ctrl.labelClass}} pointer">
+<label for="check-{{ctrl.id}}" class="gf-form-label {{ctrl.labelClass}} pointer" ng-show="ctrl.label">
   {{ctrl.label}}
   <info-popover mode="right-normal" ng-if="ctrl.tooltip" position="top center">
     {{ctrl.tooltip}}
@@ -24,6 +24,7 @@ export class SwitchCtrl {
   checked: any;
   show: any;
   id: any;
+  label: string;
 
   /** @ngInject */
   constructor($scope, private $timeout) {
diff --git a/public/app/features/dashboard/history/history.html b/public/app/features/dashboard/history/history.html
index a739871b144..431c37705c8 100644
--- a/public/app/features/dashboard/history/history.html
+++ b/public/app/features/dashboard/history/history.html
@@ -33,70 +33,69 @@
 		</div>
 
 		<div ng-if="!ctrl.loading">
-			<div class="history-table gf-form">
-				<div class="gf-form-group">
-					<table class="filter-table">
-						<thead>
-							<tr>
-								<th class="width-4"></th>
-								<th class="width-4">Version</th>
-								<th class="width-14">Date</th>
-								<th class="width-10">Updated By</th>
-								<th class="width-30">Notes</th>
-								<th></th>
-							</tr>
-						</thead>
-						<tbody>
-							<tr ng-repeat="revision in ctrl.revisions">
-								<td bs-tooltip="ctrl.compareRevisionDisabled(revision.checked) ? 'You can only compare 2 versions at a time' : ''">
-									<gf-form-switch checked="revision.checked"
-																	on-change="ctrl.compareRevisionStateChanged(revision)"
-																	ng-disabled="ctrl.compareRevisionDisabled(revision.checked)">
-									</gf-form-switch>
-								</td>
-								<td>{{revision.version}}</td>
-								<td>{{ctrl.formatDate(revision.created)}}</td>
-								<td>{{revision.createdBy}}</td>
-								<td>{{revision.message}}</td>
-								<td class="text-right">
-									<a class="btn btn-inverse btn-small" ng-show="revision.version !== ctrl.dashboard.version" ng-click="ctrl.restore(revision.version)">
-										<i class="fa fa-history"></i>&nbsp;&nbsp;Restore
-									</a>
-									<a class="btn btn-outline-disabled btn-small" ng-show="revision.version === ctrl.dashboard.version">
-										<i class="fa fa-check"></i>&nbsp;&nbsp;Current
-									</a>
-								</td>
-							</tr>
-						</tbody>
-					</table>
+      <div class="gf-form-group">
+        <table class="filter-table">
+          <thead>
+            <tr>
+              <th class="width-4"></th>
+              <th class="width-4">Version</th>
+              <th class="width-14">Date</th>
+              <th class="width-10">Updated By</th>
+              <th class="width-30">Notes</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr ng-repeat="revision in ctrl.revisions">
+              <td class="filter-table__switch-cell" bs-tooltip="ctrl.compareRevisionDisabled(revision.checked) ? 'You can only compare 2 versions at a time' : ''">
+                <gf-form-switch switch-class="gf-form-switch--table-cell"
+                                checked="revision.checked"
+                                on-change="ctrl.compareRevisionStateChanged(revision)"
+                                ng-disabled="ctrl.compareRevisionDisabled(revision.checked)">
+                </gf-form-switch>
+              </td>
+              <td class="text-center">{{revision.version}}</td>
+              <td>{{ctrl.formatDate(revision.created)}}</td>
+              <td>{{revision.createdBy}}</td>
+              <td>{{revision.message}}</td>
+              <td class="text-right">
+                <a class="btn btn-inverse btn-small" ng-show="revision.version !== ctrl.dashboard.version" ng-click="ctrl.restore(revision.version)">
+                  <i class="fa fa-history"></i>&nbsp;&nbsp;Restore
+                </a>
+                <a class="btn btn-outline-disabled btn-small" ng-show="revision.version === ctrl.dashboard.version">
+                  <i class="fa fa-check"></i>&nbsp;&nbsp;Current
+                </a>
+              </td>
+            </tr>
+          </tbody>
+        </table>
 
-					<div ng-if="ctrl.appending">
-						<i class="fa fa-spinner fa-spin"></i>
-						<em>Fetching more entries&hellip;</em>
-					</div>
+        <div ng-if="ctrl.appending">
+          <i class="fa fa-spinner fa-spin"></i>
+          <em>Fetching more entries&hellip;</em>
+        </div>
 
-					<div class="gf-form-group" ng-show="ctrl.mode === 'list'">
-						<div class="gf-form-button-row">
-							<a	type="button"
-									class="btn gf-form-button btn-primary"
-									ng-if="ctrl.revisions.length > 1"
-									ng-class="{disabled: !ctrl.isComparable()}"
-									ng-click="ctrl.getDiff(ctrl.diff)"
-									bs-tooltip="ctrl.isComparable() ? '' : 'Select 2 versions to start comparing'">
-								<i class="fa fa-code-fork" ></i>&nbsp;&nbsp;Compare versions
-							</a>
-							<a  type="button"
-									class="btn gf-form-button btn-inverse"
-									ng-if="ctrl.revisions.length >= ctrl.limit"
-									ng-click="ctrl.addToLog()"
-									ng-class="{disabled: ctrl.isLastPage()}"
-									ng-disabled="ctrl.isLastPage()">
-								Show more versions
-							</a>
-						</div>
-					</div>
-				</div>
-			</div>
+        <div class="gf-form-group" ng-show="ctrl.mode === 'list'">
+          <div class="gf-form-button-row">
+            <a	type="button"
+                class="btn gf-form-button btn-primary"
+                ng-if="ctrl.revisions.length > 1"
+                ng-class="{disabled: !ctrl.isComparable()}"
+                ng-click="ctrl.getDiff(ctrl.diff)"
+                bs-tooltip="ctrl.isComparable() ? '' : 'Select 2 versions to start comparing'">
+              <i class="fa fa-code-fork" ></i>&nbsp;&nbsp;Compare versions
+            </a>
+            <a  type="button"
+                class="btn gf-form-button btn-inverse"
+                ng-if="ctrl.revisions.length >= ctrl.limit"
+                ng-click="ctrl.addToLog()"
+                ng-class="{disabled: ctrl.isLastPage()}"
+                ng-disabled="ctrl.isLastPage()">
+              Show more versions
+            </a>
+          </div>
+        </div>
+      </div>
 		</div>
 	</div>
 
diff --git a/public/sass/components/_filter-table.scss b/public/sass/components/_filter-table.scss
index 67ea8327c0c..65ca43cc6a9 100644
--- a/public/sass/components/_filter-table.scss
+++ b/public/sass/components/_filter-table.scss
@@ -19,24 +19,21 @@
 
 .filter-table tr {
   background: $grafanaListBackground;
-  border-bottom: 2px solid $page-bg;
+  border-bottom: 3px solid $page-bg;
 }
 
 .filter-table th {
   width: auto;
-  padding: 10px 15px 10px 0;
+  padding: $table-cell-padding;
   text-align: left;
-
-  &:first-child {
-    padding-left: 15px;
-  }
 }
 
 .filter-table td {
-  padding: 15px 15px 15px 0;
+  padding: $table-cell-padding;
 
-  &:first-child {
-    padding-left: 15px;
+  &.filter-table__switch-cell {
+    padding: 0;
+    border-right: 3px solid $page-bg;
   }
 }
 
@@ -55,3 +52,5 @@
 .filter-table .expanded > td {
   padding-bottom: 0;
 }
+
+
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index 888b9bad238..7ff07b6e887 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -232,10 +232,6 @@ $gf-form-margin: 0.25rem;
   flex-grow: 0;
 }
 
-.gf-form-switch {
-  margin-right: $gf-form-margin;
-}
-
 .natural-language-input {
   &input[type="number"] {
     font-size: $font-size-base;
diff --git a/public/sass/components/_switch.scss b/public/sass/components/_switch.scss
index 00b50c6da9a..f09e83f8908 100644
--- a/public/sass/components/_switch.scss
+++ b/public/sass/components/_switch.scss
@@ -11,6 +11,7 @@ $switch-height: 1.5rem;
   max-width: 4.5rem;
   flex-grow: 1;
   min-width: 4.0rem;
+  margin-right: $gf-form-margin;
 
   input {
     position: absolute;
@@ -42,8 +43,10 @@ $switch-height: 1.5rem;
     color: #fff;
     font-size: $font-size-sm;
     text-align: center;
-    line-height: 2.8rem;
     font-size: 150%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
   }
 
   &:hover {
@@ -89,6 +92,14 @@ $switch-height: 1.5rem;
     transform: rotateY(0);
   }
 
+  &--table-cell {
+    margin-bottom: 0;
+    margin-right: 0;
+
+    input + label {
+      height: 3.6rem;
+    }
+  }
 }
 
 gf-form-switch[disabled]  {
@@ -96,5 +107,9 @@ gf-form-switch[disabled]  {
   .gf-form-switch input + label {
     cursor: default;
     pointer-events: none !important;
+    &::before {
+      color: $text-color-faint;
+      text-shadow: none;
+    }
   }
 }
diff --git a/public/sass/pages/_history.scss b/public/sass/pages/_history.scss
index bb3770a1836..eb2ac4181ee 100644
--- a/public/sass/pages/_history.scss
+++ b/public/sass/pages/_history.scss
@@ -1,61 +1,3 @@
-// History Table
-.history-table {
-  // .gf-form overrides
-  .gf-form-label { display: none; }
-
-  .gf-form-switch {
-    margin-bottom: 0;
-
-    input + label {
-      height: 3.6rem;
-      width: 110%;
-    }
-
-    input + label::before, input + label::after {
-      background-color: $diff-switch-bg;
-      background-image: none;
-      border: 0;
-      height: 50px;
-      line-height: 3.7rem;
-    }
-  }
-
-  gf-form-switch[disabled]  {
-    .gf-form-switch input + label {
-      &::before {
-        color: $diff-switch-disabled;
-        text-shadow: none;
-      }
-    }
-  }
-
-  // .filter-table overrides
-  .filter-table {
-    tr {
-      border-bottom: 3px solid $page-bg;
-    }
-
-    thead tr {
-      border-width: 3px;
-    }
-
-    $date-padding: 1em;
-
-    td {
-      padding: 0;
-
-      &:nth-child(2) {
-        border-left: 5px solid $page-bg;
-        padding-left: 1.5em;
-      }
-      &:nth-child(3) { padding-left: $date-padding; }
-      &:last-child { padding-right: 1.5em; }
-    }
-
-    th:nth-child(2) { padding-left: 0.5em; }
-    th:nth-child(3) { padding-left: $date-padding; }
-  }
-}
 
 // Diff View
 .history-list {