diff --git a/src/Umbraco.Web.UI.Client/bower.json b/src/Umbraco.Web.UI.Client/bower.json index f630be147e..70accbdcca 100644 --- a/src/Umbraco.Web.UI.Client/bower.json +++ b/src/Umbraco.Web.UI.Client/bower.json @@ -29,6 +29,7 @@ "codemirror": "~5.3.0", "angular-local-storage": "~0.2.3", "moment": "~2.10.3", - "ace-builds": "^1.2.3" + "ace-builds": "^1.2.3", + "clipboard": "1.7.1" } } diff --git a/src/Umbraco.Web.UI.Client/gruntFile.js b/src/Umbraco.Web.UI.Client/gruntFile.js index 83cb15df64..31c0ac9aa6 100644 --- a/src/Umbraco.Web.UI.Client/gruntFile.js +++ b/src/Umbraco.Web.UI.Client/gruntFile.js @@ -556,6 +556,10 @@ module.exports = function (grunt) { 'src-min-noconflict/worker-javascript.js', ] + }, + 'clipboard': { + keepExpandedHierarchy: false, + files: ['dist/clipboard.min.js'] } } } diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbclipboard.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbclipboard.directive.js new file mode 100644 index 0000000000..cf52af6bb1 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbclipboard.directive.js @@ -0,0 +1,166 @@ +/** +@ngdoc directive +@name umbraco.directives.directive:umbClipboard +@restrict E +@scope + +@description +Added in Umbraco v. 7.7: Use this directive to copy content to the clipboard + +
++ ++ + ++Copy me!+ ++ + + + + ++ + + ++ + +
+ (function () {
+ "use strict";
+
+ function Controller() {
+
+ var vm = this;
+
+ vm.copyText = "Copy text without element";
+ vm.cutText = "Text to cut";
+
+ vm.copySuccess = copySuccess;
+ vm.copyError = copyError;
+
+ function copySuccess() {
+ vm.clipboardButtonState = "success";
+ }
+
+ function copyError() {
+ vm.clipboardButtonState = "error";
+ }
+
+ }
+
+ angular.module("umbraco").controller("My.ClipBoardController", Controller);
+
+ })();
+
+
+@param {callback} umbClipboardSuccess (expression): Callback function when the content is copied.
+@param {callback} umbClipboardError (expression): Callback function if the copy fails.
+@param {string} umbClipboardTarget (attribute): The target element to copy.
+@param {string} umbClipboardAction (attribute): Specify if you want to copy or cut content ("copy", "cut"). Cut only works on input and textarea elements.
+@param {string} umbClipboardText (attribute): Use this attribute if you don't have an element to copy from.
+
+**/
+
+(function () {
+ 'use strict';
+
+ function umbClipboardDirective($timeout, assetsService) {
+
+ function link(scope, element, attrs, ctrl) {
+
+ var clipboard;
+ var target = element[0];
+
+ assetsService.loadJs("lib/clipboard/clipboard.min.js")
+ .then(function () {
+
+ if(scope.umbClipboardTarget) {
+ target.setAttribute("data-clipboard-target", scope.umbClipboardTarget);
+ }
+
+ if(scope.umbClipboardAction) {
+ target.setAttribute("data-clipboard-action", scope.umbClipboardAction);
+ }
+
+ if(scope.umbClipboardText) {
+ target.setAttribute("data-clipboard-text", scope.umbClipboardText);
+ }
+
+ clipboard = new Clipboard(target);
+
+ clipboard.on('success', function (e) {
+ e.clearSelection();
+ if (scope.umbClipboardSuccess) {
+ scope.$apply(function () {
+ scope.umbClipboardSuccess({ e: e });
+ });
+ }
+ });
+
+ clipboard.on('error', function (e) {
+ if (scope.umbClipboardError) {
+ scope.$apply(function () {
+ scope.umbClipboardError({ e: e });
+ });
+ }
+ });
+
+ });
+
+ // clean up
+ scope.$on('$destroy', function(){
+ clipboard.destroy();
+ });
+
+ }
+
+ ////////////
+
+ var directive = {
+ restrict: 'A',
+ scope: {
+ umbClipboardSuccess: '&?',
+ umbClipboardError: '&?',
+ umbClipboardTarget: "@?",
+ umbClipboardAction: "@?",
+ umbClipboardText: "=?"
+ },
+ link: link
+ };
+
+ return directive;
+ }
+
+ angular.module('umbraco').directive('umbClipboard', umbClipboardDirective);
+
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less
index 4d9b07737c..82e3afbb83 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less
@@ -55,7 +55,7 @@
.umb-button__progress.-white {
border-color: rgba(255, 255, 255, 0.4);
- border-left-color: #ffffff;
+ border-left-color: @white;
}
.umb-button__success,
@@ -67,18 +67,9 @@
transform: translate(-50%, -50%);
opacity: 1;
font-size: 20px;
- color: @green;
transition: opacity 0.25s ease;
}
-.umb-button__success {
- color: @green;
-}
-
-.umb-button__error {
- color: @red;
-}
-
.umb-button__success.-hidden,
.umb-button__error.-hidden {
opacity: 0;
@@ -87,7 +78,7 @@
.umb-button__success.-white,
.umb-button__error.-white {
- color: #ffffff;
+ color: @white;
}
.umb-button__overlay {
@@ -95,7 +86,7 @@
width: 100%;
height: 100%;
z-index: 10;
- background: #ffffff;
+ background: @white;
opacity: 0;
}
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/user.html b/src/Umbraco.Web.UI.Client/src/views/users/user.html
index 321be37bf0..d57867d283 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/user.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/user.html
@@ -182,7 +182,6 @@
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non libero vel turpis ultrices pharetra.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non libero vel turpis ultrices pharetra.