yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates to tour layout in drawer

Browse Source
This commit is contained in:
Mads Rasmussen
2017-10-26 11:39:49 +02:00
parent 63196d7e53
commit d98db5e6bc
8 changed files with 152 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/Umbraco.Web.UI.Client/src/common/services/tour.service.js
View File

@@ -192,6 +192,13 @@
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: "#applications [data-element='section-content']",
title: "Navigate to the content sections",
content: "In the <b>Content section</b> we will find the content of our website.",
event: "click",
backdropOpacity: 0.6
},
{
element: "[data-element='tree-root']",
title: "Open context menu",
@@ -279,6 +286,13 @@
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"
},
{
element: "#applications [data-element='section-content']",
title: "Navigate to the content sections",
content: "In the <b>Content section</b> we will find the content of our website.",
event: "click",
backdropOpacity: 0.6
},
{
element: "#tree [data-element='tree-item-Home']",
title: "Open the Home page",

1
src/Umbraco.Web.UI.Client/src/less/belle.less
View File

@@ -129,6 +129,7 @@
@import "components/umb-checkmark.less";
@import "components/umb-list.less";
@import "components/umb-box.less";
@import "components/umb-number-badge.less";
@import "components/umb-progress-circle.less";
@import "components/umb-dropdown-block.less";

3
src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less
View File

@@ -149,7 +149,8 @@
border-bottom: 1px solid @gray-9;
}
.umb-help-list-item > a {
.umb-help-list-item > a,
.umb-help-list-item__content {
display: flex;
align-items: center;
padding: 10px 20px;

5
src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less
View File

@@ -99,6 +99,11 @@
}
/* Sizes */
.umb-button--xxs {
padding: 3px 12px;
font-size: 13px;
}
.umb-button--xs {
padding: 5px 16px;
font-size: 14px;

40
src/Umbraco.Web.UI.Client/src/less/components/umb-number-badge.less Normal file
View File

@@ -0,0 +1,40 @@
.umb-number-badge {
border: 1px solid @gray-6;
width: 25px;
height: 25px;
border-radius: 50%;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
color: @black;
font-size: 15px;
}
.umb-number-badge--xs {
width: 20px;
height: 20px;
font-size: 13px;
}
.umb-number-badge--s {
width: 25px;
height: 25px;
}
.umb-number-badge--m {
width: 30px;
height: 30px;
}
.umb-number-badge--l {
width: 40px;
height: 40px;
font-size: 18px;
}
.umb-number-badge--xl {
width: 50px;
height: 50px;
font-size: 20px;
}

45
src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.controller.js
View File

@@ -12,26 +12,22 @@
vm.tree = $routeParams.tree;
vm.sectionName = "";
vm.customDashboard = null;
vm.tours = [];
vm.closeDrawer = closeDrawer;
vm.startTour = startTour;
vm.tours = tourService.getGroupedTours();
vm.getTourGroupCompletedPercentage = getTourGroupCompletedPercentage;
vm.showTourButton = showTourButton;
function startTour(tour) {
tourService.startTour(tour);
closeDrawer();
}
// Finding out, how many tours are completed for the progress circle
var completedLength = tourService.getCompletedTours().length;
var tourLength = tourService.getAllTours().length;
$scope.tourPercentage = (completedLength/tourLength)*100
function oninit() {
vm.tours = tourService.getGroupedTours();
// load custom help dashboard
dashboardResource.getDashboard("user-help").then(function (dashboard) {
vm.customDashboard = dashboard;
@@ -56,6 +52,8 @@
});
getTourGroupCompletedPercentage();
}
function closeDrawer() {
@@ -116,6 +114,31 @@
});
}
function showTourButton(index, tourGroup) {
if(index !== 0) {
var prevTour = tourGroup[index - 1];
if(prevTour.completed) {
return true;
}
} else {
return true;
}
}
function getTourGroupCompletedPercentage() {
// Finding out, how many tours are completed for the progress circle
angular.forEach(vm.tours, function(group){
var completedTours = 0;
angular.forEach(group, function(tour){
if(tour.completed) {
completedTours++;
}
});
group.completedPercentage = Math.round((completedTours/group.length)*100);
});
}
oninit();
$scope.$on('$destroy', function () {

79
src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
View File

@@ -8,15 +8,39 @@
<umb-drawer-content>
<!-- Tours -->
<umb-dropdown-block ng-repeat="(key,value) in vm.tours" title="key" circle="true" percentage="{{ tourPercentage }}">
<umb-dropdown-block-item
on-start="vm.startTour(tour)"
tick="true"
name="{{ tour.name }}"
completed="{{ tour.completed }}"
ng-repeat="tour in value">
</umb-dropdown-block-item>
</umb-dropdown-block>
<div style="margin-bottom: 20px;">
<h5 style="margin-bottom: 10px; margin-top: 0;">Tours</h5>
<div ng-repeat="(key,value) in vm.tours" style="margin-bottom: 5px;">
<div class="umb-help-list">
<a href="" class="umb-help-list-item flex items-center justify-between" style="padding: 5px 20px;" ng-click="value.open = !value.open">
<h5><i style="margin-right: 2px;" ng-class="{'icon-navigation-right': !value.open, 'icon-navigation-down': value.open}"></i>{{key}}</h5>
<umb-progress-circle
percentage="{{value.completedPercentage}}"
size="40"
font-size="xs"
stroke-color="">
</umb-progress-circle>
</a>
<div ng-if="value.open">
<div class="umb-help-list-item" ng-repeat="tour in value">
<div class="umb-help-list-item__content">
<div style="margin-right: 6px;" ng-if="!tour.completed" class="umb-number-badge umb-number-badge--xs">{{ $index + 1 }}</div>
<umb-checkmark ng-if="tour.completed" size="xs" checked="tour.completed" style="margin-right: 6px;"></umb-checkmark>
<span ng-class="{'strike': tour.completed}">{{ tour.name }}</span>
<umb-button ng-if="tour.completed || vm.showTourButton($index, value)" size="xxs" type="button" label="start" style="margin-left: auto;" action="vm.startTour(tour)"></umb-button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Show in custom help dashboard -->
<div style="margin-bottom: 20px;" ng-if="vm.customDashboard.length > 0">
@@ -49,7 +73,7 @@
</div>
<!-- Umbraco tv content -->
<div>
<div 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">
@@ -62,26 +86,29 @@
</ul>
</div>
<!-- Links -->
<div>
<a 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 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-footer>
<a 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 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 class="flex justify-end">
<umb-button
type="button"

6
src/Umbraco.Web.UI.Client/src/views/components/umb-progress-circle.html
View File

@@ -1,8 +1,8 @@
<div>
<div class="umb-tour__progress-container" style="width: {{ size }}px; width: {{ size }}px;">
<div class="umb-tour__progress-container" ng-style="{'width': size, 'height': size }">
<svg class="umb-tour__progress" viewBox="0 0 100 100">
<circle class="umb-tour__progress-circle-bg" cx="50" cy="50" r="48" fill="none" stroke-width="4"/>
<circle class="umb-tour__progress-circle umb-tour__progress-circle--{{ strokeColor }}" cx="50" cy="50" r="48" fill="none" stroke-width="4" stroke-dasharray="{{ strokeDashArray }}" stroke-dashoffset="{{ strokeDashOffset }}" />
<circle class="umb-tour__progress-circle-bg" cx="50" cy="50" r="47" fill="none" stroke-width="6"/>
<circle class="umb-tour__progress-circle umb-tour__progress-circle--{{ strokeColor }}" cx="50" cy="50" r="47" fill="none" stroke-width="6" stroke-dasharray="{{ strokeDashArray }}" stroke-dashoffset="{{ strokeDashOffset }}" />
</svg>
<div class="umb-tour__values umb-tour__values--{{ fontSize }}"> {{ percentage }}%</div>
</div>