Updated share panel/dash look, added copy to clipboard button (using ZeroClipboard lib), #1554

src/app/components/require.config.js

@@ -13,6 +13,7 @@ require.config({
     text:                     '../vendor/require/text',
     moment:                   '../vendor/moment',
     filesaver:                '../vendor/filesaver',
+    ZeroClipboard:            '../vendor/ZeroClipboard',
     angular:                  '../vendor/angular/angular',
     'angular-route':          '../vendor/angular/angular-route',
     'angular-sanitize':       '../vendor/angular/angular-sanitize',
@@ -56,6 +57,10 @@ require.config({
       exports: 'Crypto'
     },
 
+    ZeroClipboard: {
+      exports: 'ZeroClipboard'
+    },
+
     angular: {
       deps: ['jquery','config'],
       exports: 'angular'

src/app/directives/tip.js

@@ -63,13 +63,21 @@ function (angular, kbn) {
         link: function(scope, elem, attrs) {
           var ngchange = attrs.change ? (' ng-change="' + attrs.change + '"') : '';
           var tip = attrs.tip ? (' <tip>' + attrs.tip + '</tip>') : '';
+          var label = '<label for="' + scope.$id + attrs.model + '" class="checkbox-label">' +
+                           attrs.text + tip + '</label>';
 
-          var template = '<label for="' + scope.$id + attrs.model + '" class="checkbox-label">' +
-                           attrs.text + tip + '</label>' +
-                          '<input class="cr1" id="' + scope.$id + attrs.model + '" type="checkbox" ' +
+
+          var template = '<input class="cr1" id="' + scope.$id + attrs.model + '" type="checkbox" ' +
                           '       ng-model="' + attrs.model + '"' + ngchange +
                           '       ng-checked="' + attrs.model + '"></input>' +
                           ' <label for="' + scope.$id + attrs.model + '" class="cr1"></label>';
+
+          if (attrs.position === "front") {
+            template = label + template;
+          } else {
+            template = template + label;
+          }
+
           elem.replaceWith($compile(angular.element(template))(scope));
         }
       };

src/app/features/dashboard/partials/shareModal.html

@@ -16,20 +16,37 @@
 	</div>
 
 	<div class="gf-box-body">
-		<div class="editor-row">
-			<editor-opt-bool text="Current time range" model="forCurrent" change="buildUrl()"></editor-opt-bool>
-			<editor-opt-bool text="To this panel only" model="toPanel" change="buildUrl()"></editor-opt-bool>
-			<editor-opt-bool text="Include template variables" model="includeTemplateVars" change="buildUrl()"></editor-opt-bool>
+
+		<div class="gf-form">
+			<div class="gf-form-row">
+					<editor-checkbox text="Current time range" model="forCurrent" change="buildUrl()"></editor-checkbox>
+				</div>
+			</div>
+			<div class="gf-form" ng-if="panel">
+				<div class="gf-form-row">
+					<editor-checkbox text="This panel only" model="toPanel" change="buildUrl()"></editor-checkbox>
+				</div>
+			</div>
+			<div class="gf-form">
+				<div class="gf-form-row">
+					<editor-checkbox text="Include template variables" model="includeTemplateVars" change="buildUrl()"></editor-checkbox>
+				</div>
+			</div>
+
+			<br>
+			<div class="gf-form">
+				<div class="gf-form-row">
+					<button class="btn btn-inverse pull-right" data-clipboard-text="{{shareUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button>
+					<span class="gf-fluid-input">
+						<input type="text" data-share-panel-url class="input" ng-model='shareUrl'></input>
+					</span>
+				</div>
+			<div>
+
+			<div class="editor-row" style="margin-top: 15px;" ng-if="toPanel">
+				<a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image<a>
+			</div>
 		</div>
 
-		<div class="editor-row" style="margin-top: 20px;">
-			<input type="text" data-share-panel-url class="input input-fluid" ng-model='shareUrl'></input>
-		</div>
-
-		<div class="editor-row" style="margin-top: 20px;">
-			<a href="{{imageUrl}}" target="_blank">Link to rendered image</a>
-		</div>
 	</div>
-
 </div>
-

src/app/features/dashboard/sharePanelCtrl.js

@@ -1,8 +1,9 @@
 define([
   'angular',
-  'lodash'
+  'lodash',
+  'require',
 ],
-function (angular, _) {
+function (angular, _, require) {
   'use strict';
 
   var module = angular.module('grafana.controllers');
@@ -19,6 +20,7 @@ function (angular, _) {
 
       $scope.includeTemplateVars = true;
       $scope.buildUrl();
+
     };
 
     $scope.buildUrl = function() {
@@ -72,19 +74,21 @@ function (angular, _) {
 
       $scope.shareUrl = baseUrl + "?" + paramsArray.join('&');
       $scope.imageUrl = $scope.shareUrl.replace('/dashboard/db/', '/render/dashboard/solo/');
+
       $scope.imageUrl += '&width=1000';
       $scope.imageUrl += '&height=500';
-
-      $timeout(function() {
-        var input = $element.find('[data-share-panel-url]');
-        input.focus();
-        input.select();
-      }, 10);
-
     };
 
     $scope.init();
 
   });
 
+  module.directive('clipboardButton',function() {
+    return function(scope, elem) {
+      require(['ZeroClipboard'], function(ZeroClipboard) {
+        new ZeroClipboard(elem[0]);
+      });
+    };
+  });
+
 });

src/css/less/forms.less

@@ -27,4 +27,24 @@ input[type="checkbox"]:checked+label {
   background: url(@checkboxImageUrl) 0px -18px no-repeat;
 }
 
+.gf-form {
+  padding-bottom: 10px;
+  .checkbox-label {
+    padding-left: 7px;
+    display: inline;
+  }
+}
+
+.gf-fluid-input {
+  border: none;
+  display: block;
+  overflow: hidden;
+  padding-right: 10px;
+  input[type=text] {
+    width: 100%;
+    padding: 5px 6px;
+    height: 100%;
+    box-sizing: border-box;
+  }
+}
 

vendor/phantomjs/render.js

@@ -31,7 +31,7 @@ page.open(params.url, function (status) {
       return $('canvas').length > 0;
     });
 
-    if (canvas || tries === 10000) {
+    if (canvas || tries === 10) {
       page.render(params.png);
       phantom.exit();
     }