From 986008360e1b6385c8ec8c5bd8ab30719acb7b66 Mon Sep 17 00:00:00 2001 From: Sarah Abouzainah Date: Wed, 22 Apr 2020 22:55:39 +0200 Subject: Fix long package name and apply mapping table style Issue-ID: CCSDK-2321 Issue-ID: CCSDK-2322 Signed-off-by: Sarah Abouzainah Change-Id: Id2edf759faa9949c009c90cd3c7b319521b4f6b5 --- cds-ui/designer-client/angular.json | 18 +-- cds-ui/designer-client/package-lock.json | 37 +++++ cds-ui/designer-client/package.json | 1 + cds-ui/designer-client/src/app/app.module.ts | 3 +- .../configuration-dashboard.component.html | 2 +- .../metadata-tab/metadata-tab.component.html | 2 +- .../package-creation.component.html | 2 +- .../templ-mapp-creation.component.html | 16 +- .../package-list/package-list.component.html | 177 +++++++++++---------- .../shared-modules/shared-modules.module.ts | 4 +- cds-ui/designer-client/src/styles.css | 110 ++++++++++--- 11 files changed, 240 insertions(+), 132 deletions(-) diff --git a/cds-ui/designer-client/angular.json b/cds-ui/designer-client/angular.json index a84b95e39..256c35c1e 100644 --- a/cds-ui/designer-client/angular.json +++ b/cds-ui/designer-client/angular.json @@ -61,10 +61,12 @@ }, "configurations": { "production": { - "fileReplacements": [{ - "replace": "src/environments/environment.ts", - "with": "src/environments/environment.prod.ts" - }], + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], "optimization": true, "outputHashing": "all", "sourceMap": false, @@ -74,7 +76,8 @@ "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, - "budgets": [{ + "budgets": [ + { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" @@ -122,10 +125,7 @@ "./node_modules/@angular/material/prebuilt-themes/purple-green.css", "./node_modules/font-awesome/css/font-awesome.css" ], - "scripts": [ - - - ] + "scripts": [] } }, "lint": { diff --git a/cds-ui/designer-client/package-lock.json b/cds-ui/designer-client/package-lock.json index 9df5d033f..46997c4ab 100644 --- a/cds-ui/designer-client/package-lock.json +++ b/cds-ui/designer-client/package-lock.json @@ -361,6 +361,8 @@ "dev": true, "optional": true, "requires": { + "bindings": "^1.5.0", + "nan": "^2.12.1", "node-pre-gyp": "*" }, "dependencies": { @@ -2998,6 +3000,16 @@ "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==", "dev": true }, + "bindings": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", + "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", + "dev": true, + "optional": true, + "requires": { + "file-uri-to-path": "1.0.0" + } + }, "blob": { "version": "0.0.5", "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.5.tgz", @@ -5142,6 +5154,13 @@ "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.2.tgz", "integrity": "sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw==" }, + "file-uri-to-path": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", + "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", + "dev": true, + "optional": true + }, "fileset": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/fileset/-/fileset-2.0.3.tgz", @@ -6751,6 +6770,8 @@ "dev": true, "optional": true, "requires": { + "bindings": "^1.5.0", + "nan": "^2.12.1", "node-pre-gyp": "*" }, "dependencies": { @@ -8015,6 +8036,13 @@ "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz", "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==" }, + "nan": { + "version": "2.14.1", + "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.1.tgz", + "integrity": "sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==", + "dev": true, + "optional": true + }, "nanomatch": { "version": "1.2.13", "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz", @@ -8060,6 +8088,11 @@ "brace": "^0.11.1" } }, + "ngx-bootstrap": { + "version": "5.6.1", + "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-5.6.1.tgz", + "integrity": "sha512-8fDs3VaaWgKpupakPKS0QaUc+1E/JMBGJDxUUODjyIkLtFr1A8vH4cjXiV3AfrPvhK27GH0oyTPyKWKcCjEtVg==" + }, "ngx-file-drop": { "version": "8.0.8", "resolved": "https://registry.npmjs.org/ngx-file-drop/-/ngx-file-drop-8.0.8.tgz", @@ -11575,6 +11608,8 @@ "dev": true, "optional": true, "requires": { + "bindings": "^1.5.0", + "nan": "^2.12.1", "node-pre-gyp": "*" }, "dependencies": { @@ -12405,6 +12440,8 @@ "dev": true, "optional": true, "requires": { + "bindings": "^1.5.0", + "nan": "^2.12.1", "node-pre-gyp": "*" }, "dependencies": { diff --git a/cds-ui/designer-client/package.json b/cds-ui/designer-client/package.json index ffad818c0..ec968ba7a 100644 --- a/cds-ui/designer-client/package.json +++ b/cds-ui/designer-client/package.json @@ -41,6 +41,7 @@ "lodash": "^4.17.15", "ng-sidebar": "^9.1.1", "ng2-ace-editor": "^0.3.9", + "ngx-bootstrap": "^5.6.1", "ngx-file-drop": "^8.0.8", "rxjs": "~6.4.0", "stream": "0.0.2", diff --git a/cds-ui/designer-client/src/app/app.module.ts b/cds-ui/designer-client/src/app/app.module.ts index d6e9b36df..da7ddfbd0 100644 --- a/cds-ui/designer-client/src/app/app.module.ts +++ b/cds-ui/designer-client/src/app/app.module.ts @@ -35,6 +35,7 @@ import {SharedModulesModule} from './modules/shared-modules/shared-modules.modul import {NgxFileDropModule} from 'ngx-file-drop'; import {ResourceDictionaryModule} from './modules/feature-modules/resource-dictionary/resource-dictionary.module'; + @NgModule({ declarations: [ AppComponent, @@ -51,7 +52,7 @@ import {ResourceDictionaryModule} from './modules/feature-modules/resource-dicti SharedModulesModule, NgxFileDropModule, ResourceDictionaryModule, - SidebarModule + SidebarModule, ], providers: [ApiService], 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 1ff03b221..ceb2bd497 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 @@ -23,7 +23,7 @@
- + Save 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 de2b3831d..6622f6700 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,7 +62,7 @@
-
Seprate tags with comma or space
+
Use ENTER to add tag
{{tag}} 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 1253dc10b..ee4368711 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 @@ -20,7 +20,7 @@
- + Save diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html index a33087461..16c3101f2 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html @@ -58,7 +58,7 @@ Import File
-
+
@@ -87,7 +87,7 @@ class="mapping-source-load">
-
Upload attribute list
+
Upload Attributes List
(Should be comma delimited file)
-
-
-
-
- - - {{bluePrint.artifactName}}.vLB.CDS - Version 1.0.2 - - -
-
+
+
+
+
+ + +

+ {{bluePrint.artifactName}}.vLB.CDS

+ V 1.0.2 + -
- -
- - -
- -
- -
-
-
-

Last modified {{ bluePrint.createdDate | date:'short' }} -

-

By {{bluePrint.updatedBy}}

-

Description text quisquam est dolorem, velit...

- -
    -
  • - +
    +
    + +
    + + +
    +
    +
    -
    -
    -
    -
    +
    +
    +

    Last modified {{ bluePrint.createdDate | date:'short' }} +

    +

    By {{bluePrint.updatedBy}}

    +

    Description text quisquam est dolorem, velitThe standard chunk of Lorem + Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and + 1.10.33 from de Finibus Bonorum et

    +
      +
    • + -
    -
    - -
    +
    • +
  • + +
    • +
  • + +
    • +
  • + 5 contributors +
    • +
+
+
+
+
+
+ +
+
+
-
+ +
\ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/shared-modules/shared-modules.module.ts b/cds-ui/designer-client/src/app/modules/shared-modules/shared-modules.module.ts index 7229891f5..7663fb8dc 100644 --- a/cds-ui/designer-client/src/app/modules/shared-modules/shared-modules.module.ts +++ b/cds-ui/designer-client/src/app/modules/shared-modules/shared-modules.module.ts @@ -2,13 +2,15 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { HeaderComponent } from './header/header.component'; import { RouterModule } from '@angular/router'; +import { TooltipModule } from 'ngx-bootstrap/tooltip'; @NgModule({ declarations: [HeaderComponent], imports: [ CommonModule, RouterModule, + TooltipModule.forRoot(), ], - exports : [HeaderComponent] + exports : [HeaderComponent, TooltipModule, ] }) export class SharedModulesModule { } diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css index b44a36235..0f79bc1b7 100644 --- a/cds-ui/designer-client/src/styles.css +++ b/cds-ui/designer-client/src/styles.css @@ -470,13 +470,14 @@ height: 40px; } .packages-card .card-title{ margin-bottom: 0 !important; - font-size: 15px; + font-size: 13px; font-weight: bold; color: #1B3E6F; } .packages-card .card-title span{ color: #1B3E6F; font-size: 11px; + vertical-align: bottom; } .packages-card p{ font-size: 12px; @@ -485,6 +486,10 @@ height: 40px; .packages-card p.package-desc{ font-size: 13px; text-align: left; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + overflow: hidden; } .packages-card p.package-desc:hover{ color: #1B3E6F !important; @@ -1046,10 +1051,23 @@ height: 40px; } .packages-card .card-title{ margin-bottom: 0 !important; - font-size: 15px; + font-size: 14px; font-weight: bold; } -.packages-card .card-title:hover{ +.packages-card .card-title .packageName{ + margin-bottom: 0; + display: inline-block; + width: auto; + max-width: 76%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-size: 13px; + vertical-align: bottom; + color: #1B3E6F; +} +.packages-card .card-title:hover, +.packages-card .card-title:hover .packageName{ text-decoration: none; color: #1273EB; } @@ -1157,10 +1175,13 @@ height: 40px; background: #1B3E6F; box-shadow: none; } +.package-version{ + color: #C3CDDB !important; +} .package-version::before{ content: "|"; - margin-left: 12px; - margin-right: 10px; + margin-left: 8px; + margin-right: 6px; vertical-align: text-bottom; } @@ -1579,6 +1600,32 @@ ul.package-contributers{ margin-left: 0; margin-bottom: -16px; } + +/*TooltipModule - Shady*/ +.tooltip:before, +.tooltip:after{ + width: 100% !important; +} +.tooltip .tooltip-inner{ + max-width: 280px !important; + width: 100% !important; + text-align: left!important; + color:#1B3E6F; + background-color: #F4F9FE; + border: solid 1px #E6EDF5; + border-radius: 3px !important; + font-size: 11px; +} +.bs-tooltip-bottom .arrow::before{ + border-bottom-color: #E6EDF5 !important; +}
 +.bs-tooltip-top .arrow::before{ + border-top-color: #E6EDF5 !important; +}
 + + + + .btn{ padding-right: 20px !important; padding-left: 20px !important; @@ -1911,6 +1958,9 @@ hr{ font-size: 11px; color: #C3CDDB; } +.action-button.save{ + color: #1273EB; +} .action-button.delete{ color: #BABBC3; } @@ -2494,6 +2544,8 @@ margin-right: 5px; } .template-mapping-action button{ border-radius: 50px; + padding: 6px 20px; + font-size: 14px; } .template-mapping-action .btn-primary{ background:#5DBDBA !important ; @@ -2521,22 +2573,22 @@ margin-right: 5px; .dataTables_empty { display: none; } -#DataTables_Table_0_length, -#DataTables_Table_0_filter{ +.dataTables_length, +.dataTables_filter{ margin-bottom: 6px; - color: #1B3E6F; + color: #1B3E6F !important; font-size: 13px; font-weight: bold; } -#DataTables_Table_0_filter input{ +.dataTables_filter input{ color: #1B3E6F; background: url(../src/assets/img/icon-search.svg) 9px center no-repeat; padding: 4px 9px 4px 24px; border: solid 1px #ECEDF2; border-radius: 4px; } -#DataTables_Table_0_filter input:focus{ +.dataTables_filter input:focus{ box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1); } #mapping-table th, @@ -2565,41 +2617,45 @@ table.dataTable.no-footer{ margin-bottom: 9px; border-bottom: solid 1px #ECEDF2 !important; } -#DataTables_Table_0_info{ +.dataTables_info{ padding-top: 12px; - color: #1B3E6F; + color: #1B3E6F !important; font-size: 13px; font-weight: bold; } -#DataTables_Table_0_paginate, -#DataTables_Table_0_paginate a{ +.dataTables_wrapper .dataTables_paginate, +.dataTables_wrapper .dataTables_paginate a.paginate_button, +.dataTables_wrapper .dataTables_paginate a.paginate_button.current, +.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled{ margin-bottom: 3px; color: #1B3E6F !important; font-size: 13px; font-weight: bold; + border: 0 !important; } -#DataTables_Table_0_paginate .paginate_button, -#DataTables_Table_0_paginate .paginate_button:hover{ +.dataTables_wrapper .dataTables_paginate a.paginate_button:hover{ border: 0; - background: none; + color: #1B3E6F !important; + background: none !important; } -.dataTables_wrapper .dataTables_paginate .paginate_button{ +.dataTables_wrapper .dataTables_paginate a.paginate_button{ padding: 0.4em .9em !important; } -#DataTables_Table_0_paginate .paginate_button.current{ +.dataTables_wrapper .dataTables_paginate a.paginate_button.current{ color: #1B3E6F !important; background: #F4F9FE !important; - border: solid 1px #EEF4F9; + border: solid 1px #EEF4F9 !important; border-radius: 100% !important; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1); outline: 0; } -#DataTables_Table_0_paginate a.paginate_button.disabled{ +.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled{ opacity: .6; - } -#DataTables_Table_0_paginate a.paginate_button.disabled:hover{ +.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled:hover{ cursor: default; + background: none !important; + border: 0 !important; } #mapping-table .form-control, #mapping-table .custom-select{ @@ -2620,7 +2676,13 @@ table.dataTable.no-footer{ background-color: #F4F9FE; color: #1B3E6F; } - +#mapping-table .form-control:disabled{ + padding-left: 0; + box-shadow: none; + border: 0; + background: transparent; + color: #1B3E6F; +} /* Extra small devices (portrait phones, less than 576px) */ @media (max-width: 575.98px) { .page-title{ -- cgit 1.2.3-korg