work on share panel view, and better look for checkbox

src/app/controllers/sharePanelCtrl.js

@@ -28,6 +28,9 @@ function (angular, _) {
       $scope.shareUrl += "&from=" + from;
       $scope.shareUrl += "&to=" + to;
 
+      $scope.forCurrent = true;
+      $scope.toPanel = true;
+
       $timeout(function() {
         var input = $element.find('[data-share-panel-url]');
         input.focus();

src/app/directives/tip.js

@@ -17,4 +17,18 @@ function (angular, kbn) {
         }
       };
     });
+
+  angular
+    .module('grafana.directives')
+    .directive('tip', function($compile) {
+      return {
+        restrict: 'E',
+        link: function(scope, elem, attrs) {
+          var _t = '<i class="grafana-tip icon-'+(attrs.icon||'question-sign')+'" bs-tooltip="\''+
+            kbn.addslashes(elem.text())+'\'"></i>';
+          elem.replaceWith($compile(angular.element(_t))(scope));
+        }
+      };
+    });
+
 });

src/app/panels/graph/styleEditor.html

@@ -1,14 +1,20 @@
 <div class="editor-row">
   <div class="section">
     <h5>Chart Options</h5>
-    <div class="editor-option">
-      <label class="small">Bars</label><input type="checkbox" ng-model="panel.bars" ng-checked="panel.bars" ng-change="render()">
+    <div class="editor-option text-center">
+			<label for="barsCheck" class="small">Bars</label>
+			<input id="barsCheck" type="checkbox" ng-model="panel.bars" ng-checked="panel.bars" ng-change="render()">
+			<label for="barsCheck" class="cr1"></label>
     </div>
-    <div class="editor-option">
-      <label class="small">Lines</label><input type="checkbox" ng-model="panel.lines" ng-checked="panel.lines" ng-change="render()">
+    <div class="editor-option text-center">
+			<label for="linesCheck" class="small">Lines</label>
+			<input id="linesCheck" type="checkbox" ng-model="panel.lines" ng-checked="panel.lines" ng-change="render()">
+			<label for="linesCheck" class="cr1"></label>
     </div>
-    <div class="editor-option">
-      <label class="small">Points</label><input type="checkbox" ng-model="panel.points" ng-checked="panel.points" ng-change="render()">
+    <div class="editor-option text-center">
+			<label for="pointsCheck" class="small">Points</label>
+			<input id="pointsCheck" type="checkbox" ng-model="panel.points" ng-checked="panel.points" ng-change="render()">
+			<label for="pointsCheck" class="cr1"></label>
     </div>
   </div>
 

src/app/panels/timepicker/module.html

@@ -9,9 +9,7 @@
       border: 0px !important;
     }
   </style>
-  <!--  This is a complete hack. The form actually exists in the modal, but due to transclusion
-        $scope.input isn't available on the controller unless the form element is in this file -->
-  <form name="input" style="margin:3px 0 0 0">
+  <form name="input" style="margin:0">
     <ul class="nav nav-pills timepicker-dropdown">
       <li class="dropdown">
 
@@ -47,6 +45,5 @@
         <a ng-click="timeSrv.refreshDashboard()"><i class="icon-refresh"></i></a>
       </li>
     </ul>
-
   </form>
 </div>

src/app/partials/dasheditor.html

@@ -28,9 +28,10 @@
 						<label class="small">Time correction</label>
 						<select ng-model="dashboard.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
 					</div>
-					<div class="editor-option">
-						<label class="small">Hide controls (CTRL+H)</label>
-						<input type="checkbox" ng-model="dashboard.hideControls" ng-checked="dashboard.hideControls">
+					<div class="editor-option text-center">
+						<label for="hideControls" class="small">Hide controls (CTRL+H)</label>
+						<input id="hideControls" type="checkbox" ng-model="dashboard.hideControls" ng-checked="dashboard.hideControls">
+						<label for="hideControls" class="cr1"></label>
 					</div>
 				</div>
 			</div>
@@ -71,16 +72,20 @@
 		<div ng-if="editor.index == 2">
 			<div class="editor-row">
 				<div class="section">
-					<div class="editor-option">
-						<label class="small">Templating</label>
-						<input type="checkbox" ng-model="dashboard.templating.enable" ng-checked="dashboard.templating.enable" ng-change="checkFeatureToggles()"x >
+					<div class="editor-option text-center">
+						<label for="templateFeature" class="small">Templating</label>
+						<input id="templateFeature" type="checkbox" ng-model="dashboard.templating.enable" ng-checked="dashboard.templating.enable" ng-change="checkFeatureToggles()"x >
+						<label for="templateFeature" class="cr1"></label>
 					</div>
-					<div class="editor-option">
-						<label class="small">Annotations</label>
-						<input type="checkbox" ng-model="dashboard.annotations.enable" ng-checked="dashboard.annotations.enable" ng-change="checkFeatureToggles()">
+					<div class="editor-option text-center">
+						<label for="annotationFeature" class="small">Annotations</label>
+						<input id="annotationFeature" type="checkbox" ng-model="dashboard.annotations.enable" ng-checked="dashboard.annotations.enable" ng-change="checkFeatureToggles()">
+						<label for="annotationFeature" class="cr1"></label>
 					</div>
-					<div class="editor-option" ng-repeat="pulldown in dashboard.nav">
-						<label class="small" style="text-transform:capitalize;">{{pulldown.type}}</label><input type="checkbox" ng-model="pulldown.enable" ng-checked="pulldown.enable">
+					<div class="editor-option text-center" ng-repeat="pulldown in dashboard.nav">
+						<label class="small" style="text-transform:capitalize;">{{pulldown.type}}</label>
+						<input id="pulldown{{pulldown.type}}" type="checkbox" ng-model="pulldown.enable" ng-checked="pulldown.enable">
+						<label for="pulldown{{pulldown.type}}" class="cr1"></label>
 					</div>
 				</div>
 			</div>

src/app/partials/share-panel.html

@@ -16,13 +16,15 @@
 
 	<div class="modal-body">
 		<div class="editor-row">
-			<div class="editor-option">
-				<label class="small">Current time range</label>
-				<input type="checkbox"></input>
+			<div class="editor-option text-center">
+				<label for="currentTime" class="small">Current time range</label>
+				<input id="currentTime" type="checkbox" ng-model="forCurrent" ng-checked="forCurrent"></input>
+				<label for="currentTime" class="cr1"></label>
 			</div>
-			<div class="editor-option">
-				<label class="small">To fullscreen panel</label>
-				<input type="checkbox"></input>
+			<div class="editor-option text-center">
+				<label for="toPanel" class="small">To fullscreen panel</label>
+				<input id="toPanel" type="checkbox" ng-model="toPanel" ng-checked="toPanel"></input>
+				<label for="toPanel" class="cr1"></label>
 			</div>
 		</div>
 

src/css/less/forms.less

@@ -0,0 +1,26 @@
+input[type=text].input-fluid {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 14px;
+}
+
+input[type="checkbox"] {
+  display: none;
+}
+
+input[type="checkbox"]+.cr1 {
+  display: inline-block;
+  height: 19px;
+  clear: none;
+  text-indent: 2px;
+  margin-top: 4px;
+  padding: 0 0 0 20px;
+  vertical-align:middle;
+  background:url(../img/checkbox.png) left top no-repeat;
+  cursor:pointer;
+}
+
+input[type="checkbox"]:checked+label {
+  background:url(../img/checkbox.png) 0px -18px no-repeat;
+}
+

src/css/less/grafana.less

@@ -5,6 +5,7 @@
 @import "tables_lists.less";
 @import "search.less";
 @import "panel.less";
+@import "forms.less";
 
 .hide-controls {
   padding: 0;
@@ -55,7 +56,6 @@
 .modal {
   max-width: 800px;
   left: 0;
-
   right: 0;
   margin-left: auto;
   margin-right: auto;
@@ -529,10 +529,3 @@ select.grafana-target-segment-input {
 .grafana-tip {
   padding-left: 5px;
 }
-
-input[type=text].input-fluid {
-  width: 100%;
-  box-sizing: border-box;
-  padding: 14px;
-}
-