added chekbox and other tweaks

public/app/core/components/Switch/Switch.tsx

@@ -36,17 +36,13 @@ export class Switch extends PureComponent<Props, State> {
     }
 
     return (
-      <div className="gf-form">
-        {label && (
-          <label htmlFor={labelId} className={labelClassName}>
-            {label}
-          </label>
-        )}
+      <label htmlFor={labelId} className="gf-form-switch-container">
+        {label && <label className={labelClassName}>{label}</label>}
         <div className={switchClassName}>
           <input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} />
           <span className="gf-form-switch__slider" />
         </div>
-      </div>
+      </label>
     );
   }
 }

public/app/core/components/manage_dashboards/manage_dashboards.html

@@ -64,10 +64,10 @@
 
   <div class="search-results" ng-show="ctrl.sections.length > 0">
     <div class="search-results-filter-row">
-      <gf-form-switch
+      <gf-form-checkbox
         on-change="ctrl.onSelectAllChanged()"
         checked="ctrl.selectAllChecked"
-        switch-class="gf-form-switch--transparent gf-form-switch--search-result-filter-row__checkbox"
+        switch-class="gf-form-switch--transparent"
       />
       <div class="search-results-filter-row__filters">
         <div class="gf-form-select-wrapper" ng-show="!(ctrl.canMove || ctrl.canDelete)">

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

 <div ng-repeat="section in ctrl.results" class="search-section">
   <div class="search-section__header pointer" ng-hide="section.hideHeader" ng-class="{'selected': section.selected}" ng-click="ctrl.toggleFolderExpand(section)">
     <div ng-click="ctrl.toggleSelection(section, $event)">
-      <gf-form-switch
+      <gf-form-checkbox
          ng-show="ctrl.editable"
          on-change="ctrl.selectionChanged($event)"
          checked="section.checked"
          switch-class="gf-form-switch--transparent gf-form-switch--search-result__section">
-      </gf-form-switch>
+      </gf-form-checkbox>
     </div>
     <i class="search-section__header__icon" ng-class="section.icon"></i>
     <span class="search-section__header__text">{{::section.title}}</span>
@@ -22,12 +22,12 @@
   <div ng-if="section.expanded">
     <a ng-repeat="item in section.items" class="search-item search-item--indent" ng-class="{'selected': item.selected}" ng-href="{{::item.url}}" >
       <div ng-click="ctrl.toggleSelection(item, $event)">
-        <gf-form-switch
+        <gf-form-checkbox
            ng-show="ctrl.editable"
            on-change="ctrl.selectionChanged()"
            checked="item.checked"
            switch-class="gf-form-switch--transparent gf-form-switch--search-result__item">
-        </gf-form-switch>
+        </gf-form-checkbox>
       </div>
       <span class="search-item__icon">
         <i class="gicon mini gicon-dashboard-list"></i>

public/app/core/components/switch.ts

@@ -15,6 +15,15 @@ const template = `
 </label>
 `;
 
+const checkboxTemplate = `
+<label for="check-{{ctrl.id}}" class="gf-form-check-container">
+  <div class="gf-form-switch {{ctrl.switchClass}}" ng-if="ctrl.show">
+    <input id="check-{{ctrl.id}}" type="checkbox" ng-model="ctrl.checked" ng-change="ctrl.internalOnChange()">
+    <span class="gf-form-switch__checkbox"></span>
+  </div>
+</label>
+`;
+
 export class SwitchCtrl {
   onChange: any;
   checked: any;
@@ -53,4 +62,23 @@ export function switchDirective() {
   };
 }
 
+export function checkboxDirective() {
+  return {
+    restrict: 'E',
+    controller: SwitchCtrl,
+    controllerAs: 'ctrl',
+    bindToController: true,
+    scope: {
+      checked: '=',
+      label: '@',
+      labelClass: '@',
+      tooltip: '@',
+      switchClass: '@',
+      onChange: '&',
+    },
+    template: checkboxTemplate,
+  };
+}
+
 coreModule.directive('gfFormSwitch', switchDirective);
+coreModule.directive('gfFormCheckbox', checkboxDirective);

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

@@ -30,8 +30,8 @@
         <tbody>
           <tr ng-repeat="revision in ctrl.revisions">
             <td class="filter-table__switch-cell" bs-tooltip="!revision.checked && ctrl.canCompare ? 'You can only compare 2 versions at a time' : ''" data-placement="right">
-              <gf-form-switch switch-class="gf-form-switch--table-cell" checked="revision.checked" on-change="ctrl.revisionSelectionChanged()" ng-disabled="!revision.checked && ctrl.canCompare">
-              </gf-form-switch>
+              <gf-form-checkbox switch-class="gf-form-switch--table-cell" checked="revision.checked" on-change="ctrl.revisionSelectionChanged()" ng-disabled="!revision.checked && ctrl.canCompare">
+              </gf-form-checkbox>
             </td>
             <td class="text-center">{{revision.version}}</td>
             <td>{{revision.createdDateString}}</td>

public/app/features/panel/panel_directive.ts

@@ -44,8 +44,8 @@ const panelTemplate = `
             </li>
           </ul>
 
-          <button class="panel-editor-tabs__close" ng-click="ctrl.exitFullscreen();">
-            <i class="fa fa-reply"></i>
+          <button class="tabbed-view-close-btn" ng-click="ctrl.exitFullscreen();">
+            <i class="fa fa-remove"></i>
           </button>
         </div>
 
@@ -80,6 +80,16 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => {
       let lastAlertState;
       let hasAlertRule;
 
+      function mouseEnter() {
+        panelContainer.toggleClass('panel-hover-highlight', true);
+        ctrl.dashboard.setPanelFocus(ctrl.panel.id);
+      }
+
+      function mouseLeave() {
+        panelContainer.toggleClass('panel-hover-highlight', false);
+        ctrl.dashboard.setPanelFocus(0);
+      }
+
       function resizeScrollableContent() {
         if (panelScrollbar) {
           panelScrollbar.update();
@@ -130,6 +140,19 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => {
         });
       });
 
+      ctrl.events.on('view-mode-changed', () => {
+        // first wait one pass for dashboard fullscreen view mode to take effect (classses being applied)
+        setTimeout(() => {
+          // then recalc style
+          ctrl.calculatePanelHeight();
+          // then wait another cycle (this might not be needed)
+          $timeout(() => {
+            ctrl.render();
+            resizeScrollableContent();
+          });
+        });
+      });
+
       // set initial height
       ctrl.calculatePanelHeight();
 
@@ -151,7 +174,11 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => {
             panelContainer.removeClass('panel-alert-state--' + lastAlertState);
           }
 
-          if (ctrl.alertState.state === 'ok' || ctrl.alertState.state === 'alerting') {
+          if (
+            ctrl.alertState.state === 'ok' ||
+            ctrl.alertState.state === 'alerting' ||
+            ctrl.alertState.state === 'pending'
+          ) {
             panelContainer.addClass('panel-alert-state--' + ctrl.alertState.state);
           }
 
@@ -202,6 +229,9 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => {
         scope.$apply(ctrl.openInspector.bind(ctrl));
       });
 
+      elem.on('mouseenter', mouseEnter);
+      elem.on('mouseleave', mouseLeave);
+
       scope.$on('$destroy', () => {
         elem.off();
         cornerInfoElem.off();

public/sass/_variables.scss

@@ -138,6 +138,7 @@ $input-padding-y-lg: 10px !default;
 $input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default;
 
 $gf-form-margin: 0.2rem;
+$gf-form-input-height: 35px;
 
 $cursor-disabled: not-allowed !default;
 

public/sass/components/_gf-form.scss

@@ -102,6 +102,7 @@ $input-border: 1px solid $input-border-color;
 
   background-color: $input-label-bg;
   display: block;
+  height: $gf-form-input-height;
 
   border: $input-btn-border-width solid $input-label-border-color;
   border-right: none;
@@ -160,6 +161,7 @@ $input-border: 1px solid $input-border-color;
 .gf-form-input {
   display: block;
   width: 100%;
+  height: $gf-form-input-height;
   padding: $input-padding-y $input-padding-x;
   margin-right: $gf-form-margin;
   font-size: $font-size-md;
@@ -345,9 +347,6 @@ $input-border: 1px solid $input-border-color;
 .gf-form-dropdown-typeahead {
   margin-right: $gf-form-margin;
   position: relative;
-  background-color: $input-bg;
-  border: $input-border;
-  border-radius: $input-border-radius;
 
   &::after {
     position: absolute;
@@ -360,10 +359,6 @@ $input-border: 1px solid $input-border-color;
     pointer-events: none;
     font-size: 11px;
   }
-
-  .gf-form-input {
-    border: none;
-  }
 }
 
 .gf-form-help-icon {

public/sass/components/_switch.scss

@@ -2,110 +2,66 @@
   SWITCH 3 - YES NO
 ============================================================ */
 
-.gf-form-switch {
-  &--small {
-    max-width: 2rem;
-    min-width: 1.5rem;
-
-    input + label {
-      height: 25px;
-    }
-
-    input + label::before,
-    input + label::after {
-      font-size: $font-size-sm;
-    }
-  }
-
-  &--table-cell {
-    margin-bottom: 0;
-    margin-right: 0;
-
-    input + label {
-      height: 3.6rem;
-    }
-  }
-}
-
-.gf-form-switch--transparent {
-  input + label {
-    background: transparent;
-    border: none;
-  }
-
-  input + label::before,
-  input + label::after {
-    background: transparent;
-    border: none;
-  }
-
-  &:hover {
-    input + label::before {
-      background: transparent;
-    }
-
-    input + label::after {
-      background: transparent;
-    }
-  }
-}
-
-.gf-form-switch--search-result__section {
-  min-width: 3.05rem;
-  margin-right: -0.3rem;
-
-  input + label {
-    height: 1.7rem;
-  }
-}
-
-.gf-form-switch--search-result__item {
-  min-width: 2.7rem;
-
-  input + label {
-    height: 2.7rem;
-  }
-}
-
-.gf-form-switch--search-result-filter-row__checkbox {
-  min-width: 3.75rem;
-
-  input + label {
-    height: 2.5rem;
-  }
-}
-
 gf-form-switch[disabled] {
-  .gf-form-label,
-  .gf-form-switch input + label {
+  .gf-form-switch,
+  .gf-form-switch-container {
     cursor: default;
     pointer-events: none !important;
-    &::before,
-    &::after {
-      color: $text-color-faint;
-      text-shadow: none;
+    .gf-form-label {
+      color: $text-color-weak;
     }
   }
 }
 
 .gf-form-switch-container {
   display: flex;
+  cursor: pointer;
 }
 
 .gf-form-switch {
   position: relative;
   display: inline-block;
   width: 60px;
-  height: 34px;
+  height: $gf-form-input-height;
   background: $switch-bg;
   border: 1px solid $input-border-color;
   border-left: none;
+  border-radius: $input-border-radius;
 
   input {
     opacity: 0;
     width: 0;
     height: 0;
   }
+
+  &--transparent {
+    background: transparent;
+    border: none;
+  }
+
+  &--search-result__section {
+    width: 3.05rem;
+    height: auto;
+    position: relative;
+    top: -5px;
+    left: 3px;
+  }
+
+  &--search-result__item {
+    width: 2.7rem;
+    height: auto;
+    position: relative;
+    top: 3px;
+  }
+
+  &--table-cell {
+    width: 40px;
+    background: transparent;
+    height: auto;
+    border: none;
+    position: relative;
+    top: -5px;
+  }
 }
 
 /* The slider */
@@ -118,6 +74,7 @@ gf-form-switch[disabled] {
   background: $switch-slider-off-bg;
   border-radius: 8px;
   height: 16px;
+  width: 29px;
 
   &::before {
     position: absolute;
@@ -137,16 +94,10 @@ input:checked + .gf-form-switch__slider {
   background: $switch-slider-on-bg;
 }
 
-/* input:focus + .gf-form-switch__slider { */
-/*   box-shadow: 0 0 1px #2196f3; */
-/* } */
-
 input:checked + .gf-form-switch__slider::before {
   transform: translateX(14px);
 }
 
-/* The Checkbox */
-
 .gf-form-switch__checkbox {
   position: absolute;
   left: 16px;
@@ -160,6 +111,7 @@ input:checked + .gf-form-switch__slider::before {
   justify-content: center;
   align-items: center;
 }
+
 input:checked + .gf-form-switch__checkbox::before {
   font-family: 'FontAwesome';
   content: '\f00c';