From f5499b1755be57e428fd71fa4e4a1f5457e98b8f Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 31 May 2018 10:42:09 +0200
Subject: [PATCH] fix help drawer

---
 .../common/drawers/help/help.controller.js    |   7 +-
 .../src/views/common/drawers/help/help.html   | 207 +++++++++---------
 2 files changed, 111 insertions(+), 103 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.controller.js
index 4d2b43c078..df40539aac 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.controller.js
@@ -6,7 +6,7 @@
         var vm = this;
         var evts = [];
 
-        vm.title = localizationService.localize("general_help");
+        vm.title = "";
         vm.subtitle = "Umbraco version" + " " + Umbraco.Sys.ServerVariables.application.version;
         vm.section = $routeParams.section;
         vm.tree = $routeParams.tree;
@@ -26,6 +26,11 @@
 
         function oninit() {
 
+            // set title
+            localizationService.localize("general_help").then(function(data){
+                vm.title = data;
+            });
+
             tourService.getGroupedTours().then(function(groupedTours) {
                 vm.tours = groupedTours;
                 getTourGroupCompletedPercentage();
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
index 4829c8964a..79c2118aca 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
@@ -1,130 +1,133 @@
-<umb-drawer-view ng-controller="Umbraco.Drawers.Help as vm">
+<div style="height: 100%" ng-controller="Umbraco.Drawers.Help as vm">
+    <umb-drawer-view>
 
-    <umb-drawer-header
-        title="{{ vm.title }}"
-        description="{{ vm.subtitle }}">
-    </umb-drawer-header>
+        <umb-drawer-header
+            title="{{ vm.title }}"
+            description="{{ vm.subtitle }}">
+        </umb-drawer-header>
 
-    <umb-drawer-content>
+        <umb-drawer-content>
 
-        <!-- Tours -->
-        <div ng-if="vm.tours" data-element="help-tours" style="margin-bottom: 20px;">
+            <!-- Tours -->
+            <div ng-if="vm.tours" data-element="help-tours" style="margin-bottom: 20px;">
 
-            <h5 style="margin-bottom: 10px; margin-top: 0;">Tours</h5>
-            
-            <div ng-repeat="tourGroup in vm.tours | orderBy:'groupOrder'" style="margin-bottom: 5px;">
+                <h5 style="margin-bottom: 10px; margin-top: 0;">Tours</h5>
+                
+                <div ng-repeat="tourGroup in vm.tours | orderBy:'groupOrder'" style="margin-bottom: 5px;">
 
-                <div class="umb-help-list">
+                    <div class="umb-help-list">
 
-                    <a href="" class="umb-help-list-item umb-help-list-item__content flex items-center justify-between" style="text-decoration: none;" ng-click="tourGroup.open = !tourGroup.open">
-                        <h5 class="umb-help-list-item__group-title"><i style="margin-right: 2px;text-decoration: none;" ng-class="{'icon-navigation-right': !tourGroup.open, 'icon-navigation-down': tourGroup.open}"></i>
-                            <span ng-if="tourGroup.group !== 'undefined'">{{tourGroup.group}}</span>
-                            <span ng-if="tourGroup.group === 'undefined'">Other</span>
-                        </h5>
-                        <umb-progress-circle
-                            percentage="{{tourGroup.completedPercentage}}"
-                            size="40">
-                        </umb-progress-circle>
-                    </a>
+                        <a href="" class="umb-help-list-item umb-help-list-item__content flex items-center justify-between" style="text-decoration: none;" ng-click="tourGroup.open = !tourGroup.open">
+                            <h5 class="umb-help-list-item__group-title"><i style="margin-right: 2px;text-decoration: none;" ng-class="{'icon-navigation-right': !tourGroup.open, 'icon-navigation-down': tourGroup.open}"></i>
+                                <span ng-if="tourGroup.group !== 'undefined'">{{tourGroup.group}}</span>
+                                <span ng-if="tourGroup.group === 'undefined'">Other</span>
+                            </h5>
+                            <umb-progress-circle
+                                percentage="{{tourGroup.completedPercentage}}"
+                                size="40">
+                            </umb-progress-circle>
+                        </a>
 
-                    <div ng-if="tourGroup.open">
-                        <div data-element="tour-{{tour.alias}}" class="umb-help-list-item" ng-repeat="tour in tourGroup.tours">
-                            <div class="umb-help-list-item__content justify-between">
-                                <div class="flex items-center">
-                                    <div ng-if="!tour.completed" class="umb-number-badge umb-number-badge--xs umb-help-list-item__icon">{{ $index + 1 }}</div>
-                                    <umb-checkmark ng-if="tour.completed" size="xs" checked="tour.completed" class="umb-help-list-item__icon"></umb-checkmark>
-                                    <span ng-class="{'strike': tour.completed}" class="umb-help-list-item__title">{{ tour.name }}</span>
-                                </div>
-                                <div>
-                                    <umb-button ng-if="!tour.completed && vm.showTourButton($index, tourGroup)" button-style="primary" size="xxs" type="button" label="Start" action="vm.startTour(tour)"></umb-button>       
-                                    <umb-button ng-if="tour.completed" size="xxs" type="button" label="Rerun" action="vm.startTour(tour)"></umb-button>
+                        <div ng-if="tourGroup.open">
+                            <div data-element="tour-{{tour.alias}}" class="umb-help-list-item" ng-repeat="tour in tourGroup.tours">
+                                <div class="umb-help-list-item__content justify-between">
+                                    <div class="flex items-center">
+                                        <div ng-if="!tour.completed" class="umb-number-badge umb-number-badge--xs umb-help-list-item__icon">{{ $index + 1 }}</div>
+                                        <umb-checkmark ng-if="tour.completed" size="xs" checked="tour.completed" class="umb-help-list-item__icon"></umb-checkmark>
+                                        <span ng-class="{'strike': tour.completed}" class="umb-help-list-item__title">{{ tour.name }}</span>
+                                    </div>
+                                    <div>
+                                        <umb-button ng-if="!tour.completed && vm.showTourButton($index, tourGroup)" button-style="primary" size="xxs" type="button" label="Start" action="vm.startTour(tour)"></umb-button>       
+                                        <umb-button ng-if="tour.completed" size="xxs" type="button" label="Rerun" action="vm.startTour(tour)"></umb-button>
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
+
             </div>
 
-        </div>
 
-
-        <!-- Show in custom help dashboard -->
-        <div data-element="help-custom-dashboard" style="margin-bottom: 20px;" ng-if="vm.customDashboard.length > 0">
-            <div ng-repeat="tab in vm.customDashboard">
-                <div ng-repeat="property in tab.properties">
-                    <div>
-                        <h5 ng-if="property.caption">{{property.caption}}</h5>
-                        <div ng-include="property.path"></div>
+            <!-- Show in custom help dashboard -->
+            <div data-element="help-custom-dashboard" style="margin-bottom: 20px;" ng-if="vm.customDashboard.length > 0">
+                <div ng-repeat="tab in vm.customDashboard">
+                    <div ng-repeat="property in tab.properties">
+                        <div>
+                            <h5 ng-if="property.caption">{{property.caption}}</h5>
+                            <div ng-include="property.path"></div>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
 
-        <!--  Help Content -->
-        <div data-element="help-articles" style="margin-bottom: 20px;" ng-if="vm.topics.length > 0">
-            <h5 style="margin-bottom: 10px; margin-top: 0;">Articles</h5>
-            <ul class="umb-help-list">
-                <li class="umb-help-list-item" ng-repeat="topic in vm.topics track by $index">
-                    <a data-element="help-article-{{topic.name}}" target="_blank" ng-href="{{topic.url}}?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
-                        <span>
-                            <span class="umb-help-list-item__title">
-                                <span class="bold">{{topic.name}}</span>
-                                <span class="umb-help-list-item__open-icon icon-out"></span>
+            <!--  Help Content -->
+            <div data-element="help-articles" style="margin-bottom: 20px;" ng-if="vm.topics.length > 0">
+                <h5 style="margin-bottom: 10px; margin-top: 0;">Articles</h5>
+                <ul class="umb-help-list">
+                    <li class="umb-help-list-item" ng-repeat="topic in vm.topics track by $index">
+                        <a data-element="help-article-{{topic.name}}" target="_blank" ng-href="{{topic.url}}?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
+                            <span>
+                                <span class="umb-help-list-item__title">
+                                    <span class="bold">{{topic.name}}</span>
+                                    <span class="umb-help-list-item__open-icon icon-out"></span>
+                                </span>
+                                <span class="umb-help-list-item__description">{{topic.description}}</span>
                             </span>
-                            <span class="umb-help-list-item__description">{{topic.description}}</span>
-                        </span>
-                    </a>
-                </li>
-            </ul>
-        </div>
+                        </a>
+                    </li>
+                </ul>
+            </div>
 
-        <!--  Umbraco tv content -->
-        <div data-element="help-videos" style="margin-bottom: 20px;">
-            <h5 style="margin-bottom: 10px; margin-top: 0;" ng-if="vm.videos.length > 0">Videos</h5>
-            <ul class="umb-help-list">
-                <li class="umb-help-list-item" ng-repeat="video in vm.videos track by $index">
-                    <a data-element="help-article-{{video.title}}" target="_blank" ng-href="{{video.link}}?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
-                        <i class="umb-help-list-item__icon icon-tv-old"></i>
-                        <span class="umb-help-list-item__title">{{video.title}}</span>
-                        <i class="umb-help-list-item__open-icon icon-out"></i>
-                    </a>
-                </li>
-            </ul>
-        </div>
+            <!--  Umbraco tv content -->
+            <div data-element="help-videos" style="margin-bottom: 20px;">
+                <h5 style="margin-bottom: 10px; margin-top: 0;" ng-if="vm.videos.length > 0">Videos</h5>
+                <ul class="umb-help-list">
+                    <li class="umb-help-list-item" ng-repeat="video in vm.videos track by $index">
+                        <a data-element="help-article-{{video.title}}" target="_blank" ng-href="{{video.link}}?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
+                            <i class="umb-help-list-item__icon icon-tv-old"></i>
+                            <span class="umb-help-list-item__title">{{video.title}}</span>
+                            <i class="umb-help-list-item__open-icon icon-out"></i>
+                        </a>
+                    </li>
+                </ul>
+            </div>
 
-        <!--  Links -->
-        <div data-element="help-links">
-            <a data-element="help-link-umbraco-tv" class="umb-help-badge" style="margin-bottom: 5px;" target="_blank" href="http://umbraco.tv?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
-                <i class="umb-help-badge__icon icon-tv-old"></i>
-                <div class="umb-help-badge__title">Visit umbraco.tv</div>
-                <small>
-                    <localize key="help_theBestUmbracoVideoTutorials">The best Umbraco video tutorials</localize>
-                </small>
-            </a>
+            <!--  Links -->
+            <div data-element="help-links">
+                <a data-element="help-link-umbraco-tv" class="umb-help-badge" style="margin-bottom: 5px;" target="_blank" href="http://umbraco.tv?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
+                    <i class="umb-help-badge__icon icon-tv-old"></i>
+                    <div class="umb-help-badge__title">Visit umbraco.tv</div>
+                    <small>
+                        <localize key="help_theBestUmbracoVideoTutorials">The best Umbraco video tutorials</localize>
+                    </small>
+                </a>
 
-            <a data-element="help-link-our-umbraco" class="umb-help-badge" style="margin-bottom: 5px;" target="_blank" href="http://our.umbraco.org?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=our">
-                <i class="umb-help-badge__icon icon-favorite"></i>
-                <div class="umb-help-badge__title">Visit our.umbraco.org</div>
-                <small>
-                    <localize key="defaultdialogs_theFriendliestCommunity">The friendliest community</localize>
-                </small>
-            </a>
-        </div>
+                <a data-element="help-link-our-umbraco" class="umb-help-badge" style="margin-bottom: 5px;" target="_blank" href="http://our.umbraco.org?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=our">
+                    <i class="umb-help-badge__icon icon-favorite"></i>
+                    <div class="umb-help-badge__title">Visit our.umbraco.org</div>
+                    <small>
+                        <localize key="defaultdialogs_theFriendliestCommunity">The friendliest community</localize>
+                    </small>
+                </a>
+            </div>
 
-    </umb-drawer-content>
+        </umb-drawer-content>
 
-    <umb-drawer-footer>
+        <umb-drawer-footer>
 
-        <div class="flex justify-end">
-            <umb-button
-                alias="close"
-                type="button"
-                button-style="link"
-                label="Close"
-                action="vm.closeDrawer()">
-            </umb-button>
-        </div>
+            <div class="flex justify-end">
+                <umb-button
+                    alias="close"
+                    type="button"
+                    button-style="link"
+                    label="Close"
+                    action="vm.closeDrawer()">
+                </umb-button>
+            </div>
 
-    </umb-drawer-footer>
+        </umb-drawer-footer>
 
-</umb-drawer-view>
\ No newline at end of file
+    </umb-drawer-view>
+
+</div>
\ No newline at end of file