From f2db59d3c71522e9369012f27d13ffea61105c74 Mon Sep 17 00:00:00 2001 From: Sarah Abouzainah Date: Tue, 19 Jan 2021 15:27:47 +0200 Subject: Modify Data Dictionary style and add source option items Issue-ID: CCSDK-3092 Issue-ID: CCSDK-3093 Issue-ID: CCSDK-3094 Issue-ID: CCSDK-3095 Signed-off-by: Sarah Abouzainah Change-Id: I395761081646510c1c4bab244496e11139cade01 --- .../sources-template.component.css | 201 +++++++++++---------- .../sources-template.component.html | 155 +++++++++++----- 2 files changed, 223 insertions(+), 133 deletions(-) (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template') diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.css index 7799d915f..c55b6e4d9 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.css +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.css @@ -17,21 +17,115 @@ * limitations under the License. * ============LICENSE_END========================================================= */ -.source{ - left: 20px; - width: 72%; +.sourceOptions, +.sourceList{ + background: #F4F9FE; + border: solid 1px #D0DFF1 !important; + box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1); + border-radius: 3px !important; } -.source1{ - width: 25%; - background-color:#F4F9FE; +.sourceOptions h5, +.sourceList h5{ + margin-bottom: 0; + padding: 12px 20px; + border-bottom: solid 1px #D7E7F9; + color: #C3CDDB; + text-transform: uppercase; + font-size: 12px; + font-weight: bold; + background: #fff; } -h5{ - padding-top: 10px; - padding-left: 10px; - background-color:white; - height: 40px; - width: 100%; +.searchBox{ + position: relative; + width: 100%; + margin-left: 0; + background-color:#fff; + z-index: 9000; +} +.searchBox input{ + width: 100%; + background: url(src/assets/img/icon-search-light.svg) 20px center no-repeat; + height: 40px; + padding: 0 0 0 40px; + background-size: 4.5%; + border-radius: 0; + border: 0; + border-bottom: solid 1px #E8F0FA; + color: #1B3E6F; + font-size: 13px; +} +.searchBox input::placeholder{ + color: #C3CDDB; + font-size: 12px; +} +.searchBox input:focus{ + background-color: #fff !important; + box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); + text-shadow: none; + border-color: #DEE8F3; +} +.sourceOtionsScroll, +.sourceListScroll{ + margin-bottom: 20px; + height: 400px; + max-height: 400px; + overflow-y: auto; +} +.sourceOtionsScroll{ + height: 362px; + max-height: 362px; +} +.sourceOption{ + margin: 12px 20px; + padding: 6px 20px; + background: #fff; + font-size: 14px; + box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); +} +.sourceOptionActions{ + margin-bottom: 20px; } +.sourceOptionActions a{ + margin-left: 20px; + color: #2A81ED; + font-weight: bold; + font-size: 12px; +} +.sourceOptionActions a:hover, +.deleteSource a:hover{ + text-decoration: underline; + cursor: pointer; +} +.sourceOptionActions .btn{ + background: #1273EB; + border-radius: 15px; + font-weight: bold; + font-size: 12px; + color: #fff; +} + +.deleteSource{ + margin: 20px 0 0; + padding: 9px 5px; + background: #fff; + border-top: solid 1px #E8F0FA; +} +.deleteSource a{ + color: #FF6469; + font-weight: bold; + font-size: 12px; +} +.sourceListItems{ + height: 410px; + max-height: 410px; + overflow-y: auto; +} +.sourceListItems .custom-control{ + float: left; +} + + + .mat-form-field + .mat-form-field { margin-left: 8px; } @@ -57,39 +151,8 @@ mat-expansion-panel{ width: 100%; color:#1B3E6F; } -.example-container { - width: 230px; - max-width: 100%; - margin: 10px 10px 15px 0; - display: inline-block; - vertical-align: top; - border-radius: 2px; - height: 260px; - background-color:#F4F9FE; - } - .example-container2 { - width: 630px; - max-width: 100%; - margin: 10px 10px 5px 0; - display: inline-block; - vertical-align: top; - border-radius: 2px; - height: 300px; - background-color:#F4F9FE; - } - .example-list { - min-height: 12px; - border-radius: 0px; - overflow: hidden; - display: block; - margin: 5px; - overflow-y:scroll; - overflow-x:hidden; - margin-left: 15px; - width: 195px; - margin-top: 15px; - } + .example-list1 { min-height: 12px; @@ -101,20 +164,6 @@ mat-expansion-panel{ overflow-x:hidden; } - .checkbox{ - margin-left: 11%; - } - .example-box { - padding: 2px 1px; - display: flex; - flex-direction: row; - align-items: center; - justify-content: left; - box-sizing: border-box; - cursor: move; - font-size: 14px; - - } .example-box1 { padding: 1px 1px; display: flex; @@ -151,24 +200,8 @@ mat-expansion-panel{ transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); } -.searchText{ - width: 180px; - /* border-top: solid 2px #F4F9FE; */ - border: 0px; - color: #1B3E6F; - font-size: 13px; - margin-top: 2px; -} -.searchBox{ - position: relative; - top: 0%; - right: 0%; - height: 35px; - border-top: solid 2px #F4F9FE; - width: 100%; - margin-left:0px; - background-color:white; -} + + .searchButton1{ float: left; @@ -190,19 +223,3 @@ mat-expansion-panel{ border-radius:16px; border:solid 0.5px #ededed; } -.footer{ - margin: 1px 0px; -} -.delete{ - color: red; - font-size: 14px; - margin: 2px; -} -.footer input{ - margin: 6px 0px 1px 5px; -} -.select-button{ - color: #007bff; - font-size: 14px; - margin: 2px; -} \ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.html index f6150c95b..14a0b6668 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.html @@ -17,59 +17,132 @@ * limitations under the License. * ============LICENSE_END========================================================= */--> -
-
-
-
Sources Options
-
- +
+ +
+
+
Sources Options
+
+
- -
-
-
- +
+
+ +
+ + +
-
-
-
- Select all - +
+
+ Select all +
+
+ +
+
+ +
+
+
Sources List
-
-
Sources List
-
-
- -
- - - - - {{item.name}} - - -
- - - +
+
+
+

+ +

+
+
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf + moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. + Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda + shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea + proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim + aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
+
+
+
+
+

+ +

+
+
+
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf + moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. + Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda + shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea + proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim + aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
+
+
+
+
+

+ +

+
+
+
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf + moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. + Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda + shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea + proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim + aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
+
-
-
- Delete + + +
+
+ Delete Source +
-- cgit 1.2.3-korg