From 358536ffaa92f29db8b0ef6b98d4896cfa7595fc Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Tue, 31 Oct 2017 10:20:24 +0100
Subject: [PATCH] fixes: U4-10599 Move "End tour"-button to another position

---
 .../application/umbtour.directive.js          |  2 +-
 .../umbtour/umbtourstep.directive.js          | 17 ++++++++++++--
 .../less/components/application/umb-tour.less | 22 +++++++++++++++++--
 .../nodename/nodename.html                    |  3 +--
 .../doctypename/doctypename.html              |  3 +--
 .../propertyname/propertyname.html            |  3 +--
 .../tabname/tabname.html                      |  3 +--
 .../foldername/foldername.html                |  3 +--
 .../uploadimages/uploadimages.html            |  3 +--
 .../templatetree/templatetree.html            |  6 +----
 .../components/application/umb-tour.html      |  7 +++---
 .../application/umbtour/umb-tour-step.html    | 11 +++++++++-
 12 files changed, 56 insertions(+), 27 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js
index b6b40492be..9e036d8798 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour.directive.js
@@ -105,7 +105,7 @@
                 $timeout(function () {
 
                     // if an element isn't set - show the popover in the center
-                    if(!scope.model.currentStep.element) {
+                    if(scope.model.currentStep && !scope.model.currentStep.element) {
                         setPopoverPosition(null);
                         return;
                     }
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour/umbtourstep.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour/umbtourstep.directive.js
index e840634865..08e0a44c0b 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour/umbtourstep.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour/umbtourstep.directive.js
@@ -3,14 +3,27 @@
 
     function TourStepDirective() {
 
+        function link(scope, element, attrs, ctrl) {
+
+            scope.close = function() {
+                if(scope.onClose) {
+                    scope.onClose();
+                }
+            }
+
+        }
+
         var directive = {
             restrict: 'E',
             replace: true,
             transclude: true,
             templateUrl: 'views/components/application/umbtour/umb-tour-step.html',
             scope: {
-                size: "@?"
-            }
+                size: "@?",
+                onClose: "&?",
+                hideClose: "=?"
+            },
+            link: link
         };
 
         return directive;
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-tour.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-tour.less
index 5e405c0363..d52b150f0d 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-tour.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-tour.less
@@ -36,6 +36,7 @@
 
     .umb-tour-step__content {
         margin-bottom: 25px;
+        font-size: 15px;
     }
 }
 
@@ -44,19 +45,36 @@
     color: @gray-5;
 }
 
+.umb-tour-step__close {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    font-size: 19px;
+    color: @gray-7;
+    cursor: pointer;
+}
+
+.umb-tour-step__close:hover,
+.umb-tour-step__close:active {
+    color: @gray-4;
+    text-decoration: none;
+}
+
 .umb-tour-step__header {
-    margin-top: 5px;
     margin-bottom: 10px;
+    margin-top: 10px;
 }
 
 .umb-tour-step__title {
     font-weight: bold;
     color: @black;
     font-size: 15px;
+    line-height: 1.3em;
+    width: calc(~"100% - 35px");
 }
 
 .umb-tour-step__content {
     margin-bottom: 15px;
-    font-size: 15px;
+    font-size: 14px;
     line-height: 1.6em;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatecontent/nodename/nodename.html b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatecontent/nodename/nodename.html
index 038b586d19..53badd7843 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatecontent/nodename/nodename.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatecontent/nodename/nodename.html
@@ -1,6 +1,6 @@
 <div ng-controller="Umbraco.Tours.UmbIntroCreateContent.NodeNameController as vm">
 
-    <umb-tour-step>
+    <umb-tour-step on-close="model.endTour()">
             
         <umb-tour-step-header
             title="model.currentStep.title">
@@ -19,7 +19,6 @@
             </umb-tour-step-counter>
 
             <div>
-                <umb-button size="xs" button-style="link" type="button" action="model.endTour()" label="End tour"></umb-button>
                 <umb-button size="xs" button-style="success" type="button" action="vm.initNextStep()" label="Next"></umb-button>
             </div>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/doctypename/doctypename.html b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/doctypename/doctypename.html
index 840b36fdea..fc76d28682 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/doctypename/doctypename.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/doctypename/doctypename.html
@@ -1,6 +1,6 @@
 <div ng-controller="Umbraco.Tours.UmbIntroCreateDocType.DocTypeNameController as vm">
 
-    <umb-tour-step>
+    <umb-tour-step on-close="model.endTour()">
             
         <umb-tour-step-header
             title="model.currentStep.title">
@@ -19,7 +19,6 @@
             </umb-tour-step-counter>
 
             <div>
-                <umb-button size="xs" button-style="link" type="button" action="model.endTour()" label="End tour"></umb-button>
                 <umb-button size="xs" button-style="success" type="button" action="vm.initNextStep()" label="Next"></umb-button>
             </div>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/propertyname/propertyname.html b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/propertyname/propertyname.html
index c1701abe69..5748f65a95 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/propertyname/propertyname.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/propertyname/propertyname.html
@@ -1,6 +1,6 @@
 <div ng-controller="Umbraco.Tours.UmbIntroCreateDocType.PropertyNameController as vm">
 
-    <umb-tour-step>
+    <umb-tour-step on-close="model.endTour()">
             
         <umb-tour-step-header
             title="model.currentStep.title">
@@ -19,7 +19,6 @@
             </umb-tour-step-counter>
 
             <div>
-                <umb-button size="xs" button-style="link" type="button" action="model.endTour()" label="End tour"></umb-button>
                 <umb-button size="xs" button-style="success" type="button" action="vm.initNextStep()" label="Next"></umb-button>
             </div>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/tabname/tabname.html b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/tabname/tabname.html
index fff4f9e554..f127622a13 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/tabname/tabname.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/tabname/tabname.html
@@ -1,6 +1,6 @@
 <div ng-controller="Umbraco.Tours.UmbIntroCreateDocType.TabNameController as vm">
 
-    <umb-tour-step>
+    <umb-tour-step on-close="model.endTour()">
             
         <umb-tour-step-header
             title="model.currentStep.title">
@@ -19,7 +19,6 @@
             </umb-tour-step-counter>
 
             <div>
-                <umb-button size="xs" button-style="link" type="button" action="model.endTour()" label="End tour"></umb-button>
                 <umb-button size="xs" button-style="success" type="button" action="vm.initNextStep()" label="Next"></umb-button>
             </div>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/foldername/foldername.html b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/foldername/foldername.html
index 748dbd9aab..ed0ce5d7e2 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/foldername/foldername.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/foldername/foldername.html
@@ -1,6 +1,6 @@
 <div ng-controller="Umbraco.Tours.UmbIntroMediaSection.FolderNameController as vm">
 
-    <umb-tour-step>
+    <umb-tour-step on-close="model.endTour()">
 
         <umb-tour-step-header
             title="model.currentStep.title">
@@ -19,7 +19,6 @@
             </umb-tour-step-counter>
 
             <div>
-                <umb-button size="xs" button-style="link" type="button" action="model.endTour()" label="End tour"></umb-button>
                 <umb-button size="xs" button-style="success" type="button" action="vm.initNextStep()" label="Next" state="vm.buttonState"></umb-button>
             </div>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/uploadimages/uploadimages.html b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/uploadimages/uploadimages.html
index 4ad707a316..e7e8750823 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/uploadimages/uploadimages.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/uploadimages/uploadimages.html
@@ -1,6 +1,6 @@
 <div ng-controller="Umbraco.Tours.UmbIntroMediaSection.UploadImagesController as vm">
 
-    <umb-tour-step>
+    <umb-tour-step on-close="model.endTour()">
 
         <umb-tour-step-header
             title="model.currentStep.title">
@@ -19,7 +19,6 @@
             </umb-tour-step-counter>
 
             <div>
-                <umb-button size="xs" button-style="link" type="button" action="model.endTour()" label="End tour"></umb-button>
                 <umb-button size="xs" button-style="success" type="button" action="vm.initNextStep()" label="Next" state="vm.buttonState"></umb-button>
             </div>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrorenderintemplate/templatetree/templatetree.html b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrorenderintemplate/templatetree/templatetree.html
index 23bdc01997..cc8896c964 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrorenderintemplate/templatetree/templatetree.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrorenderintemplate/templatetree/templatetree.html
@@ -1,5 +1,5 @@
 <div ng-controller="Umbraco.Tours.UmbIntroRenderInTemplate.TemplatesTreeController as vm">
-    <umb-tour-step>
+    <umb-tour-step on-close="model.endTour()">
             
         <umb-tour-step-header
             title="model.currentStep.title">
@@ -16,10 +16,6 @@
                 total-steps="model.steps.length">
             </umb-tour-step-counter>
 
-            <div>
-                <umb-button size="xs" button-style="link" type="button" action="model.endTour()" label="End tour"></umb-button>
-            </div>
-
         </umb-tour-step-footer>
 
     </umb-tour-step>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-tour.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-tour.html
index d00c81ae70..d031d5de06 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-tour.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-tour.html
@@ -7,7 +7,7 @@
         <div ng-if="!configuredView && !elementNotFound">
 
             <!-- Regular steps -->
-            <umb-tour-step ng-if="model.currentStepIndex < model.steps.length">
+            <umb-tour-step ng-if="model.currentStepIndex < model.steps.length" on-close="model.endTour()" hide-close="model.currentStep.type === 'intro'">
                     
                 <umb-tour-step-header
                     title="model.currentStep.title">
@@ -25,12 +25,11 @@
                     </umb-tour-step-counter>
                     
                     <div ng-if="model.currentStep.type !== 'intro'">
-                        <umb-button size="xs" button-style="link" type="button" action="model.endTour()" label="End tour"></umb-button>
                         <umb-button size="xs" ng-if="!model.currentStep.event" button-style="success" type="button" action="model.nextStep()" label="Next"></umb-button>
                     </div>
 
                     <div ng-if="model.currentStep.type === 'intro'">
-                        <umb-button size="m" button-style="link" type="button" action="model.endTour()" label="End tour"></umb-button>                            
+                        <umb-button size="m" button-style="link" type="button" action="model.endTour()" label="Do it later"></umb-button>
                         <umb-button size="m" button-style="success" type="button" action="model.nextStep()" label="Start tour"></umb-button>
                     </div>
 
@@ -39,7 +38,7 @@
             </umb-tour-step>
 
             <!-- Outro step -->
-            <umb-tour-step ng-if="model.currentStepIndex === model.steps.length" class="tc">
+            <umb-tour-step ng-if="model.currentStepIndex === model.steps.length" class="tc" hide-close="model.currentStepIndex === model.steps.length">
 
                 <umb-tour-step-content>
                     <div class="flex items-center justify-center">
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umbtour/umb-tour-step.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umbtour/umb-tour-step.html
index dad2694db6..90423ed603 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umbtour/umb-tour-step.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umbtour/umb-tour-step.html
@@ -1 +1,10 @@
-<div class="umb-tour-step umb-tour-step--{{size}}" ng-transclude></div>
\ No newline at end of file
+<div class="umb-tour-step umb-tour-step--{{size}}">
+
+
+    <div ng-if="hideClose !== true">
+        <i class="icon-wrong umb-tour-step__close" ng-click="close()"></i>
+    </div>
+
+    <div ng-transclude></div>
+
+</div>
\ No newline at end of file