From d51b5e78221ea0c9658d0f5c47d3eefb0ffdcd99 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Wed, 8 Jan 2020 14:20:43 +0100
Subject: [PATCH] Add code snippet component (#7294)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add umbCodeSnippet component

* Add aria-hidden to font icons

* Replace copy button with umb-code-snippet component

* Adjust styling of code snippet

* Adjust language of code snippet

* Update docs for component

* Adjust padding in code header

* Add code snippet content wrapper

* Fix typo

* Rename id value

* Fix typo in docs

* Update color of code blocks

* Use variables for colors

* round border + size for copy button

Co-authored-by: Niels Lyngsø <niels.lyngso@gmail.com>
---
 .../lib/bootstrap/less/code.less              |   3 +-
 .../components/umbcodesnippet.directive.js    | 119 ++++++++++++++++++
 src/Umbraco.Web.UI.Client/src/less/belle.less |   1 +
 .../src/less/components/umb-code-snippet.less |  43 +++++++
 src/Umbraco.Web.UI.Client/src/less/hacks.less |  52 ++++----
 .../querybuilder/querybuilder.controller.js   |   6 -
 .../querybuilder/querybuilder.html            |  11 +-
 .../views/components/umb-code-snippet.html    |  23 ++++
 8 files changed, 216 insertions(+), 42 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/umbcodesnippet.directive.js
 create mode 100644 src/Umbraco.Web.UI.Client/src/less/components/umb-code-snippet.less
 create mode 100644 src/Umbraco.Web.UI.Client/src/views/components/umb-code-snippet.html

diff --git a/src/Umbraco.Web.UI.Client/lib/bootstrap/less/code.less b/src/Umbraco.Web.UI.Client/lib/bootstrap/less/code.less
index 0b90a13059..5eb8b638a2 100644
--- a/src/Umbraco.Web.UI.Client/lib/bootstrap/less/code.less
+++ b/src/Umbraco.Web.UI.Client/lib/bootstrap/less/code.less
@@ -9,14 +9,13 @@ pre.code {
   padding: 0 3px 2px;
   #font > #family > .monospace;
   font-size: @baseFontSize - 2;
-  color: @grayDark;
+  color: @blueExtraDark;
   .border-radius(3px);
 }
 
 // Inline code
 code {
   padding: 2px 4px;
-  color: #d14;
   background-color: #f7f7f9;
   border: 1px solid #e1e1e8;
   white-space: nowrap;
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcodesnippet.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcodesnippet.directive.js
new file mode 100644
index 0000000000..f0dad31ee2
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcodesnippet.directive.js
@@ -0,0 +1,119 @@
+/**
+@ngdoc directive
+@name umbraco.directives.directive:umbCodeSnippet
+@restrict E
+@scope
+
+@description
+
+<h3>Markup example</h3>
+<pre>
+	<div ng-controller="My.Controller as vm">
+
+        <umb-code-snippet 
+            language="'csharp'">
+            {{code}}
+        </umb-code-snippet>
+
+	</div>
+</pre>
+
+<h3>Controller example</h3>
+<pre>
+	(function () {
+		"use strict";
+
+		function Controller() {
+
+            var vm = this;
+
+        }
+
+		angular.module("umbraco").controller("My.Controller", Controller);
+
+	})();
+</pre>
+
+@param {string=} language Language of the code snippet, e.g csharp, html, css.
+**/
+
+
+(function () {
+    'use strict';
+
+    var umbCodeSnippet = {
+        templateUrl: 'views/components/umb-code-snippet.html',
+        controller: UmbCodeSnippetController,
+        controllerAs: 'vm',
+        transclude: true,
+        bindings: {
+            language: '<'
+        }
+    };
+
+    function UmbCodeSnippetController($timeout) {
+
+        const vm = this;
+
+        vm.page = {};
+
+        vm.$onInit = onInit;
+        vm.copySuccess = copySuccess;
+        vm.copyError = copyError;
+
+        function onInit() {
+            vm.guid = String.CreateGuid();
+
+            if (vm.language)
+            {
+                switch (vm.language.toLowerCase()) {
+                    case "csharp":
+                    case "c#":
+                        vm.language = "C#";
+                        break;
+                    case "html":
+                        vm.language = "HTML";
+                        break;
+                    case "css":
+                        vm.language = "CSS";
+                        break;
+                    case "javascript":
+                        vm.language = "JavaScript";
+                        break;
+                }
+            }
+            
+        }
+
+        // copy to clip board success
+        function copySuccess() {
+            if (vm.page.copyCodeButtonState !== "success") {
+                $timeout(function () {
+                    vm.page.copyCodeButtonState = "success";
+                });
+                $timeout(function () {
+                    resetClipboardButtonState();
+                }, 1000);
+            }
+        }
+
+        // copy to clip board error
+        function copyError() {
+            if (vm.page.copyCodeButtonState !== "error") {
+                $timeout(function () {
+                    vm.page.copyCodeButtonState = "error";
+                });
+                $timeout(function () {
+                    resetClipboardButtonState();
+                }, 1000);
+            }
+        }
+
+        function resetClipboardButtonState() {
+            vm.page.copyCodeButtonState = "init";
+        }
+    }
+
+    angular.module('umbraco.directives').component('umbCodeSnippet', umbCodeSnippet);
+
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index c99d032143..b5e032f9fb 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -141,6 +141,7 @@
 @import "components/umb-empty-state.less";
 @import "components/umb-property-editor.less";
 @import "components/umb-property-actions.less";
+@import "components/umb-code-snippet.less";
 @import "components/umb-color-swatches.less";
 @import "components/check-circle.less";
 @import "components/umb-file-icon.less";
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-code-snippet.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-code-snippet.less
new file mode 100644
index 0000000000..b372841910
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-code-snippet.less
@@ -0,0 +1,43 @@
+.umb-code-snippet {
+
+    .umb-code-snippet__header {
+        box-sizing: content-box;
+        background-color: @gray-10;
+        display: flex;
+        flex-direction: row;
+        font-size: .8rem;
+        border: 1px solid @gray-8;
+        border-radius: 3px 3px 0 0;
+        border-bottom: 0;
+        margin-top: 16px;
+        min-height: 30px;
+
+        .language {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            flex-grow: 1;
+            padding: 2px 10px;
+        }
+
+        button {
+            background-color: transparent;
+            border: none;
+            border-left: 1px solid @gray-8;
+            border-radius: 0;
+            color: #000;
+
+            &:hover {
+                background-color: @grayLighter;
+            }
+        }
+    }
+
+    .umb-code-snippet__content {
+        pre {
+            border-radius: 0 0 3px 3px;
+            overflow: auto;
+            white-space: nowrap;
+        }
+    }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/less/hacks.less b/src/Umbraco.Web.UI.Client/src/less/hacks.less
index 3ead4d6905..8d3117febe 100644
--- a/src/Umbraco.Web.UI.Client/src/less/hacks.less
+++ b/src/Umbraco.Web.UI.Client/src/less/hacks.less
@@ -185,40 +185,38 @@ iframe, .content-column-body {
 
 // Inline code
 // 1: Revert border radius to match look and feel of 7.4+
-code{
-  .border-radius(@baseBorderRadius); // 1
+code {
+    .border-radius(@baseBorderRadius); // 1
 }
 
 // Blocks of code
 // 1: Wrapping code is unreadable on small devices.
 pre {
-  display: block;
-  padding: (@baseLineHeight - 1) / 2;
-  margin: 0 0 @baseLineHeight / 2;
-  font-family: @sansFontFamily;
-  //font-size: @baseFontSize - 1; // 14px to 13px
-  color: @gray-2;
-  line-height: @baseLineHeight;
-  white-space: pre-wrap; // 1
-  overflow-x: auto; // 1
-  background-color: @gray-10;
-  border: 1px solid @gray-8;
-  .border-radius(@baseBorderRadius);
+    display: block;
+    padding: (@baseLineHeight - 1) / 2;
+    margin: 0 0 @baseLineHeight / 2;
+    font-family: @sansFontFamily;
+    color: @gray-2;
+    line-height: @baseLineHeight;
+    white-space: pre-wrap; // 1
+    overflow-x: auto; // 1
+    background-color: @brownGrayLight;
+    border: 1px solid @gray-8;
+    .border-radius(@baseBorderRadius);
 
+    // Make prettyprint styles more spaced out for readability
+    &.prettyprint {
+        margin-bottom: @baseLineHeight;
+    }
 
-  // Make prettyprint styles more spaced out for readability
-  &.prettyprint {
-    margin-bottom: @baseLineHeight;
-  }
-
-  // Account for some code outputs that place code tags in pre tags
-  code {
-    padding: 0;
-    white-space: pre; // 1 
-    word-wrap: normal; // 1
-    background-color: transparent;
-    border: 0;
-  }
+    // Account for some code outputs that place code tags in pre tags
+    code {
+        padding: 0;
+        white-space: pre; // 1
+        word-wrap: normal; // 1
+        background-color: transparent;
+        border: 0;
+    }
 }
 
 /* Styling for content/media sort order dialog */
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/querybuilder/querybuilder.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/querybuilder/querybuilder.controller.js
index 4d537bd73c..faca3b3fa0 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/querybuilder/querybuilder.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/querybuilder/querybuilder.controller.js
@@ -31,7 +31,6 @@
         vm.datePickerChange = datePickerChange;
         vm.submit = submit;
         vm.close = close;
-        vm.copyQuery = copyQuery;
 
         function onInit() {
 
@@ -121,11 +120,6 @@
             query.filters.push({});
         }
 
-        function copyQuery() {
-            var copyText = $scope.model.result.queryExpression;
-            navigator.clipboard.writeText(copyText);
-        }
-
         function trashFilter(query, filter) {
             for (var i = 0; i < query.filters.length; i++) {
                 if (query.filters[i] == filter) {
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/querybuilder/querybuilder.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/querybuilder/querybuilder.html
index f01f325265..37a0d41207 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/querybuilder/querybuilder.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/querybuilder/querybuilder.html
@@ -113,11 +113,11 @@
                                 </span>
 
                                 <a href ng-click="vm.addFilter(vm.query)">
-                                    <i class="icon-add"></i>
+                                    <i class="icon-add" aria-hidden="true"></i>
                                 </a>
 
                                 <a href ng-click="vm.trashFilter(vm.query, filter)">
-                                    <i class="icon-trash"></i>
+                                    <i class="icon-trash" aria-hidden="true"></i>
                                 </a>
 
                             </div>
@@ -159,14 +159,11 @@
 
                         <ul class="nav unstyled">
                             <li ng-repeat="item in model.result.sampleResults">
-                                <i class="icon icon-document turquoise-d1"></i> {{item.name}}
+                                <i class="icon icon-document turquoise-d1" aria-hidden="true"></i> {{item.name}}
                             </li>
                         </ul>
 
-                        <pre>{{model.result.queryExpression}}</pre>
-                        <a href ng-click="vm.copyQuery()">
-                            <i class="icon-document"></i> <localize key="template_copyToClipboard">copy to clipboard</localize>
-                        </a>
+                        <umb-code-snippet language="'csharp'">{{model.result.queryExpression}}</umb-code-snippet>
 
                     </div>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-code-snippet.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-code-snippet.html
new file mode 100644
index 0000000000..199d7dec56
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-code-snippet.html
@@ -0,0 +1,23 @@
+<div class="umb-code-snippet">
+    <div class="umb-code-snippet__header">
+        <span class="language" ng-if="vm.language">{{vm.language}}</span>
+
+        <umb-button umb-clipboard
+                    umb-clipboard-success="vm.copySuccess()"
+                    umb-clipboard-error="vm.copyError()"
+                    umb-clipboard-target="#umbCodeSnippet_{{vm.guid}}"
+                    state="vm.page.copyCodeButtonState"
+                    icon="icon-documents"
+                    type="button"
+                    size="s"
+                    label="Copy"
+                    label-key="general_copy">
+        </umb-button>
+
+    </div>
+    <div class="umb-code-snippet__content">
+        <pre id="umbCodeSnippet_{{vm.guid}}">
+            <code ng-transclude></code>
+        </pre>
+    </div>
+</div>