summaryrefslogtreecommitdiffstats
path: root/cds-ui/designer-client/src/app/modules/feature-modules
diff options
context:
space:
mode:
authorSarah Abouzainah <sabouzainah.ext@orange.com>2020-09-06 21:02:08 +0200
committerSarah Abouzainah <sabouzainah.ext@orange.com>2020-09-07 13:39:42 +0200
commit663e41d4d8a167cf307a385a5c750f7424205012 (patch)
tree307f00c829cb2aebe9519efdae877c31822ae2e2 /cds-ui/designer-client/src/app/modules/feature-modules
parent953b78a4c0c36d31c944baf93db4ae3d8584d232 (diff)
Add Help menu and Update Wizard style
Issue-ID: CCSDK-2705 Issue-ID: CCSDK-2709 Signed-off-by: Sarah Abouzainah <sabouzainah.ext@orange.com> Change-Id: I7526e5056c50f2e090d06ad6a6f0d7ca729d8340
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules')
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html86
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html69
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html4
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html28
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts29
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html117
6 files changed, 169 insertions, 164 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 f79657af8..772923283 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/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/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">&times;</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..9e299a829 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();
}
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>