ux(): checkbox now works in dark and white theme

pkg/api/api.go

@@ -45,6 +45,8 @@ func Register(r *macaron.Macaron) {
 	r.Get("/admin/orgs/edit/:id", reqGrafanaAdmin, Index)
 	r.Get("/admin/stats", reqGrafanaAdmin, Index)
 
+	r.Get("/styleguide", reqSignedIn, Index)
+
 	r.Get("/plugins", reqSignedIn, Index)
 	r.Get("/plugins/:id/edit", reqSignedIn, Index)
 	r.Get("/plugins/:id/page/:page", reqSignedIn, Index)

public/app/core/components/switch.ts

@@ -7,7 +7,7 @@ import coreModule from 'app/core/core_module';
 
 var template = `
 <label for="check-{{$id}}" class="gf-form-label {{ctrl.labelClass}} pointer">{{ctrl.label}}</label>
-<div class="gf-form-switch {{ctrl.switchClass}}" >
+<div class="gf-form-switch {{ctrl.switchClass}}">
   <input id="check-{{$id}}" type="checkbox" ng-model="ctrl.checked" ng-change="ctrl.internalOnChange()">
   <label for="check-{{$id}}" data-on="Yes" data-off="No"></label>
 </div>
@@ -15,6 +15,11 @@ var template = `
 
 export class SwitchCtrl {
   onChange: any;
+  checked: any;
+
+  constructor() {
+    console.log('property: ' + this.checked, this);
+  }
 
   internalOnChange() {
     return new Promise(resolve => {

public/app/features/dashboard/partials/settings.html

@@ -56,19 +56,19 @@
 				<div class="gf-form">
 					<span class="gf-form-label">Title</span>
 					<input type="text" class="gf-form-input max-width-14" ng-model='row.title'></input>
-					<editor-checkbox text="Show title" model="row.showTitle"></editor-checkbox>
 				</div>
+				<gf-form-switch class="gf-form" label="Show title" checked="row.showTitle" switch-class="max-width-6"></gf-form-switch>
 
 				<div class="gf-form">
-					<button class="btn btn-inverse btn-mini" style="margin-right: 5px;" ng-click="dashboard.rows = _.without(dashboard.rows,row)">
-						<i class="fa fa-trash"></i>
-					</button>
-					<button class="btn btn-inverse btn-mini" ng-hide="$first" style="margin-right: 5px;" ng-click="_.move(dashboard.rows,$index,$index-1)">
+					<button class="btn btn-inverse gf-form-btn" ng-click="_.move(dashboard.rows,$index,$index-1)">
 						<i ng-class="{'invisible': $first}" class="fa fa-arrow-up"></i>
 					</button>
-					<button class="btn btn-inverse btn-mini" ng-hide="$last" style="margin-right: 5px;" ng-click="_.move(dashboard.rows,$index,$index+1)">
+					<button class="btn btn-inverse gf-from-btn" ng-click="_.move(dashboard.rows,$index,$index+1)">
 						<i ng-class="{'invisible': $last}" class="fa fa-arrow-down"></i>
 					</button>
+					<button class="btn btn-inverse gf-form-btn" click="dashboard.rows = _.without(dashboard.rows,row)">
+						<i class="fa fa-trash"></i>
+					</button>
 				</div>
 			</div>
 		</div>

public/app/features/plugins/partials/ds_edit.html

@@ -27,16 +27,17 @@
 
     <form name="ctrl.editForm">
       <div class="gf-form-group">
+        <div class="gf-form-inline">
 					<div class="gf-form">
 						<span class="gf-form-label width-7">Name</span>
 						<input class="gf-form-input max-width-21" type="text" ng-model="ctrl.current.name" placeholder="My data source name" required>
-          <info-popover offset="0px -95px">
+						<info-popover offset="0px -130px">
 							The name is used when you select the data source in panels.
 							The <code>Default</code> data source is preselected in new
 							panels.
 						</info-popover>
-
-          <editor-checkbox text="Default" model="ctrl.current.isDefault"></editor-checkbox>
+					</div>
+					<gf-form-switch class="gf-form" label="Default" checked="ctrl.current.isDefault" switch-class="max-width-6"></gf-form-switch>
 				</div>
 
 				<div class="gf-form">

public/sass/_variables.dark.scss

@@ -54,8 +54,11 @@ $body-color:   		 	$gray-4;
 $text-color:   	   		  $gray-4;
 $text-color-strong: 	  $white;
 $text-color-weak: 		  $gray-2;
+$text-color-faint:      $gray-1;
 $text-color-emphasis: 	$gray-5;
 
+$text-shadow-strong: 1px 1px 4px $black;
+$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
 
 // gradients
 $brand-gradient: linear-gradient(to right, rgba(255,213,0,0.7) 0%, rgba(255,68,0,0.7) 99%, rgba(255,68,0,0.7) 100%);

public/sass/_variables.light.scss

@@ -60,8 +60,12 @@ $body-color:    		    $gray-1;
 $text-color:    		    $gray-1;
 $text-color-strong:	    $white;
 $text-color-weak: 	    $gray-1;
+$text-color-faint:      $gray-3;
 $text-color-emphasis: 	$dark-5;
 
+$text-shadow-strong: none;
+$text-shadow-faint: none;
+
 // gradients
 $brand-gradient: linear-gradient(to right, rgba(255,213,0,1.0) 0%, rgba(255,68,0,1.0) 99%, rgba(255,68,0,1.0) 100%);
 $page-gradient: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%);

public/sass/components/_gf-form.scss

@@ -141,18 +141,10 @@ $gf-form-margin: 0.25rem;
   }
 }
 
-<<<<<<< HEAD
-||||||| merged common ancestors
-.gf-form-select-wrapper + .gf-form-select-wrapper {
-  margin-left: $gf-form-label-margin;
-}
-
-=======
 .gf-form--v-stretch {
   align-items: stretch;
 }
 
->>>>>>> master
 .gf-form-btn {
   margin-right: $gf-form-margin;
   padding: $input-padding-y $input-padding-x;
@@ -160,15 +152,11 @@ $gf-form-margin: 0.25rem;
   flex-shrink: 0;
   flex-grow: 0;
 }
-<<<<<<< HEAD
 
 .gf-form-switch {
   margin-right: $gf-form-margin;
 }
 
-||||||| merged common ancestors
-=======
-
 .natural-language-input {
   &input[type="number"] {
     font-size: $font-size-base;
@@ -178,4 +166,3 @@ $gf-form-margin: 0.25rem;
   }
 }
 
->>>>>>> master

public/sass/components/_switch.scss

@@ -50,40 +50,33 @@ $switch-height: 1.5rem;
     input + label:before {
       @include buttonBackground($input-bg, lighten($input-bg, 5%));
       color: $text-color;
-      text-shadow: 1px 1px 4px rgb(45, 45, 45);
+      text-shadow: $text-shadow-faint;
     }
 
     input + label:after {
       @include buttonBackground($input-bg, lighten($input-bg, 5%));
-      color: lighten(#FF8600, 10%);
-      text-shadow: 1px 1px 4px rgb(25, 25, 25);
+      color: lighten($orange, 10%);
+      text-shadow: $text-shadow-strong;
     }
 
   }
 
   input + label:before {
-    //content: attr(data-off);
     font-family: 'FontAwesome';
-    //content: "\f00c";
-
     content: "\f096"; // square-o
-    //content: "\f046"; // check-square-o
-    color: darken($text-color-weak, 10%);
-    transition: transform 0.4s;
+    color: $text-color-faint;
+    //transition: transform 0.4s;
     backface-visibility: hidden;
-    text-shadow: 1px 1px 4px rgb(45, 45, 45);
+    text-shadow: $text-shadow-faint;
   }
 
   input + label:after {
-    //@include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
-    //content: attr(data-on);
-    //content: "\f00c";
     content: "\f046"; // check-square-o
-    color: #FF8600;
-    text-shadow: 1px 1px 4px rgb(25, 25, 25);
+    color: $orange;
+    text-shadow: $text-shadow-strong;
 
     font-family: 'FontAwesome';
-    transition: transform 0.4s;
+    //transition: transform 0.4s;
     transform: rotateY(180deg);
     backface-visibility: hidden;
   }