From 27c884f4eb90114684c65d464e74935f66d59ca6 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 19 Oct 2017 09:10:13 +0200
Subject: [PATCH 01/15] add more data elements for navigating the UI

---
 .../src/views/common/overlays/user/user.html                 | 3 +++
 .../src/views/components/application/umb-navigation.html     | 5 +++--
 .../src/views/components/application/umb-sections.html       | 2 +-
 src/Umbraco.Web.UI/umbraco/Views/Default.cshtml              | 2 +-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/user/user.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/user/user.html
index 83bbbd03ea..be80e3e815 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/user/user.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/user/user.html
@@ -11,6 +11,7 @@
        </p>
 
         <umb-button
+            data-element="button-edit-user"
             type="link"
             href="#/users/users/user/{{user.id}}"
             action="model.close()"
@@ -21,6 +22,7 @@
        </umb-button>
 
         <umb-button
+            data-element="button-change-password"
             type="button"
             action="togglePasswordFields()"
             label="Change password"
@@ -29,6 +31,7 @@
        </umb-button>
 
         <umb-button
+            data-element="button-log-out"
             type="button"
             action="logout()"
             shortcut="ctrl+shift+l"
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html
index d3eed009c3..d6eb3de3ef 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html
@@ -13,12 +13,13 @@
       <div ng-controller="Umbraco.SearchController" ng-if="authenticated">
 
         <!-- Search form -->
-        <div id="search-form">
+        <div data-element="global-search" id="search-form">
           <div class="umb-modalcolumn-header">
 
             <form class="form-search" novalidate>
               <i class="icon-search"></i>
-              <input type="text"
+              <input data-element="global-search-field"
+                     type="text"
                      hotkey="ctrl+space"
                      id="search-field"
                      ng-model="searchTerm"
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-sections.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-sections.html
index 24392a758e..9fa8fa6891 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-sections.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-sections.html
@@ -1,7 +1,7 @@
 <div>
     <div id="applications" ng-class="{faded:stickyNavigation}">
         <ul class="sections">
-            <li id="section-avatar" class="avatar">
+            <li data-element="section-user" id="section-avatar" class="avatar">
                 <a href="#" ng-click="avatarClick()" hotkey="ctrl+shift+u" title="{{user.name}}" prevent-default>
                     <umb-avatar
                         size="xs"
diff --git a/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml b/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml
index cb948cef96..12039bad37 100644
--- a/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml
+++ b/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml
@@ -56,7 +56,7 @@
     <div ng-hide="!authenticated" ng-cloak>
     
         <!-- help dialog controller by the help button - this also forces the backoffice UI to shift 400px  -->
-        <umb-drawer ng-if="drawer.show" model="drawer.model" view="drawer.view"></umb-drawer>
+        <umb-drawer data-element="drawer" ng-if="drawer.show" model="drawer.model" view="drawer.view"></umb-drawer>
         
         <div id="mainwrapper" class="clearfix" ng-click="closeDialogs($event)">
 

From 7804677f2b87279a82c25dc008c681bd2a850b09 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 19 Oct 2017 11:41:12 +0200
Subject: [PATCH 02/15] use name instead of alias in editor picker element
 attribute because there can be many editors with the same alias

---
 src/Umbraco.Web.UI.Client/src/common/services/tour.service.js | 2 +-
 .../overlays/contenttypeeditor/editorpicker/editorpicker.html | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
index de6ef7f93d..ff43a902ea 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
@@ -81,7 +81,7 @@
                         content: "<p>In the editor picker dialog we can pick one of the many build in editor.</p>"
                     },
                     {
-                        element: "[data-element~='overlay-editor-picker'] [data-element='editor-Umbraco.TextboxMultiple']",
+                        element: "[data-element~='overlay-editor-picker'] [data-element='editor-Textarea']",
                         title: "Select editor",
                         content: "Select the <b>Textarea</b> editor which allows the content editor to enter long texts",
                         event: "click"
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/editorpicker/editorpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/editorpicker/editorpicker.html
index 66e08eba0a..ceeb27ee42 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/editorpicker/editorpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/editorpicker/editorpicker.html
@@ -31,7 +31,7 @@
 						<h5>{{key}}</h5>
 						<ul class="umb-card-grid" ng-mouseleave="vm.hideDetailsOverlay()">
 							<li	ng-repeat="systemDataType in value | orderBy:'name'"
-								data-element="editor-{{systemDataType.alias}}"
+								data-element="editor-{{systemDataType.name}}"
 								ng-mouseover="vm.showDetailsOverlay(systemDataType)"
 								ng-click="vm.pickEditor(systemDataType)"
 								class="-four-in-row">
@@ -49,7 +49,7 @@
 						<h5>{{key}}</h5>
 						<ul class="umb-card-grid" ng-mouseleave="vm.hideDetailsOverlay()">
 							<li ng-repeat="dataType in value | orderBy:'name'"
-								data-element="editor-{{dataType.alias}}"
+								data-element="editor-{{dataType.name}}"
 								ng-mouseover="vm.showDetailsOverlay(dataType)"
 								ng-click="vm.pickDataType(dataType)"
 								class="-four-in-row">

From d518ab908e7768a66b7b74a217419a69d269b31d Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 19 Oct 2017 13:11:10 +0200
Subject: [PATCH 03/15] add intro/outro step logic, start on intro tour,
 testing intro steps

---
 .../application/umbbackdrop.directive.js      |   6 +-
 .../application/umbtour.directive.js          | 239 +++++++++++-------
 .../umbtour/umbtourstep.directive.js          |   5 +-
 .../src/common/services/tour.service.js       |  94 +++++++
 .../less/components/application/umb-tour.less |  49 +++-
 .../nodename/nodename.controller.js           |   6 +-
 .../nodename/nodename.html                    |  44 ++--
 .../doctypename/doctypename.controller.js     |   4 +-
 .../doctypename/doctypename.html              |  44 ++--
 .../propertyname/propertyname.controller.js   |   4 +-
 .../propertyname/propertyname.html            |  44 ++--
 .../uploadimages/uploadimages.controller.js   |   4 +-
 .../uploadimages/uploadimages.html            |  44 ++--
 .../templatetree/templatetree.controller.js   |   4 +-
 .../templatetree/templatetree.html            |  38 +--
 .../components/application/umb-tour.html      |  82 ++++--
 .../umbtour/umb-tour-step-content.html        |   2 +-
 .../umbtour/umb-tour-step-counter.html        |   2 +-
 .../umbtour/umb-tour-step-footer.html         |   2 +-
 .../umbtour/umb-tour-step-header.html         |   4 +-
 .../application/umbtour/umb-tour-step.html    |   2 +-
 .../umbraco/Views/Default.cshtml              |   2 +-
 22 files changed, 482 insertions(+), 243 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbbackdrop.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbbackdrop.directive.js
index 7139cd5682..9fbf86b395 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbbackdrop.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbbackdrop.directive.js
@@ -29,11 +29,11 @@
                     // The element to highlight
                     var highlightElement = angular.element(scope.element);
 
-                    if(highlightElement) {
+                    if(highlightElement && highlightElement.length > 0) {
 
                         var offset = highlightElement.offset();
-                        var width = highlightElement.outerWidth(true);
-                        var height = highlightElement.outerHeight(true);
+                        var width = highlightElement.outerWidth();
+                        var height = highlightElement.outerHeight();
 
                         // Rounding numbers
                         var topDistance = offset.top.toFixed();
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 12696f9441..8c9884ffa8 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
@@ -1,48 +1,45 @@
 (function () {
     'use strict';
 
-    function TourDirective($timeout, $http, tourService, backdropService) {
+    function TourDirective($timeout, $http, $q, tourService, backdropService) {
 
         function link(scope, el, attr, ctrl) {
 
             var popover;
 
-            scope.totalSteps;
-            scope.currentStepIndex;
-            scope.currentStep;
             scope.loadingStep = false;
+            scope.elementNotFound = false;
 
-            scope.nextStep = function() {
+            scope.model.nextStep = function() {
                 nextStep();
             };
 
-            scope.endTour = function() {
+            scope.model.endTour = function() {
                 unbindEvent();
                 tourService.endTour();
                 backdropService.close();
             };
 
-            scope.completeTour = function() {
+            scope.model.completeTour = function() {
                 unbindEvent();
-                tourService.completeTour(scope.tour);
+                tourService.completeTour(scope.model);
                 backdropService.close();
             };
 
             function onInit() {
                 popover = el.find(".umb-tour__popover");
-                scope.totalSteps = scope.tour.steps.length;
-                scope.currentStepIndex = 0;
+                scope.model.currentStepIndex = 0;
                 backdropService.open({disableEventsOnClick: true});
                 startStep();
             }
 
             function setView() {
-                if (scope.currentStep.view && scope.tour.alias) {
+                if (scope.model.currentStep.view && scope.model.alias) {
                     //we do this to avoid a hidden dialog to start loading unconfigured views before the first activation
-                    var configuredView = scope.currentStep.view;
-                    if (scope.currentStep.view.indexOf(".html") === -1) {
-                        var viewAlias = scope.currentStep.view.toLowerCase();
-                        var tourAlias = scope.tour.alias.toLowerCase();
+                    var configuredView = scope.model.currentStep.view;
+                    if (scope.model.currentStep.view.indexOf(".html") === -1) {
+                        var viewAlias = scope.model.currentStep.view.toLowerCase();
+                        var tourAlias = scope.model.alias.toLowerCase();
                         configuredView = "views/common/tours/" + tourAlias + "/" + viewAlias + "/" + viewAlias + ".html";
                     }
                     if (configuredView !== scope.configuredView) {
@@ -54,54 +51,71 @@
             }
 
             function nextStep() {
-                scope.currentStepIndex++;
-                if(scope.currentStepIndex !== scope.tour.steps.length) {
+                scope.model.currentStepIndex++;
+                // make sure we don't go too far
+                if(scope.model.currentStepIndex !== scope.model.steps.length) {
                     startStep();
+                // tour completed - final step
+                } else {
+                    scope.loadingStep = true;
+
+                    waitForPendingRerequests().then(function(){
+                        scope.loadingStep = false;
+                        // clear current step
+                        scope.model.currentStep = {};
+                        // set popover position to center
+                        setPopoverPosition(null);
+                        // remove backdrop hightlight
+                        backdropService.setHighlight(null);
+                    });
                 }
             }
 
             function startStep() {
 
-                // we need to make sure that all requests are done
-                var timer = window.setInterval(function(){
+                scope.loadingStep = true;
+                backdropService.setHighlight(null);
 
-                    console.log("pending", $http.pendingRequests.length);
-                    console.log("document ready", document.readyState);
+                waitForPendingRerequests().then(function() {
+
+                    scope.model.currentStep = scope.model.steps[scope.model.currentStepIndex];
+
+                    setView();
                     
-                    scope.loadingStep = true;
-
-                    backdropService.setHighlight(null);
-
-                    // check for pending requests both in angular and on the document
-                    if($http.pendingRequests.length === 0 && document.readyState === "complete") {
-                        console.log("Everything is DONE JOHN");
-
-                        scope.currentStep = scope.tour.steps[scope.currentStepIndex];
-
-                        clearInterval(timer);
-
-                        setView();
-                        
-                        positionPopover();
-
-                        // if a custom event needs to be bound we do it now
-                        if(scope.currentStep.event) {
-                            bindEvent();
-                        }
-
-                        scope.loadingStep = false;
+                    // if highlight element is set - find it
+                    findHighlightElement();
 
+                    // if a custom event needs to be bound we do it now
+                    if(scope.model.currentStep.event) {
+                        bindEvent();
                     }
-                    
-                }, 50);
 
+                    scope.loadingStep = false;
+
+                });
             }
 
-            function positionPopover() {
+            function findHighlightElement() {
+
+                scope.elementNotFound = false;                
 
                 $timeout(function () {
 
-                    var element = $(scope.currentStep.element);
+                    // if an element isn't set - show the popover in the center
+                    if(!scope.model.currentStep.element) {
+                        setPopoverPosition(null);
+                        return;
+                    }
+
+                    var element = angular.element(scope.model.currentStep.element);
+
+                    // we couldn't find the element in the dom - abort and show error
+                    if(element.length === 0) {
+                        scope.elementNotFound = true;
+                        setPopoverPosition(null);
+                        return;
+                    }
+
                     var scrollParent = element.scrollParent();
 
                     console.log("scrollParent", scrollParent);
@@ -114,33 +128,37 @@
                         }, function () {
                             // Animation complete.
                             console.log("ANIMATION COMPLETE");
-                            _position();
-                            backdropService.setHighlight(scope.currentStep.element);
+                            setPopoverPosition(element);
+                            backdropService.setHighlight(scope.model.currentStep.element);
                         });
                     } else {
-                        _position();
-                        backdropService.setHighlight(scope.currentStep.element);
+                        setPopoverPosition(element);
+                        backdropService.setHighlight(scope.model.currentStep.element);
                     }
 
                 });
 
-                function _position() {
+            }
 
-                    $timeout(function () {
+            function setPopoverPosition(element) {
+
+                $timeout(function () {
+
+                    var position = "center";
+                    var css = {top: "50%", left: "50%", marginLeft: "inherit", marginTop: "inherit" };
+
+                    var popoverWidth = popover.outerWidth();
+                    var popoverHeight = popover.outerHeight();
+                    var popoverOffset = popover.offset();
+                    var documentWidth = $(document).width();
+                    var documentHeight = $(document).height();
+
+                    if(element) {
 
-                        var element = $(scope.currentStep.element);
                         var offset = element.offset();
-                        var width = element.outerWidth(true);
-                        var height = element.outerHeight(true);
+                        var width = element.outerWidth();
+                        var height = element.outerHeight();
 
-                        var popoverWidth = popover.outerWidth(true);
-                        var popoverHeight = popover.outerHeight(true);
-                        var popoverOffset = popover.offset();
-                        var documentWidth = $(document).width();
-                        var documentHeight = $(document).height();
-                        var position;
-                        var css = {};
-                        
                         // messure available space on each side of the target element
                         var space = {
                             "top": offset.top,
@@ -156,46 +174,73 @@
                         // get the posistion with most available space
                         position = findMax(space);
 
-                        if(position === "top") {
-                            if (offset.left < documentWidth/2) {
-                                css = {top: offset.top - popoverHeight, left: offset.left};
+                        if (position === "top") {
+                            if (offset.left < documentWidth / 2) {
+                                css.top = offset.top - popoverHeight;
+                                css.left = offset.left;
                             } else {
-                                css = {top: offset.top - popoverHeight, left: offset.left - popoverWidth + width};
+                                css.top = offset.top - popoverHeight;
+                                css.left = offset.left - popoverWidth + width;
                             }
                         }
 
-                        if(position === "right") {
-                            if (offset.top < documentHeight/2) {
-                                css = {top: offset.top, left: offset.left + width};
+                        if (position === "right") {
+                            if (offset.top < documentHeight / 2) {
+                                css.top = offset.top; 
+                                css.left = offset.left + width;
                             } else {
-                                css = {top: offset.top + height - popoverHeight, left: offset.left + width};
+                                css.top = offset.top + height - popoverHeight;
+                                css.left = offset.left + width;
                             }
                         }
 
-                        if(position === "bottom") {
-                            if (offset.left < documentWidth/2) {
-                                css = {top: offset.top + height, left: offset.left};
+                        if (position === "bottom") {
+                            if (offset.left < documentWidth / 2) {
+                                css.top = offset.top + height;
+                                css.left = offset.left;
                             } else {
-                                css = {top: offset.top + height, left: offset.left - popoverWidth + width};
+                                css.top = offset.top + height;
+                                css.left = offset.left - popoverWidth + width;
                             }
                         }
 
-                        if(position === "left") {
-                            if (offset.top < documentHeight/2) {
-                                css = {top: offset.top, left: offset.left - popoverWidth};        
+                        if (position === "left") {
+                            if (offset.top < documentHeight / 2) {
+                                css.top = offset.top; 
+                                css.left = offset.left - popoverWidth;
                             } else {
-                                css = {top: offset.top + height - popoverHeight, left: offset.left - popoverWidth};
+                                css.top = offset.top + height - popoverHeight;
+                                css.left = offset.left - popoverWidth;
                             }
                         }
 
-                        popover.css(css);
+                    } else {
 
-                        scope.position = position;
+                        // if there is no dom element center the popover
+                        css.marginLeft = - (popoverWidth / 2);
+                        css.marginTop = - (popoverHeight / 2);
 
-                    });
+                    }
 
-                }
+                    popover.css(css);
 
+                    scope.position = position;
+
+                });
+
+            }
+
+            function waitForPendingRerequests() {
+                var deferred = $q.defer();
+                var timer = window.setInterval(function(){
+                    // check for pending requests both in angular and on the document
+                    if($http.pendingRequests.length === 0 && document.readyState === "complete") {
+                        deferred.resolve();
+                        clearInterval(timer);
+                        scope.$apply();
+                    }
+                }, 50);
+                return deferred.promise;
             }
 
             function findMax(obj) {
@@ -211,23 +256,23 @@
             }
 
             function bindEvent() {
-                var eventName = scope.currentStep.event + ".step-" + scope.currentStepIndex;
-                if(scope.currentStep.eventElement) {
-                    $(scope.currentStep.eventElement).on(eventName, handleEvent);
-                    console.log("bind", eventName);                    
+                var eventName = scope.model.currentStep.event + ".step-" + scope.model.currentStepIndex;
+                if(scope.model.currentStep.eventElement) {
+                    $(scope.model.currentStep.eventElement).on(eventName, handleEvent);
+                    console.log("bind", eventName);
                 } else {
-                    $(scope.currentStep.element).on(eventName, handleEvent);
-                    console.log("bind", eventName);                    
+                    $(scope.model.currentStep.element).on(eventName, handleEvent);
+                    console.log("bind", eventName);
                 }
             }
 
             function unbindEvent() {
-                var eventName = scope.currentStep.event + ".step-" + scope.currentStepIndex;                
-                if(scope.currentStep.eventElement) {
-                    $(scope.currentStep.eventElement).off(eventName);
-                    console.log("unbind", eventName);                    
+                var eventName = scope.model.currentStep.event + ".step-" + scope.model.currentStepIndex;                
+                if(scope.model.currentStep.eventElement) {
+                    $(scope.model.currentStep.eventElement).off(eventName);
+                    console.log("unbind", eventName);
                 } else {
-                    $(scope.currentStep.element).off(eventName);
+                    $(scope.model.currentStep.element).off(eventName);
                     console.log("unbind", eventName);
                 }
             }
@@ -239,7 +284,7 @@
             }
 
             function resize() {
-                positionPopover();
+                findHighlightElement();
             }
 
             onInit();
@@ -259,7 +304,7 @@
             templateUrl: 'views/components/application/umb-tour.html',
             link: link,
             scope: {
-                tour: "="
+                model: "="
             }
         };
 
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 039d8bb838..e840634865 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
@@ -7,7 +7,10 @@
             restrict: 'E',
             replace: true,
             transclude: true,
-            templateUrl: 'views/components/application/umbtour/umb-tour-step.html'
+            templateUrl: 'views/components/application/umbtour/umb-tour-step.html',
+            scope: {
+                size: "@?"
+            }
         };
 
         return directive;
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
index ff43a902ea..33f2d5f0a4 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
@@ -6,11 +6,85 @@
         var localStorageKey = "umbTours";
 
         var tours = [
+            {
+                "name": "Introduction",
+                "alias": "umbIntroIntroduction",
+                "group": "Getting Started",
+                "steps": [
+                    {
+                        title: "Welcome to Umbraco - The Friendly CMS",
+                        content: "<p>Thank you for choosing Umbraco - we think this could be the beginning of something beautiful. While it may feel overwhelming at first, we've done a lot to make the learning curve as smooth and fast as possible.</p>",
+                        type: "intro"
+                    },
+                    {
+                        element: "#applications",
+                        title: "Sections",
+                        content: "These are the <b>Sections</b> and allows you to navigate the different areas of Umbraco"
+                    },
+                    {
+                        element: "#tree",
+                        title: "The Tree",
+                        content: "This is the <b>Tree</b> and contains all the pages of your website"
+                    },
+                    {
+                        element: "[data-element='global-search-field']",
+                        title: "Search",
+                        content: "The search allows you to quickly find content across sections within Umbraco"
+                    },
+                    {
+                        element: "#applications [data-element='section-user']",
+                        title: "User profile",
+                        content: "Click here to open the user profile dialog",
+                        event: "click"
+                    },
+                    {
+                        element: "[data-element~='overlay-user']",
+                        title: "User profile",
+                        content: "This is where you can see details about your user, change your password and log out of Umbraco"
+                    },
+                    {
+                        element: "[data-element~='overlay-user'] [data-element='button-testy']",
+                        title: "User profile",
+                        content: "This is where you can see details about your user, change your password and log out of Umbraco",
+                        event: "click"
+                    },
+                    /*
+                    {
+                        element: "[data-element~='overlay-user'] [data-element~='button-change-password']",
+                        title: "User profile",
+                        content: "This is where you can see details about your user, change your password and log out of Umbraco",
+                        event: "click"
+                    },
+                    */
+                    {
+                        element: "[data-element~='overlay-user'] [data-element='overlay-close']",
+                        title: "User profile",
+                        content: "Let's close the user profile again",
+                        event: "click"
+                    },
+                    {
+                        element: "#applications [data-element='section-help']",
+                        title: "Help",
+                        content: "If you ever find yourself in trouble click here to open the help drawer",
+                        event: "click"
+                    },
+                    {
+                        element: "[data-element='drawer']",
+                        title: "Help",
+                        content: "<p>In the help drawer you can find articles and videos related to the section you are using.</p><p>You will also find more tours like this which will help you get started with Umbraco.</p>"
+                    }
+                ]
+            },
             {
                 "name": "Create document type",
                 "alias": "umbIntroCreateDocType",
                 "group": "Getting Started",
                 "steps": [
+                    {
+                        title: "Create your first Document Type",
+                        content: "<p>Step 1 of any site is to create a <strong>Document Type</strong>. A Document Type is a data container where you can add data fields. The editor can then input data and Umbraco can use it to output it in the relevant parts of a <strong>template</strong>.</p><p>In this tour you will learn how to set up a basic Document Type with a data field to enter some text.</p>",
+                        type: "intro"
+                    },
                     {
                         element: "#applications [data-element='section-settings']",
                         title: "Navigate to the settings sections",
@@ -116,6 +190,11 @@
                 "alias": "umbIntroCreateContent",
                 "group": "Getting Started",
                 "steps": [
+                    {
+                        title: "Creating your first content node",
+                        content: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in euismod velit. Aliquam sit amet turpis in velit convallis bibendum. Suspendisse venenatis porttitor ipsum eu eleifend.</p>",
+                        type: "intro"
+                    },
                     {
                         element: "[data-element='tree-root']",
                         title: "Open context menu",
@@ -153,6 +232,11 @@
                 "alias": "umbIntroRenderInTemplate",
                 "group": "Getting Started",
                 "steps": [
+                    {
+                        title: "Render your content in a template",
+                        content: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in euismod velit. Aliquam sit amet turpis in velit convallis bibendum. Suspendisse venenatis porttitor ipsum eu eleifend.</p>",
+                        type: "intro"
+                    },
                     {
                         element: "#applications [data-element='section-settings']",
                         title: "Navigate to the settings section",
@@ -191,6 +275,11 @@
                 "alias": "umbIntroViewHomePage",
                 "group": "Getting Started",
                 "steps": [
+                    {
+                        title: "View your Umbraco site",
+                        content: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in euismod velit. Aliquam sit amet turpis in velit convallis bibendum. Suspendisse venenatis porttitor ipsum eu eleifend.</p>",
+                        type: "intro"
+                    },
                     {
                         element: "#tree [data-element='tree-item-Home']",
                         title: "Open the Home page",
@@ -217,6 +306,11 @@
                 "alias": "umbIntroMediaSection",
                 "group": "Getting Started",
                 "steps": [
+                    {
+                        title: "How to use the media library",
+                        content: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in euismod velit. Aliquam sit amet turpis in velit convallis bibendum. Suspendisse venenatis porttitor ipsum eu eleifend.</p>",
+                        type: "intro"
+                    },
                     {
                         element: "#applications [data-element='section-media']",
                         title: "Navigate to the media section",
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 cc92514bd6..4ea2f1b353 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
@@ -4,9 +4,6 @@
     left: 50%;
     background: @white;
     border-radius: @baseBorderRadius;
-    padding: 15px;
-    max-width: 250px;
-    min-width: 150px;
     z-index: 10000;
 }
 
@@ -17,34 +14,66 @@
 
 .umb-tour__popover--right {
     margin-left: 20px;
-    transform: none;
+    transform: none;    
 }
 
 .umb-tour__popover--bottom {
     margin-top: 20px;
-    transform: none;
+    transform: none;    
 }
 
 .umb-tour__popover--left {
     margin-right: 20px;
-    transform: none;
+    transform: none;    
 }
 
-.umb-tour__step-counter {
+.umb-tour-step {
+    max-width: 250px;
+    min-width: 150px;
+    padding: 15px;
+    box-sizing: border-box;
+}
+
+.umb-tour-step__counter {
     font-size: 13px;
     color: @gray-5;
 }
 
-.umb-tour__title {
+.umb-tour-step__header {
+    margin-top: 5px;
     margin-bottom: 10px;
+}
+
+.umb-tour-step__title {
     font-weight: bold;
     color: @black;
     font-size: 15px;
-    margin-top: 5px;
 }
 
-.umb-tour__content {
+.umb-tour-step__content {
     margin-bottom: 15px;
     font-size: 15px;
     line-height: 1.6em;
+}
+
+/* Sizes */
+
+.umb-tour-step--l {
+    padding: 30px;
+    max-width: 600px;
+
+    .umb-tour-step__header {
+        margin-bottom: 30px;
+        margin-top: 10px;
+    }
+
+    .umb-tour-step__title {
+        font-size: 20px;
+        text-align: center;
+    }
+
+    .umb-tour-step__content {
+        margin-bottom: 25px;
+    }
+
 }
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatecontent/nodename/nodename.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatecontent/nodename/nodename.controller.js
index 364002da33..ee69ec64a0 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatecontent/nodename/nodename.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatecontent/nodename/nodename.controller.js
@@ -4,7 +4,7 @@
     function NodeNameController($scope) {
         
         var vm = this;
-        var element = angular.element($scope.currentStep.element);
+        var element = angular.element($scope.model.currentStep.element);
 
         vm.error = false;
         
@@ -12,7 +12,7 @@
 
         function initNextStep() {
             if(element.val() === 'Home') {
-                $scope.nextStep();
+                $scope.model.nextStep();
             } else {
                 vm.error = true;
             }
@@ -20,5 +20,5 @@
 
     }
 
-    angular.module("umbraco").controller("Umbraco.Tours.umbIntroCreateDocType.NodeNameController", NodeNameController);
+    angular.module("umbraco").controller("Umbraco.Tours.UmbIntroCreateContent.NodeNameController", NodeNameController);
 })();
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 60505dc35a..69853ac201 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,26 +1,30 @@
-<umb-tour-step ng-controller="Umbraco.Tours.umbIntroCreateDocType.NodeNameController as vm">
+<div ng-controller="Umbraco.Tours.UmbIntroCreateContent.NodeNameController as vm">
+
+    <umb-tour-step>
+            
+        <umb-tour-step-header
+            title="model.currentStep.title">
+        </umb-tour-step-header>
         
-    <umb-tour-step-header
-        title="currentStep.title">
-    </umb-tour-step-header>
-    
-    <umb-tour-step-content
-        content="currentStep.content">
-        <div ng-if="vm.error" class="color-red" style="margin-top: 5px;">Please enter <b>Home</b> in the field</div>
-    </umb-tour-step-content>
+        <umb-tour-step-content
+            content="model.currentStep.content">
+            <div ng-if="vm.error" class="color-red" style="margin-top: 5px;">Please enter <b>Home</b> in the field</div>
+        </umb-tour-step-content>
 
-    <umb-tour-step-footer class="flex justify-between items-center">
+        <umb-tour-step-footer class="flex justify-between items-center">
 
-        <umb-tour-step-counter
-            current-step="currentStepIndex + 1"
-            total-steps="tour.steps.length">
-        </umb-tour-step-counter>
+            <umb-tour-step-counter
+                current-step="model.currentStepIndex + 1"
+                total-steps="model.steps.length">
+            </umb-tour-step-counter>
 
-        <div>
-            <umb-button size="xs" button-style="link" type="button" action="endTour()" label="End tour"></umb-button>
-            <umb-button size="xs" button-style="success" type="button" action="vm.initNextStep()" label="Next"></umb-button>
-        </div>
+            <div>
+                <umb-button size="xs" button-style="link" type="button" action="endTour()" label="End tour"></umb-button>
+                <umb-button size="xs" button-style="success" type="button" action="vm.initNextStep()" label="Next"></umb-button>
+            </div>
 
-    </umb-tour-step-footer>
+        </umb-tour-step-footer>
 
-</umb-tour-step>
\ No newline at end of file
+    </umb-tour-step>
+
+</div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/doctypename/doctypename.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/doctypename/doctypename.controller.js
index f859d01272..6836d54cc0 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/doctypename/doctypename.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/doctypename/doctypename.controller.js
@@ -4,7 +4,7 @@
     function DocTypeNameController($scope) {
         
         var vm = this;
-        var element = angular.element($scope.currentStep.element);
+        var element = angular.element($scope.model.currentStep.element);
 
         vm.error = false;
         
@@ -12,7 +12,7 @@
 
         function initNextStep() {
             if(element.val() === 'Home') {
-                $scope.nextStep();
+                $scope.model.nextStep();
             } else {
                 vm.error = true;
             }
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 9172b06e41..840b36fdea 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,26 +1,30 @@
-<umb-tour-step ng-controller="Umbraco.Tours.UmbIntroCreateDocType.DocTypeNameController as vm">
+<div ng-controller="Umbraco.Tours.UmbIntroCreateDocType.DocTypeNameController as vm">
+
+    <umb-tour-step>
+            
+        <umb-tour-step-header
+            title="model.currentStep.title">
+        </umb-tour-step-header>
         
-    <umb-tour-step-header
-        title="currentStep.title">
-    </umb-tour-step-header>
-    
-    <umb-tour-step-content
-        content="currentStep.content">
-        <div ng-if="vm.error" class="color-red" style="margin-top: 5px;">Please enter <b>Home</b> in the field</div>
-    </umb-tour-step-content>
+        <umb-tour-step-content
+            content="model.currentStep.content">
+            <div ng-if="vm.error" class="color-red" style="margin-top: 5px;">Please enter <b>Home</b> in the field</div>
+        </umb-tour-step-content>
 
-    <umb-tour-step-footer class="flex justify-between items-center">
+        <umb-tour-step-footer class="flex justify-between items-center">
 
-        <umb-tour-step-counter
-            current-step="currentStepIndex + 1"
-            total-steps="tour.steps.length">
-        </umb-tour-step-counter>
+            <umb-tour-step-counter
+                current-step="model.currentStepIndex + 1"
+                total-steps="model.steps.length">
+            </umb-tour-step-counter>
 
-        <div>
-            <umb-button size="xs" button-style="link" type="button" action="endTour()" label="End tour"></umb-button>
-            <umb-button size="xs" button-style="success" type="button" action="vm.initNextStep()" label="Next"></umb-button>
-        </div>
+            <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>
 
-    </umb-tour-step-footer>
+        </umb-tour-step-footer>
 
-</umb-tour-step>
\ No newline at end of file
+    </umb-tour-step>
+
+</div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/propertyname/propertyname.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/propertyname/propertyname.controller.js
index c2ff16dd86..141ee5d94d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/propertyname/propertyname.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrocreatedoctype/propertyname/propertyname.controller.js
@@ -4,7 +4,7 @@
     function PropertyNameController($scope) {
         
         var vm = this;
-        var element = angular.element($scope.currentStep.element);
+        var element = angular.element($scope.model.currentStep.element);
 
         vm.error = false;
         
@@ -12,7 +12,7 @@
 
         function initNextStep() {
             if(element.val() === 'Welcome Text') {
-                $scope.nextStep();
+                $scope.model.nextStep();
             } else {
                 vm.error = true;
             }
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 27e74e7a8c..c1701abe69 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,26 +1,30 @@
-<umb-tour-step ng-controller="Umbraco.Tours.UmbIntroCreateDocType.PropertyNameController as vm">
+<div ng-controller="Umbraco.Tours.UmbIntroCreateDocType.PropertyNameController as vm">
+
+    <umb-tour-step>
+            
+        <umb-tour-step-header
+            title="model.currentStep.title">
+        </umb-tour-step-header>
         
-    <umb-tour-step-header
-        title="currentStep.title">
-    </umb-tour-step-header>
-    
-    <umb-tour-step-content
-        content="currentStep.content">
-        <div ng-if="vm.error" class="color-red" style="margin-top: 5px;">Please enter <b>Welcome Text</b> in the field</div>
-    </umb-tour-step-content>
+        <umb-tour-step-content
+            content="model.currentStep.content">
+            <div ng-if="vm.error" class="color-red" style="margin-top: 5px;">Please enter <b>Welcome Text</b> in the field</div>
+        </umb-tour-step-content>
 
-    <umb-tour-step-footer class="flex justify-between items-center">
+        <umb-tour-step-footer class="flex justify-between items-center">
 
-        <umb-tour-step-counter
-            current-step="currentStepIndex + 1"
-            total-steps="tour.steps.length">
-        </umb-tour-step-counter>
+            <umb-tour-step-counter
+                current-step="model.currentStepIndex + 1"
+                total-steps="model.steps.length">
+            </umb-tour-step-counter>
 
-        <div>
-            <umb-button size="xs" button-style="link" type="button" action="endTour()" label="End tour"></umb-button>
-            <umb-button size="xs" button-style="success" type="button" action="vm.initNextStep()" label="Next"></umb-button>
-        </div>
+            <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>
 
-    </umb-tour-step-footer>
+        </umb-tour-step-footer>
 
-</umb-tour-step>
\ No newline at end of file
+    </umb-tour-step>
+
+</div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/uploadimages/uploadimages.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/uploadimages/uploadimages.controller.js
index 2c0faa2ca4..0989076e95 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/uploadimages/uploadimages.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintromediasection/uploadimages/uploadimages.controller.js
@@ -4,7 +4,7 @@
     function UploadImagesController($scope, editorState, mediaResource) {
         
         var vm = this;
-        var element = angular.element($scope.currentStep.element);
+        var element = angular.element($scope.model.currentStep.element);
 
         vm.error = false;
         
@@ -24,7 +24,7 @@
                     var children = data;
 
                     if(children.items && children.items.length > 0) {
-                        $scope.nextStep();
+                        $scope.model.nextStep();
                     } else {
                         vm.error = true;
                     }
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 75cdcb322b..4ad707a316 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,26 +1,30 @@
-<umb-tour-step ng-controller="Umbraco.Tours.UmbIntroMediaSection.UploadImagesController as vm">
+<div ng-controller="Umbraco.Tours.UmbIntroMediaSection.UploadImagesController as vm">
 
-    <umb-tour-step-header
-        title="currentStep.title">
-    </umb-tour-step-header>
-    
-    <umb-tour-step-content
-        content="currentStep.content">
-        <div ng-if="vm.error" class="color-red" style="margin-top: 5px;">Please upload an image</div>
-    </umb-tour-step-content>
+    <umb-tour-step>
 
-    <umb-tour-step-footer class="flex justify-between items-center">
+        <umb-tour-step-header
+            title="model.currentStep.title">
+        </umb-tour-step-header>
+        
+        <umb-tour-step-content
+            content="model.currentStep.content">
+            <div ng-if="vm.error" class="color-red" style="margin-top: 5px;">Please upload an image</div>
+        </umb-tour-step-content>
 
-        <umb-tour-step-counter
-            current-step="currentStepIndex + 1"
-            total-steps="tour.steps.length">
-        </umb-tour-step-counter>
+        <umb-tour-step-footer class="flex justify-between items-center">
 
-        <div>
-            <umb-button size="xs" button-style="link" type="button" action="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>
+            <umb-tour-step-counter
+                current-step="model.currentStepIndex + 1"
+                total-steps="model.steps.length">
+            </umb-tour-step-counter>
 
-    </umb-tour-step-footer>
+            <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>
 
-</umb-tour-step>
\ No newline at end of file
+        </umb-tour-step-footer>
+
+    </umb-tour-step>
+
+</div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrorenderintemplate/templatetree/templatetree.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrorenderintemplate/templatetree/templatetree.controller.js
index a8a08b7c67..3fdeb8d3c0 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrorenderintemplate/templatetree/templatetree.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/tours/umbintrorenderintemplate/templatetree/templatetree.controller.js
@@ -4,12 +4,12 @@
     function TemplatesTreeController($scope) {
         
         var vm = this;
-        var eventElement = angular.element($scope.currentStep.eventElement);
+        var eventElement = angular.element($scope.model.currentStep.eventElement);
         
         function onInit() {
             // check if tree is already open - if it is - go to next step
             if(eventElement.hasClass("icon-navigation-down")) {
-                $scope.nextStep();
+                $scope.model.nextStep();
             }
         }
 
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 569a58d1ed..23bdc01997 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,24 +1,26 @@
-<umb-tour-step ng-controller="Umbraco.Tours.UmbIntroRenderInTemplate.TemplatesTreeController as vm">
+<div ng-controller="Umbraco.Tours.UmbIntroRenderInTemplate.TemplatesTreeController as vm">
+    <umb-tour-step>
+            
+        <umb-tour-step-header
+            title="model.currentStep.title">
+        </umb-tour-step-header>
         
-    <umb-tour-step-header
-        title="currentStep.title">
-    </umb-tour-step-header>
-    
-    <umb-tour-step-content
-        content="currentStep.content">
-    </umb-tour-step-content>
+        <umb-tour-step-content
+            content="model.currentStep.content">
+        </umb-tour-step-content>
 
-    <umb-tour-step-footer class="flex justify-between items-center">
+        <umb-tour-step-footer class="flex justify-between items-center">
 
-        <umb-tour-step-counter
-            current-step="currentStepIndex + 1"
-            total-steps="tour.steps.length">
-        </umb-tour-step-counter>
+            <umb-tour-step-counter
+                current-step="model.currentStepIndex + 1"
+                total-steps="model.steps.length">
+            </umb-tour-step-counter>
 
-        <div>
-            <umb-button size="xs" button-style="link" type="button" action="endTour()" label="End tour"></umb-button>
-        </div>
+            <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-footer>
 
-</umb-tour-step>
\ No newline at end of file
+    </umb-tour-step>
+</div>
\ No newline at end of file
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 397421418a..b667cd37e1 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
@@ -1,6 +1,7 @@
 <div class="umb-tour">
 
     <div class="umb-tour__popover shadow-depth-2" ng-class="{
+        'umb-tour__popover--center': position === 'center',
         'umb-tour__popover--top': position === 'top',
         'umb-tour__popover--right': position ===  'right',
         'umb-tour__popover--bottom': position ===  'bottom',
@@ -10,44 +11,91 @@
             <umb-load-indicator></umb-load-indicator>
         </div>
         
-        <div ng-if="!configuredView && !loadingStep">
+        <div ng-if="!configuredView && !loadingStep && !elementNotFound">
 
             <!-- Regular steps -->
-            <umb-tour-step ng-if="currentStepIndex < tour.steps.length">
+            <umb-tour-step ng-if="model.currentStepIndex < model.steps.length && model.currentStep.type !== 'intro'">
                     
                 <umb-tour-step-header
-                    title="currentStep.title">
+                    title="model.currentStep.title">
                 </umb-tour-step-header>
     
                 <umb-tour-step-content
-                    content="currentStep.content">
+                    content="model.currentStep.content">
                 </umb-tour-step-content>
     
                 <umb-tour-step-footer class="flex justify-between items-center">
                     <umb-tour-step-counter
-                        current-step="currentStepIndex + 1"
-                        total-steps="tour.steps.length">
+                        current-step="model.currentStepIndex + 1"
+                        total-steps="model.steps.length">
                     </umb-tour-step-counter>
                     <div>
-                        <umb-button size="xs" button-style="link" type="button" action="endTour()" label="End tour"></umb-button>
-                        <umb-button size="xs" ng-if="!currentStep.event" button-style="success" type="button" action="nextStep()" label="Next"></umb-button>
+                        <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>
                 </umb-tour-step-footer>
         
             </umb-tour-step>
 
-            <!-- Outro step -->
-            <div ng-if="currentStepIndex === tour.steps.length && !loadingStep">
-                <div class="umb-tour__title">WOOOHOOO!</div>
-                <div class="umb-tour__content">Your completed the tour. That is amazing!</div>
-                <div class="umb-tour__button-container-center">
-                    <umb-button type="button" button-style="success" size="xs" action="completeTour()" label="Complete"></umb-button>
-                </div>
-            </div>
+            <!-- Intro step type -->
+            <umb-tour-step size="l" ng-if="model.currentStepIndex === 0 && model.currentStep.type === 'intro'">
+
+                <umb-tour-step-header
+                    title="model.currentStep.title">
+                </umb-tour-step-header>
+
+                <umb-tour-step-content
+                    content="model.currentStep.content">
+                </umb-tour-step-content>
+
+                <umb-tour-step-footer class="flex justify-between items-center">
+                    <umb-tour-step-counter
+                        current-step="model.currentStepIndex + 1"
+                        total-steps="model.steps.length">
+                    </umb-tour-step-counter>
+                    <div>
+                        <umb-button size="m" button-style="link" type="button" action="model.endTour()" label="End tour"></umb-button>                            
+                        <umb-button size="m" button-style="success" type="button" action="model.nextStep()" label="Start tour"></umb-button>
+                    </div>
+                </umb-tour-step-footer>
+
+            </umb-tour-step>
+
+            <!-- Outro step type -->
+            <umb-tour-step size="l" ng-if="model.currentStepIndex === model.steps.length" class="tc">
+
+                <umb-tour-step-content>
+                    <div class="flex items-center justify-center">
+                        <umb-checkmark size="xl" checked="true"></umb-checkmark>
+                    </div>
+                    <h3 class="bold">Congratulations!</h3>
+                    <p>You have reached the end of the <b>{{model.name}}</b> tour - way to go!</p>
+                </umb-tour-step-content>
+
+                <umb-tour-step-footer>
+                    <umb-button type="button" button-style="success" size="m" action="model.completeTour()" label="Complete"></umb-button>
+                </umb-tour-step-footer>
+
+            </umb-tour-step>
 
         </div>
 
-        <div ng-if="configuredView && !loadingStep" ng-include="configuredView"></div>
+        <!-- Custom step view -->
+        <div ng-if="configuredView && !loadingStep && !elementNotFound" ng-include="configuredView"></div>
+        
+        <!-- Dom element not found error -->
+        <div ng-if="elementNotFound && !loadingStep">
+            <umb-tour-step class="tc">
+                <umb-tour-step-header class="bold color-red">Test test test</umb-tour-step-header>
+                <umb-tour-step-content>
+                    <p>Oh, we lost the next step <b>{{ currentStep.title }}</b> and don't know where to go.</p>
+                    <p>Please go back and start the tour again.</p>
+                </umb-tour-step-content>
+                <umb-tour-step-footer>
+                    <umb-button size="s" button-style="success" type="button" action="model.endTour()" label="End tour"></umb-button>
+                </umb-tour-step-footer>
+            </umb-tour-step>
+        </div>
 
     </div>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umbtour/umb-tour-step-content.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umbtour/umb-tour-step-content.html
index ffbfb47a5b..0010a2bc6d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umbtour/umb-tour-step-content.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umbtour/umb-tour-step-content.html
@@ -1,4 +1,4 @@
-<div class="umb-tour__content">
+<div class="umb-tour-step__content">
     <div ng-bind-html="content"></div>
     <div ng-transclude></div>
 </div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umbtour/umb-tour-step-counter.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umbtour/umb-tour-step-counter.html
index 0c618419b9..bd4e0127d2 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umbtour/umb-tour-step-counter.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umbtour/umb-tour-step-counter.html
@@ -1 +1 @@
-<div class="umb-tour__step-counter">Step {{ currentStep }} of {{ totalSteps }}</div>
\ No newline at end of file
+<div class="umb-tour-step__counter">{{ currentStep }}/{{ totalSteps }}</div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umbtour/umb-tour-step-footer.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umbtour/umb-tour-step-footer.html
index 2b03260698..82cc711cfa 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umbtour/umb-tour-step-footer.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umbtour/umb-tour-step-footer.html
@@ -1 +1 @@
-<div ng-transclude></div>
\ No newline at end of file
+<div class="umb-tour-step__footer" ng-transclude></div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umbtour/umb-tour-step-header.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umbtour/umb-tour-step-header.html
index 3adb526b8e..75466bada0 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umbtour/umb-tour-step-header.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umbtour/umb-tour-step-header.html
@@ -1 +1,3 @@
-<div class="umb-tour__title">{{title}}</div>
\ No newline at end of file
+<div class="umb-tour-step__header">
+    <div class="umb-tour-step__title">{{title}}</div>
+</div>
\ No newline at end of file
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 2b03260698..dad2694db6 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 @@
-<div ng-transclude></div>
\ No newline at end of file
+<div class="umb-tour-step umb-tour-step--{{size}}" ng-transclude></div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml b/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml
index 12039bad37..4bfa6c839b 100644
--- a/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml
+++ b/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml
@@ -68,7 +68,7 @@
 
             <umb-tour
                 ng-if="tour.show"
-                tour="tour">
+                model="tour">
             </umb-tour>
 
             <umb-notifications></umb-notifications>

From 5fe63c2c1a22e01b9cf3aec631db7baefb857d48 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 19 Oct 2017 14:27:00 +0200
Subject: [PATCH 04/15] fix lost element header

---
 .../application/umbtour/umbtourstepheader.directive.js      | 1 +
 .../src/views/components/application/umb-tour.html          | 6 ++++--
 .../application/umbtour/umb-tour-step-header.html           | 1 +
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour/umbtourstepheader.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour/umbtourstepheader.directive.js
index 60c052e2e3..9d32ad87a4 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour/umbtourstepheader.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbtour/umbtourstepheader.directive.js
@@ -6,6 +6,7 @@
         var directive = {
             restrict: 'E',
             replace: true,
+            transclude: true,
             templateUrl: 'views/components/application/umbtour/umb-tour-step-header.html',
             scope: {
                 title: "="
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 b667cd37e1..e1639c405f 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
@@ -86,9 +86,11 @@
         <!-- Dom element not found error -->
         <div ng-if="elementNotFound && !loadingStep">
             <umb-tour-step class="tc">
-                <umb-tour-step-header class="bold color-red">Test test test</umb-tour-step-header>
+                <umb-tour-step-header>
+                    <h4 class="bold color-red">Oh, we got lost!</h4>
+                </umb-tour-step-header>
                 <umb-tour-step-content>
-                    <p>Oh, we lost the next step <b>{{ currentStep.title }}</b> and don't know where to go.</p>
+                    <p>We lost the next step <b>{{ model.currentStep.title }}</b> and don't know where to go.</p>
                     <p>Please go back and start the tour again.</p>
                 </umb-tour-step-content>
                 <umb-tour-step-footer>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umbtour/umb-tour-step-header.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umbtour/umb-tour-step-header.html
index 75466bada0..e34aa2025c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umbtour/umb-tour-step-header.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umbtour/umb-tour-step-header.html
@@ -1,3 +1,4 @@
 <div class="umb-tour-step__header">
     <div class="umb-tour-step__title">{{title}}</div>
+    <div ng-transclude></div>
 </div>
\ No newline at end of file

From 203837aa84121785ef29c7abceda5b20199a4ba6 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 19 Oct 2017 16:01:20 +0200
Subject: [PATCH 05/15] start intro tour on load (if it hasn't been completed)

---
 .../src/common/services/tour.service.js           | 15 ++++++++++++++-
 .../views/dashboard/dashboard.tabs.controller.js  | 13 +++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
index 33f2d5f0a4..defb4cd0b4 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
@@ -408,6 +408,17 @@
             return groupedTours;
         }
 
+        function getTourByAlias(tourAlias) {
+            var tour = _.findWhere(tours, {alias: tourAlias});
+            return tour;
+        }
+
+        function getCompletedTours() {
+            var completedTours = localStorageService.get(localStorageKey);
+            var aliases = _.pluck(completedTours, "alias");
+            return aliases;
+        }
+
         ///////////
 
         function setCompletedTours() {
@@ -464,7 +475,9 @@
             endTour: endTour,
             completeTour: completeTour,
             getAllTours: getAllTours,
-            getGroupedTours: getGroupedTours
+            getGroupedTours: getGroupedTours,
+            getTourByAlias: getTourByAlias,
+            getCompletedTours: getCompletedTours
         };
 
         return service;
diff --git a/src/Umbraco.Web.UI.Client/src/views/dashboard/dashboard.tabs.controller.js b/src/Umbraco.Web.UI.Client/src/views/dashboard/dashboard.tabs.controller.js
index 51c9e68f8d..43e73596ab 100644
--- a/src/Umbraco.Web.UI.Client/src/views/dashboard/dashboard.tabs.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/dashboard/dashboard.tabs.controller.js
@@ -28,8 +28,21 @@ function startUpDynamicContentController($timeout, dashboardResource, assetsServ
     vm.startTour = startTour;
 
     function onInit() {
+        
         // load tours
         vm.tours = tourService.getGroupedTours();
+        
+        // get list of completed tours
+        var completedTours = tourService.getCompletedTours();
+
+        // get intro tour
+        var introTour = tourService.getTourByAlias("umbIntroIntroduction");
+        
+        // start tour if it hasn't been completed
+        if(completedTours.indexOf(introTour.alias) === -1) {
+            tourService.startTour(introTour);
+        }
+        
     }
 
     function startTour(tour) {

From 37071ada7859c919933474c46bc93d2d88722a85 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 19 Oct 2017 21:17:26 +0200
Subject: [PATCH 06/15] restyle step loader, fade in steps, fix custom view
 step positionen

---
 .../application/umbtour.directive.js          | 48 +++++------
 .../src/common/services/tour.service.js       |  3 +-
 .../less/components/application/umb-tour.less | 83 ++++++++-----------
 .../components/application/umb-tour.html      | 55 ++++--------
 4 files changed, 75 insertions(+), 114 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 8c9884ffa8..ef4967db24 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
@@ -28,6 +28,7 @@
 
             function onInit() {
                 popover = el.find(".umb-tour__popover");
+                popover.hide();                
                 scope.model.currentStepIndex = 0;
                 backdropService.open({disableEventsOnClick: true});
                 startStep();
@@ -51,6 +52,7 @@
             }
 
             function nextStep() {
+                popover.hide();                
                 scope.model.currentStepIndex++;
                 // make sure we don't go too far
                 if(scope.model.currentStepIndex !== scope.model.steps.length) {
@@ -72,7 +74,6 @@
             }
 
             function startStep() {
-
                 scope.loadingStep = true;
                 backdropService.setHighlight(null);
 
@@ -143,9 +144,10 @@
             function setPopoverPosition(element) {
 
                 $timeout(function () {
-
+                    
                     var position = "center";
-                    var css = {top: "50%", left: "50%", marginLeft: "inherit", marginTop: "inherit" };
+                    var margin = 20;
+                    var css = {};
 
                     var popoverWidth = popover.outerWidth();
                     var popoverHeight = popover.outerHeight();
@@ -176,58 +178,55 @@
 
                         if (position === "top") {
                             if (offset.left < documentWidth / 2) {
-                                css.top = offset.top - popoverHeight;
+                                css.top = offset.top - popoverHeight - margin;
                                 css.left = offset.left;
                             } else {
-                                css.top = offset.top - popoverHeight;
+                                css.top = offset.top - popoverHeight - margin;
                                 css.left = offset.left - popoverWidth + width;
                             }
                         }
 
                         if (position === "right") {
                             if (offset.top < documentHeight / 2) {
-                                css.top = offset.top; 
-                                css.left = offset.left + width;
+                                css.top = offset.top;
+                                css.left = offset.left + width + margin;
                             } else {
                                 css.top = offset.top + height - popoverHeight;
-                                css.left = offset.left + width;
+                                css.left = offset.left + width + margin;
                             }
                         }
 
                         if (position === "bottom") {
                             if (offset.left < documentWidth / 2) {
-                                css.top = offset.top + height;
+                                css.top = offset.top + height + margin;
                                 css.left = offset.left;
                             } else {
-                                css.top = offset.top + height;
+                                css.top = offset.top + height + margin;
                                 css.left = offset.left - popoverWidth + width;
                             }
                         }
 
                         if (position === "left") {
                             if (offset.top < documentHeight / 2) {
-                                css.top = offset.top; 
-                                css.left = offset.left - popoverWidth;
+                                css.top = offset.top;
+                                css.left = offset.left - popoverWidth - margin;
                             } else {
                                 css.top = offset.top + height - popoverHeight;
-                                css.left = offset.left - popoverWidth;
+                                css.left = offset.left - popoverWidth - margin;
                             }
                         }
 
                     } else {
-
                         // if there is no dom element center the popover
-                        css.marginLeft = - (popoverWidth / 2);
-                        css.marginTop = - (popoverHeight / 2);
-
+                        css.top = "calc(50% - " + popoverHeight/2 + "px)";
+                        css.left = "calc(50% - " + popoverWidth/2 + "px)";                        
                     }
 
-                    popover.css(css);
-
-                    scope.position = position;
-
+                    popover.css(css).fadeIn("fast");
+                    
                 });
 
+
             }
 
             function waitForPendingRerequests() {
@@ -235,9 +234,10 @@
                 var timer = window.setInterval(function(){
                     // check for pending requests both in angular and on the document
                     if($http.pendingRequests.length === 0 && document.readyState === "complete") {
-                        deferred.resolve();
-                        clearInterval(timer);
-                        scope.$apply();
+                        $timeout(function(){
+                            deferred.resolve();
+                            clearInterval(timer);
+                        });
                     }
                 }, 50);
                 return deferred.promise;
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
index defb4cd0b4..d53377b2d7 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
@@ -284,7 +284,8 @@
                         element: "#tree [data-element='tree-item-Home']",
                         title: "Open the Home page",
                         content: "<p>Click the <b>Home</b> page to open it</p>",
-                        event: "click"
+                        event: "click",
+                        eventElement: "#tree [data-element='tree-item-Home'] a.umb-tree-item__label"
                     },
                     {
                         element: "[data-element='editor-content'] [data-element='tab-Generic properties']",
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 4ea2f1b353..5e405c0363 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
@@ -1,37 +1,42 @@
+.umb-tour__loader {
+    background: @white;
+    z-index: 10000;
+    position: fixed;
+    height: 5px;
+}
+
 .umb-tour__popover {
     position: fixed;
-    top: 50%;
-    left: 50%;
     background: @white;
     border-radius: @baseBorderRadius;
     z-index: 10000;
-}
-
-.umb-tour__popover--top {
-    margin-bottom: 20px;
-    transform: none;
-}
-
-.umb-tour__popover--right {
-    margin-left: 20px;
-    transform: none;    
-}
-
-.umb-tour__popover--bottom {
-    margin-top: 20px;
-    transform: none;    
-}
-
-.umb-tour__popover--left {
-    margin-right: 20px;
-    transform: none;    
-}
-
-.umb-tour-step {
-    max-width: 250px;
-    min-width: 150px;
-    padding: 15px;
+    width: 250px;
+    max-width: 100%;
     box-sizing: border-box;
+    padding: 15px;
+
+    h1, h2, h3, h4, h5 {
+        font-weight: bold;
+        color: @black;
+    }
+}
+
+.umb-tour__popover--l {
+    padding: 30px;
+    width: 500px;
+
+    .umb-tour-step__header {
+        margin-bottom: 30px;
+        margin-top: 10px;
+    }
+
+    .umb-tour-step__title {
+        font-size: 20px;
+    }
+
+    .umb-tour-step__content {
+        margin-bottom: 25px;
+    }
 }
 
 .umb-tour-step__counter {
@@ -55,25 +60,3 @@
     font-size: 15px;
     line-height: 1.6em;
 }
-
-/* Sizes */
-
-.umb-tour-step--l {
-    padding: 30px;
-    max-width: 600px;
-
-    .umb-tour-step__header {
-        margin-bottom: 30px;
-        margin-top: 10px;
-    }
-
-    .umb-tour-step__title {
-        font-size: 20px;
-        text-align: center;
-    }
-
-    .umb-tour-step__content {
-        margin-bottom: 25px;
-    }
-
-}
\ No newline at end of file
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 e1639c405f..d00c81ae70 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
@@ -1,20 +1,13 @@
 <div class="umb-tour">
 
-    <div class="umb-tour__popover shadow-depth-2" ng-class="{
-        'umb-tour__popover--center': position === 'center',
-        'umb-tour__popover--top': position === 'top',
-        'umb-tour__popover--right': position ===  'right',
-        'umb-tour__popover--bottom': position ===  'bottom',
-        'umb-tour__popover--left': position ===  'left'}">
+    <div class="umb-loader umb-tour__loader" ng-if="loadingStep"></div>
+
+    <div class="umb-tour__popover shadow-depth-2" ng-class="{'umb-tour__popover--l': model.currentStep.type === 'intro' || model.currentStepIndex === model.steps.length}">
         
-        <div ng-if="loadingStep">
-            <umb-load-indicator></umb-load-indicator>
-        </div>
-        
-        <div ng-if="!configuredView && !loadingStep && !elementNotFound">
+        <div ng-if="!configuredView && !elementNotFound">
 
             <!-- Regular steps -->
-            <umb-tour-step ng-if="model.currentStepIndex < model.steps.length && model.currentStep.type !== 'intro'">
+            <umb-tour-step ng-if="model.currentStepIndex < model.steps.length">
                     
                 <umb-tour-step-header
                     title="model.currentStep.title">
@@ -25,44 +18,28 @@
                 </umb-tour-step-content>
     
                 <umb-tour-step-footer class="flex justify-between items-center">
+                    
                     <umb-tour-step-counter
                         current-step="model.currentStepIndex + 1"
                         total-steps="model.steps.length">
                     </umb-tour-step-counter>
-                    <div>
+                    
+                    <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="success" type="button" action="model.nextStep()" label="Start tour"></umb-button>
+                    </div>
+
                 </umb-tour-step-footer>
         
             </umb-tour-step>
 
-            <!-- Intro step type -->
-            <umb-tour-step size="l" ng-if="model.currentStepIndex === 0 && model.currentStep.type === 'intro'">
-
-                <umb-tour-step-header
-                    title="model.currentStep.title">
-                </umb-tour-step-header>
-
-                <umb-tour-step-content
-                    content="model.currentStep.content">
-                </umb-tour-step-content>
-
-                <umb-tour-step-footer class="flex justify-between items-center">
-                    <umb-tour-step-counter
-                        current-step="model.currentStepIndex + 1"
-                        total-steps="model.steps.length">
-                    </umb-tour-step-counter>
-                    <div>
-                        <umb-button size="m" button-style="link" type="button" action="model.endTour()" label="End tour"></umb-button>                            
-                        <umb-button size="m" button-style="success" type="button" action="model.nextStep()" label="Start tour"></umb-button>
-                    </div>
-                </umb-tour-step-footer>
-
-            </umb-tour-step>
-
-            <!-- Outro step type -->
-            <umb-tour-step size="l" ng-if="model.currentStepIndex === model.steps.length" class="tc">
+            <!-- Outro step -->
+            <umb-tour-step ng-if="model.currentStepIndex === model.steps.length" class="tc">
 
                 <umb-tour-step-content>
                     <div class="flex items-center justify-center">

From 12093ae7ea0d3bd9e7e6fc82851c239cbe6dad48 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Mon, 23 Oct 2017 09:50:14 +0200
Subject: [PATCH 07/15] fix tour steps with ng-if

---
 .../application/umbtour.directive.js          | 56 +++++++++++++------
 .../src/common/services/tour.service.js       | 15 +----
 2 files changed, 39 insertions(+), 32 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 ef4967db24..7010614c4a 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
@@ -152,8 +152,8 @@
                     var popoverWidth = popover.outerWidth();
                     var popoverHeight = popover.outerHeight();
                     var popoverOffset = popover.offset();
-                    var documentWidth = $(document).width();
-                    var documentHeight = $(document).height();
+                    var documentWidth = angular.element(document).width();
+                    var documentHeight = angular.element(document).height();
 
                     if(element) {
 
@@ -256,33 +256,52 @@
             }
 
             function bindEvent() {
+
+                var bindToElement = scope.model.currentStep.element;
                 var eventName = scope.model.currentStep.event + ".step-" + scope.model.currentStepIndex;
+                var removeEventName = "remove.step-" + scope.model.currentStepIndex;
+                var handled = false;  
+
                 if(scope.model.currentStep.eventElement) {
-                    $(scope.model.currentStep.eventElement).on(eventName, handleEvent);
-                    console.log("bind", eventName);
-                } else {
-                    $(scope.model.currentStep.element).on(eventName, handleEvent);
-                    console.log("bind", eventName);
+                    bindToElement = scope.model.currentStep.eventElement;
                 }
+
+                $(bindToElement).on(eventName, function(){
+                    if(!handled) {
+                        unbindEvent();
+                        nextStep();
+                        handled = true;
+                    }
+                });
+
+                // Hack: we do this to handle cases where ng-if is used and removes the element we need to click.
+                // for some reason it seems the elements gets removed before the event is raised. This is a temp solution which assumes:
+                // "if you ask me to click on an element, and it suddenly gets removed from the dom, let's go on to the next step".
+                $(bindToElement).on(removeEventName, function () {
+                    if(!handled) {
+                        unbindEvent();
+                        nextStep();
+                        handled = true;
+                    }
+                });
+
             }
 
             function unbindEvent() {
-                var eventName = scope.model.currentStep.event + ".step-" + scope.model.currentStepIndex;                
+                var eventName = scope.model.currentStep.event + ".step-" + scope.model.currentStepIndex;
+                var removeEventName = "remove.step-" + scope.model.currentStepIndex;
+                
                 if(scope.model.currentStep.eventElement) {
-                    $(scope.model.currentStep.eventElement).off(eventName);
-                    console.log("unbind", eventName);
+                    angular.element(scope.model.currentStep.eventElement).off(eventName);
+                    angular.element(scope.model.currentStep.eventElement).off(removeEventName);
+                    //console.log("unbind", eventName);
                 } else {
-                    $(scope.model.currentStep.element).off(eventName);
-                    console.log("unbind", eventName);
+                    angular.element(scope.model.currentStep.element).off(eventName);
+                    angular.element(scope.model.currentStep.element).off(removeEventName);
+                    //console.log("unbind", eventName);
                 }
             }
 
-            function handleEvent() {
-                //alert("event happened");
-                unbindEvent();
-                nextStep();
-            }
-
             function resize() {
                 findHighlightElement();
             }
@@ -293,6 +312,7 @@
 
             scope.$on('$destroy', function () {
                 $(window).off('resize.umbTour');
+                unbindEvent();
             });
 
         }
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
index d53377b2d7..261d845f99 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
@@ -42,20 +42,6 @@
                         title: "User profile",
                         content: "This is where you can see details about your user, change your password and log out of Umbraco"
                     },
-                    {
-                        element: "[data-element~='overlay-user'] [data-element='button-testy']",
-                        title: "User profile",
-                        content: "This is where you can see details about your user, change your password and log out of Umbraco",
-                        event: "click"
-                    },
-                    /*
-                    {
-                        element: "[data-element~='overlay-user'] [data-element~='button-change-password']",
-                        title: "User profile",
-                        content: "This is where you can see details about your user, change your password and log out of Umbraco",
-                        event: "click"
-                    },
-                    */
                     {
                         element: "[data-element~='overlay-user'] [data-element='overlay-close']",
                         title: "User profile",
@@ -255,6 +241,7 @@
                         element: "#tree [data-element='tree-item-templates'] [data-element='tree-item-Home']",
                         title: "Open Home template",
                         content: "<p>Click the <b>Home</b> template to open and edit it</p>",
+                        eventElement: "#tree [data-element='tree-item-templates'] [data-element='tree-item-Home'] a.umb-tree-item__label",
                         event: "click"
                     },
                     {

From f265fa683c0e4c85750617a3ceb23223e47dc266 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Mon, 23 Oct 2017 19:58:44 +0200
Subject: [PATCH 08/15] don't use index in button group + update text in some
 tours

---
 .../components/buttons/umbbutton.directive.js |   3 +-
 .../services/contenteditinghelper.service.js  |  12 +-
 .../src/common/services/tour.service.js       | 112 +++++++++---------
 .../src/views/common/overlays/user/user.html  |   6 +-
 .../components/buttons/umb-button-group.html  |   6 +-
 .../views/components/buttons/umb-button.html  |   2 +-
 .../src/views/components/content/edit.html    |   4 +-
 .../components/overlays/umb-overlay.html      |   6 +-
 .../views/components/umb-groups-builder.html  |   4 +-
 .../components/upload/umb-file-dropzone.html  |   2 +-
 .../views/documenttypes/edit.controller.js    |   2 +
 .../src/views/media/edit.html                 |   4 +-
 .../src/views/templates/edit.html             |   6 +-
 13 files changed, 88 insertions(+), 81 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js
index b503648317..4b0bdb6c71 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js
@@ -149,7 +149,8 @@ Use this directive to render an umbraco button. The directive can be used to gen
             labelKey: "@?",
             icon: "@?",
             disabled: "=",
-            size: "@?"
+            size: "@?",
+            alias: "@?"
          }
       };
 
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js b/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js
index 694cc00148..2c3dafd8c1 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js
@@ -134,7 +134,8 @@ function contentEditingHelper(fileManager, $q, $location, $routeParams, notifica
                             labelKey: "buttons_saveAndPublish",
                             handler: args.methods.saveAndPublish,
                             hotKey: "ctrl+p",
-                            hotKeyWhenHidden: true
+                            hotKeyWhenHidden: true,
+                            alias: "saveAndPublish"
                         };
                     case "H":
                         //send to publish
@@ -143,7 +144,8 @@ function contentEditingHelper(fileManager, $q, $location, $routeParams, notifica
                             labelKey: "buttons_saveToPublish",
                             handler: args.methods.sendToPublish,
                             hotKey: "ctrl+p",
-                            hotKeyWhenHidden: true
+                            hotKeyWhenHidden: true,
+                            alias: "sendToPublish"                            
                         };
                     case "A":
                         //save
@@ -152,7 +154,8 @@ function contentEditingHelper(fileManager, $q, $location, $routeParams, notifica
                             labelKey: "buttons_save",
                             handler: args.methods.save,
                             hotKey: "ctrl+s",
-                            hotKeyWhenHidden: true
+                            hotKeyWhenHidden: true,
+                            alias: "save"                            
                         };
                     case "Z":
                         //unpublish
@@ -161,7 +164,8 @@ function contentEditingHelper(fileManager, $q, $location, $routeParams, notifica
                             labelKey: "content_unPublish",
                             handler: args.methods.unPublish,
                             hotKey: "ctrl+u",
-                            hotKeyWhenHidden: true
+                            hotKeyWhenHidden: true,
+                            alias: "unpublish"                            
                         };
                     default:
                         return null;
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
index 261d845f99..94df0168d3 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
@@ -13,37 +13,37 @@
                 "steps": [
                     {
                         title: "Welcome to Umbraco - The Friendly CMS",
-                        content: "<p>Thank you for choosing Umbraco - we think this could be the beginning of something beautiful. While it may feel overwhelming at first, we've done a lot to make the learning curve as smooth and fast as possible.</p>",
+                        content: "<p>Thank you for choosing Umbraco - we think this could be the beginning of something beautiful. While it may feel overwhelming at first, we've done a lot to make the learning curve as smooth and fast as possible.</p><p>In this quick tour we will introduce you to the main areas of Umbraco and show you how to best get started.</p>",
                         type: "intro"
                     },
                     {
                         element: "#applications",
                         title: "Sections",
-                        content: "These are the <b>Sections</b> and allows you to navigate the different areas of Umbraco"
+                        content: "These are the <b>Sections</b> and allows you to navigate the different areas of Umbraco."
                     },
                     {
                         element: "#tree",
                         title: "The Tree",
-                        content: "This is the <b>Tree</b> and contains all the pages of your website"
+                        content: "This is the <b>Tree</b> and will contain all the content of your website."
                     },
                     {
                         element: "[data-element='global-search-field']",
                         title: "Search",
-                        content: "The search allows you to quickly find content across sections within Umbraco"
+                        content: "The search allows you to quickly find content across sections within Umbraco."
                     },
                     {
                         element: "#applications [data-element='section-user']",
                         title: "User profile",
-                        content: "Click here to open the user profile dialog",
+                        content: "Click here to open the user profile dialog.",
                         event: "click"
                     },
                     {
                         element: "[data-element~='overlay-user']",
                         title: "User profile",
-                        content: "This is where you can see details about your user, change your password and log out of Umbraco"
+                        content: "<p>This is where you can see details about your user, change your password and log out of Umbraco.</p><p>In the <b>User section</b> you will be able to do more advaned user management.</p>"
                     },
                     {
-                        element: "[data-element~='overlay-user'] [data-element='overlay-close']",
+                        element: "[data-element~='overlay-user'] [data-element='button-overlayClose']",
                         title: "User profile",
                         content: "Let's close the user profile again",
                         event: "click"
@@ -51,13 +51,13 @@
                     {
                         element: "#applications [data-element='section-help']",
                         title: "Help",
-                        content: "If you ever find yourself in trouble click here to open the help drawer",
+                        content: "If you ever find yourself in trouble click here to open the help drawer.",
                         event: "click"
                     },
                     {
                         element: "[data-element='drawer']",
                         title: "Help",
-                        content: "<p>In the help drawer you can find articles and videos related to the section you are using.</p><p>You will also find more tours like this which will help you get started with Umbraco.</p>"
+                        content: "<p>In the help drawer you will find articles and videos related to the section you are using.</p><p>This is also where you will find the next tour on how to get started with Umbraco.</p>"
                     }
                 ]
             },
@@ -68,38 +68,38 @@
                 "steps": [
                     {
                         title: "Create your first Document Type",
-                        content: "<p>Step 1 of any site is to create a <strong>Document Type</strong>. A Document Type is a data container where you can add data fields. The editor can then input data and Umbraco can use it to output it in the relevant parts of a <strong>template</strong>.</p><p>In this tour you will learn how to set up a basic Document Type with a data field to enter some text.</p>",
+                        content: "<p>Step 1 of any site is to create a <strong>Document Type</strong>. A Document Type is a data container where you can add data fields. The editor can then input data and Umbraco can use it to output it in the relevant parts of a <strong>template</strong>.</p><p>In this tour you will learn how to set up a basic Document Type with a data field to enter a short text.</p>",
                         type: "intro"
                     },
                     {
                         element: "#applications [data-element='section-settings']",
                         title: "Navigate to the settings sections",
-                        content: "In the settings section we will find the document types",
+                        content: "In the <b>Settings section</b> we will find the document types.",
                         event: "click"
                     },
                     {
                         element: "#tree [data-element='tree-item-documentTypes']",
                         title: "Create document type",
-                        content: "<p>Hover the document types tree and click the <b>three small dots</b> to open the context menu</p>",
+                        content: "<p>Hover the document types tree and click the <b>three small dots</b> to open the <b>context menu</b>.</p>",
                         event: "click",
                         eventElement: "#tree [data-element='tree-item-documentTypes'] [data-element='tree-item-options']"
                     },
                     {
                         element: "#dialog [data-element='action-documentType']",
                         title: "Create document type",
-                        content: "Click <b>Document Type</b> to create a new document type with a template",
+                        content: "<p>Click <b>Document Type</b> to create a new document type with a template.</p><p>We will use the template in a later tour when we need to render our content.</p>",
                         event: "click"
                     },
                     {
                         element: "[data-element='editor-name-field']",
                         title: "Enter a name",
-                        content: "<p>Our document type needs a name. Enter <b>Home</b> in the field and click <i>Next</i></p>",
+                        content: "<p>Our document type needs a name. Enter <code>Home</code> in the field and click <b>Next</b>.",
                         view: "doctypename"
                     },
                     {
                         element: "[data-element='editor-description']",
                         title: "Enter a description",
-                        content: "<p>A description helps the content editor pick the right document type when creating content:<br/><pre>The home to our website</pre></p>"
+                        content: "<p>A description helps to pick the right document type when creating content.</p><p>Write a description to our Home page. It could be: <br/><pre>The home to our website</pre></p>"
                     },
                     {
                         element: "[data-element='group-add']",
@@ -110,29 +110,29 @@
                     {
                         element: "[data-element='group-name']",
                         title: "Enter a name",
-                        content: "Enter <b>Content</b> in the tab name"
+                        content: "Enter <code>Content</code> in the tab name."
                     },
                     {
                         element: "[data-element='property-add']",
                         title: "Add a property",
-                        content: "<p>Properties are the different types of data on our content page.</p><p>On our Home page we wan't to add a welcome text.</p><p>Click <b>Add property</b> to open the property dialog</p>",
+                        content: "<p>Properties are the different types of data on our content page.</p><p>On our Home page we wan't to add a welcome text.</p><p>Click <b>Add property</b> to open the property dialog.</p>",
                         event: "click"
                     },
                     {
                         element: "[data-element~='overlay-property-settings'] [data-element='property-name']",
                         title: "Enter a name",
-                        content: "Enter <b>Welcome Text</b> as name for the property",
+                        content: "Enter <code>Welcome Text</code> as name for the property.",
                         view: "propertyname"
                     },
                     {
                         element: "[data-element~='overlay-property-settings'] [data-element='property-description']",
                         title: "Enter a description",
-                        content: "Enter a description for the property editor:<br/> <pre>Write a nice introduction text so the visitors feel welcome</pre>"
+                        content: "<p>A description will help to fill in the right content.</p><p>Enter a description for the property editor. It could be:<br/> <pre>Write a nice introduction text so the visitors feel welcome</pre></p>"
                     },
                     {
                         element: "[data-element~='overlay-property-settings'] [data-element='editor-add']",
                         title: "Add editor",
-                        content: "The editor define what data type the property is. Click <b>Add editor</b> to open the editor picker dialog",
+                        content: "The editor defines what data type the property is. Click <b>Add editor</b> to open the editor picker dialog.",
                         event: "click"
                     },
                     {
@@ -143,30 +143,30 @@
                     {
                         element: "[data-element~='overlay-editor-picker'] [data-element='editor-Textarea']",
                         title: "Select editor",
-                        content: "Select the <b>Textarea</b> editor which allows the content editor to enter long texts",
+                        content: "Select the <b>Textarea</b> editor which allows us to enter long texts.",
                         event: "click"
                     },
                     {
                         element: "[data-element~='overlay-editor-settings']",
                         title: "Editor settings",
-                        content: "Each editor can have individual settings. We don't need to change any of these now."
+                        content: "Each property editor can have individual settings. We don't want to change any of these now."
                     },
                     {
-                        element: "[data-element~='overlay-editor-settings'] [data-element='overlay-submit']",
+                        element: "[data-element~='overlay-editor-settings'] [data-element='button-overlaySubmit']",
                         title: "Save editor",
-                        content: "Click <b>Submit</b> to save the editor and any changes you may have made to the editor settings.",
+                        content: "Click <b>Submit</b> to save the editor.",
                         event: "click"
                     },
                     {
-                        element: "[data-element~='overlay-property-settings'] [data-element='overlay-submit']",
-                        title: "Save property",
-                        content: "Click <b>Submit</b> to add the property",
+                        element: "[data-element~='overlay-property-settings'] [data-element='button-overlaySubmit']",
+                        title: "Add property to document type",
+                        content: "Click <b>Submit</b> to add the property to the document type.",
                         event: "click"
                     },
                     {
-                        element: "[data-element='button-group-primary']",
+                        element: "[data-element='button-save']",
                         title: "Save the document type",
-                        content: "Click <b>Save</b> to create your document type",
+                        content: "All we need now is to save the document type. Click <b>Save</b> to create and save your new document type.",
                         event: "click"
                     }
                 ]
@@ -178,37 +178,37 @@
                 "steps": [
                     {
                         title: "Creating your first content node",
-                        content: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in euismod velit. Aliquam sit amet turpis in velit convallis bibendum. Suspendisse venenatis porttitor ipsum eu eleifend.</p>",
+                        content: "<p>The <b>Content section</b> contains the content of the website. Content is displayed as <b>nodes</b> in the content tree.</p><p>In this tour we will learn how to create our <b>Home</b> page for our website.</p>",
                         type: "intro"
                     },
                     {
                         element: "[data-element='tree-root']",
                         title: "Open context menu",
-                        content: "<p>Open the context menu by hovering the root of the content section.</p><p>Now click the <b>three small dots</b> to the right</p>",
+                        content: "<p>Open the context menu by hovering the root of the content section.</p><p>Now click the <b>three small dots</b> to the right.</p>",
                         event: "click",
                         eventElement: "[data-element='tree-root'] [data-element='tree-item-options']"
                     },
                     {
                         element: "[data-element='action-create-home']",
                         title: "Create Home page",
-                        content: "<p>Click on <b>Home</b> to create a new page of type <i>Home</i></p>",
+                        content: "<p>Click on <b>Home</b> to create a new page of type <b>Home</b>.</p>",
                         event: "click"
                     },
                     {
                         element: "[data-element='editor-content'] [data-element='editor-name-field']",
                         title: "Give your new page a name",
-                        content: "<p>Our new page needs a name. Enter <b>Home</b> in the field and click <i>Next</i></p>",
+                        content: "<p>Our new page needs a name. Enter <code>Home</code> in the field and click <b>Next</b>.</p>",
                         view: "nodename"
                     },
                     {
                         element: "[data-element='editor-content'] [data-element='property-welcomeText']",
                         title: "Add a welcome text",
-                        content: "<p>Add content to the <b>Welcome Text</b> field</p><p>If you don't have any ideas here is a start:<br/> <pre>I am learning Umbraco. High Five I Rock #H5IR</pre></p>"
+                        content: "<p>Add content to the <b>Welcome Text</b> field</p><p>If you don't have any ideas here is a start:<br/> <pre>I am learning Umbraco. High Five I Rock #H5IR</pre>.</p>"
                     },
                     {
-                        element: "[data-element='editor-content'] [data-element='button-group-primary']",
+                        element: "[data-element='editor-content'] [data-element='button-saveAndPublish']",
                         title: "Save and publish",
-                        content: "<p>Now click the <b>Save and publish</b> button to save and publish your changes</p>",
+                        content: "<p>Now click the <b>Save and publish</b> button to save and publish your changes.</p>",
                         event: "click"
                     }
                 ]
@@ -220,19 +220,19 @@
                 "steps": [
                     {
                         title: "Render your content in a template",
-                        content: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in euismod velit. Aliquam sit amet turpis in velit convallis bibendum. Suspendisse venenatis porttitor ipsum eu eleifend.</p>",
+                        content: "<p>Templating in Umbraco builds on the concept of <b>Razor Views</b> from asp.net MVC. - This tour is a sneak peak on how to write templates in Umbraco.</p><p>In this tour we will learn how to render content from our <b>Home</b> document type so we can see the content added to our Home page.</p>",
                         type: "intro"
                     },
                     {
                         element: "#applications [data-element='section-settings']",
-                        title: "Navigate to the settings section",
-                        content: "In the <b>Settings</b> section you will find the templates for all your document types",
+                        title: "Navigate to the Settings section",
+                        content: "<p>In the <b>Settings</b> section you will find all the templates</p><p>It is of course also possible to edit all your code files in your favorite code editor.</p>",
                         event: "click"
                     },
                     {
                         element: "#tree [data-element='tree-item-templates']",
                         title: "Expand the Templates node",
-                        content: "<p>To see all our templates click the <b>small triangle</b> to the left of the templates node</p>",
+                        content: "<p>To see all our templates click the <b>small triangle</b> to the left of the templates node.</p>",
                         event: "click",
                         eventElement: "#tree [data-element='tree-item-templates'] [data-element='tree-item-expand']",
                         view: "templatetree"
@@ -240,19 +240,19 @@
                     {
                         element: "#tree [data-element='tree-item-templates'] [data-element='tree-item-Home']",
                         title: "Open Home template",
-                        content: "<p>Click the <b>Home</b> template to open and edit it</p>",
+                        content: "<p>Click the <b>Home</b> template to open and edit it.</p>",
                         eventElement: "#tree [data-element='tree-item-templates'] [data-element='tree-item-Home'] a.umb-tree-item__label",
                         event: "click"
                     },
                     {
                         element: "[data-element='editor-templates'] [data-element='code-editor']",
                         title: "Edit template",
-                        content: '<p>Templates can be edited here or in your favorite code editor.</p><p>To render the value we entered on the <b>Home</b> page add the following to the template:<br/> <pre>@Model.Content.GetPropertyValue("welcomeText")</pre></p>'
+                        content: '<p>The template can be edited here or in your favorite code editor.</p><p>To render the field from the document type add the following to the template:<br/> <pre>@Model.Content.GetPropertyValue("welcomeText")</pre></p>'
                     },
                     {
                         element: "[data-element='editor-templates'] [data-element='button-save']",
                         title: "Save the template",
-                        content: "Click the save button and your template will be saved",
+                        content: "Click the <b>Save button</b> and your template will be saved.",
                         event: "click"
                     }
                 ]
@@ -264,7 +264,7 @@
                 "steps": [
                     {
                         title: "View your Umbraco site",
-                        content: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in euismod velit. Aliquam sit amet turpis in velit convallis bibendum. Suspendisse venenatis porttitor ipsum eu eleifend.</p>",
+                        content: "<p>Our three main components to a page is done: <b>Document type, Template, and Content</b> - it is now time to see the result.</p><p>In this tour we will learn how to see our published website.</p>",
                         type: "intro"
                     },
                     {
@@ -277,13 +277,13 @@
                     {
                         element: "[data-element='editor-content'] [data-element='tab-Generic properties']",
                         title: "Properties",
-                        content: "<p>Under the properties tab you will find default information about the content item</p>",
+                        content: "<p>Under the properties tab you will find the default information about a content item.</p>",
                         event: "click"
                     },
                     {
                         element: "[data-element='editor-content'] [data-element='property-_umb_urls']",
                         title: "Open page",
-                        content: "<p>Click the <b>Link</b> to view your page.</p><p>Tip: Click the preview button in the bottom right corner to preview changes without publishing them</p>",
+                        content: "<p>Click the <b>Link</b> to view your page.</p><p>Tip: Click the preview button in the bottom right corner to preview changes without publishing them.</p>",
                         event: "click",
                         eventElement: "[data-element='editor-content'] [data-element='property-_umb_urls'] a[target='_blank']"
                     }
@@ -296,32 +296,32 @@
                 "steps": [
                     {
                         title: "How to use the media library",
-                        content: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in euismod velit. Aliquam sit amet turpis in velit convallis bibendum. Suspendisse venenatis porttitor ipsum eu eleifend.</p>",
+                        content: "<p>A website would be boring without media content. In Umbraco you can manage all your images, documents, videos etc. in the <b>Media section</b>. Here you can upload and organise your media items and see details about each item.</p><p>In this tour we will learn how to upload and orginise your Media library in Umbraco. It will also show you how to view details about a specific media item.</p>",
                         type: "intro"
                     },
                     {
                         element: "#applications [data-element='section-media']",
                         title: "Navigate to the media section",
-                        content: "The media section is where you will manage all your media items",
+                        content: "The <b>media</b> section is where you will manage all your media items.",
                         event: "click"
                     },
                     {
                         element: "#tree [data-element='tree-root']",
                         title: "Create a new folder",
-                        content: "<p>Hover the media root and click the <b>three small dots</b> on the right side of the item</p>",
+                        content: "<p>Let's first create a folder for our images. Hover the media root and click the <b>three small dots</b> on the right side of the item.</p>",
                         event: "click",
                         eventElement: "#tree [data-element='tree-root'] [data-element='tree-item-options']"
                     },
                     {
                         element: "#dialog [data-element='action-Folder']",
                         title: "Create a new folder",
-                        content: "<p>Select the <b>Folder</b> options to create a new folder</p>",
+                        content: "<p>Select the <b>Folder</b> options to select the type folder.</p>",
                         event: "click"
                     },
                     {
                         element: "[data-element='editor-media'] [data-element='editor-name-field']",
                         title: "Enter a name",
-                        content: "<p>Enter <b>'My folder'</b> in the field</p>"
+                        content: "<p>Enter <code>My folder</code> in the field.</p>"
                     },
                     {
                         element: "[data-element='editor-media'] [data-element='button-save']",
@@ -332,7 +332,7 @@
                     {
                         element: "[data-element='editor-media'] [data-element='dropzone']",
                         title: "Upload images",
-                        content: "<p>In the upload area you can upload your media items.</p><p>Click the <b>Upload button</b> and select some images on your computer and upload them.</p>",
+                        content: "<p>In the upload area you can upload your media items.</p><p>Click the <b>Upload button</b> and select a couple of images on your computer and upload them.</p>",
                         view: "uploadimages"
                     },
                     {
@@ -345,17 +345,17 @@
                     {
                         element: "[data-element='editor-media'] [data-element='property-umbracoFile']",
                         title: "The uploaded image",
-                        content: "<p>Here you can see the image you have uploaded.</p><p>Use the dot in the center of the image to set a focal point on the image.</p>"
+                        content: "<p>Here you can see the image you have uploaded.</p><p>You can use the dot in the center of the image to set a focal point on the image.</p>"
                     },
                     {
                         element: "[data-element='editor-media'] [data-element='property-umbracoBytes']",
                         title: "Image size",
-                        content: "<p>You will also find other details about the image, like the size</p><p>You can add extra properties to an image by creating or editing the <b>Media types</b></p>"
+                        content: "<p>You will also find other details about the image, like the size.</p><p>You can add extra properties to an image by creating or editing the <b>Media types</b></p>"
                     },
                     {
                         element: "[data-element='editor-media'] [data-element='tab-Generic properties']",
                         title: "Properties",
-                        content: "Like the content section you can also find default properties about the media item. You will find these under the properties tab",
+                        content: "Like the content section you can also find default properties about the media item. You will find these under the properties tab.",
                         event: "click"
                     },
                     {
@@ -366,7 +366,7 @@
                     {
                         element: "[data-element='editor-media'] [data-element='property-_umb_updatedate']",
                         title: "Last edited",
-                        content: "...and information about when the item has been created and edited."
+                        content: "...and information about when the media item has been created and edited."
                     }
                 ]
             }
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/user/user.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/user/user.html
index be80e3e815..8021d66a43 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/user/user.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/user/user.html
@@ -11,7 +11,7 @@
        </p>
 
         <umb-button
-            data-element="button-edit-user"
+            alias="editUser"
             type="link"
             href="#/users/users/user/{{user.id}}"
             action="model.close()"
@@ -22,7 +22,7 @@
        </umb-button>
 
         <umb-button
-            data-element="button-change-password"
+            alias="changePassword"
             type="button"
             action="togglePasswordFields()"
             label="Change password"
@@ -31,7 +31,7 @@
        </umb-button>
 
         <umb-button
-            data-element="button-log-out"
+            alias="logOut"
             type="button"
             action="logout()"
             shortcut="ctrl+shift+l"
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button-group.html b/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button-group.html
index 0fcfe9a682..8117952b59 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button-group.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button-group.html
@@ -2,7 +2,7 @@
     
    <umb-button
       ng-if="defaultButton"
-      data-element="button-group-primary"
+      alias="{{defaultButton.alias ? defaultButton.alias : 'groupPrimary' }}"
       type="button"
       action="defaultButton.handler()"
       button-style="success"
@@ -18,8 +18,8 @@
    </a>
 
    <ul aria-labelledby="dLabel" class="dropdown-menu bottom-up umb-button-group__sub-buttons" ng-if="subButtons.length > 0" role="menu" ng-class="{'-align-right': float === 'right'}">
-      <li data-element="button-group-secondary-{{$index}}" ng-repeat="subButton in subButtons">
-         <a href="#" ng-click="subButton.handler()" hotkey="{{subButton.hotKey}}" hotkey-when-hidden="{{subButton.hotKeyWhenHidden}}" prevent-default>
+      <li ng-repeat="subButton in subButtons">
+         <a data-element="{{subButton.alias ? 'button-' + subButton.alias : 'button-group-secondary-' + $index }}" href="#" ng-click="subButton.handler()" hotkey="{{subButton.hotKey}}" hotkey-when-hidden="{{subButton.hotKeyWhenHidden}}" prevent-default>
             <localize key="{{subButton.labelKey}}">{{subButton.labelKey}}</localize>
          </a>
       </li>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html b/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html
index 026ea4b0e9..aadba077e8 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html
@@ -1,4 +1,4 @@
-<div class="umb-button" ng-class="{'umb-button--block': blockElement}">
+<div class="umb-button" ng-class="{'umb-button--block': blockElement}" data-element="{{ alias ? 'button-' + alias : '' }}">
 
    <div class="icon-check umb-button__success" ng-class="{'-hidden': state !== 'success', '-white': style}"></div>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html b/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html
index 42c0532c24..50633e0013 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html
@@ -50,7 +50,7 @@
             <umb-editor-footer-content-right>
 
                <umb-button
-                  data-element="button-return-to-list-view"
+                  alias="returnToListView"
                   ng-if="page.listViewPath"
                   type="link"
                   href="#{{page.listViewPath}}"
@@ -59,7 +59,7 @@
                </umb-button>
 
                <umb-button
-                  data-element="button-preview"
+                  alias="preview"
                   ng-if="!page.isNew && content.allowPreview"
                   type="button"
                   button-style="info"
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay.html b/src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay.html
index cabc7a1146..a2bb94b2b9 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay.html
@@ -35,7 +35,7 @@
 
                 <div class="umb-overlay-drawer__align-right">
                     <umb-button
-                        data-element="overlay-cancel-submit"
+                        alias="overlayCancelSubmit"
                         action="cancelConfirmSubmit()"
                         button-style="link"
                         label="Cancel"
@@ -55,7 +55,7 @@
 
             <div class="umb-overlay-drawer__align-right" ng-if="!model.confirmSubmit.show">
                 <umb-button
-                    data-element="overlay-close"
+                    alias="overlayClose"
                     action="closeOverLay()"
                     button-style="link"
                     label-key="{{model.closeButtonLabelKey}}"
@@ -64,7 +64,7 @@
                 </umb-button>
 
                 <umb-button
-                    data-element="overlay-submit"
+                    alias="overlaySubmit"
                     button-style="success"
                     label-key="{{model.submitButtonLabelKey}}"
                     label="{{model.submitButtonLabel}}"
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
index 2e3dddd198..edfaa838b0 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
@@ -5,7 +5,7 @@
         <umb-editor-sub-header-content-right>
 
             <umb-button
-                data-element="button-compositions"
+                alias="compositions"
                 ng-if="compositions !== false"
                 type="button"
                 button-style="link"
@@ -15,7 +15,7 @@
             </umb-button>
 
             <umb-button
-                data-element="button-reorder"                
+                alias="reorder"
                 ng-if="sorting !== false"
                 type="button"
                 button-style="link"
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/upload/umb-file-dropzone.html b/src/Umbraco.Web.UI.Client/src/views/components/upload/umb-file-dropzone.html
index 0996f25a2d..211060c03f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/upload/umb-file-dropzone.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/upload/umb-file-dropzone.html
@@ -24,7 +24,7 @@
 
             <!-- Select files -->
             <div 
-                 data-element="button-upload-media"
+                 data-element="button-uploadMedia"
                  class="file-select"
                  ngf-select
                  ng-model="filesHolder"
diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttypes/edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/documenttypes/edit.controller.js
index 493e0788d3..52376eec18 100644
--- a/src/Umbraco.Web.UI.Client/src/views/documenttypes/edit.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/documenttypes/edit.controller.js
@@ -121,6 +121,7 @@
             if (result) {
                 //Models builder mode:
                 vm.page.defaultButton = {
+                    alias: "save",
                     hotKey: "ctrl+s",
                     hotKeyWhenHidden: true,
                     labelKey: "buttons_save",
@@ -129,6 +130,7 @@
                     handler: function () { vm.save(); }
                 };
                 vm.page.subButtons = [{
+                    alias: "saveAndGenerateModels",
                     hotKey: "ctrl+g",
                     hotKeyWhenHidden: true,
                     labelKey: "buttons_saveAndGenerateModels",
diff --git a/src/Umbraco.Web.UI.Client/src/views/media/edit.html b/src/Umbraco.Web.UI.Client/src/views/media/edit.html
index de0a908c13..21983a3c95 100644
--- a/src/Umbraco.Web.UI.Client/src/views/media/edit.html
+++ b/src/Umbraco.Web.UI.Client/src/views/media/edit.html
@@ -47,7 +47,7 @@
             <umb-editor-footer-content-right>
 
                <umb-button
-                  data-element="button-return-to-list"
+                  alias="returnToList"
                   ng-if="page.listViewPath"
                   type="link"
                   href="#{{page.listViewPath}}"
@@ -56,7 +56,7 @@
                </umb-button>
 
                <umb-button
-                  data-element="button-save"
+                  alias="save"
                   type="submit"
                   label="Save"
                   label-key="buttons_save"
diff --git a/src/Umbraco.Web.UI.Client/src/views/templates/edit.html b/src/Umbraco.Web.UI.Client/src/views/templates/edit.html
index 12207cc706..279cdc538d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/templates/edit.html
+++ b/src/Umbraco.Web.UI.Client/src/views/templates/edit.html
@@ -30,7 +30,7 @@
                         <div ng-class="{'btn-group umb-era-button-group': vm.template.masterTemplateAlias}" style="margin-right: 10px;">
                             
                             <button
-                                data-element="button-master-template"
+                                data-element="button-masterTemplate"
                                 type="button"
                                 class="umb-era-button umb-button--s"
                                 ng-click="vm.openMasterTemplateOverlay()">
@@ -75,7 +75,7 @@
                         </div>
 
                         <button
-                            data-element="button-query-builder"
+                            data-element="button-queryBuilder"
                             type="button"
                             style="margin-right: 10px;"
                             class="umb-era-button umb-button--s"
@@ -118,7 +118,7 @@
             <umb-editor-footer-content-right>
 
                <umb-button
-                  data-element="button-save"
+                  alias="save"
                   type="submit"
                   button-style="success"
                   state="vm.page.saveButtonState"

From df2c1040027c1a9a7cbb16ec5be4c6bd6fe598e7 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Mon, 23 Oct 2017 20:15:48 +0200
Subject: [PATCH 09/15] remove console.log

---
 .../components/application/umbtour.directive.js        | 10 ----------
 .../src/controllers/main.controller.js                 |  3 ---
 2 files changed, 13 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 7010614c4a..e0f5da9a9c 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
@@ -119,16 +119,12 @@
 
                     var scrollParent = element.scrollParent();
 
-                    console.log("scrollParent", scrollParent);
-
                     // Detect if scroll is needed
                     if (element[0].offsetTop > scrollParent[0].clientHeight) {
-                        console.log("SCROOOOOOOL");
                         scrollParent.animate({
                             scrollTop: element[0].offsetTop
                         }, function () {
                             // Animation complete.
-                            console.log("ANIMATION COMPLETE");
                             setPopoverPosition(element);
                             backdropService.setHighlight(scope.model.currentStep.element);
                         });
@@ -169,10 +165,6 @@
                             "left": offset.left
                         };
 
-                        console.log("SPACE", space);
-                        console.log("document width", documentWidth);
-                        console.log("document height", documentHeight);
-
                         // get the posistion with most available space
                         position = findMax(space);
 
@@ -294,11 +286,9 @@
                 if(scope.model.currentStep.eventElement) {
                     angular.element(scope.model.currentStep.eventElement).off(eventName);
                     angular.element(scope.model.currentStep.eventElement).off(removeEventName);
-                    //console.log("unbind", eventName);
                 } else {
                     angular.element(scope.model.currentStep.element).off(eventName);
                     angular.element(scope.model.currentStep.element).off(removeEventName);
-                    //console.log("unbind", eventName);
                 }
             }
 
diff --git a/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js b/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js
index 6814c9b52d..b4536f0e35 100644
--- a/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js
@@ -154,18 +154,15 @@ function MainController($scope, $rootScope, $location, $routeParams, $timeout, $
     }));
 
     evts.push(eventsService.on("appState.tour.start", function (name, args) {
-        console.log("start tour event", args);
         $scope.tour = args;
         $scope.tour.show = true;
     }));
 
     evts.push(eventsService.on("appState.tour.end", function () {
-        console.log("end tour event");
         $scope.tour = null;
     }));
 
     evts.push(eventsService.on("appState.tour.complete", function () {
-        console.log("completed tour event");
         $scope.tour = null;
     }));
 

From e33456d16860d22aa49345d4029dd5605fa77a84 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Tue, 24 Oct 2017 11:46:51 +0200
Subject: [PATCH 10/15] add alias to document type save button

---
 src/Umbraco.Web.UI.Client/src/views/documenttypes/edit.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttypes/edit.html b/src/Umbraco.Web.UI.Client/src/views/documenttypes/edit.html
index 85a646a3a4..5ebebae426 100644
--- a/src/Umbraco.Web.UI.Client/src/views/documenttypes/edit.html
+++ b/src/Umbraco.Web.UI.Client/src/views/documenttypes/edit.html
@@ -40,6 +40,7 @@
                 <umb-editor-footer-content-right>
 
                     <umb-button
+                        alias="save"
                         ng-if="!vm.page.modelsBuilder"
                         type="button" 
                         action="vm.save()"

From ee79d7ecdca1138b2f84ec39241d57d4a57131f7 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Tue, 24 Oct 2017 13:35:26 +0200
Subject: [PATCH 11/15] add custom backdrop opacity to tour steps

---
 .../application/umbbackdrop.directive.js      | 11 +++++----
 .../application/umbtour.directive.js          |  4 +++-
 .../src/common/services/backdrop.service.js   |  7 +++++-
 .../src/common/services/tour.service.js       | 23 ++++++++++++-------
 .../components/application/umb-backdrop.less  |  2 +-
 .../components/application/umb-backdrop.html  | 14 +++++------
 .../umbraco/Views/Default.cshtml              |  3 ++-
 7 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbbackdrop.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbbackdrop.directive.js
index 9fbf86b395..35d2d1b87e 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbbackdrop.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbbackdrop.directive.js
@@ -16,7 +16,7 @@
 
             function onInit() {
 
-                if (scope.element) {
+                if (scope.highlightElement) {
                     setHighlight();
                 }
 
@@ -27,7 +27,7 @@
                 $timeout(function () {
 
                     // The element to highlight
-                    var highlightElement = angular.element(scope.element);
+                    var highlightElement = angular.element(scope.highlightElement);
 
                     if(highlightElement && highlightElement.length > 0) {
 
@@ -63,7 +63,7 @@
                 setHighlight();
             }
 
-            events.push(scope.$watch("element", function (newValue, oldValue) {
+            events.push(scope.$watch("highlightElement", function (newValue, oldValue) {
                 if(!newValue) {return;}
                 if(newValue === oldValue) {return;}
                 setHighlight();
@@ -90,8 +90,9 @@
             templateUrl: "views/components/application/umb-backdrop.html",
             link: link,
             scope: {
-                element: "=",
-                disableEventsOnClick: "="
+                backdropOpacity: "=?",
+                highlightElement: "=?",
+                disableEventsOnClick: "=?",
             }
         };
 
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 e0f5da9a9c..5d542f0913 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
@@ -67,14 +67,16 @@
                         scope.model.currentStep = {};
                         // set popover position to center
                         setPopoverPosition(null);
-                        // remove backdrop hightlight
+                        // remove backdrop hightlight and custom opacity
                         backdropService.setHighlight(null);
+                        backdropService.setOpacity(null);
                     });
                 }
             }
 
             function startStep() {
                 scope.loadingStep = true;
+                backdropService.setOpacity(scope.model.steps[scope.model.currentStepIndex].backdropOpacity);
                 backdropService.setHighlight(null);
 
                 waitForPendingRerequests().then(function() {
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/backdrop.service.js b/src/Umbraco.Web.UI.Client/src/common/services/backdrop.service.js
index 3cdd1f2b21..3368ea3bf9 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/backdrop.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/backdrop.service.js
@@ -4,6 +4,7 @@
     function backdropService(eventsService) {
 
         var args = {
+            opacity: null,
             element: null,
             disableEventsOnClick: false,
             show: false
@@ -25,10 +26,13 @@
         }
 
         function close() {
-
             args.element = null;
             args.show = false;
+            eventsService.emit("appState.backdrop", args);
+        }
 
+        function setOpacity(opacity) {
+            args.opacity = opacity;
             eventsService.emit("appState.backdrop", args);
         }
 
@@ -40,6 +44,7 @@
         var service = {
             open: open,
             close: close,
+            setOpacity: setOpacity,
             setHighlight: setHighlight
         };
 
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
index 94df0168d3..a63f18206d 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
@@ -19,7 +19,8 @@
                     {
                         element: "#applications",
                         title: "Sections",
-                        content: "These are the <b>Sections</b> and allows you to navigate the different areas of Umbraco."
+                        content: "These are the <b>Sections</b> and allows you to navigate the different areas of Umbraco.",
+                        backdropOpacity: 0.6
                     },
                     {
                         element: "#tree",
@@ -34,8 +35,9 @@
                     {
                         element: "#applications [data-element='section-user']",
                         title: "User profile",
-                        content: "Click here to open the user profile dialog.",
-                        event: "click"
+                        content: "Click on the <b>user photo</b> to open the user profile dialog.",
+                        event: "click",
+                        backdropOpacity: 0.6
                     },
                     {
                         element: "[data-element~='overlay-user']",
@@ -52,12 +54,14 @@
                         element: "#applications [data-element='section-help']",
                         title: "Help",
                         content: "If you ever find yourself in trouble click here to open the help drawer.",
-                        event: "click"
+                        event: "click",
+                        backdropOpacity: 0.6
                     },
                     {
                         element: "[data-element='drawer']",
                         title: "Help",
-                        content: "<p>In the help drawer you will find articles and videos related to the section you are using.</p><p>This is also where you will find the next tour on how to get started with Umbraco.</p>"
+                        content: "<p>In the help drawer you will find articles and videos related to the section you are using.</p><p>This is also where you will find the next tour on how to get started with Umbraco.</p>",
+                        backdropOpacity: 0.6
                     }
                 ]
             },
@@ -75,7 +79,8 @@
                         element: "#applications [data-element='section-settings']",
                         title: "Navigate to the settings sections",
                         content: "In the <b>Settings section</b> we will find the document types.",
-                        event: "click"
+                        event: "click",
+                        backdropOpacity: 0.6
                     },
                     {
                         element: "#tree [data-element='tree-item-documentTypes']",
@@ -227,7 +232,8 @@
                         element: "#applications [data-element='section-settings']",
                         title: "Navigate to the Settings section",
                         content: "<p>In the <b>Settings</b> section you will find all the templates</p><p>It is of course also possible to edit all your code files in your favorite code editor.</p>",
-                        event: "click"
+                        event: "click",
+                        backdropOpacity: 0.6
                     },
                     {
                         element: "#tree [data-element='tree-item-templates']",
@@ -303,7 +309,8 @@
                         element: "#applications [data-element='section-media']",
                         title: "Navigate to the media section",
                         content: "The <b>media</b> section is where you will manage all your media items.",
-                        event: "click"
+                        event: "click",
+                        backdropOpacity: 0.6
                     },
                     {
                         element: "#tree [data-element='tree-root']",
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-backdrop.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-backdrop.less
index 0355cde4f5..b291355261 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-backdrop.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-backdrop.less
@@ -6,11 +6,11 @@
     top: 0;
     left: 0;
     pointer-events: none;
+    fill-opacity: 0.4;
 }
 
 .umb-backdrop__rect {
     position: absolute;
     pointer-events: all;
-    opacity: 0.4;
     margin: 0;
 }
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-backdrop.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-backdrop.html
index 13d2105922..16b453294d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-backdrop.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-backdrop.html
@@ -1,15 +1,15 @@
 <div ng-click="clickBackdrop($event)">
     <!-- Backdrop with highlight -->
-    <svg ng-if="element" class="umb-backdrop" xmlns="http://www.w3.org/2000/svg" version="1.1">
-        <rect class="umb-backdrop__rect umb-backdrop__rect--left" height="100%"/>
-        <rect class="umb-backdrop__rect umb-backdrop__rect--top" width="100%"/>
-        <rect class="umb-backdrop__rect umb-backdrop__rect--bottom" width="100%"/>
-        <rect class="umb-backdrop__rect umb-backdrop__rect--right" height="100%" width="100%"/>
+    <svg ng-if="highlightElement" class="umb-backdrop" xmlns="http://www.w3.org/2000/svg" version="1.1" ng-style="{'fill-opacity': backdropOpacity }">
+        <rect class="umb-backdrop__rect umb-backdrop__rect--left" height="100%" />
+        <rect class="umb-backdrop__rect umb-backdrop__rect--top" width="100% "/>
+        <rect class="umb-backdrop__rect umb-backdrop__rect--bottom" width="100%" />
+        <rect class="umb-backdrop__rect umb-backdrop__rect--right" height="100%" width="100%" />
     </svg>
 
     <!-- Full screen backdrop -->
-    <svg ng-if="!element" class="umb-backdrop" xmlns="http://www.w3.org/2000/svg" version="1.1">
-        <rect  class="umb-backdrop__rect" height="100%" width="100%"/>
+    <svg ng-if="!highlightElement" class="umb-backdrop" xmlns="http://www.w3.org/2000/svg" version="1.1" ng-style="{'fill-opacity': backdropOpacity }">
+        <rect  class="umb-backdrop__rect" height="100%" width="100%" />
     </svg>
 
 </div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml b/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml
index 4bfa6c839b..5773a918c5 100644
--- a/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml
+++ b/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml
@@ -79,7 +79,8 @@
 
     <umb-backdrop
         ng-if="backdrop.show"
-        element="backdrop.element"
+        backdrop-opacity="backdrop.opacity"
+        highlight-element="backdrop.element"
         disable-events-on-click="backdrop.disableEventsOnClick">
     </umb-backdrop>
 

From 041d4a4a8bf66db4f9e049e5819f0e7850f3dd84 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Tue, 24 Oct 2017 13:54:36 +0200
Subject: [PATCH 12/15] fix issue in create media dialog where it sometimes
 refreshes whole page

---
 src/Umbraco.Web.UI.Client/src/views/media/create.html      | 4 +---
 .../src/views/media/media.create.controller.js             | 7 ++++++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/media/create.html b/src/Umbraco.Web.UI.Client/src/views/media/create.html
index f95030ec12..cfcbf1012f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/media/create.html
+++ b/src/Umbraco.Web.UI.Client/src/views/media/create.html
@@ -12,10 +12,8 @@
 				<ul class="umb-actions-child">
 
 					<li data-element="action-{{docType.alias}}" ng-repeat="docType in allowedTypes">
-					    <a href="#media/media/edit/{{currentNode.id}}?doctype={{docType.alias}}&create=true" ng-click="nav.hideNavigation()">
-
+					    <a ng-href="" ng-click="createMediaItem(docType)" prevent-default>
 					        <i class="large {{docType.icon}}"></i>
-					        
 					        <span class="menu-label">
 	        		        	{{docType.name}}
 	        		            <small>
diff --git a/src/Umbraco.Web.UI.Client/src/views/media/media.create.controller.js b/src/Umbraco.Web.UI.Client/src/views/media/media.create.controller.js
index 57ab8d9c5b..d9144be8c7 100644
--- a/src/Umbraco.Web.UI.Client/src/views/media/media.create.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/media/media.create.controller.js
@@ -6,11 +6,16 @@
  * @description
  * The controller for the media creation dialog
  */
-function mediaCreateController($scope, $routeParams, mediaTypeResource, iconHelper) {
+function mediaCreateController($scope, $routeParams, $location, mediaTypeResource, iconHelper, navigationService) {
     
     mediaTypeResource.getAllowedTypes($scope.currentNode.id).then(function(data) {
         $scope.allowedTypes = iconHelper.formatContentTypeIcons(data);
     });
+
+    $scope.createMediaItem = function(docType) {
+        $location.path("/media/media/edit/" + $scope.currentNode.id).search("doctype", docType.alias).search("create", "true");
+        navigationService.hideMenu();
+    };
     
 }
 

From ab09042fdce0b95eeb4c24ca6a23f77adab3bc51 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Tue, 24 Oct 2017 15:00:14 +0200
Subject: [PATCH 13/15] add options to prevent click in backdrop highlighted
 area

---
 .../components/application/umbbackdrop.directive.js    |  7 +++++++
 .../components/application/umbtour.directive.js        |  4 ++--
 .../src/common/services/backdrop.service.js            |  4 +++-
 .../src/common/services/tour.service.js                |  6 ++++++
 .../src/less/components/application/umb-backdrop.less  | 10 ++++++++++
 .../src/views/components/application/umb-backdrop.html | 10 +++++++---
 src/Umbraco.Web.UI/umbraco/Views/Default.cshtml        |  1 +
 7 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbbackdrop.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbbackdrop.directive.js
index 35d2d1b87e..e45074d003 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbbackdrop.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbbackdrop.directive.js
@@ -53,6 +53,12 @@
                         rectBottom.css({ "height": "100%", "y": topAndHeight, "x": leftDistance });                    
                         rectLeft.css({ "width": leftDistance });
 
+                        // Prevent interaction in the highlighted area
+                        if(scope.highlightPreventClick) {
+                            var preventClickElement = el.find(".umb-backdrop__highlight-prevent-click");
+                            preventClickElement.css({ "width": width, "height": height, "left": offset.left, "top": offset.top });
+                        }
+
                     }
 
                 });
@@ -92,6 +98,7 @@
             scope: {
                 backdropOpacity: "=?",
                 highlightElement: "=?",
+                highlightPreventClick: "=?",
                 disableEventsOnClick: "=?",
             }
         };
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 5d542f0913..b6b40492be 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
@@ -128,11 +128,11 @@
                         }, function () {
                             // Animation complete.
                             setPopoverPosition(element);
-                            backdropService.setHighlight(scope.model.currentStep.element);
+                            backdropService.setHighlight(scope.model.currentStep.element, scope.model.currentStep.elementPreventClick);
                         });
                     } else {
                         setPopoverPosition(element);
-                        backdropService.setHighlight(scope.model.currentStep.element);
+                        backdropService.setHighlight(scope.model.currentStep.element, scope.model.currentStep.elementPreventClick);
                     }
 
                 });
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/backdrop.service.js b/src/Umbraco.Web.UI.Client/src/common/services/backdrop.service.js
index 3368ea3bf9..b0053dc4bb 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/backdrop.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/backdrop.service.js
@@ -6,6 +6,7 @@
         var args = {
             opacity: null,
             element: null,
+            elementPreventClick: false,
             disableEventsOnClick: false,
             show: false
         };
@@ -36,8 +37,9 @@
             eventsService.emit("appState.backdrop", args);
         }
 
-        function setHighlight(element) {
+        function setHighlight(element, preventClick) {
             args.element = element;
+            args.elementPreventClick = preventClick;
             eventsService.emit("appState.backdrop", args);
         }
 
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
index a63f18206d..db7e6b425c 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
@@ -18,12 +18,14 @@
                     },
                     {
                         element: "#applications",
+                        elementPreventClick: true,
                         title: "Sections",
                         content: "These are the <b>Sections</b> and allows you to navigate the different areas of Umbraco.",
                         backdropOpacity: 0.6
                     },
                     {
                         element: "#tree",
+                        elementPreventClick: true,
                         title: "The Tree",
                         content: "This is the <b>Tree</b> and will contain all the content of your website."
                     },
@@ -41,6 +43,7 @@
                     },
                     {
                         element: "[data-element~='overlay-user']",
+                        elementPreventClick: true,
                         title: "User profile",
                         content: "<p>This is where you can see details about your user, change your password and log out of Umbraco.</p><p>In the <b>User section</b> you will be able to do more advaned user management.</p>"
                     },
@@ -59,6 +62,7 @@
                     },
                     {
                         element: "[data-element='drawer']",
+                        elementPreventClick: true,
                         title: "Help",
                         content: "<p>In the help drawer you will find articles and videos related to the section you are using.</p><p>This is also where you will find the next tour on how to get started with Umbraco.</p>",
                         backdropOpacity: 0.6
@@ -142,6 +146,7 @@
                     },
                     {
                         element: "[data-element~='overlay-editor-picker']",
+                        elementPreventClick: true,
                         title: "Editor picker",
                         content: "<p>In the editor picker dialog we can pick one of the many build in editor.</p>"
                     },
@@ -153,6 +158,7 @@
                     },
                     {
                         element: "[data-element~='overlay-editor-settings']",
+                        elementPreventClick: true,
                         title: "Editor settings",
                         content: "Each property editor can have individual settings. We don't want to change any of these now."
                     },
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-backdrop.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-backdrop.less
index b291355261..438f82859e 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-backdrop.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-backdrop.less
@@ -6,6 +6,11 @@
     top: 0;
     left: 0;
     pointer-events: none;
+}
+
+.umb-backdrop__backdrop {
+    height: 100%;
+    width: 100%;
     fill-opacity: 0.4;
 }
 
@@ -13,4 +18,9 @@
     position: absolute;
     pointer-events: all;
     margin: 0;
+}
+
+.umb-backdrop__highlight-prevent-click {
+    position: absolute;
+    pointer-events: all;
 }
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-backdrop.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-backdrop.html
index 16b453294d..14f7aca83e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-backdrop.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-backdrop.html
@@ -1,6 +1,7 @@
-<div ng-click="clickBackdrop($event)">
+<div class="umb-backdrop" ng-click="clickBackdrop($event)">
+
     <!-- Backdrop with highlight -->
-    <svg ng-if="highlightElement" class="umb-backdrop" xmlns="http://www.w3.org/2000/svg" version="1.1" ng-style="{'fill-opacity': backdropOpacity }">
+    <svg ng-if="highlightElement" class="umb-backdrop__backdrop" xmlns="http://www.w3.org/2000/svg" version="1.1" ng-style="{'fill-opacity': backdropOpacity }">
         <rect class="umb-backdrop__rect umb-backdrop__rect--left" height="100%" />
         <rect class="umb-backdrop__rect umb-backdrop__rect--top" width="100% "/>
         <rect class="umb-backdrop__rect umb-backdrop__rect--bottom" width="100%" />
@@ -8,8 +9,11 @@
     </svg>
 
     <!-- Full screen backdrop -->
-    <svg ng-if="!highlightElement" class="umb-backdrop" xmlns="http://www.w3.org/2000/svg" version="1.1" ng-style="{'fill-opacity': backdropOpacity }">
+    <svg ng-if="!highlightElement" class="umb-backdrop__backdrop" xmlns="http://www.w3.org/2000/svg" version="1.1" ng-style="{'fill-opacity': backdropOpacity }">
         <rect  class="umb-backdrop__rect" height="100%" width="100%" />
     </svg>
 
+    <!-- Prevent clicks in highlighted area -->
+    <div ng-if="highlightPreventClick" class="umb-backdrop__highlight-prevent-click"></div>
+
 </div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml b/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml
index 5773a918c5..388ffcf6ba 100644
--- a/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml
+++ b/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml
@@ -81,6 +81,7 @@
         ng-if="backdrop.show"
         backdrop-opacity="backdrop.opacity"
         highlight-element="backdrop.element"
+        highlight-prevent-click="backdrop.elementPreventClick"
         disable-events-on-click="backdrop.disableEventsOnClick">
     </umb-backdrop>
 

From 796700b4fef95aaf18a235a58305612c94b05788 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Tue, 24 Oct 2017 15:05:20 +0200
Subject: [PATCH 14/15] fix end tour in custom step

---
 .../common/tours/umbintrocreatecontent/nodename/nodename.html   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 69853ac201..038b586d19 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
@@ -19,7 +19,7 @@
             </umb-tour-step-counter>
 
             <div>
-                <umb-button size="xs" button-style="link" type="button" action="endTour()" label="End tour"></umb-button>
+                <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>
 

From 831eb3ef5eded20eaa3da17a58298230f456cad6 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Tue, 24 Oct 2017 15:17:14 +0200
Subject: [PATCH 15/15] add icon for link to document for better clarification

---
 src/Umbraco.Web.UI.Client/src/common/services/tour.service.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
index db7e6b425c..aad11af94a 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
@@ -295,7 +295,7 @@
                     {
                         element: "[data-element='editor-content'] [data-element='property-_umb_urls']",
                         title: "Open page",
-                        content: "<p>Click the <b>Link</b> to view your page.</p><p>Tip: Click the preview button in the bottom right corner to preview changes without publishing them.</p>",
+                        content: "<p>Click the <b>Link to document</b> <i class='icon-out'></i> to view your page.</p><p>Tip: Click the preview button in the bottom right corner to preview changes without publishing them.</p>",
                         event: "click",
                         eventElement: "[data-element='editor-content'] [data-element='property-_umb_urls'] a[target='_blank']"
                     }