diff options
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard')
5 files changed, 108 insertions, 83 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/guideSteps.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/guideSteps.ts index 87e6c1990..d101d6111 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/guideSteps.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/guideSteps.ts @@ -54,11 +54,11 @@ export const steps = [ title: 'Package tag', }, // ------- - { - anchorId: 'mt-packageKeys', - content: 'Set your package custom keys (Optional)', - title: 'Package keys', - }, + // { + // anchorId: 'mt-packageKeys', + // content: 'Set your package custom keys (Optional)', + // title: 'Package keys', + // }, // Temaplate & Mapping { anchorId: 'tm-templateTab', diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html index 5712f80a0..1390a7b78 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html @@ -13,7 +13,7 @@ </a> <br /> <a href="#" id="clone-btn" role="button" aria-pressed="true" class="btn-import-package float"><i - tourAnchor="import" class="icon-import-blue" aria-hidden="true"></i>Import Package + class="icon-import-blue" aria-hidden="true"></i>Import Package </a> <ngx-ui-loader></ngx-ui-loader> </div> @@ -120,4 +120,4 @@ </div> </div> -</div>
\ No newline at end of file +</div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html index 8391530d6..f81b02643 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html @@ -9,25 +9,31 @@ <input id="clicker" [checked]="startTour" type="checkbox" /> <label class="ml-1" for="clicker">Start the tour</label> - <div class="panel-wrap"> + <div class="panel-wrap packageWizard"> <div class="panel"> <button id="clicker1" class="close" type="button" (click)="stopTour()"> - <label for="clicker">×</label> + <label for="clicker"><img src="assets/img/icon-close.svg" /></label> + </button> + <br /> + <h3>Welcome to CDS Designer UI</h3> + <p>CDS has new look and new way of delivering a reusable and simplified self-service experience.</p> + <!-- <span>Tab through these quick steps to help you get started.</span> + <br /> --> + <button id="clicker2" class="closeWizard mr-2" type="button" (click)="stopTour()"> + <label for="clicker">No Thanks</label> + </button> + <button type="button" class="startTour float"> + <label (click)="start()" for="clicker" class="m-0">Start Tour</label> </button> - - <h3>Welcome to CDS</h3> - <p>Want a tour? Our helpful guide will introduce you to new CDS Designer UI.</p> - <button type="button" class="btn" style="background-color: #fff;margin:0"> - <label style="margin: 0;" (click)="start()" for="clicker">Let's get started</label></button> </div> </div> <!----> - <nav class="row"> + <nav class="row" tourAnchor="allTab"> <!--Nav Tabs--> <div class="col pr-0"> <div class="nav nav-tabs " id="nav-tab" role="tablist"> - <a tourAnchor="allTab" class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" - href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">All</a> + <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" + role="tab" aria-controls="nav-home" aria-selected="true">All</a> <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Deployed</a> <a tourAnchor="test3" class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" @@ -53,4 +59,4 @@ <app-sort-packages></app-sort-packages> </div> </div> -</div>
\ No newline at end of file +</div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts index c0a48d346..f863341e0 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts @@ -40,7 +40,34 @@ export class PackagesDashboardComponent implements OnInit, OnDestroy { console.log('PackagesDashboardComponent'); - this.tourService.initialize([...steps]); + this.tourService.initialize([ + { + anchorId: 'allTab', + content: 'Package list is where you get access to your all and most recent CBA packages.', + title: 'Managing your CBA packages', + }, + { + anchorId: 'search', + content: 'Search for Package by name, version, tags and type', + title: 'Search', + }, + { + anchorId: 'tagFilter', + content: 'Filter Packages by tags', + title: 'Tag Filter', + }, + { + anchorId: 'create', + content: 'Start creating a full CBA packages from built-in forms without programming.', + title: 'Create new package', + }, + { + anchorId: 'metadataTab', + content: 'Set your package basic information', + title: 'Metadata Tab', + route: 'packages/createPackage' + }, + ]); this.checkTour(); } @@ -57,6 +84,9 @@ export class PackagesDashboardComponent implements OnInit, OnDestroy { this.tourService.start(); this.tourService.events$.subscribe(res => { console.log(res); + if (res.value && res.value.anchorId && res.value.anchorId.includes('mt-')) { + $('#nav-metadata-tab').trigger('click'); + } if (res.value && res.value.anchorId && res.value.anchorId.includes('tm-')) { $('#nav-template-tab').trigger('click'); } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html index 5e04b71ac..936c2da8d 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html @@ -1,70 +1,59 @@ <!--Page Title--> <header class="page-title" style="padding-top: 14px;padding-bottom: 13px;"> - <div class="row"> - <h2 class="col m-0" style="line-height: 33px;">CBA Packages - <span id="numberOfPackages">({{numberOfPackages}} packages)</span> - </h2> - <div class="col profile-help"> - <nav class="navbar navbar-expand-lg navbar-light"> - <ul class="navbar-nav ml-auto"> - <li class="nav-item help-btn"> - <a class="nav-link mr-2" href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank" [delay]="300" - tooltip="Help" placement="bottom"><i class="icon-info" aria-hidden="true"></i></a> - </li> - <div class="nav-item dropdown"> - <input class="dropdown-toggle" type="text"> - <div class="dropdown-text"><img src="../assets/img/img-user.jpeg" align="right"></div> - <ul class="dropdown-content"> - <li> - <a href="#">Username</a> - </li> - <li> - <a href="#">Settings</a> - </li> - <li> - <a href="#">Projects</a> - </li> - <li> - <a href="#">Log out</a> - </li> - </ul> - </div> - <!-- <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> - Dropdown - </a> - <div class="dropdown-menu" aria-labelledby="navbarDropdown"> - <a class="dropdown-item" href="#">Action</a> - <a class="dropdown-item" href="#">Another action</a> - <div class="dropdown-divider"></div> - <a class="dropdown-item" href="#">Something else here</a> - </div> - </li> --> - </ul> - </nav> - <!-- <ul class="menu-dropdown userProfile"> - <li><button type="button" class="btn package-info-btn" data-toggle="modal" - data-target="#exampleModalLong"> - <i class="icon-info" aria-hidden="true"></i> - </button></li> + <div class="row"> + <h2 class="col m-0" style="line-height: 33px;">CBA Packages + <span id="numberOfPackages">({{numberOfPackages}} packages)</span> + </h2> + <div class="col profile-help"> + <nav class="navbar navbar-expand-lg navbar-light"> + <ul class="navbar-nav ml-auto"> + <!--Help Menu--> + <div class="nav-item dropdown helpMenu"> + <input class="dropdown-toggle" type="text"> + <div class="dropdown-text"><i class="icon-info" aria-hidden="true"></i></div> + <ul class="dropdown-content"> + <!-- <li> + <i class="icon-get_started" aria-hidden="true"></i> + <p> + <input id="clicker3" [checked]="startTour" type="checkbox" /> + <label for="clicker"> + Getting Started + <span>Quick steps to help you get started</span> + </label> + </p> + </li> --> <li> - <div class="dropdown"> - <input class="dropdown-toggle" type="text"> - <div class="dropdown-text">User name</div> - <ul class="dropdown-content"> - <li> - <a href="#">Settings</a> - </li> - <li> - <a href="#">Projects</a> - </li> - <li> - <a href="#">Log out</a> - </li> - </ul> - </div> + <a href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank"> + <i class="icon-user_guide" aria-hidden="true"></i> + <p> + Tutorials + <span>CDS Designer's User Guide</span> + </p> + </a> </li> - </ul> --> - </div> + </ul> + </div> + <!--User Menu--> + <div class="nav-item dropdown userMenu"> + <input class="dropdown-toggle" type="text"> + <div class="dropdown-text"><img src="../assets/img/img-user.jpeg" align="right"></div> + <ul class="dropdown-content"> + <li> + <a href="#">Username</a> + </li> + <li> + <a href="#">Settings</a> + </li> + <li> + <a href="#">Projects</a> + </li> + <li> + <a href="#">Log out</a> + </li> + </ul> + </div> + </ul> + </nav> </div> + </div> </header> |