From 16a9fce0e104a38371a9e5a567ec611ae3fc7f33 Mon Sep 17 00:00:00 2001 From: ys9693 Date: Sun, 19 Jan 2020 13:50:02 +0200 Subject: Catalog alignment Issue-ID: SDC-2724 Signed-off-by: ys9693 Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe --- catalog-ui/src/assets/styles/app.less | 41 +--------- catalog-ui/src/assets/styles/global.less | 9 +++ catalog-ui/src/assets/styles/images/favicon.png | Bin 0 -> 6364 bytes .../splashScreen/splashscreen_logo_and_text.png | Bin 0 -> 28515 bytes catalog-ui/src/assets/styles/layout/main.less | 7 ++ catalog-ui/src/assets/styles/mixins.less | 4 +- catalog-ui/src/assets/styles/mixins_old.less | 5 +- .../src/assets/styles/notification-template.less | 53 ------------ catalog-ui/src/assets/styles/override.less | 53 +++--------- .../src/assets/styles/sprite-resource-icons.less | 8 +- catalog-ui/src/assets/styles/table-flex.less | 23 +++--- catalog-ui/src/assets/styles/table-style.less | 89 +++++++++++++++++++++ 12 files changed, 140 insertions(+), 152 deletions(-) create mode 100644 catalog-ui/src/assets/styles/images/favicon.png create mode 100644 catalog-ui/src/assets/styles/images/splashScreen/splashscreen_logo_and_text.png delete mode 100644 catalog-ui/src/assets/styles/notification-template.less create mode 100644 catalog-ui/src/assets/styles/table-style.less (limited to 'catalog-ui/src/assets/styles') diff --git a/catalog-ui/src/assets/styles/app.less b/catalog-ui/src/assets/styles/app.less index 0738c460e7..26ddc4677f 100644 --- a/catalog-ui/src/assets/styles/app.less +++ b/catalog-ui/src/assets/styles/app.less @@ -2,15 +2,11 @@ width: 100%; height: 100%; } - @import 'variables.less'; @import 'variables-old.less'; @import 'mixins.less'; @import 'mixins_old.less'; @import 'global.less'; -@import '../../../node_modules/sdc-ui/css/style.css'; -/* @import '../../../node_modules/sdc-ui/css/theme_1802.css'; */ - @import 'sprite-old.less'; @import 'sprite.less'; @import 'sprite-resource-icons.less'; @@ -18,7 +14,6 @@ @import 'sprite-group-icons.less'; @import 'sprite-policy-icons.less'; @import 'archive-resouce.less'; - @import 'animation.less'; @import 'buttons.less'; @import 'dark-header.less'; @@ -38,7 +33,7 @@ @import 'tooltips.less'; @import 'welcome-sprite.less'; @import 'welcome-style.less'; -@import 'notification-template.less'; +@import '../../app/view-models/shared/notification-template.less'; @import 'tables.less'; // Less insides specific files. @@ -48,9 +43,6 @@ @import '../../app/directives/elements/radiobutton/radiobutton.less'; @import '../../app/directives/ellipsis/ellipsis-directive.less'; @import '../../app/directives/file-upload/file-upload.less'; -@import '../../app/directives/graphs-v2/composition-graph/composition-graph.less'; -@import '../../app/directives/graphs-v2/deployment-graph/deployment-graph.less'; -@import '../../app/directives/graphs-v2/palette/palette.less'; @import '../../app/directives/capabilities-and-requirements/capabilities-requirements-list.less'; @import '../../app/directives/info-tooltip/info-tooltip.less'; @import '../../app/directives/inputs-and-properties/inputs/input-row.less'; @@ -77,45 +69,14 @@ @import '../../app/view-models/admin-dashboard/admin-dashboard.less'; @import '../../app/view-models/admin-dashboard/category-management/category-management.less'; @import '../../app/view-models/admin-dashboard/user-management/user-management.less'; -@import '../../app/view-models/catalog/catalog.less'; -@import '../../app/view-models/dashboard/dashboard.less'; @import '../../app/view-models/dcae-app/dcae-app.less'; -@import '../../app/view-models/forms/artifact-form/artifact-form.less'; -@import '../../app/view-models/forms/env-parameters-form/env-parameters-form.less'; @import '../../app/view-models/forms/property-forms/base-property-form/property-form-base.less'; @import '../../app/view-models/forms/property-forms/select-datatype-modal/select-datatype-modal.less'; -@import '../../app/view-models/forms/resource-instance-name-form/resource-instance-name.less'; -@import '../../app/view-models/modals/confirmation-modal/confirmation-modal.less'; -@import '../../app/view-models/modals/email-modal/email-modal.less'; @import '../../app/view-models/modals/error-modal/error.less'; -@import '../../app/view-models/modals/message-modal/message-client-modal/client-message-modal.less'; -@import '../../app/view-models/modals/message-modal/message-server-modal/server-message-modal.less'; -@import '../../app/view-models/modals/onboarding-modal/onboarding-modal.less'; @import '../../app/view-models/modals/icons-modal/icons-modal-view.less'; @import '../../app/view-models/onboard-vendor/onboard-vendor.less'; -@import '../../app/view-models/plugins/plugins-tab.less'; -@import '../../app/view-models/support/support.less'; -@import '../../app/view-models/tabs/general-tab.less'; -@import '../../app/view-models/tabs/hierarchy/hierarchy.less'; -@import '../../app/view-models/tutorial-end/tutorial-end.less'; -@import '../../app/view-models/workspace/tabs/activity-log/activity-log.less'; -@import '../../app/view-models/workspace/tabs/attributes/attributes.less'; -@import '../../app/view-models/workspace/tabs/composition/composition.less'; -@import '../../app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts.less'; -@import '../../app/view-models/workspace/tabs/composition/tabs/details/details.less'; -@import '../../app/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties.less'; -@import '../../app/view-models/workspace/tabs/composition/tabs/relations/relations.less'; -@import '../../app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts.less'; -@import '../../app/view-models/workspace/tabs/deployment/deployment.less'; -@import '../../app/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal.less'; -@import '../../app/view-models/workspace/tabs/distribution/distribution.less'; @import '../../app/view-models/workspace/tabs/general/general.less'; -@import '../../app/view-models/workspace/tabs/information-artifacts/information-artifacts.less'; -@import '../../app/view-models/workspace/tabs/inputs/inputs.less'; @import '../../app/view-models/workspace/tabs/properties/properties.less'; -@import '../../app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities.less'; -@import '../../app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts.less'; @import '../../app/view-models/workspace/tabs/interface-operation/interface-operation.less'; @import '../../app/view-models/workspace/workspace.less'; -@import '../../app/view-models/workspace/tabs/plugins/plugins-context.less'; @import 'override.less'; diff --git a/catalog-ui/src/assets/styles/global.less b/catalog-ui/src/assets/styles/global.less index 29e244e1a0..f70fc441b4 100644 --- a/catalog-ui/src/assets/styles/global.less +++ b/catalog-ui/src/assets/styles/global.less @@ -51,3 +51,12 @@ html { } } + +*[hidden] { + display: none !important; +} + +.sdc-tooltip { + max-width: 300px; + word-wrap: break-word; +} diff --git a/catalog-ui/src/assets/styles/images/favicon.png b/catalog-ui/src/assets/styles/images/favicon.png new file mode 100644 index 0000000000..6e9f04df69 Binary files /dev/null and b/catalog-ui/src/assets/styles/images/favicon.png differ diff --git a/catalog-ui/src/assets/styles/images/splashScreen/splashscreen_logo_and_text.png b/catalog-ui/src/assets/styles/images/splashScreen/splashscreen_logo_and_text.png new file mode 100644 index 0000000000..27d4b7b94a Binary files /dev/null and b/catalog-ui/src/assets/styles/images/splashScreen/splashscreen_logo_and_text.png differ diff --git a/catalog-ui/src/assets/styles/layout/main.less b/catalog-ui/src/assets/styles/layout/main.less index 4dfeb8b46d..0d21cf5e7c 100644 --- a/catalog-ui/src/assets/styles/layout/main.less +++ b/catalog-ui/src/assets/styles/layout/main.less @@ -62,6 +62,7 @@ display: flex; flex-wrap: wrap; flex-direction: row; + } .sdc-loading-page { @@ -159,3 +160,9 @@ } } +//temporary fix. should be removed after converting all the modals to onap-ui modals +sdc-modal{ + .sdc-modal, .modal-background{ + z-index: 1050; + } +} diff --git a/catalog-ui/src/assets/styles/mixins.less b/catalog-ui/src/assets/styles/mixins.less index 43bd2a5f44..5938b82245 100644 --- a/catalog-ui/src/assets/styles/mixins.less +++ b/catalog-ui/src/assets/styles/mixins.less @@ -246,7 +246,6 @@ } } - .square-icon() { display: inline-block; background-color: @main_color_a; @@ -279,3 +278,6 @@ font-size: 30px; } } + + /* Added by ikram - */ +// .s_1 {.font-color > .s; .font-type > ._1;} diff --git a/catalog-ui/src/assets/styles/mixins_old.less b/catalog-ui/src/assets/styles/mixins_old.less index 0e32684282..3f9a970d84 100644 --- a/catalog-ui/src/assets/styles/mixins_old.less +++ b/catalog-ui/src/assets/styles/mixins_old.less @@ -1,3 +1,4 @@ +@import "variables-old"; @import "variables"; .font-color { @@ -246,8 +247,8 @@ .s_1 {.font-color > .s; .font-type > ._1;} .s_10 { - .font-color > .s; - .font-type > ._10; + .font-color > .s; + .font-type > ._10; } .s_12 {.font-color > .s; .font-type > ._12;} diff --git a/catalog-ui/src/assets/styles/notification-template.less b/catalog-ui/src/assets/styles/notification-template.less deleted file mode 100644 index 5baf10d411..0000000000 --- a/catalog-ui/src/assets/styles/notification-template.less +++ /dev/null @@ -1,53 +0,0 @@ -.notification-container{ - display: flex; - padding: 15px 11px; - float: left; - .icon-container{ - flex-grow: 1; - margin-right: 20px; - .icon-circle{ - background-color: black; - height: 40px; - width: 40px; - border-radius: 50%; - display: flex; - align-items: center; - margin-right: 0; - background-color: rgba(255, 255, 255, 0.3); - .icon{ - margin: 0 auto; - display: block; - } - } - } - .msg-content{ - flex-grow: 3; - h3{ - border-bottom: none; - font-weight: 400; - .f-type._18_m; - } - .message{ - font-weight: 300; - .f-type._14_m; - } - } -} -.ui-notification.success{ - background-color: @main_color_d; - .icon{ - .notification-success-icon; - } -} -.ui-notification.error{ - background-color: @func_color_q; - .icon{ - .notification-error-icon; - } -} -.ui-notification.info{ - background-color: @main_color_a; - .icon{ - .notification-process-icon; - } -} diff --git a/catalog-ui/src/assets/styles/override.less b/catalog-ui/src/assets/styles/override.less index 960be234f9..ae8fc4219e 100644 --- a/catalog-ui/src/assets/styles/override.less +++ b/catalog-ui/src/assets/styles/override.less @@ -22,51 +22,18 @@ @sdcui_color_purple: #9063cd; @sdcui_color_light-purple: #caa2dd; -/* override sdc-ui library tabs */ -body.composition { - - .sdc-tabs { - .sdc-tab { - background-color: @sdcui_color_white; - border: 1px solid @sdcui_color_silver; - border-left: none; - display: inline-block; - height: 36px; - text-align: center; - cursor: pointer; - padding: 2px 10px 0 10px; - margin: 0; - - - &:first-child { - border-left: 1px solid @sdcui_color_silver; - } - &.sdc-tab-active { - background-color: @sdcui_color_silver; - } - &[disabled] { - opacity: 0.3; - cursor: default; - } - } - &.sdc-tabs-header { - .sdc-tab { - font-size: 24px; - } - } - &.sdc-tabs-menu { - .sdc-tab { - font-size: 14px; - padding: 0px 10px 4px 10px; - } - } - .sdc-tab-content { - margin-top: 0; - } - } - +.sdc-modal .sdc-modal__wrapper .sdc-modal__header { + height:auto; } //override sdc-ui version 53 css, used by onboarding. This can be removed after we update past version 42 sdc-modal { position: static !important; } + +.sdc-modal .sdc-modal__wrapper .sdc-modal__header { + height: auto; +} + +.sdc-menu-list { + z-index: 9999999; +} \ No newline at end of file diff --git a/catalog-ui/src/assets/styles/sprite-resource-icons.less b/catalog-ui/src/assets/styles/sprite-resource-icons.less index 0ada1c8711..1c5c852ef0 100644 --- a/catalog-ui/src/assets/styles/sprite-resource-icons.less +++ b/catalog-ui/src/assets/styles/sprite-resource-icons.less @@ -155,10 +155,10 @@ .sprite-resource-icons.cp.medium { background-position: -151px -4048px; width: 21px; height: 21px;} .sprite-resource-icons.cp.large { background-position: -194px -4034px; width: 60px; height: 60px;} -.sprite-resource-icons.vl { background-position: -210px -2591px; width: 28px; height: 28px;} -.sprite-resource-icons.vl.small { background-position: -210px -2591px; width: 28px; height: 28px;} -.sprite-resource-icons.vl.medium { background-position: -141px -2579px; width: 40px; height: 40px;} -.sprite-resource-icons.vl.large { background-position: -70px -2560px; width: 60px; height: 60px;} +.sprite-resource-icons.vl { background-position: -90px -4328px; width: 28px; height: 28px;} +.sprite-resource-icons.vl.small { background-position: -90px -4328px; width: 28px; height: 28px;} +.sprite-resource-icons.vl.medium { background-position: -151px -4338px; width: 40px; height: 40px;} +.sprite-resource-icons.vl.large { background-position: -214px -4344px; width: 60px; height: 60px;} .sprite-resource-icons.cloudep { background-position: -282px -2225px; width: 63px; height: 43px;} .sprite-resource-icons.cloudep.small { background-position: -209px -2241px; width: 28px; height: 28px;} diff --git a/catalog-ui/src/assets/styles/table-flex.less b/catalog-ui/src/assets/styles/table-flex.less index 19355ddd80..3ac014cc1b 100644 --- a/catalog-ui/src/assets/styles/table-flex.less +++ b/catalog-ui/src/assets/styles/table-flex.less @@ -118,32 +118,37 @@ line-height: 0px; text-align: center; - - button { + .table-delete-btn { background-color: transparent; border: none; .sprite; - opacity: 0.8; - } - .table-delete-btn { .sprite.e-sdc-small-icon-delete; + opacity: 0.8; } .table-edit-btn { + background-color: transparent; + border: none; + .sprite; .e-sdc-small-icon-pencil; + opacity: 0.8; margin-right: 10px; } .table-save-btn { + background-color: transparent; + border: none; + .sprite; .sprite.e-sdc-green-save; } .table-download-btn { + background-color: transparent; + border: none; + .hand; margin-left: 10px; + opacity: 0.8; + .sprite; .sprite.e-sdc-small-download; } - .table-magnifier-btn { - margin-left: 10px; - .sprite.magnification-glass; - } } } diff --git a/catalog-ui/src/assets/styles/table-style.less b/catalog-ui/src/assets/styles/table-style.less new file mode 100644 index 0000000000..fa61a669b0 --- /dev/null +++ b/catalog-ui/src/assets/styles/table-style.less @@ -0,0 +1,89 @@ +@import "./override"; + +:host ::ng-deep { + + .externalActionLabel { + color: @sdcui_color_blue; + } + + .ngx-datatable { + border: 1px solid @sdcui_color_light-gray; + > div { + height: 100%; + min-height: 500px; + datatable-body { + height: calc(100% - 50px) !important; + overflow-y: auto; + overflow-x: hidden; + max-height: 500px; + } + } + //********************************************* + + .datatable-header { + background-color: @sdcui_color_silver; + border-bottom: 1px solid @sdcui_color_light-gray; + + .datatable-header-inner { + height: 100%; + align-items: center; + + .datatable-header-cell { + box-sizing: border-box; + color: @sdcui_color_dark-gray; + border-right: 1px solid @sdcui_color_light-gray; + font-weight: bold; + text-align: center; + padding: 10px; + + .datatable-icon-up { + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 5px solid @sdcui_color_dark-gray; + } + + .datatable-icon-down { + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 5px solid @sdcui_color_dark-gray; + } + } + } + } + + .datatable-body-cell { + padding: 5px 20px; + border-bottom: 1px solid @sdcui_color_light-gray; + border-right: 1px solid @sdcui_color_light-gray; + font-family: OpenSans-Regular, sans-serif; + font-size: 13px; + font-weight: normal; + .label { + font-family: OpenSans-Regular, sans-serif; + font-size: 13px; + color: @sdcui_color_gray; + } + } + .datatable-body-row:hover { + background-color: @sdcui_color_light-silver; + } + + } + .datatable-row-detail { + padding: 10px 25px; + border-bottom: 1px solid @sdcui_color_light-gray; + } + + .empty-row { + padding: 10px; + } + +} + +.expand-collapse-cell { + display: flex; + align-items: center; + .expand-collapse-icon { + padding-right: 10px; + } +} \ No newline at end of file -- cgit 1.2.3-korg