fixes: U4-10599 Move "End tour"-button to another position

This commit is contained in:
Mads Rasmussen
2017-10-31 10:20:24 +01:00
parent 664d0c5160
commit 358536ffaa
12 changed files with 56 additions and 27 deletions

View File

@@ -105,7 +105,7 @@
$timeout(function () {
// if an element isn't set - show the popover in the center
if(!scope.model.currentStep.element) {
if(scope.model.currentStep && !scope.model.currentStep.element) {
setPopoverPosition(null);
return;
}

View File

@@ -3,14 +3,27 @@
function TourStepDirective() {
function link(scope, element, attrs, ctrl) {
scope.close = function() {
if(scope.onClose) {
scope.onClose();
}
}
}
var directive = {
restrict: 'E',
replace: true,
transclude: true,
templateUrl: 'views/components/application/umbtour/umb-tour-step.html',
scope: {
size: "@?"
}
size: "@?",
onClose: "&?",
hideClose: "=?"
},
link: link
};
return directive;

View File

@@ -36,6 +36,7 @@
.umb-tour-step__content {
margin-bottom: 25px;
font-size: 15px;
}
}
@@ -44,19 +45,36 @@
color: @gray-5;
}
.umb-tour-step__close {
position: absolute;
top: 15px;
right: 15px;
font-size: 19px;
color: @gray-7;
cursor: pointer;
}
.umb-tour-step__close:hover,
.umb-tour-step__close:active {
color: @gray-4;
text-decoration: none;
}
.umb-tour-step__header {
margin-top: 5px;
margin-bottom: 10px;
margin-top: 10px;
}
.umb-tour-step__title {
font-weight: bold;
color: @black;
font-size: 15px;
line-height: 1.3em;
width: calc(~"100% - 35px");
}
.umb-tour-step__content {
margin-bottom: 15px;
font-size: 15px;
font-size: 14px;
line-height: 1.6em;
}

View File

@@ -1,6 +1,6 @@
<div ng-controller="Umbraco.Tours.UmbIntroCreateContent.NodeNameController as vm">
<umb-tour-step>
<umb-tour-step on-close="model.endTour()">
<umb-tour-step-header
title="model.currentStep.title">
@@ -19,7 +19,6 @@
</umb-tour-step-counter>
<div>
<umb-button size="xs" button-style="link" type="button" action="model.endTour()" label="End tour"></umb-button>
<umb-button size="xs" button-style="success" type="button" action="vm.initNextStep()" label="Next"></umb-button>
</div>

View File

@@ -1,6 +1,6 @@
<div ng-controller="Umbraco.Tours.UmbIntroCreateDocType.DocTypeNameController as vm">
<umb-tour-step>
<umb-tour-step on-close="model.endTour()">
<umb-tour-step-header
title="model.currentStep.title">
@@ -19,7 +19,6 @@
</umb-tour-step-counter>
<div>
<umb-button size="xs" button-style="link" type="button" action="model.endTour()" label="End tour"></umb-button>
<umb-button size="xs" button-style="success" type="button" action="vm.initNextStep()" label="Next"></umb-button>
</div>

View File

@@ -1,6 +1,6 @@
<div ng-controller="Umbraco.Tours.UmbIntroCreateDocType.PropertyNameController as vm">
<umb-tour-step>
<umb-tour-step on-close="model.endTour()">
<umb-tour-step-header
title="model.currentStep.title">
@@ -19,7 +19,6 @@
</umb-tour-step-counter>
<div>
<umb-button size="xs" button-style="link" type="button" action="model.endTour()" label="End tour"></umb-button>
<umb-button size="xs" button-style="success" type="button" action="vm.initNextStep()" label="Next"></umb-button>
</div>

View File

@@ -1,6 +1,6 @@
<div ng-controller="Umbraco.Tours.UmbIntroCreateDocType.TabNameController as vm">
<umb-tour-step>
<umb-tour-step on-close="model.endTour()">
<umb-tour-step-header
title="model.currentStep.title">
@@ -19,7 +19,6 @@
</umb-tour-step-counter>
<div>
<umb-button size="xs" button-style="link" type="button" action="model.endTour()" label="End tour"></umb-button>
<umb-button size="xs" button-style="success" type="button" action="vm.initNextStep()" label="Next"></umb-button>
</div>

View File

@@ -1,6 +1,6 @@
<div ng-controller="Umbraco.Tours.UmbIntroMediaSection.FolderNameController as vm">
<umb-tour-step>
<umb-tour-step on-close="model.endTour()">
<umb-tour-step-header
title="model.currentStep.title">
@@ -19,7 +19,6 @@
</umb-tour-step-counter>
<div>
<umb-button size="xs" button-style="link" type="button" action="model.endTour()" label="End tour"></umb-button>
<umb-button size="xs" button-style="success" type="button" action="vm.initNextStep()" label="Next" state="vm.buttonState"></umb-button>
</div>

View File

@@ -1,6 +1,6 @@
<div ng-controller="Umbraco.Tours.UmbIntroMediaSection.UploadImagesController as vm">
<umb-tour-step>
<umb-tour-step on-close="model.endTour()">
<umb-tour-step-header
title="model.currentStep.title">
@@ -19,7 +19,6 @@
</umb-tour-step-counter>
<div>
<umb-button size="xs" button-style="link" type="button" action="model.endTour()" label="End tour"></umb-button>
<umb-button size="xs" button-style="success" type="button" action="vm.initNextStep()" label="Next" state="vm.buttonState"></umb-button>
</div>

View File

@@ -1,5 +1,5 @@
<div ng-controller="Umbraco.Tours.UmbIntroRenderInTemplate.TemplatesTreeController as vm">
<umb-tour-step>
<umb-tour-step on-close="model.endTour()">
<umb-tour-step-header
title="model.currentStep.title">
@@ -16,10 +16,6 @@
total-steps="model.steps.length">
</umb-tour-step-counter>
<div>
<umb-button size="xs" button-style="link" type="button" action="model.endTour()" label="End tour"></umb-button>
</div>
</umb-tour-step-footer>
</umb-tour-step>

View File

@@ -7,7 +7,7 @@
<div ng-if="!configuredView && !elementNotFound">
<!-- Regular steps -->
<umb-tour-step ng-if="model.currentStepIndex < model.steps.length">
<umb-tour-step ng-if="model.currentStepIndex < model.steps.length" on-close="model.endTour()" hide-close="model.currentStep.type === 'intro'">
<umb-tour-step-header
title="model.currentStep.title">
@@ -25,12 +25,11 @@
</umb-tour-step-counter>
<div ng-if="model.currentStep.type !== 'intro'">
<umb-button size="xs" button-style="link" type="button" action="model.endTour()" label="End tour"></umb-button>
<umb-button size="xs" ng-if="!model.currentStep.event" button-style="success" type="button" action="model.nextStep()" label="Next"></umb-button>
</div>
<div ng-if="model.currentStep.type === 'intro'">
<umb-button size="m" button-style="link" type="button" action="model.endTour()" label="End tour"></umb-button>
<umb-button size="m" button-style="link" type="button" action="model.endTour()" label="Do it later"></umb-button>
<umb-button size="m" button-style="success" type="button" action="model.nextStep()" label="Start tour"></umb-button>
</div>
@@ -39,7 +38,7 @@
</umb-tour-step>
<!-- Outro step -->
<umb-tour-step ng-if="model.currentStepIndex === model.steps.length" class="tc">
<umb-tour-step ng-if="model.currentStepIndex === model.steps.length" class="tc" hide-close="model.currentStepIndex === model.steps.length">
<umb-tour-step-content>
<div class="flex items-center justify-center">

View File

@@ -1 +1,10 @@
<div class="umb-tour-step umb-tour-step--{{size}}" ng-transclude></div>
<div class="umb-tour-step umb-tour-step--{{size}}">
<div ng-if="hideClose !== true">
<i class="icon-wrong umb-tour-step__close" ng-click="close()"></i>
</div>
<div ng-transclude></div>
</div>