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,58 +27,59 @@
 
     <form name="ctrl.editForm">
       <div class="gf-form-group">
-        <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">
-            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>
+        <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 -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>
+					</div>
+					<gf-form-switch class="gf-form" label="Default" checked="ctrl.current.isDefault" switch-class="max-width-6"></gf-form-switch>
+				</div>
 
-          <editor-checkbox text="Default" model="ctrl.current.isDefault"></editor-checkbox>
-        </div>
+				<div class="gf-form">
+					<span class="gf-form-label width-7">Type</span>
+					<div class="gf-form-select-wrapper">
+						<select class="gf-form-input gf-size-auto" ng-model="ctrl.current.type" ng-options="v.id as v.name for v in ctrl.types" ng-change="ctrl.typeChanged()"></select>
+					</div>
+				</div>
+			</div>
 
-        <div class="gf-form">
-          <span class="gf-form-label width-7">Type</span>
-          <div class="gf-form-select-wrapper">
-            <select class="gf-form-input gf-size-auto" ng-model="ctrl.current.type" ng-options="v.id as v.name for v in ctrl.types" ng-change="ctrl.typeChanged()"></select>
-          </div>
-        </div>
-      </div>
+			<rebuild-on-change property="ctrl.datasourceMeta.id">
+				<plugin-component type="datasource-config-ctrl">
+				</plugin-component>
+			</rebuild-on-change>
 
-      <rebuild-on-change property="ctrl.datasourceMeta.id">
-        <plugin-component type="datasource-config-ctrl">
-        </plugin-component>
-      </rebuild-on-change>
+			<div ng-if="ctrl.testing" style="margin-top: 25px">
+				<h5 ng-show="!ctrl.testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
+				<h5 ng-show="ctrl.testing.done">Test results</h5>
+				<div class="alert-{{ctrl.testing.status}} alert">
+					<div class="alert-title">{{ctrl.testing.title}}</div>
+					<div ng-bind='ctrl.testing.message'></div>
+				</div>
+			</div>
 
-      <div ng-if="ctrl.testing" style="margin-top: 25px">
-        <h5 ng-show="!ctrl.testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
-        <h5 ng-show="ctrl.testing.done">Test results</h5>
-        <div class="alert-{{ctrl.testing.status}} alert">
-          <div class="alert-title">{{ctrl.testing.title}}</div>
-          <div ng-bind='ctrl.testing.message'></div>
-        </div>
-      </div>
-
-      <div class="gf-form-button-row">
-        <button type="submit" class="btn btn-success" ng-show="ctrl.isNew" ng-click="ctrl.saveChanges()">Add</button>
-        <button type="submit" class="btn btn-success" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges()">Save</button>
-        <button type="submit" class="btn btn-secondary" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges(true)">
-          Test Connection
-        </button>
+			<div class="gf-form-button-row">
+				<button type="submit" class="btn btn-success" ng-show="ctrl.isNew" ng-click="ctrl.saveChanges()">Add</button>
+				<button type="submit" class="btn btn-success" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges()">Save</button>
+				<button type="submit" class="btn btn-secondary" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges(true)">
+					Test Connection
+				</button>
 				<button type="submit" class="btn btn-danger" ng-show="!ctrl.isNew" ng-click="ctrl.delete()">
 					Delete
-        </button>
-        <a class="btn btn-link" href="datasources">Cancel</a>
-      </div>
+				</button>
+				<a class="btn btn-link" href="datasources">Cancel</a>
+			</div>
 
-    </form>
-  </div>
+		</form>
+	</div>
 
-  <div ng-if="ctrl.tabIndex === 1" class="tab-content">
-    <dashboard-import-list plugin="ctrl.datasourceMeta" datasource="ctrl.current"></dashboard-import-list>
-  </div>
+	<div ng-if="ctrl.tabIndex === 1" class="tab-content">
+		<dashboard-import-list plugin="ctrl.datasourceMeta" datasource="ctrl.current"></dashboard-import-list>
+	</div>
 
 </div>
 

public/sass/_variables.dark.scss

@@ -48,14 +48,17 @@ $critical:              #ed2e18;
 
 // Scaffolding
 // -------------------------
-$body-bg:  			   	rgb(20,20,20);
-$page-bg:  			   	$dark-2;
-$body-color:   		 	$gray-4;
-$text-color:   	   		$gray-4;
-$text-color-strong: 	$white;
-$text-color-weak: 		$gray-2;
+$body-bg:  			   	    rgb(20,20,20);
+$page-bg:  			   	    $dark-2;
+$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;
   }