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 @@
-
+

Test Package Version 1.0.2

-
+
test vDNS-CDS SCALE-OUT @@ -100,7 +100,7 @@
- +
-
+
- Actions - Functions + Actions + Functions
- - -
-
+
+
- - +
Help - Learn The Basics
@@ -242,7 +231,7 @@

Action Attributes

-
+
@@ -388,36 +377,36 @@
- - + +
-
-
-
- -
+
+
+
+ +
+ +
+
Function Attributes + + + +
+
+ + +
+
-
-
Function Attributes - - - -
-
- - -
-
-
-
+
@@ -425,165 +414,172 @@
-
+
-
component-resource-resolution
+
component-resource-resolution
  • -
  • other component
    • -
- - +
  • other component
    • + +
    -
    -
    -
    -

    - -

    -
    - -
    +
    +
    +
    +
    +

    + +

    +
    +
    +
    -
    -
    -
    -
    -   - -
    -
    - -
    -
    -
    - - +
    +
    +
    +
    +   +
    -
    - -
    -
    - - -
    -
    - - -
    -
    - - - +
    +
    +
    +
    + + +
    +
    + +
    +
    + + +
    +
    + + +
    +
    + +
    +
    -
    -
    -
    -
    -

    - -

    -
    - -
    +
    + +
    +
    +
    +

    + +

    +
    +
    +
    -
    -
    -
    -
    -   - -
    -
    - -
    -
    -
    - -
    - -
    artifact-template-velocity
    -
      -
    • -
      -
    • ddwd
      • -
    - - -
    +
    +
    +
    +
    +   +
    - -
    - -
    -
    -   - -
    -
    - -
    +
    +
    -
    - -
    - -
    artifact-mapping resource
    -
      -
    • -
      -
    • ddwd
      • -
    - - -
    +
    +
    + +
    + +
    artifact-template-velocity
    +
      +
    • +
      +
    • ddwd
    + + +
    +
    + +
    +
    +
    -
    +
    +
    +   + +
    +
    +
    +
    + +
    + +
    artifact-mapping resource
    +
      +
    • +
      +
    • ddwd
      • +
    + + +
    +
    + +
    +
    -
    +
    +
    +
    +
    - + \ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts index 3d10f99e7..9b8781d9b 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts @@ -180,7 +180,7 @@ export class DesignerComponent implements OnInit, OnDestroy { this.palettePaper = new joint.dia.Paper({ el: $('#palette-paper'), model: this.paletteGraph, - width: 300, + width: 318, height: $('#palette-paper').height(), // background: { // color: 'rgba(0, 255, 0, 0.3)' diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.css index 75274ba33..bc1890bdb 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.css +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.css @@ -6,8 +6,6 @@ body{ background-image: linear-gradient(-45deg, #000 9%, #fff 0) !important; background-size: 6px 6px !important; } - - /*Header*/ header{ height: 60px; 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 9c789941d..a7ce5ed4a 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 @@ -3,7 +3,7 @@
    - +
    @@ -30,7 +30,7 @@

    {{bluePrint.artifactName}}

    - version {{bluePrint.artifactVersion}} + v{{bluePrint.artifactVersion}}
    -- cgit 1.2.3-korg