diff options
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules')
8 files changed, 183 insertions, 175 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html index 9e8ef5d7b..0ffd9cb5e 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html @@ -2,7 +2,7 @@ <div class="new-wrapper"> <div class="container-fluid main-container"> - <header class="page-title" style="padding: 18px 30px 10px;"> + <header class="page-title" style="padding: 16px 30px 12px;"> <div class="row"> <h2 class="col m-0"> <ul class="breadcrumb-header"> @@ -13,53 +13,46 @@ </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> + <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> --> + <!--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> + <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> - </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> - <li> - <div class="dropdown"> + </div> + <!--User Menu--> + <div class="nav-item dropdown userMenu"> <input class="dropdown-toggle" type="text"> - <div class="dropdown-text">User name</div> + <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> @@ -70,9 +63,10 @@ </li> </ul> </div> - </li> - </ul> --> - </div> + + </ul> + </nav> + </div> </div> </header> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html index 52445ede2..f2e5eedf1 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html @@ -62,8 +62,8 @@ <div class="single-line-model"> <label class="label-name">Tags</label> <div class="label-input"> - <input tourAnchor="mt-packageTags" type="input" (keyup.enter)="addTag($event)" (keyup.Space)="addTag($event)" - placeholder="Ex., vDNS-CDS"> + <input tourAnchor="mt-packageTags" type="input" (keyup.enter)="addTag($event)" + (keyup.Space)="addTag($event)" placeholder="Ex., vDNS-CDS"> </div> <div class="model-note-container tag-notes">Use ENTER/SPACE to add tag</div> <div class="model-note-container tages-container"> @@ -76,14 +76,14 @@ <div id="container"> <div id="target"> <div class="card creat-card"> - <div class="single-line customKeyTitle"> + <div class="single-line customKeyTitle"> <h5 class="label-name w-100 "> Custom key </h5> <span>To add New Custom Key, fill the first key then <b>Press ENTER</b></span> </div> - <div tourAnchor="mt-packageKeys" *ngFor="let map of this.metaDataTab.mapOfCustomKey | keyvalue; let i=index" class="single-custom-key"> + <div *ngFor="let map of this.metaDataTab.mapOfCustomKey | keyvalue; let i=index" class="single-custom-key"> <div class="single-line-custom-key"> <label class="label-name"><span>{{i + 1}}.</span> Name</label> <div class="label-input"> @@ -106,8 +106,8 @@ <div class="single-line-custom-key"> <label class="label-name"><span>{{customKeysMap.size + 1}}.</span> Name</label> <div class="label-input"> - <input tourAnchor="mt-packageKeys" (keyup.enter)="addCustomKey()" name="key" type="input" class="mapKey" - placeholder="Enter name"> + <input tourAnchor="mt-packageKeys" (keyup.enter)="addCustomKey()" name="key" type="input" + class="mapKey" placeholder="Enter name"> </div> </div> <div class="single-line-custom-key"> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html index d42be1ff3..a09951cd2 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html @@ -2,7 +2,7 @@ <tour-step-template></tour-step-template> <div class="new-wrapper"> <div class="container-fluid main-container"> - <header class="page-title"> + <header class="page-title" style="padding: 16px 30px 12px;"> <div class="row"> <h2 class="col m-0 pb-0"> <ul class="breadcrumb-header"> @@ -14,11 +14,34 @@ <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"> + <!--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> + <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> + <!--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"> @@ -36,42 +59,8 @@ </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> - <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> - </li> - </ul> --> </div> </div> </header> 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> |