From ced915588f42312b3e65accea0ff72f095c929ce Mon Sep 17 00:00:00 2001 From: Sarah Abouzainah Date: Thu, 4 Jun 2020 17:45:57 +0200 Subject: Actions list - UI Issue-ID: CCSDK-2411 Signed-off-by: Sarah Abouzainah Change-Id: I4eccc5261e4c4ae9c9a60f0c4c518129973b066d --- .../configuration-dashboard.component.html | 2 +- .../packages/designer/designer.component.css | 100 ++++-- .../packages/designer/designer.component.html | 360 ++++++++++----------- .../packages/designer/designer.component.ts | 2 +- .../designer/source-view/source-view.component.css | 2 - .../package-list/package-list.component.html | 4 +- 6 files changed, 253 insertions(+), 217 deletions(-) (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages') 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 a31c95652..4abc93b55 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 @@ -62,7 +62,7 @@
{{viewedPackage.artifactName}} - Version 1.0.2 + v1.0.2
Last modified {{ viewedPackage.createdDate | date:'short' }} By diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css index a095b3dfc..5054a8e9e 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css @@ -12,6 +12,18 @@ body{ color: #fff; } +/*Bootstrap*/ +.controllerSidebar .nav-tabs{ + border-bottom-width: 2px; +} +.controllerSidebar .nav-tabs .nav-link{ + padding: 12px 0 !important; + text-align: center; +} +.controllerSidebar .nav-tabs .nav-link::before{ + content: ""; +} + /*Header*/ header{ position: relative; @@ -240,9 +252,9 @@ tspan#type{ } /*ACTIONS & COMPONENTS MENU*/ .input-search-controller{ - height: 50px; - padding-left: 30px; - background: url(src/assets/img/icon-search-light.svg) #fff 10px center no-repeat; + height: 40px; + padding-left: 42px; + background: url(src/assets/img/icon-search-light.svg) #fff 21px center no-repeat; border-radius: 0; border: 0; border-bottom: solid 1px #D7E7F9; @@ -254,16 +266,11 @@ tspan#type{ font-size: 11px; } .input-search-controller:focus{ - + background-color: #fff !important; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); + text-shadow: none; border-color: #DEE8F3; } -.actions-scroll{ - max-height: 29vh; - overflow-y: auto; - margin-top: 12px; - margin-bottom: 20px; -} .componentsList p{ margin-bottom: 0; padding-left: 30px; @@ -296,10 +303,37 @@ p.compType-4{ .controllerSidebar{ width: 320px; + padding: 0; + overflow: hidden !important; background: #F4F9FE; border: solid 1px #C1CDDD; box-shadow: 0 2px 6px rgba(47, 83, 151, .10); } +.helpBox{ + position : absolute; + bottom : 0; + width: 100%; + height : 40px; + margin-top : 24px; + padding-left: 20px; + background: #fff; + border-top: solid 1px #C1CDDD; + font-size: 14px; + line-height: 40px; + color: #0070F4; +} +.helpBox .icon-info{ + margin-left: 0; + margin-right: 10px; +} +.helpBox .icon-info::before{ + color: #0070F4 !important; +} +.controllerSidebar .row, +.controllerSidebar .col{ + margin: 0; + padding: 0; +} .controllerSidebar h1{ margin-bottom: 15px; padding: 12px 0 12px 12px; @@ -315,6 +349,7 @@ p.compType-4{ font-size: 12px; color: #C3CDDB; } + .actionBtns .btn{ margin: 0px 15px 16px -90px; /* padding: 9px 20px; */ @@ -325,24 +360,25 @@ p.compType-4{ float: left; } -.actionBtns .btn.insert-custom{ - /* background: white; */ - /* border: solid 1px #1B3E6F; */ +.new-action, +.new-action:hover{ + margin: 9px 0 4px 18px; + padding: 6px; + font-size: 13px; + font-weight: bold; color: #1B3E6F; } -.actionBtns .btn.import-action{ - border: solid 1px #D0DFF1; - color: #1B3E6F; - +.new-action:hover{ + background: #D7E7F9; } -.actionsList, .componentsList{ - padding: 0 12px 20px; + margin-top: 16px; + padding: 0 20px 10px; } .componentsList{ padding-bottom: 0; - height: calc( 100vh - 218px)!important; - overflow: scroll; + /* height: calc( 100vh - 218px)!important; + overflow: scroll;*/ background: #F4F9FE !important; } .custom-control.custom-checkbox:hover, @@ -350,18 +386,18 @@ p.compType-4{ cursor: pointer; } .custom-control{ - padding-top: 10px; - width: 315px; height: 40px; - margin-left: -15px; font-size: 14px; - padding-bottom: 0; + line-height: 40px; } .custom-control:hover{ background-color: white; } - -.actionsList .custom-checkbox, +.actionsList, +.componentsList{ + height: 65vh !important; + overflow-y: auto; +} .componentsList .list-group-item{ margin-bottom: 10px; padding-left: 40px; @@ -374,7 +410,7 @@ p.compType-4{ padding: 6px; vertical-align: unset; color: #1B3E6F; - font-size: 14px; + font-size: 13px; line-height: 20px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; @@ -409,6 +445,12 @@ p.compType-4{ border: solid 1px #D9E6F2; color: #C3CDDB; } +.controllerSidebar .custom-control label{ + margin-bottom: 0; +} +.controllerSidebar .custom-control i{ + margin-right: 9px; +} /*Components List*/ .componentsList .list-group-item{ padding-left: 36px; @@ -507,7 +549,7 @@ p.compType-4{ .functionAttributeSidebar{ width: 440px; padding: 0px; - margin-top: 50px; + margin-top: 45px; } .functionAttributeSidebar .attributesContainer{ background: #fff; diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html index 52503cf53..2bd484258 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html @@ -33,11 +33,11 @@