aboutsummaryrefslogtreecommitdiffstats
path: root/cds-ui/designer-client/src
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
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')
-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
-rwxr-xr-xcds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eotbin22816 -> 23448 bytes
-rwxr-xr-xcds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg2
-rwxr-xr-xcds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttfbin22652 -> 23284 bytes
-rwxr-xr-xcds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woffbin22732 -> 23364 bytes
-rwxr-xr-xcds-ui/designer-client/src/assets/icomoon/style.css16
-rw-r--r--cds-ui/designer-client/src/styles.css160
12 files changed, 325 insertions, 186 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>
diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot
index 7c88462a2..0ef083807 100755
--- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot
+++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot
Binary files differ
diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg
index cb635c143..d5bbb8308 100755
--- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg
+++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg
@@ -15,6 +15,8 @@
<glyph unicode="&#xe905;" glyph-name="icon-file" horiz-adv-x="751" d="M731.195 731.764l-208.496 208.494c-12.729 12.731-29.652 19.742-47.655 19.742h-407.653c-37.16 0-67.391-30.232-67.391-67.391v-851.058c0-37.16 30.232-67.391 67.391-67.391h616.15c37.16 0 67.391 30.232 67.391 67.391v642.56c0 17.997-7.009 34.92-19.738 47.653zM652.324 728.944h-122.82c-5.309 0-9.627 4.319-9.627 9.627v122.818l132.447-132.445zM683.542 31.923h-616.15c-5.309 0-9.627 4.319-9.627 9.627v851.058c0 5.309 4.319 9.627 9.627 9.627h394.721v-163.665c0-37.16 30.232-67.391 67.391-67.391h163.665v-629.629c0-5.309-4.319-9.627-9.627-9.627z" />
<glyph unicode="&#xe906;" glyph-name="icon-rectangle" d="M0 960h1024v-1024h-1024v1024z" />
<glyph unicode="&#xe907;" glyph-name="icon-enrich" horiz-adv-x="723" d="M643.818 562.272h-240.316l20.882 363.431c1.945 33.821-43.138 47.578-60.352 18.306l-312.986-532.253c-12.694-21.586 2.893-48.888 27.965-48.888h240.317l-20.884-363.431c-1.945-33.823 43.14-47.574 60.352-18.306l312.986 532.251c12.692 21.589-2.895 48.89-27.965 48.89zM370.919 129.754l15.154 263.697c1.069 18.617-13.757 34.301-32.389 34.301h-217.964l216.186 367.635-15.152-263.698c-1.069-18.617 13.757-34.301 32.389-34.301h217.962l-216.186-367.633zM67.885 180.705l-56.849-56.849c-12.669-12.669-12.669-33.209 0-45.878 12.667-12.669 33.209-12.671 45.878 0l56.849 56.849c12.669 12.669 12.669 33.209 0 45.878-12.667 12.671-33.209 12.671-45.878 0zM67.885 714.493c12.667-12.669 33.209-12.671 45.878 0 12.669 12.669 12.669 33.209 0 45.878l-56.849 56.849c-12.667 12.669-33.209 12.669-45.878 0s-12.669-33.209 0-45.878l56.849-56.849zM654.942 180.705c-12.667 12.669-33.209 12.669-45.878 0s-12.669-33.209 0-45.878l56.849-56.849c12.667-12.669 33.209-12.671 45.878 0 12.669 12.669 12.669 33.209 0 45.878l-56.849 56.849zM654.942 714.493l56.849 56.849c12.669 12.669 12.669 33.209 0 45.878-12.667 12.669-33.209 12.669-45.878 0l-56.849-56.849c-12.669-12.669-12.669-33.209 0-45.878 12.665-12.667 33.209-12.669 45.878 0z" />
+<glyph unicode="&#xe908;" glyph-name="icon-get_started" d="M1003.008 959.872c-199.893 3.584-427.861-100.907-572.16-262.997-137.899-2.603-272.171-59.136-371.029-157.995-5.76-5.675-7.808-14.165-5.291-21.845 2.56-7.723 9.216-13.312 17.237-14.464l164.437-23.552-20.309-22.741c-7.552-8.448-7.168-21.291 0.853-29.312l274.219-274.219c4.139-4.139 9.6-6.229 15.104-6.229 5.077 0 10.155 1.792 14.208 5.419l22.741 20.309 23.552-164.437c1.152-8.021 7.467-13.909 15.104-16.469 1.963-0.64 4.011-0.939 6.101-0.939 6.059 0 12.245 2.645 16.512 6.869 97.493 97.493 154.027 231.765 156.629 369.664 162.261 144.597 267.605 372.48 262.955 572.117-0.299 11.349-9.472 20.523-20.864 20.821zM806.4 591.573c-20.779-20.779-48.085-31.189-75.435-31.189s-54.656 10.411-75.435 31.189c-41.557 41.6-41.557 109.269 0 150.869 41.6 41.6 109.269 41.6 150.869 0s41.6-109.312 0-150.869zM116.224 238.72c-45.653-45.653-108.331-251.904-115.328-275.243-2.261-7.509-0.171-15.659 5.333-21.205 4.096-4.096 9.515-6.272 15.104-6.272 2.048 0 4.096 0.299 6.144 0.896 23.339 6.997 229.589 69.675 275.243 115.328 51.413 51.413 51.413 135.083 0 186.496-51.456 51.413-135.083 51.371-186.496 0z" />
+<glyph unicode="&#xe909;" glyph-name="icon-user_guide" d="M182.318 221.526v738.474h-49.18c-72.456 0-131.404-58.948-131.404-131.404v-648.796c30.102 25.97 69.248 41.728 112.030 41.728h68.554zM795.95 450.1c6.458 0 12.862-0.236 19.214-0.66v510.56h-572.956v-738.474h273.492c26.68 130.278 142.202 228.574 280.25 228.574zM423.968 783.658h200.44v-59.89h-200.44zM356.262 653.638h335.852v-59.89h-335.852zM549.012 19.818h-395.51v59.89h369.092c-8.198 26.514-12.636 54.66-12.688 83.818h-396.142c-62.73 0-113.764-51.034-113.764-113.762 0-62.73 51.034-113.764 113.764-113.764h509.716c-29.982 22.73-55.356 51.222-74.468 83.818zM795.95 392.1c-125.748 0-228.052-102.302-228.052-228.050s102.304-228.050 228.052-228.050c125.746 0 228.050 102.304 228.050 228.050 0 125.748-102.304 228.050-228.050 228.050zM795.928 300.576c16.818 0 29.272-13.746 30-30 0.726-16.202-14.308-30-30-30-16.818 0-29.272 13.746-30 30-0.726 16.202 14.308 30 30 30zM825.996 47.13h-60v153.598h60z" />
<glyph unicode="&#xe915;" glyph-name="icon-add" d="M512 960c-282.785 0-512-229.215-512-512s229.215-512 512-512c282.785 0 512 229.249 512 512s-229.215 512-512 512zM512 0c-247.425 0-448 200.575-448 448s200.575 448 448 448c247.425 0 448-200.575 448-448s-200.575-448-448-448zM704 480h-160v160c0 17.664-14.336 32-32 32s-32-14.336-32-32v-160h-160c-17.664 0-32-14.336-32-32s14.336-32 32-32h160v-160c0-17.664 14.336-32 32-32s32 14.336 32 32v160h160c17.664 0 32 14.336 32 32s-14.336 32-32 32z" />
<glyph unicode="&#xe952;" glyph-name="icon-archive-sm" d="M943.405 684.258h-864.783c-10.653 0-19.867-3.887-27.644-11.668-7.781-7.777-11.668-16.991-11.668-27.637v-589.626c0-10.644 3.887-19.863 11.668-27.637 7.777-7.781 16.991-11.677 27.644-11.677h864.783c10.647 0 19.854 3.896 27.637 11.677 7.775 7.773 11.662 16.991 11.662 27.637v589.626c0 10.653-3.872 19.858-11.662 27.637-7.775 7.781-16.991 11.668-27.637 11.668zM617.255 499.387c-7.773-7.779-16.991-11.668-27.637-11.668h-157.233c-10.64 0-19.854 3.892-27.637 11.668-7.777 7.781-11.668 16.991-11.668 27.644 0 10.644 3.892 19.858 11.668 27.637 7.781 7.781 16.995 11.673 27.637 11.673h157.249c10.638 0 19.85-3.892 27.637-11.673 7.775-7.777 11.662-16.991 11.662-27.637 0-10.651-3.896-19.863-11.677-27.644zM1010.357 947.749c-7.783 7.781-16.991 11.668-27.639 11.668h-943.409c-10.644 0-19.858-3.887-27.637-11.668-7.779-7.777-11.671-16.991-11.671-27.637v-157.233c0-10.644 3.892-19.854 11.673-27.637 7.779-7.781 16.991-11.668 27.637-11.668h943.394c10.644 0 19.863 3.887 27.652 11.668 7.773 7.781 11.66 16.991 11.66 27.637v157.233c0 10.653-3.887 19.86-11.66 27.637z" />
<glyph unicode="&#xe953;" glyph-name="icon-btn-card-config" d="M971.283 561.778h-95.801c-15.398 0-28.084 8.476-33.982 22.699s-2.901 29.203 7.964 40.088l67.736 67.717c9.956 9.956 15.436 23.211 15.436 37.281 0 14.089-5.48 27.326-15.436 37.3l-86.338 86.338c-19.911 19.911-54.632 19.949-74.581 0l-67.717-67.717c-10.885-10.866-25.903-13.9-40.088-7.983-14.222 5.897-22.699 18.584-22.699 33.982v95.801c0 29.070-23.647 52.717-52.717 52.717h-122.121c-29.070 0-52.717-23.647-52.717-52.717v-95.801c0-15.398-8.476-28.084-22.699-33.982-14.184-5.935-29.203-2.882-40.088 7.983l-67.717 67.717c-19.949 19.949-54.67 19.911-74.581 0l-86.338-86.338c-9.956-9.956-15.436-23.211-15.436-37.3 0-14.071 5.48-27.307 15.436-37.281l67.736-67.717c10.866-10.885 13.843-25.865 7.964-40.088s-18.584-22.699-33.982-22.699h-95.801c-29.070 0-52.717-23.647-52.717-52.717v-122.103c0-29.089 23.647-52.736 52.717-52.736h95.801c15.398 0 28.084-8.476 33.982-22.699s2.901-29.203-7.964-40.088l-67.736-67.717c-9.956-9.956-15.436-23.211-15.436-37.281 0-14.089 5.48-27.326 15.436-37.3l86.338-86.338c19.93-19.93 54.632-19.968 74.581 0l67.717 67.736c10.885 10.866 25.847 13.862 40.088 7.964 14.222-5.897 22.699-18.584 22.699-33.982v-95.801c0-29.070 23.647-52.717 52.717-52.717h122.103c29.070 0 52.717 23.647 52.717 52.717v95.801c0 15.398 8.476 28.084 22.699 33.982 14.241 5.916 29.203 2.901 40.088-7.964l67.717-67.736c19.949-19.949 54.67-19.911 74.581 0l86.338 86.338c9.956 9.956 15.436 23.211 15.436 37.3 0 14.071-5.48 27.307-15.436 37.281l-67.736 67.717c-10.866 10.885-13.843 25.865-7.964 40.088s18.603 22.699 34.001 22.699h95.801c29.070 0 52.717 23.647 52.717 52.717v122.121c0 29.070-23.647 52.717-52.717 52.717zM986.074 386.939c0-8.154-6.637-14.791-14.791-14.791h-95.801c-30.796 0-57.249-17.673-69.025-46.118-11.795-28.444-5.594-59.657 16.194-81.427l67.736-67.717c5.784-5.784 5.784-15.17 0-20.935l-86.338-86.338c-5.765-5.765-15.151-5.803-20.935 0l-67.717 67.736c-21.788 21.788-52.983 27.951-81.427 16.194-28.444-11.776-46.118-38.229-46.118-69.025v-95.801c0-8.154-6.637-14.791-14.791-14.791h-122.121c-8.154 0-14.791 6.637-14.791 14.791v95.801c0 30.796-17.673 57.249-46.118 69.025-9.538 3.963-19.361 5.897-29.070 5.897-19.228 0-37.869-7.585-52.357-22.073l-67.717-67.736c-5.803-5.803-15.189-5.765-20.935 0l-86.338 86.338c-5.784 5.784-5.784 15.17 0 20.935l67.736 67.717c21.769 21.769 27.989 52.983 16.194 81.427-11.776 28.425-38.229 46.099-69.025 46.099h-95.801c-8.154 0-14.791 6.637-14.791 14.791v122.121c0 8.154 6.637 14.791 14.791 14.791h95.801c30.796 0 57.249 17.673 69.025 46.118 11.795 28.444 5.594 59.657-16.194 81.427l-67.736 67.717c-5.784 5.784-5.784 15.17 0 20.935l86.338 86.338c5.765 5.784 15.151 5.784 20.935 0l67.717-67.717c21.751-21.751 52.945-27.989 81.427-16.194 28.444 11.757 46.118 38.21 46.118 69.006v95.801c0 8.154 6.637 14.791 14.791 14.791h122.103c8.173 0 14.81-6.637 14.81-14.791v-95.801c0-30.796 17.673-57.249 46.118-69.025 28.482-11.795 59.657-5.575 81.427 16.194l67.717 67.717c5.803 5.784 15.189 5.784 20.935 0l86.338-86.338c5.784-5.784 5.784-15.17 0-20.935l-67.736-67.717c-21.769-21.769-27.989-52.983-16.194-81.427 11.776-28.444 38.229-46.118 69.025-46.118h95.801c8.154 0.019 14.791-6.618 14.791-14.772v-122.121zM512 618.667c-94.113 0-170.667-76.553-170.667-170.667s76.553-170.667 170.667-170.667c94.113 0 170.667 76.553 170.667 170.667s-76.553 170.667-170.667 170.667zM512 315.259c-73.178 0-132.741 59.563-132.741 132.741s59.563 132.741 132.741 132.741c73.178 0 132.741-59.563 132.741-132.741s-59.563-132.741-132.741-132.741z" />
diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf
index ab6b20e04..ea6de579c 100755
--- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf
+++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf
Binary files differ
diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff
index cabebb884..5cb900050 100755
--- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff
+++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff
Binary files differ
diff --git a/cds-ui/designer-client/src/assets/icomoon/style.css b/cds-ui/designer-client/src/assets/icomoon/style.css
index fcf806c24..130115635 100755
--- a/cds-ui/designer-client/src/assets/icomoon/style.css
+++ b/cds-ui/designer-client/src/assets/icomoon/style.css
@@ -1,10 +1,10 @@
@font-face {
font-family: 'icomoon';
- src: url('fonts/icomoon.eot?r3i568');
- src: url('fonts/icomoon.eot?r3i568#iefix') format('embedded-opentype'),
- url('fonts/icomoon.ttf?r3i568') format('truetype'),
- url('fonts/icomoon.woff?r3i568') format('woff'),
- url('fonts/icomoon.svg?r3i568#icomoon') format('svg');
+ src: url('fonts/icomoon.eot?pqs8r8');
+ src: url('fonts/icomoon.eot?pqs8r8#iefix') format('embedded-opentype'),
+ url('fonts/icomoon.ttf?pqs8r8') format('truetype'),
+ url('fonts/icomoon.woff?pqs8r8') format('woff'),
+ url('fonts/icomoon.svg?pqs8r8#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
@@ -35,6 +35,12 @@
-moz-osx-font-smoothing: grayscale;
}
+.icon-get_started:before {
+ content: "\e908";
+}
+.icon-user_guide:before {
+ content: "\e909";
+}
.icon-enrich:before {
content: "\e907";
}
diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css
index a482660a8..1464cc295 100644
--- a/cds-ui/designer-client/src/styles.css
+++ b/cds-ui/designer-client/src/styles.css
@@ -963,6 +963,67 @@ height: 40px;
text-decoration: none;
background-color: transparent;
}
+.userMenu.dropdown{
+ margin-left: 9px;
+ border-left: solid 1px #ECEDF2;
+}
+.helpMenu.dropdown{
+ width: 32px !important;
+}
+.helpMenu .dropdown-text{
+ text-indent: unset;
+ text-align: center;
+}
+.helpMenu li:not(:last-child){
+ margin-bottom: 9px;
+}
+.helpMenu .dropdown-text i{
+ text-align: center;
+ font-size: 19px;
+ color: #C3CDDB;
+ vertical-align: middle;
+}
+.helpMenu:hover .dropdown-text i{
+ color: #1B3E6F;
+}
+.helpMenu .dropdown-content{
+ padding: 6px;
+}
+.helpMenu .dropdown-content a{
+ padding: 0 12px;
+ text-align: left;
+ text-indent: 0;
+ font-size: 14px;
+ line-height: 22px;
+}
+.helpMenu .dropdown-content p{
+ display: inline;
+ line-height: 15px;
+ font-weight: bold;
+}
+.helpMenu .dropdown-content p:hover{
+ cursor: pointer;
+}
+.helpMenu .dropdown-content p label{
+ display: inline;
+}
+.helpMenu .dropdown-content p input{
+ display: none;
+}
+.helpMenu .dropdown-content span{
+ display: inline-block;
+ padding-left: 18px;
+ font-size: 13px;
+ color: #C1CDDD;
+ font-weight: normal;
+}
+.helpMenu .dropdown-toggle:focus ~ .dropdown-text{
+ background-color: #F4F9FE;
+ border-radius: 50%;
+}
+.helpMenu .dropdown-content{
+ width: 262px;
+}
.help-btn{
border-right: solid 1px #ECEDF2;
}
@@ -3284,29 +3345,35 @@ table.dataTable.no-footer{
-/* panel layout mechanics */
-.panel-wrap {
+/* Package Wizard panel */
+.packageWizard.panel-wrap{
position: fixed;
top: 100px;
bottom: 0;
right: 0;
- width: 300px;
- height: 180px;
+ width: 350px;
+ height: 200px;
transform: translateX(100%);
transition: .3s ease-out;
z-index: 2000;
}
-.panel {
+.packageWizard .panel{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
- background: #333;
- color: #eee;
overflow: auto;
- padding: 1em;
- font-size: 13px;
+ padding: 20px;
+ padding-top: 9px;
+ background: #fff;
+ color: #1B3E6F;
+ border-top: solid 6px #1273EB;
+ box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.18) !important;
+ border-radius: 3px !important;
+ /* border-top-right-radius: 0 !important;
+ border-bottom-right-radius: 0 !important; */
+ text-align: center;
}
/* simulate panel state control --
@@ -3318,14 +3385,73 @@ for simplicity
[type="checkbox"]:checked ~ .panel-wrap {
transform: translateX(0%);
}
-
-
-
-
-
-
-
-
+.packageWizard h3{
+ margin-bottom: 15px;
+ font-weight: bold !important;
+ font-size: 16px;
+}
+.packageWizard p{
+ margin-bottom: 12px;
+ font-size: 14px;
+}
+.packageWizard span{
+ font-size: 13px;
+ color: #C3CDDB;
+}
+.startTour{
+ margin-top: 15px;
+ padding: 9px 21px;
+ font-weight: bold;
+ font-size: 12px;
+ border: 0;
+ border-radius: 18px;
+ background-color: #1273EB;
+ color: #fff;
+}
+.closeWizard{
+ margin-top: 12px;
+ border: 0;
+ background: none;
+ font-weight: normal;
+ color: #1273EB;
+ font-size: 12px;
+}
+/*Wizard Content*/
+.mat-menu-panel{
+ box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.18) !important;
+ border-radius: 3px !important;
+ border-bottom: solid 3px #1273EB;
+}
+.mat-menu-panel::after {
+ content: '';
+ display: block;
+ width: 0;
+ height: 0;
+ position: absolute;
+ border-left: 8px solid transparent;
+ border-right: 8px solid transparent;
+ border-bottom: 8px solid #fff;
+ left: 9px;
+ top: -8px;
+}
+.mat-card{
+ background: #fff !important;
+ color: #1B3E6F !important;
+ font-family: inherit !important;
+ border-radius: 0 !important;
+}
+.mat-card-content,
+.mat-card-subtitle{
+ font-size: 13px;
+}
+.mat-card-title{
+ margin-bottom: 9px !important;
+ font-weight: bold !important;
+ font-size: 16px !important;
+}
+.mat-icon-button[disabled]{
+ color: rgba(27, 62, 111, .5) !important;
+}