From 663e41d4d8a167cf307a385a5c750f7424205012 Mon Sep 17 00:00:00 2001 From: Sarah Abouzainah Date: Sun, 6 Sep 2020 21:02:08 +0200 Subject: Add Help menu and Update Wizard style Issue-ID: CCSDK-2705 Issue-ID: CCSDK-2709 Signed-off-by: Sarah Abouzainah Change-Id: I7526e5056c50f2e090d06ad6a6f0d7ca729d8340 --- cds-ui/designer-client/proxy.conf.json | 4 +- .../configuration-dashboard.component.html | 86 ++++++----- .../package-creation.component.html | 69 ++++----- .../package-list/package-list.component.html | 4 +- .../packages-dashboard.component.html | 28 ++-- .../packages-dashboard.component.ts | 29 +++- .../packages-header/packages-header.component.html | 117 +++++++-------- .../src/assets/icomoon/fonts/icomoon.eot | Bin 22816 -> 23448 bytes .../src/assets/icomoon/fonts/icomoon.svg | 2 + .../src/assets/icomoon/fonts/icomoon.ttf | Bin 22652 -> 23284 bytes .../src/assets/icomoon/fonts/icomoon.woff | Bin 22732 -> 23364 bytes .../designer-client/src/assets/icomoon/style.css | 16 ++- cds-ui/designer-client/src/styles.css | 160 ++++++++++++++++++--- 13 files changed, 327 insertions(+), 188 deletions(-) (limited to 'cds-ui') diff --git a/cds-ui/designer-client/proxy.conf.json b/cds-ui/designer-client/proxy.conf.json index 4e8ef0aab..17de0a74f 100644 --- a/cds-ui/designer-client/proxy.conf.json +++ b/cds-ui/designer-client/proxy.conf.json @@ -1,12 +1,12 @@ { "/controllerblueprint/*": { - "target": "https://localhost:3000", + "target": "https://41.128.168.198:3000", "secure": false, "logLevel": "debug", "changeOrigin": true }, "/resourcedictionary/*": { - "target": "https://localhost:3000", + "target": "https://41.128.168.198:3000", "secure": false, "logLevel": "debug", "changeOrigin": true 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 @@
-
+

    @@ -13,52 +13,45 @@

- +
-
User name
+
- - --> -
+ + + +
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 @@
-
+

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 @@
Import Package + class="icon-import-blue" aria-hidden="true">Import Package
@@ -120,4 +120,4 @@
- \ No newline at end of file + 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 @@ -
+
+
+

Welcome to CDS Designer UI

+

CDS has new look and new way of delivering a reusable and simplified self-service experience.

+ + + - -

Welcome to CDS

-

Want a tour? Our helpful guide will introduce you to new CDS Designer UI.

-
-
\ No newline at end of file + 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 @@
-
-

CBA Packages - ({{numberOfPackages}} packages) -

-
- - +
+ +
+ --> -
+ +
+ +
+ +
+ +
+ +
+
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 Binary files a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot and b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot 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 @@ + + 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 Binary files a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf and b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf 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 Binary files a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff and b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff 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; +} -- cgit 1.2.3-korg