Merge pull request #14242 from grafana/various-style-fixes

Fixed styling issues with new checkbox style

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

@@ -67,7 +67,7 @@
       <gf-form-checkbox
         on-change="ctrl.onSelectAllChanged()"
         checked="ctrl.selectAllChecked"
-        switch-class="gf-form-switch--transparent"
+        switch-class="gf-form-checkbox--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)">
+    <div ng-click="ctrl.toggleSelection(section, $event)" class="center-vh">
       <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">
+         switch-class="gf-form-checkbox--transparent">
       </gf-form-checkbox>
     </div>
     <i class="search-section__header__icon" ng-class="section.icon"></i>
@@ -21,12 +21,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)">
+      <div ng-click="ctrl.toggleSelection(item, $event)" class="center-vh">
         <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">
+           switch-class="gf-form-checkbox--transparent">
         </gf-form-checkbox>
       </div>
       <span class="search-item__icon">

public/app/plugins/datasource/testdata/datasource.ts

@@ -84,6 +84,13 @@ class TestDataDatasource {
     }
     return this.$q.when(events);
   }
+
+  testDatasource() {
+    return Promise.resolve({
+      status: 'success',
+      message: 'Data source is working',
+    });
+  }
 }
 
 export { TestDataDatasource };

public/sass/components/_dashboard_list.scss

@@ -12,6 +12,7 @@
   height: 35px;
   display: flex;
   justify-content: space-between;
+  align-items: center;
 
   .gf-form-button-row {
     padding-top: 0;

public/sass/components/_gf-form.scss

@@ -141,19 +141,6 @@ $input-border: 1px solid $input-border-color;
   @include border-radius($label-border-radius-sm);
 }
 
-.gf-form-checkbox {
-  flex-shrink: 0;
-  padding: $input-padding-y $input-padding-x;
-  line-height: $input-line-height;
-
-  .checkbox-label {
-    display: inline;
-    cursor: pointer;
-    padding: $input-padding-y 0.4rem;
-    line-height: $input-line-height;
-  }
-}
-
 .gf-form-textarea {
   max-width: 650px;
 }

public/sass/components/_switch.scss

@@ -78,6 +78,9 @@ input:checked + .gf-form-switch__slider::before {
   border: 1px solid $input-border-color;
   border-left: none;
   border-radius: $input-border-radius;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   input {
     opacity: 0;
@@ -88,25 +91,14 @@ input:checked + .gf-form-switch__slider::before {
   &--transparent {
     background: transparent;
     border: none;
-  }
-
-  &--search-result__section {
-    width: 3.05rem;
+    width: 20px;
     height: auto;
     position: relative;
-    top: -5px;
-    left: 3px;
-  }
-
-  &--search-result__item {
-    width: 2.7rem;
-    height: auto;
-    position: relative;
-    top: 3px;
+    padding-left: 7px;
   }
 
   &--table-cell {
-    width: 40px;
+    width: 20px;
     background: transparent;
     height: auto;
     border: none;
@@ -116,17 +108,14 @@ input:checked + .gf-form-switch__slider::before {
 }
 
 .gf-form-switch__checkbox {
-  position: absolute;
-  left: 16px;
   height: 16px;
   width: 16px;
   border-radius: 3px;
   border: $checkbox-border;
   background: $checkbox-bg;
-  top: 8px;
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
 }
 
 input:checked + .gf-form-switch__checkbox::before {

public/sass/utils/_utils.scss

@@ -82,3 +82,10 @@ button.close {
 .absolute {
   position: absolute;
 }
+
+.center-vh {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  justify-items: center;
+}