fix help drawer
This commit is contained in:
Mads Rasmussen
@@ -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();
|
||||
|
||||
@@ -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>
|
||||
</umb-drawer-view>
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user