refactoring: trying to remove all the css overrides in history tab and make the…

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

@@ -7,7 +7,7 @@ import coreModule from 'app/core/core_module';
 import Drop from 'tether-drop';
 import Drop from 'tether-drop';
 
 
 var template = `
 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}}
   {{ctrl.label}}
   <info-popover mode="right-normal" ng-if="ctrl.tooltip" position="top center">
   <info-popover mode="right-normal" ng-if="ctrl.tooltip" position="top center">
     {{ctrl.tooltip}}
     {{ctrl.tooltip}}
@@ -24,6 +24,7 @@ export class SwitchCtrl {
   checked: any;
   checked: any;
   show: any;
   show: any;
   id: any;
   id: any;
+  label: string;
 
 
   /** @ngInject */
   /** @ngInject */
   constructor($scope, private $timeout) {
   constructor($scope, private $timeout) {

public/app/features/dashboard/history/history.html

@@ -33,7 +33,6 @@
 		</div>
 		</div>
 
 
 		<div ng-if="!ctrl.loading">
 		<div ng-if="!ctrl.loading">
-			<div class="history-table gf-form">
       <div class="gf-form-group">
       <div class="gf-form-group">
         <table class="filter-table">
         <table class="filter-table">
           <thead>
           <thead>
@@ -48,13 +47,14 @@
           </thead>
           </thead>
           <tbody>
           <tbody>
             <tr ng-repeat="revision in ctrl.revisions">
             <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"
+              <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)"
                                 on-change="ctrl.compareRevisionStateChanged(revision)"
                                 ng-disabled="ctrl.compareRevisionDisabled(revision.checked)">
                                 ng-disabled="ctrl.compareRevisionDisabled(revision.checked)">
                 </gf-form-switch>
                 </gf-form-switch>
               </td>
               </td>
-								<td>{{revision.version}}</td>
+              <td class="text-center">{{revision.version}}</td>
               <td>{{ctrl.formatDate(revision.created)}}</td>
               <td>{{ctrl.formatDate(revision.created)}}</td>
               <td>{{revision.createdBy}}</td>
               <td>{{revision.createdBy}}</td>
               <td>{{revision.message}}</td>
               <td>{{revision.message}}</td>
@@ -98,7 +98,6 @@
       </div>
       </div>
 		</div>
 		</div>
 	</div>
 	</div>
-	</div>
 
 
 	<div class="history-list" ng-if="ctrl.mode === 'compare'">
 	<div class="history-list" ng-if="ctrl.mode === 'compare'">
 		<div class="page-container">
 		<div class="page-container">

public/sass/components/_filter-table.scss

@@ -19,24 +19,21 @@
 
 
 .filter-table tr {
 .filter-table tr {
   background: $grafanaListBackground;
   background: $grafanaListBackground;
-  border-bottom: 2px solid $page-bg;
+  border-bottom: 3px solid $page-bg;
 }
 }
 
 
 .filter-table th {
 .filter-table th {
   width: auto;
   width: auto;
-  padding: 10px 15px 10px 0;
+  padding: $table-cell-padding;
   text-align: left;
   text-align: left;
-
-  &:first-child {
-    padding-left: 15px;
-  }
 }
 }
 
 
 .filter-table td {
 .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 {
 .filter-table .expanded > td {
   padding-bottom: 0;
   padding-bottom: 0;
 }
 }
+
+

public/sass/components/_gf-form.scss

@@ -232,10 +232,6 @@ $gf-form-margin: 0.25rem;
   flex-grow: 0;
   flex-grow: 0;
 }
 }
 
 
-.gf-form-switch {
-  margin-right: $gf-form-margin;
-}
-
 .natural-language-input {
 .natural-language-input {
   &input[type="number"] {
   &input[type="number"] {
     font-size: $font-size-base;
     font-size: $font-size-base;

public/sass/components/_switch.scss

@@ -11,6 +11,7 @@ $switch-height: 1.5rem;
   max-width: 4.5rem;
   max-width: 4.5rem;
   flex-grow: 1;
   flex-grow: 1;
   min-width: 4.0rem;
   min-width: 4.0rem;
+  margin-right: $gf-form-margin;
 
 
   input {
   input {
     position: absolute;
     position: absolute;
@@ -42,8 +43,10 @@ $switch-height: 1.5rem;
     color: #fff;
     color: #fff;
     font-size: $font-size-sm;
     font-size: $font-size-sm;
     text-align: center;
     text-align: center;
-    line-height: 2.8rem;
     font-size: 150%;
     font-size: 150%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
   }
   }
 
 
   &:hover {
   &:hover {
@@ -89,6 +92,14 @@ $switch-height: 1.5rem;
     transform: rotateY(0);
     transform: rotateY(0);
   }
   }
 
 
+  &--table-cell {
+    margin-bottom: 0;
+    margin-right: 0;
+
+    input + label {
+      height: 3.6rem;
+    }
+  }
 }
 }
 
 
 gf-form-switch[disabled]  {
 gf-form-switch[disabled]  {
@@ -96,5 +107,9 @@ gf-form-switch[disabled]  {
   .gf-form-switch input + label {
   .gf-form-switch input + label {
     cursor: default;
     cursor: default;
     pointer-events: none !important;
     pointer-events: none !important;
+    &::before {
+      color: $text-color-faint;
+      text-shadow: none;
+    }
   }
   }
 }
 }

public/sass/pages/_history.scss

-// 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
 // Diff View
 .history-list {
 .history-list {