diff options
Diffstat (limited to 'cds-ui/designer-client/src')
14 files changed, 339 insertions, 197 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> diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot Binary files differindex 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 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="" 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="" glyph-name="icon-rectangle" d="M0 960h1024v-1024h-1024v1024z" /> <glyph unicode="" 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="" 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="" 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="" 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="" 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="" 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 Binary files differindex 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 diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff Binary files differindex 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 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; +} |
