diff options
| -rw-r--r-- | cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css | 146 | ||||
| -rw-r--r-- | cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html | 17 | ||||
| -rw-r--r-- | cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts | 4 | ||||
| -rwxr-xr-x | cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot | bin | 22492 -> 22524 bytes | |||
| -rwxr-xr-x | cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg | 1 | ||||
| -rwxr-xr-x | cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf | bin | 22328 -> 22360 bytes | |||
| -rwxr-xr-x | cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff | bin | 22408 -> 22440 bytes | |||
| -rwxr-xr-x | cds-ui/designer-client/src/assets/icomoon/style.css | 15 |
8 files changed, 115 insertions, 68 deletions
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 8b79844be..1441406ce 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 @@ -1,7 +1,9 @@ body{ - background-image: linear-gradient(-45deg, #000 9%, #fff 0) !important; - background-size: 6px 6px !important; + /* background-image: linear-gradient(-45deg, #000 9%, #fff 0) !important; + background-size: 6px 6px !important; */ + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJ2LTQiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzIGlkPSJ2LTMiPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuXzAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCI+PHJlY3QgaWQ9InYtNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iI0FBQUFBQSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgaWQ9InYtNyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuXzApIi8+PC9zdmc+") !important; + background-color: #fff !important; } /*Icons*/ @@ -25,22 +27,29 @@ body{ } .editNavbar .nav-tabs{ - border-bottom-width: 2px; + border-bottom-width: 0; } .editNavbar .nav-tabs .nav-link{ - padding: 12px 15px !important; + padding: 12px 28px !important; text-align: center; } .editNavbar .nav-tabs .nav-link::before{ content: ""; } +.editNavbar .nav-link{ + text-transform: initial !important; +} +.editNavbar .navbar, +.editNavbar .navbar{ + padding: 0; +} /*Header*/ header{ position: relative; height: 60px; background-color: #1B3E6F; - box-shadow: 0 4px 10px rgba(238, 240, 245, 1.0); + /* box-shadow: 0 4px 10px rgba(238, 240, 245, 1.0); */ z-index: 200000000 !important; } .logo{ @@ -101,6 +110,9 @@ header{ .topology-actions .btn-group{ margin-top: 11px; } +.btn-group > .btn:not(:first-child){ + margin-left: 0; +} .btn-topology-action, .btn-topology-action:hover{ margin: 0 6px; @@ -122,11 +134,11 @@ header{ .dropdown-toggle:focus ~ .dropdown-text{ top: 7px; text-indent: 15px; - background: #1273EB; - border-radius: 15px; + background: #1273EB !important; + border-radius: 15px !important; border: 0; box-shadow: none; - color: #fff; + color: #fff !important; font-weight: bold; font-size: 13px; } @@ -244,8 +256,8 @@ button.rotate{ text-decoration: none; } #board-paper svg{ - top: 40px; - left: 30px; + top: 70px; + left: 0; } .componentsList tspan{ /* width:30px !important; */ @@ -329,7 +341,7 @@ p.compType-4{ padding-left: 20px; background: #fff; border-top: solid 1px #C1CDDD; - font-size: 14px; + font-size: 13px; line-height: 40px; color: #0070F4; } @@ -472,35 +484,52 @@ p.compType-4{ } /*CANVAS*/ -.editBar{ - width: 73.7%; - margin: 0 auto 0 -320px; +.source-button.editBar{ + position: absolute; + z-index: 9999999; + top: 60px; + /* left: 50%; */ +} +.editBar, +.editBar2{ + width: calc(100% - 320px); + margin: 0 auto 0 320px; height: 45px; - padding: 6px 10px; + padding: 0; + padding-right: 20px; background:#F4F9FE; - /* border: solid 1px #E8EFF8; */ + border-bottom: solid 1px #E8EFF8; box-shadow: 0 2px 6px rgba(47, 83, 151, .1); } -.editBar .btn-group{ + +.editBar .btn-group, +.editBar2 .btn-group{ box-shadow: 0 2px 6px rgba(47, 83, 151, .15); } -.editBar .btn{ +.editBar .toggoleBtn, +.editBar2 .toggoleBtn{ + height: 43px; + margin-right: 12px; background-color: #fff; background-repeat: no-repeat; background-position: left center; border: 0; color: #1B3E6F; font-size: 10px; + border-top-left-radius: 0; + border-top-right-radius: 4px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 4px; } -.editBar .btn.active{ +.editBar .toggoleBtn i, +.editBar2 .toggoleBtn i{ + font-size: 20px; +} +.editBar .toggoleBtn.active, +.editBar2 .toggoleBtn.active{ background-color: #1B3E6F !important; color: #fff; } -.viewBtns .btn{ - background-position: 10px center; - padding-left: 30px!important; - margin-top: 14px; -} .viewBtns .topologySource{ background-image: url(src/assets/img/icon-topologyView-active.svg); } @@ -701,12 +730,12 @@ p.compType-4{ font-size: 10px; } -.source-button{ +/* .source-button{ position: absolute; z-index: 9999999; top: 60px; left: 50%; -} +} */ /*jointjs paper*/ /* #board-paper { position: relative; @@ -753,39 +782,46 @@ p.compType-4{ font-size:15px } -.arrow{ - margin-left: -10px; - border-radius: 3% -} -.arr-size{ - font-size: 31px; -} .editBar2{ - width: 98.7%; - margin: 0 auto 0 -640px; - height: 45px; - padding: 6px 10px; - background:#F4F9FE; - /* border: solid 1px #E8EFF8; */ - box-shadow: 0 2px 6px rgba(47, 83, 151, .1); -} -.editBar2 .btn-group{ - box-shadow: 0 2px 6px rgba(47, 83, 151, .15); + width: 100%; + margin: 0; } -.editBar2 .btn{ - background-color: #fff; - background-repeat: no-repeat; - background-position: left center; + +.viewBtns .btn{ + margin-top: 14px; + padding-left: 30px!important; border: 0; - color: #1B3E6F; - font-size: 10px; + font-size: 12px; + color: #1B3E6F !important; + background-color: #fff !important; + background-repeat: no-repeat; + background-position: 10px center; } -.editBar2 .btn.active{ +.viewBtns .btn.active{ background-color: #1B3E6F !important; - color: #fff; + color: #fff !important; } -.editBar2 .viewBtns .btn{ - background-position: 10px center; - padding-left: 30px!important; - margin-top: 14px; + + +.joint-paper{ + width: 94% !important; + height: 100vh !important; + margin: 0 auto !important; +} +ul.templateLegend{ + margin: 0; +} +.templateLegend li{ + float: left; + list-style: none; + font-size: 11px; +} +.templateLegend li:not(:last-child){ + margin-right: 24px; +} +.templateLegend .requirement i{ + color: #FF6B6B; +} +.templateLegend .capability i{ + color: #0ABDE3; } 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 fe24f9df4..08f9a0789 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 @@ -109,11 +109,12 @@ </div> --> <nav class="editNavbar row source-button {{cl}} navbar navbar-expand-lg"> - <button (click)="_toggleSidebar1()" class="active btn arrow"> + <button (click)="_toggleSidebar1()" class="toggoleBtn active btn tooltip-bottom" title="" aria-pressed="true" + data-tooltip="Collapse Side bar"> <i class="fa arr-size"></i> </button> <div class="collapse navbar-collapse "> - <ul class="navbar-nav mr-auto"> + <ul class="navbar-nav"> <li class="nav-item active"> <nav class="row"> <!--Nav Tabs--> @@ -128,7 +129,11 @@ </nav> </li> </ul> - <ul class="navbar ml-auto" style="list-style: none;"> + <ul class="templateLegend ml-auto mr-auto p-0"> + <li class="requirement"><i class="icon-rectangle" aria-hidden="true"></i> Requirement</li> + <li class="capability"><i class="icon-rectangle" aria-hidden="true"></i> Capability</li> + </ul> + <ul class="navbar" style="list-style: none;"> <li class="nav-item"> <div class="btn-group viewBtns" role="group"> <button type="button" class="btn btn-secondary topologySource active">Designer</button> @@ -184,7 +189,9 @@ </div> </div> </div> - <div class="helpBox"><i class="icon-info" aria-hidden="true"></i><a href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">Help - Learn The Basics</a></div> + <div class="helpBox"><i class="icon-info" aria-hidden="true"></i><a + href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">Help - Learn The Basics</a> + </div> </ng-sidebar> <!-- Page content --> @@ -612,4 +619,4 @@ </div> </ng-sidebar> -</ng-sidebar-container>
\ No newline at end of file +</ng-sidebar-container> 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 4f31a08f4..e2a8d642b 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 @@ -205,8 +205,8 @@ export class DesignerComponent implements OnInit, OnDestroy { this.boardPaper = new joint.dia.Paper({ el: $('#board-paper'), model: this.boardGraph, - height: 720, - width: 1100, + // height: 720, + // width: 1100, gridSize: 10, drawGrid: true, // background: { diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot Binary files differindex 46b2de673..70a4e600f 100755 --- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot +++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg index c966c1125..3441e50a9 100755 --- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg +++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg @@ -13,6 +13,7 @@ <glyph unicode="" glyph-name="icon-action-close" d="M1011.886 947.884c-16.154 16.154-42.344 16.154-58.498 0l-941.272-941.27c-16.154-16.154-16.154-42.344 0-58.498 8.076-8.080 18.664-12.116 29.25-12.116s21.172 4.039 29.25 12.119l941.27 941.27c16.152 16.152 16.152 42.342 0 58.496zM1011.884 6.612l-941.272 941.27c-16.152 16.154-42.344 16.154-58.496 0-16.154-16.152-16.154-42.342 0-58.496l941.272-941.272c8.076-8.078 18.664-12.117 29.25-12.117s21.174 4.039 29.248 12.115c16.15 16.156 16.15 42.346-0.002 58.5z" /> <glyph unicode="" glyph-name="icon-action-back" horiz-adv-x="1422" d="M479.778 915.244c19.067 19.733 50.8 19.733 70.533 0 19.067-19.067 19.067-50.8 0-69.822l-357.644-357.644h1180.178c27.511-0.044 49.378-21.911 49.378-49.422s-21.867-50.089-49.378-50.089h-1180.178l357.644-356.978c19.067-19.733 19.067-51.511 0-70.533-19.733-19.733-51.511-19.733-70.533 0l-442.311 442.311c-19.733 19.067-19.733 50.8 0 69.822l442.311 442.356z" /> <glyph unicode="" glyph-name="icon-file" horiz-adv-x="751" d="M731.195 731.764l-208.496 208.494c-12.729 12.731-29.652 19.742-47.655 19.742h-407.653c-37.16 0-67.391-30.232-67.391-67.391v-851.058c0-37.16 30.232-67.391 67.391-67.391h616.15c37.16 0 67.391 30.232 67.391 67.391v642.56c0 17.997-7.009 34.92-19.738 47.653zM652.324 728.944h-122.82c-5.309 0-9.627 4.319-9.627 9.627v122.818l132.447-132.445zM683.542 31.923h-616.15c-5.309 0-9.627 4.319-9.627 9.627v851.058c0 5.309 4.319 9.627 9.627 9.627h394.721v-163.665c0-37.16 30.232-67.391 67.391-67.391h163.665v-629.629c0-5.309-4.319-9.627-9.627-9.627z" /> +<glyph unicode="" glyph-name="icon-rectangle" d="M0 960h1024v-1024h-1024v1024z" /> <glyph unicode="" glyph-name="icon-add" d="M512 960c-282.785 0-512-229.215-512-512s229.215-512 512-512c282.785 0 512 229.249 512 512s-229.215 512-512 512zM512 0c-247.425 0-448 200.575-448 448s200.575 448 448 448c247.425 0 448-200.575 448-448s-200.575-448-448-448zM704 480h-160v160c0 17.664-14.336 32-32 32s-32-14.336-32-32v-160h-160c-17.664 0-32-14.336-32-32s14.336-32 32-32h160v-160c0-17.664 14.336-32 32-32s32 14.336 32 32v160h160c17.664 0 32 14.336 32 32s-14.336 32-32 32z" /> <glyph unicode="" glyph-name="icon-archive-sm" d="M943.405 684.258h-864.783c-10.653 0-19.867-3.887-27.644-11.668-7.781-7.777-11.668-16.991-11.668-27.637v-589.626c0-10.644 3.887-19.863 11.668-27.637 7.777-7.781 16.991-11.677 27.644-11.677h864.783c10.647 0 19.854 3.896 27.637 11.677 7.775 7.773 11.662 16.991 11.662 27.637v589.626c0 10.653-3.872 19.858-11.662 27.637-7.775 7.781-16.991 11.668-27.637 11.668zM617.255 499.387c-7.773-7.779-16.991-11.668-27.637-11.668h-157.233c-10.64 0-19.854 3.892-27.637 11.668-7.777 7.781-11.668 16.991-11.668 27.644 0 10.644 3.892 19.858 11.668 27.637 7.781 7.781 16.995 11.673 27.637 11.673h157.249c10.638 0 19.85-3.892 27.637-11.673 7.775-7.777 11.662-16.991 11.662-27.637 0-10.651-3.896-19.863-11.677-27.644zM1010.357 947.749c-7.783 7.781-16.991 11.668-27.639 11.668h-943.409c-10.644 0-19.858-3.887-27.637-11.668-7.779-7.777-11.671-16.991-11.671-27.637v-157.233c0-10.644 3.892-19.854 11.673-27.637 7.779-7.781 16.991-11.668 27.637-11.668h943.394c10.644 0 19.863 3.887 27.652 11.668 7.773 7.781 11.66 16.991 11.66 27.637v157.233c0 10.653-3.887 19.86-11.66 27.637z" /> <glyph unicode="" glyph-name="icon-btn-card-config" d="M971.283 561.778h-95.801c-15.398 0-28.084 8.476-33.982 22.699s-2.901 29.203 7.964 40.088l67.736 67.717c9.956 9.956 15.436 23.211 15.436 37.281 0 14.089-5.48 27.326-15.436 37.3l-86.338 86.338c-19.911 19.911-54.632 19.949-74.581 0l-67.717-67.717c-10.885-10.866-25.903-13.9-40.088-7.983-14.222 5.897-22.699 18.584-22.699 33.982v95.801c0 29.070-23.647 52.717-52.717 52.717h-122.121c-29.070 0-52.717-23.647-52.717-52.717v-95.801c0-15.398-8.476-28.084-22.699-33.982-14.184-5.935-29.203-2.882-40.088 7.983l-67.717 67.717c-19.949 19.949-54.67 19.911-74.581 0l-86.338-86.338c-9.956-9.956-15.436-23.211-15.436-37.3 0-14.071 5.48-27.307 15.436-37.281l67.736-67.717c10.866-10.885 13.843-25.865 7.964-40.088s-18.584-22.699-33.982-22.699h-95.801c-29.070 0-52.717-23.647-52.717-52.717v-122.103c0-29.089 23.647-52.736 52.717-52.736h95.801c15.398 0 28.084-8.476 33.982-22.699s2.901-29.203-7.964-40.088l-67.736-67.717c-9.956-9.956-15.436-23.211-15.436-37.281 0-14.089 5.48-27.326 15.436-37.3l86.338-86.338c19.93-19.93 54.632-19.968 74.581 0l67.717 67.736c10.885 10.866 25.847 13.862 40.088 7.964 14.222-5.897 22.699-18.584 22.699-33.982v-95.801c0-29.070 23.647-52.717 52.717-52.717h122.103c29.070 0 52.717 23.647 52.717 52.717v95.801c0 15.398 8.476 28.084 22.699 33.982 14.241 5.916 29.203 2.901 40.088-7.964l67.717-67.736c19.949-19.949 54.67-19.911 74.581 0l86.338 86.338c9.956 9.956 15.436 23.211 15.436 37.3 0 14.071-5.48 27.307-15.436 37.281l-67.736 67.717c-10.866 10.885-13.843 25.865-7.964 40.088s18.603 22.699 34.001 22.699h95.801c29.070 0 52.717 23.647 52.717 52.717v122.121c0 29.070-23.647 52.717-52.717 52.717zM986.074 386.939c0-8.154-6.637-14.791-14.791-14.791h-95.801c-30.796 0-57.249-17.673-69.025-46.118-11.795-28.444-5.594-59.657 16.194-81.427l67.736-67.717c5.784-5.784 5.784-15.17 0-20.935l-86.338-86.338c-5.765-5.765-15.151-5.803-20.935 0l-67.717 67.736c-21.788 21.788-52.983 27.951-81.427 16.194-28.444-11.776-46.118-38.229-46.118-69.025v-95.801c0-8.154-6.637-14.791-14.791-14.791h-122.121c-8.154 0-14.791 6.637-14.791 14.791v95.801c0 30.796-17.673 57.249-46.118 69.025-9.538 3.963-19.361 5.897-29.070 5.897-19.228 0-37.869-7.585-52.357-22.073l-67.717-67.736c-5.803-5.803-15.189-5.765-20.935 0l-86.338 86.338c-5.784 5.784-5.784 15.17 0 20.935l67.736 67.717c21.769 21.769 27.989 52.983 16.194 81.427-11.776 28.425-38.229 46.099-69.025 46.099h-95.801c-8.154 0-14.791 6.637-14.791 14.791v122.121c0 8.154 6.637 14.791 14.791 14.791h95.801c30.796 0 57.249 17.673 69.025 46.118 11.795 28.444 5.594 59.657-16.194 81.427l-67.736 67.717c-5.784 5.784-5.784 15.17 0 20.935l86.338 86.338c5.765 5.784 15.151 5.784 20.935 0l67.717-67.717c21.751-21.751 52.945-27.989 81.427-16.194 28.444 11.757 46.118 38.21 46.118 69.006v95.801c0 8.154 6.637 14.791 14.791 14.791h122.103c8.173 0 14.81-6.637 14.81-14.791v-95.801c0-30.796 17.673-57.249 46.118-69.025 28.482-11.795 59.657-5.575 81.427 16.194l67.717 67.717c5.803 5.784 15.189 5.784 20.935 0l86.338-86.338c5.784-5.784 5.784-15.17 0-20.935l-67.736-67.717c-21.769-21.769-27.989-52.983-16.194-81.427 11.776-28.444 38.229-46.118 69.025-46.118h95.801c8.154 0.019 14.791-6.618 14.791-14.772v-122.121zM512 618.667c-94.113 0-170.667-76.553-170.667-170.667s76.553-170.667 170.667-170.667c94.113 0 170.667 76.553 170.667 170.667s-76.553 170.667-170.667 170.667zM512 315.259c-73.178 0-132.741 59.563-132.741 132.741s59.563 132.741 132.741 132.741c73.178 0 132.741-59.563 132.741-132.741s-59.563-132.741-132.741-132.741z" /> diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf Binary files differindex b8c3e0106..94a4d73c3 100755 --- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf +++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff Binary files differindex 169d6d61e..b989b33e2 100755 --- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff +++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff diff --git a/cds-ui/designer-client/src/assets/icomoon/style.css b/cds-ui/designer-client/src/assets/icomoon/style.css index 945d9d380..5b11e4c76 100755 --- a/cds-ui/designer-client/src/assets/icomoon/style.css +++ b/cds-ui/designer-client/src/assets/icomoon/style.css @@ -1,10 +1,10 @@ @font-face { font-family: 'icomoon'; - src: url('fonts/icomoon.eot?rdm62r'); - src: url('fonts/icomoon.eot?rdm62r#iefix') format('embedded-opentype'), - url('fonts/icomoon.ttf?rdm62r') format('truetype'), - url('fonts/icomoon.woff?rdm62r') format('woff'), - url('fonts/icomoon.svg?rdm62r#icomoon') format('svg'); + src: url('fonts/icomoon.eot?mwwfrv'); + src: url('fonts/icomoon.eot?mwwfrv#iefix') format('embedded-opentype'), + url('fonts/icomoon.ttf?mwwfrv') format('truetype'), + url('fonts/icomoon.woff?mwwfrv') format('woff'), + url('fonts/icomoon.svg?mwwfrv#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; @@ -13,7 +13,7 @@ [class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; - speak: none; + speak: never; font-style: normal; font-weight: normal; font-variant: normal; @@ -35,6 +35,9 @@ -moz-osx-font-smoothing: grayscale; } +.icon-rectangle:before { + content: "\e906"; +} .icon-file:before { content: "\e905"; color: #1b3e6f; |
