The Content section contains the content of the website. Content is displayed as nodes in the content tree.
In this tour we will learn how to create our Home page for our website.
", type: "intro" }, + { + element: "#applications [data-element='section-content']", + title: "Navigate to the content sections", + content: "In the Content section 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: "Our three main components to a page is done: Document type, Template, and Content - it is now time to see the result.
In this tour we will learn how to see our published website.
", type: "intro" }, + { + element: "#applications [data-element='section-content']", + title: "Navigate to the content sections", + content: "In the Content section 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", diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less index e9e6c29e65..320590098d 100644 --- a/src/Umbraco.Web.UI.Client/src/less/belle.less +++ b/src/Umbraco.Web.UI.Client/src/less/belle.less @@ -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"; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less index 46c75486ef..5d44ed5de4 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less @@ -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; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less index c161d8d62d..da0d79a999 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less @@ -99,6 +99,11 @@ } /* Sizes */ +.umb-button--xxs { + padding: 3px 12px; + font-size: 13px; +} + .umb-button--xs { padding: 5px 16px; font-size: 14px; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-number-badge.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-number-badge.less new file mode 100644 index 0000000000..d35abff550 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-number-badge.less @@ -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; +} \ No newline at end of file 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 896f5ba9b6..dd3766685f 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 @@ -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 () { 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 b882c54f29..272c740a24 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 @@ -8,15 +8,39 @@