diff options
Diffstat (limited to 'catalog-ui/app/scripts/directives/tutorial')
5 files changed, 393 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/directives/tutorial/image-template.html b/catalog-ui/app/scripts/directives/tutorial/image-template.html new file mode 100644 index 0000000000..7e7f7af356 --- /dev/null +++ b/catalog-ui/app/scripts/directives/tutorial/image-template.html @@ -0,0 +1,7 @@ +<perfect-scrollbar include-padding="true" class="sdc-tutorial-container-content sdc-tutorial-image-template"> + <div class="{{pageObject.data.imageClass}}"></div> + <div class="sdc-tutorial-image-template-text"> + <h1 translate="{{pageObject.data.title}}"></h1> + <p class="sdc-welcome-page-description2" translate="{{pageObject.data.description}}"></p> + </div> +</perfect-scrollbar> diff --git a/catalog-ui/app/scripts/directives/tutorial/text-template.html b/catalog-ui/app/scripts/directives/tutorial/text-template.html new file mode 100644 index 0000000000..dc1173be64 --- /dev/null +++ b/catalog-ui/app/scripts/directives/tutorial/text-template.html @@ -0,0 +1,4 @@ +<perfect-scrollbar include-padding="true" class="sdc-tutorial-container-content sdc-tutorial-text-template"> + <h1 translate="{{pageObject.data.title}}"></h1> + <p class="sdc-welcome-page-description2" translate="{{pageObject.data.description}}"></p> +</perfect-scrollbar> diff --git a/catalog-ui/app/scripts/directives/tutorial/tutorial-directive.html b/catalog-ui/app/scripts/directives/tutorial/tutorial-directive.html new file mode 100644 index 0000000000..191752fc1f --- /dev/null +++ b/catalog-ui/app/scripts/directives/tutorial/tutorial-directive.html @@ -0,0 +1,22 @@ +<div class="sdc-tutorial-page" data-ng-if="showTutorial"> + <div class="sdc-tutorial-container-wrapper"> + <div class="sdc-tutorial-skip" translate="{{isFirstTime?'TUTRIAL_GENERAL_SKIP_BUTTON':'TUTRIAL_GENERAL_CLOSE_BUTTON'}}" data-ng-click="closeTutorial()"></div> + <div class="sdc-tutorial-container"> + <div class="sdc-tutorial-container-tabs"> + <div class="sdc-tutorial-container-tab" data-ng-repeat="tab in tabs" data-ng-class="{'selected': tab.id===pageObject.tab}"> + <span translate="{{tab.name}}" data-ng-click="initPage(tab.defaultPage)"></span> + </div> + </div> + <ng-include src="templateUrl"></ng-include> + </div> + + <div class="sdc-tutorial-footer"> + <div class="sdc-tutorial-footer-prev-button"><span data-ng-show="hasPrevious()" translate="TUTRIAL_GENERAL_PREVIOUS_BUTTON" data-ng-click="previous()"></span></div> + <div class="sdc-tutorial-footer-page-counter"><span class="selected" data-ng-bind="currentPageIndex+1"></span>/<span class="total" data-ng-bind="totalPages"></span></div> + <div class="sdc-tutorial-footer-next-button"> + <span data-ng-if="hasNext()" translate="TUTRIAL_GENERAL_NEXT_BUTTON" data-ng-click="next()"></span> + <span data-ng-if="(currentPageIndex+1) === totalPages" translate="TUTRIAL_GENERAL_NEXT_BUTTON_END" data-ng-click="closeAndShowLastPage()"></span> + </div> + </div> + </div> +</div> diff --git a/catalog-ui/app/scripts/directives/tutorial/tutorial-directive.less b/catalog-ui/app/scripts/directives/tutorial/tutorial-directive.less new file mode 100644 index 0000000000..410a54e9c1 --- /dev/null +++ b/catalog-ui/app/scripts/directives/tutorial/tutorial-directive.less @@ -0,0 +1,213 @@ +.sdc-tutorial-page { + + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.8); + + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 0; + left: 0; + z-index: 3000; + + .sdc-tutorial-container-wrapper { + display: flex; + flex-direction: column; + } + + .sdc-tutorial-container { + .bg_c; + width: 830px; + height: 466px; + box-shadow: 1px 2px 2px 0px rgba(0, 0, 0, 0.35); + } + + .sdc-tutorial-container-tabs { + height: 56px; + display: flex; + flex-direction: row; + } + + .sdc-tutorial-container-tab { + .a_6; + flex-grow: 1; + align-items: center; + justify-content: center; + display: flex; + height: 56px; + position: relative; + opacity: 0.8; + + span { + .hand; + } + + &::after { + content: ''; + display: block; + border-right: solid 1px ; + border-color: rgba(59, 123, 155, 0.31); + height: 28px; + right: 0; + position: absolute; + top: 14px; //(56-28)/2 + width: 1px; + } + + &:last-child:after { + display: none; + } + + &.selected { + opacity: 1; + .bold; + } + + } + + .sdc-tutorial-container-content { + .bg_a; + .perfect-scrollbar; + display: flex; + align-items: center; + height: 410px; + } + + .sdc-tutorial-skip { + .c_1; + .hand; + text-align: right; + margin-bottom: 9px; + } + + .sdc-tutorial-footer { + .c_4; + margin-top: 9px; + + .sdc-tutorial-footer-prev-button { + float: left; + position: relative; + padding-left: 14px; + .noselect; + + span { + .hand; + &::before { + content: '<'; + display: block; + position: absolute; + left: 0; + top: 0; + } + } + } + + .sdc-tutorial-footer-page-counter { + .e_3; + position: absolute; + left: 50%; + margin-top: 2px; + cursor: default; + .noselect; + + .selected { + .c_3; + .bold; + margin-right: 2px; + } + + .total { + margin-left: 2px; + } + } + + .sdc-tutorial-footer-next-button { + float: right; + position: relative; + padding-right: 14px; + .noselect; + + span { + .hand; + + &::after { + content: '>'; + display: block; + position: absolute; + right: 0; + top: 0; + } + } + } + + } + +} + +///////////////// TEXT TEMPLATE +.sdc-tutorial-text-template { + + padding: 20px 65px; + + h1 { + .c_15; + margin-top: 0; + } + + p { + .c_10; + } +} + +///////////////// IMAGE TEMPLATE +.sdc-tutorial-image-template { + + .sdc-tutorial-image-template-text { + padding: 16px 38px; + height: 118px; + h1 { + .c_11; + margin: 0 0 4px 0; + } + + p { + .c_4; + font-weight: 300; + line-height: 21px; + } + + } + + .sdc-tutorial-page-2-image { background: transparent url('../../../styles/images/tutorial/2.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-3-image { background: transparent url('../../../styles/images/tutorial/3.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-4-image { background: transparent url('../../../styles/images/tutorial/4.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-5-image { background: transparent url('../../../styles/images/tutorial/5.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-6-image { background: transparent url('../../../styles/images/tutorial/6.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-7-image { background: transparent url('../../../styles/images/tutorial/7.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-8-image { background: transparent url('../../../styles/images/tutorial/8.png') no-repeat 0 0; width: 830px; height: 292px;} + + .sdc-tutorial-page-10-image { background: transparent url('../../../styles/images/tutorial/10.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-11-image { background: transparent url('../../../styles/images/tutorial/11.png') no-repeat 0 0; width: 830px; height: 292px;} + + .sdc-tutorial-page-13-image { background: transparent url('../../../styles/images/tutorial/13.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-14-image { background: transparent url('../../../styles/images/tutorial/14.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-15-image { background: transparent url('../../../styles/images/tutorial/15.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-16-image { background: transparent url('../../../styles/images/tutorial/16.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-17-image { background: transparent url('../../../styles/images/tutorial/17.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-18-image { background: transparent url('../../../styles/images/tutorial/18.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-19-image { background: transparent url('../../../styles/images/tutorial/19.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-20-image { background: transparent url('../../../styles/images/tutorial/20.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-21-image { background: transparent url('../../../styles/images/tutorial/21.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-22-image { background: transparent url('../../../styles/images/tutorial/22.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-23-image { background: transparent url('../../../styles/images/tutorial/23.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-24-image { background: transparent url('../../../styles/images/tutorial/24.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-25-image { background: transparent url('../../../styles/images/tutorial/25.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-26-image { background: transparent url('../../../styles/images/tutorial/26.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-27-image { background: transparent url('../../../styles/images/tutorial/27.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-28-image { background: transparent url('../../../styles/images/tutorial/28.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-29-image { background: transparent url('../../../styles/images/tutorial/29.png') no-repeat 0 0; width: 830px; height: 292px;} + .sdc-tutorial-page-30-image { background: transparent url('../../../styles/images/tutorial/30.png') no-repeat 0 0; width: 830px; height: 292px;} + +} diff --git a/catalog-ui/app/scripts/directives/tutorial/tutorial-directive.ts b/catalog-ui/app/scripts/directives/tutorial/tutorial-directive.ts new file mode 100644 index 0000000000..7df35cade9 --- /dev/null +++ b/catalog-ui/app/scripts/directives/tutorial/tutorial-directive.ts @@ -0,0 +1,147 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +/// <reference path="../../references"/> +module Sdc.Directives { + 'use strict'; + export interface ITutorialScope extends ng.IScope { + showTutorial:boolean; + isFirstTime:boolean; + templateUrl:string; + totalPages: number; + currentPageIndex: number; + page:number; + tabs:Array<string>; + tutorialData:any; + pageObject:any; + + initPage:Function; + next:Function; + previous:Function; + hasNext():boolean; + hasPrevious():boolean; + closeTutorial:Function; + closeAndShowLastPage:Function; + } + + export class TutorialDirective implements ng.IDirective { + + constructor( + private $templateCache:ng.ITemplateCacheService, + private sdcConfig:Models.IAppConfigurtaion, + private $state:ng.ui.IStateService + ) { + } + + scope = { + page: '=', + showTutorial: '=', + isFirstTime: '=' + }; + + replace = false; + restrict = 'EA'; + template = ():string => { + return this.$templateCache.get('/app/scripts/directives/tutorial/tutorial-directive.html'); + }; + + link = (scope:ITutorialScope, $elem:any) => { + + let findPageIndex:Function = (pageId:number):number=> { + for (let i:number=0;i<scope.totalPages;i++){ + if (scope.tutorialData.pages[i].id===pageId){ + return i; + } + } + return -1; + } + + let showCurrentPage:Function = ():void=> { + scope.pageObject = scope.tutorialData.pages[scope.currentPageIndex]; + scope.templateUrl = '/app/scripts/directives/tutorial/' + scope.pageObject.template + '.html'; + } + + scope.tutorialData = this.sdcConfig.tutorial; + + scope.closeTutorial = ()=> { + scope.showTutorial = false; + if(scope.isFirstTime){ + scope.isFirstTime=false; + } + } + + scope.closeAndShowLastPage = ()=> { + if(scope.isFirstTime){ + this.$state.go('dashboard.tutorial-end'); + } + scope.closeTutorial(); + } + + let init:Function = ():void => { + scope.tabs = scope.tutorialData.tabs; + scope.totalPages = scope.tutorialData.pages.length; + scope.initPage(scope.page); + + } + + scope.initPage = (pageId) => { + scope.currentPageIndex = findPageIndex(pageId); + showCurrentPage(); + } + + scope.next = ():void => { + if (scope.hasNext()){ + scope.currentPageIndex++; + showCurrentPage(); + } + } + + scope.previous = ():void => { + if (scope.hasPrevious()){ + scope.currentPageIndex--; + showCurrentPage(); + } + } + + scope.hasNext = ():boolean => { + return (scope.currentPageIndex+1) < scope.totalPages; + } + + scope.hasPrevious = ():boolean => { + return scope.currentPageIndex>0; + } + + angular.element(document).ready(function () { + init(); + }); + + scope.$watch('showTutorial', (showTutorial:any):void => { + scope.initPage(scope.page); + }); + + }; + + public static factory = ($templateCache:ng.ITemplateCacheService, sdcConfig:Models.IAppConfigurtaion, $state:ng.ui.IStateService)=> { + return new TutorialDirective($templateCache, sdcConfig, $state); + }; + + } + + TutorialDirective.factory.$inject = ['$templateCache', 'sdcConfig', '$state']; +} |