132 lines
6.6 KiB
HTML
132 lines
6.6 KiB
HTML
<umb-drawer-view ng-controller="Umbraco.Drawers.Help as vm">
|
|
|
|
<umb-drawer-header
|
|
title="{{ vm.title }}"
|
|
description="{{ vm.subtitle }}">
|
|
</umb-drawer-header>
|
|
|
|
<umb-drawer-content>
|
|
|
|
<!-- Tours -->
|
|
<div class="umb-help-section" ng-if="vm.tours" data-element="help-tours">
|
|
|
|
<h5 class="umb-help-section__title">Tours</h5>
|
|
|
|
<div ng-repeat="tourGroup in vm.tours | orderBy:'groupOrder'">
|
|
|
|
<div class="umb-help-list">
|
|
|
|
<a href="" class="umb-help-list-item umb-help-list-item__content flex items-center justify-between" ng-click="tourGroup.open = !tourGroup.open">
|
|
<h5 class="umb-help-list-item__group-title">
|
|
<i 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Show in custom help dashboard -->
|
|
<div class="umb-help-section" data-element="help-custom-dashboard" 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>
|
|
|
|
<!-- Help Content -->
|
|
<div class="umb-help-section" data-element="help-articles" ng-if="vm.topics.length > 0">
|
|
<h5 class="umb-help-section__title">Articles</h5>
|
|
<ul class="umb-help-list">
|
|
<li class="umb-help-list-item" ng-repeat="topic in vm.topics track by $index">
|
|
<a class="umb-help-list-item__content" 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>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Umbraco tv content -->
|
|
<div class="umb-help-section" data-element="help-videos" ng-if="vm.hasAccessToSettings">
|
|
<h5 class="umb-help-section__title" 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 class="umb-help-list-item__content" 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 class="umb-help-section" data-element="help-links" ng-if="vm.hasAccessToSettings">
|
|
<a data-element="help-link-umbraco-tv" class="umb-help-badge" target="_blank" href="https://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" target="_blank" href="https://our.umbraco.com?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.com</div>
|
|
<small>
|
|
<localize key="defaultdialogs_theFriendliestCommunity">The friendliest community</localize>
|
|
</small>
|
|
</a>
|
|
</div>
|
|
|
|
</umb-drawer-content>
|
|
|
|
<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>
|
|
|
|
</umb-drawer-footer>
|
|
|
|
</umb-drawer-view>
|