Help drawer adjustments (#9090)

* Format document

* Ensure help drawer can be closed using esc key

* Add rel="noopener" for security reasons

* Remove additional whitespace
This commit is contained in:
Bjarne Fyrstenborg
2020-11-23 07:36:12 +01:00
committed by GitHub
parent 8b9585398e
commit 7fc3ec82bd

View File

@@ -2,8 +2,8 @@
<umb-drawer-view>
<umb-drawer-header
title="{{ vm.title }}"
description="{{ vm.subtitle }}">
title="{{vm.title}}"
description="{{vm.subtitle}}">
</umb-drawer-header>
<umb-drawer-content>
@@ -14,7 +14,6 @@
<div class="umb-help-list">
<div ng-repeat="tour in vm.docTypeTours | orderBy:'groupOrder'">
<div data-element="tour-{{tour.alias}}" class="umb-help-list-item">
<div class="umb-help-list-item__content justify-between">
@@ -22,7 +21,7 @@
<span class="umb-help-list-item__title">{{ tour.name }}</span>
</div>
<div>
<umb-button button-style="primary" size="xxs" type="button" label="Start" action="vm.startTour(tour)"></umb-button>
<umb-button button-style="primary" size="xxs" type="button" label="Start" action="vm.startTour(tour)"></umb-button>
</div>
</div>
</div>
@@ -98,7 +97,7 @@
</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">
<a class="umb-help-list-item__content" data-element="help-article-{{topic.name}}" target="_blank" rel="noopener" href="" 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>
@@ -106,50 +105,50 @@
</span>
<span class="umb-help-list-item__description">{{topic.description}}</span>
</span>
</a>
</li>
</ul>
</div>
</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">
<localize key="general_videos">Videos</localize>
</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" aria-hidden="true"></i>
<span class="umb-help-list-item__title">{{video.title}}</span>
<i class="umb-help-list-item__open-icon icon-out" aria-hidden="true"></i>
</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">
<localize key="general_videos">Videos</localize>
</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" rel="noopener" href="" 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" aria-hidden="true"></i>
<span class="umb-help-list-item__title">{{video.title}}</span>
<i class="umb-help-list-item__open-icon icon-out" aria-hidden="true"></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" aria-hidden="true"></i>
<div class="umb-help-badge__title">
<localize key="help_umbracoTv">Visit umbraco.tv</localize>
</div>
<small>
<localize key="help_theBestUmbracoVideoTutorials">The best Umbraco video tutorials</localize>
</small>
</a>
<!-- 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" rel="noopener" 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" aria-hidden="true"></i>
<div class="umb-help-badge__title">
<localize key="help_umbracoTv">Visit umbraco.tv</localize>
</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" aria-hidden="true"></i>
<a data-element="help-link-our-umbraco" class="umb-help-badge" target="_blank" rel="noopener" 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" aria-hidden="true"></i>
<div class="umb-help-badge__title">
<localize key="help_umbracoForum">Visit our.umbraco.com</localize>
</div>
<small>
<localize key="defaultdialogs_theFriendliestCommunity">The friendliest community</localize>
</small>
</a>
</div>
<div class="umb-help-badge__title">
<localize key="help_umbracoForum">Visit our.umbraco.com</localize>
</div>
<small>
<localize key="defaultdialogs_theFriendliestCommunity">The friendliest community</localize>
</small>
</a>
</div>
</umb-drawer-content>
@@ -159,6 +158,7 @@
<umb-button
alias="close"
type="button"
shortcut="esc"
button-style="link"
label-key="general_close"
action="vm.closeDrawer()">