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/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 ++++++++++--- 8 files changed, 193 insertions(+), 123 deletions(-) (limited to 'cds-ui/designer-client/src') 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