summaryrefslogtreecommitdiffstats
path: root/catalog-ui/app/scripts/directives/tutorial
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2017-02-19 10:28:42 +0200
committerMichael Lando <ml636r@att.com>2017-02-19 10:51:01 +0200
commit451a3400b76511393c62a444f588a4ed15f4a549 (patch)
treee4f5873a863d1d3e55618eab48b83262f874719d /catalog-ui/app/scripts/directives/tutorial
parent5abfe4e1fb5fae4bbd5fbc340519f52075aff3ff (diff)
Initial OpenECOMP SDC commit
Change-Id: I0924d5a6ae9cdc161ae17c68d3689a30d10f407b Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'catalog-ui/app/scripts/directives/tutorial')
-rw-r--r--catalog-ui/app/scripts/directives/tutorial/image-template.html7
-rw-r--r--catalog-ui/app/scripts/directives/tutorial/text-template.html4
-rw-r--r--catalog-ui/app/scripts/directives/tutorial/tutorial-directive.html22
-rw-r--r--catalog-ui/app/scripts/directives/tutorial/tutorial-directive.less213
-rw-r--r--catalog-ui/app/scripts/directives/tutorial/tutorial-directive.ts147
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'];
+}