From 663e41d4d8a167cf307a385a5c750f7424205012 Mon Sep 17 00:00:00 2001 From: Sarah Abouzainah Date: Sun, 6 Sep 2020 21:02:08 +0200 Subject: [PATCH] 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(-) 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 7c88462a248a7a7776ad928552988338016c727d..0ef083807449c38979bd968ab016db593d65329d 100755 GIT binary patch delta 1441 zcmZWpYitx%6h3F}Ja)Rscc$GUYj?L>Qg%zR%R>s=Ds;hOfCf-B6e^TR zh_U`K{4j*r+=SO3G!jE%LX0JtC^3jJAqEqFC^15aF~&aUluvI1_;YMVE{f&5s|qs%hs_T<)&al`0P(@_rfja=qv!zAbz0lG zYhrxzyK^^RocTUHJ>#7H6hM9eFnnY0p7GuGOYfEeY7Ja*FD>{DZ6ClEN+Gp(V(Q2@ zQ^H!xQvkSi-+^7@>8KV3*!mjPFHVdfnS^7)C4lFaQXbzwKC$P_di7t*HxT~V8xS;)V35h_4^{e)V>udoEJ=66_Rb!Ab#p%I`x4=!5sQfD{l@D#KzbZc}>Wuc>IzE{JE9{!mW!UF$6dV=M_$8Srap{DbG+Pe-pXkTFc?^*y% zVm5ct4UR>1FYO+wvKa&z1tuQklk$70a-XtE4eLMZx9G@`kB@fFo>AU+Oyk3=BCxAa zf(`I8-3m)-Lq(={KD40`#k`@&x`8yw6<4C+(~X=?)81llKhn?)cEK`P8=6VWwhFz) zoT2*^e568bBKI}GO-8}Ck_!8Es5(4-vQjA)a`_!yU1>=Wuth%alTk(wbBLnCjDRX5 z6GWAzBjFCG6U*J*YdjvorGDAo;q%+=@px=&EFPb$YF=;B3;p;)P$9Ig(juKL?< zdgeROP(P<-GGmsdN-mKxWKLJo>(xl#vVe{N9y!?pLApc<$ioOc4?6*RH8UyuwSHWI z={_{HgqCO;k;i<{Zz>6Y!kg$xEW@4z;e2|YrnZ;=UJ6Z{{+w?3WOB8~DjH@_{&IJ5 zquv*<2ro#gH1`F1T7pZ~XO|V~$FEeQ=76zYN?udXemCMxGk&6>1_~#8dnY zMdW{vni4i(JW#to`iJzUEXc1b|2QtIZnfsDwbtARy(bKP$?4F|@X~NKsz*nnU&X4i u{jm$N2k|S3Qu3I2)V!S1Q7*sv4!dHXwQt+MkSNkuo87+U8vX~wr3tG5 delta 858 zcmZWnT}V@L6hHs_vAe0cwJ&#f_i?vtQy;|AQZp+nHPg)HMotQJZIVROl}0`U`5-=o zRO9%N4}lO#)Jv#f57JYFffz+bS;%^ih{9g-p)<`f=;6=d_i@he{?Gs3UtrU-Os94O z+>E4j)xtt-HH}}pt*LNSOO;vyU>QKz>;1yd_j>|#0HgYxMBJX1-aGiHI z9naA-GaU5I$8tCeC7Zww4X`VlmPsn6Sx%}Z>N$!Hf|nh^UZIQ~#@m9M)#GD9V~6m& zARF|w6P5N+N65zxqDfTvS})<*|*Oiubx|xUfJS zh@+Ao;}H$-Mt+`O7F%>LrBP{3ujZ)*s + + 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 ab6b20e0415c974502fc0886da34a58c230a7203..ea6de579c0eaad5712cb60ee31225bc5957d8aef 100755 GIT binary patch delta 1427 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 delta 848 zcmYjQT}V@L6hHs_xw)ltbDwwH-Q8?DN~ZQ@xxRIoW|~`V(Sxoj4QVPR=tGc!_|Qwp z=_M!%A|J$uQn8na9wZ8eMPN{Y>>+ycDX^DbI(O#q!jC`acYf#m?z#8;S65i!6?07V z#N)t#o^%1srSlFj)MUr({_1_R^))?-XfuH1qSSznDyyty^O-T?CMhoHSby?0Gn@0@ z?IuO{K>x^MeQqc-2#{Q$>|q_@Pv#prB8mG+ajg!!vwAp}AEz#t4FIfH$A@t)eseTS zx+`hY%3AUZK2~d@D$!(HQN!YF(7E6W@k8 zUSntRKJSa1*_GEjyQu2)F3v{pV*v-8!q2?IPU0r7vJ+?)BI z!=w=6Tfu^F1*ggIpFLKJ-SW2PD83OCzGYj(By1ElQKDa2s==seV24QIc8hS3=GpnW zR&w%@M-3dnVNqetI3qT&CR`RHtPwXvRgHq7thUfhHrhP_`hbH3@WKRorRPk>cT&RW zacnrg0Z+SlFBMs8m*)&iDeK2JZ*e{Qy1y#61txtN0Dd%Nw{}j9rH*h(fhrzgqijY? zI)tt1-`5IahqNkB$=?luihwy#6|<)8MfY{jGtVEz)2lDoKS8yka{vGU 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; +} -- 2.16.6