diff options
8 files changed, 143 insertions, 51 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html index 051ef1634..7f1c9f35a 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html @@ -99,7 +99,7 @@ <!--Action - Add Custom Attribute - Modal--> <div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true"> - <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document"> + <div class="modal-dialog modal-dialog-scrollable" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalScrollableTitle"> 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 43f3818a0..c54673d8e 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 @@ -259,8 +259,9 @@ button.rotate{ text-decoration: none; } #board-paper svg{ - top: 70px; + top: 30px; left: 0; + height: 95%; } .componentsList tspan{ /* width:30px !important; */ @@ -279,8 +280,9 @@ tspan#type{ /*ACTIONS & COMPONENTS MENU*/ .input-search-controller{ height: 40px; - padding-left: 42px; - background: url(src/assets/img/icon-search-light.svg) #fff 21px center no-repeat; + padding-left: 36px; + background: url(src/assets/img/icon-search-light.svg) #fff 15px center no-repeat; + background-size: 4.5%; border-radius: 0; border: 0; border-bottom: solid 1px #D7E7F9; @@ -289,7 +291,7 @@ tspan#type{ } .input-search-controller::placeholder{ color: #D0D7E4; - font-size: 11px; + font-size: 12px; } .input-search-controller:focus{ background-color: #fff !important; @@ -375,7 +377,11 @@ p.compType-4{ font-size: 12px; color: #C3CDDB; } - +.controllerSidebar .joint-paper{ + width: 98% !important; + height: 72vh !important; + margin: 0 !important; +} .actionBtns .btn{ margin: 0px 15px 16px -90px; /* padding: 9px 20px; */ @@ -390,7 +396,7 @@ p.compType-4{ .new-action:hover{ margin: 9px 0 4px 3px; padding: 6px; - font-size: 12px; + font-size: 13px; font-weight: bold; color: #1B3E6F; } @@ -424,6 +430,12 @@ p.compType-4{ height: 65vh !important; overflow-y: auto; } +.actionsList ul{ + padding-left: 0; +} +.actionsList li{ + list-style: none; +} .componentsList .list-group-item{ margin-bottom: 10px; padding-left: 40px; @@ -699,6 +711,9 @@ p.compType-4{ .add-attribute .btn:hover i::before{ color: #fff; } +.add-attribute .btn:focus{ + box-shadow: none; +} .icon-function-attribute{ font-size: 18px; } @@ -741,10 +756,12 @@ p.compType-4{ font-size: 14px; } .attributesContainer label{ + margin-bottom: 0; color: #1B3E6F; /* text-transform: uppercase; */ font-size: 12px; font-weight: bold; + line-height: 32px; } .attributesContainer label.custom-control-label{ text-transform: unset; @@ -789,7 +806,7 @@ p.compType-4{ border: 0; } .attributeOptions a:not(:first-child){ - margin-left: 18px; + margin-left: 14px; } .attributeOptions i{ color: #103D73 !important; @@ -1000,9 +1017,9 @@ p.compType-4{ .joint-paper{ - width: 94% !important; - height: 100vh !important; - margin: 0 auto !important; + width: 96.4% !important; + height: 80vh !important; + margin: 60px auto 0 !important; } ul.templateLegend{ margin: 0; @@ -1049,9 +1066,94 @@ ul.editor{ font-size: 12px; } /*Modal*/ -.modal-backdrop{z-index: -1} -.modal-holder.modal-backdrop{z-index: 100} -.modal-holder + .modal-dialog {z-index: 1000} +.modal{ + top: 60px; +} +.modal-backdrop{ + z-index: 0 !important; + opacity: 0 !important; +} +/* .modal-holder.modal-backdrop{z-index: 100} +.modal-holder + .modal-dialog {z-index: 1000} */ .modal-dialog{ - max-width: 680px; -}
\ No newline at end of file + max-width: 50%; +} +.modal-body{ + font-size: 14px; +} +.createAttributeTabs .nav-link{ + padding-top: 0 !important; +} +.createAttributeTabs .nav-item a, +.createAttributeTabs .nav-item a.active{ + border-radius: 0 !important; +} +.createAttributeTabs .nav-link{ + text-transform: uppercase !important; + border-radius: 0 !important; + border: 0 !important; +} +.createAttributeTabs .nav-link.active{ + border-radius: 0 !important; + border-bottom: solid 1px #1B3E6F !important; +} +.createAttributeTabs .nav-item{ + margin-left: 50px; +} +.createAttributeTabs .tab-content{ + margin-top: 20px; + padding: 20px 50px; + border: solid 1px #F4F9FE; +} +/*FORM*/ +.create-form .col-form-label{ + color: #1B3E6F; + font-size: 12px; + font-weight: bold; +} +.create-form .col-form-label span{ + color: #FF6469; +} +.create-form .form-control{ + margin-bottom: 9px; + padding-left: 0; + padding-right: 0; + border-radius: 0; + border: 0; + border-bottom: solid 1px #EFEFF4; + font-size: 13px; + box-shadow: none !important; + color: #1B3E6F; +} +.create-form .form-control::placeholder{ + color: #C3CDDB; +} +.create-form .form-control:focus{ + border-bottom-color: #1B3E6F; + -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6) !important; + -moz-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6) !important; + box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6) !important; + background-color: transparent !important; + text-shadow: none; +} +.list-group-item{ + margin-bottom: 9px; + padding: 9px 1.25rem; + border-color: #E6EDF5; + font-size: 11px; + color: #1B3E6F; + font-weight: bold; + text-align: center; +} +.list-group-item.active{ + color: #1B3E6F; + background-color: #C3CDDB; + border-color: #C3CDDB; +} +.list-group-horizontal .list-group-item + .list-group-item{ + border-left-width: 1px; +} +.create-form .custom-control-input:checked ~ .custom-control-label{ + background-color: transparent !important; + color: #1B3E6F; +} 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 537a0a8ca..e717d9019 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 @@ -11,8 +11,8 @@ <i class="fa fa-angle-right ml-2 mr-2"></i> <li class="breadcrumb-item"> <a routerLink="/packages/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a> - <button type="button" class="btn package-info-btn" data-toggle="modal" - data-target="#exampleModalLong"> + <button type="button" class="btn package-info-btn tooltip-bottom" data-toggle="modal" + data-target="#exampleModalLong" data-tooltip="Package Details"> <i class="icon-info" aria-hidden="true"></i> </button> </li> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts index 7960e83d1..b7a0ff9d5 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts @@ -15,8 +15,8 @@ declare module 'jointjs' { } } -const rectWidth = 616; -const rectHeight = 381; +const rectWidth = '100%'; +const rectHeight = '100%'; // custom element implementation // https://resources.jointjs.com/tutorials/joint/tutorials/custom-elements.html#markup const ActionElement = joint.shapes.standard.Rectangle.define(ActionElementTypeName, { @@ -40,18 +40,8 @@ const ActionElement = joint.shapes.standard.Rectangle.define(ActionElementTypeNa <g id="7.2-Designer---Insert-Action" transform="translate(-395.000000, -137.000000)"> <g id="workflow-container" transform="translate(401.000000, 137.000000)"> <g id="Card"> - <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#custom-action"></use> - <use stroke="#1273EB" stroke-width="1" fill="#FFFFFF" fill-rule="evenodd" xlink:href="#custom-action"></use> - </g> - <g id="name"> - <path d="M2,0 L85,0 C86.1045695,-2.02906125e-16 87, - 0.8954305 87,2 L87,30 L87,30 L0,30 L0, - 2 C-1.3527075e-16,0.8954305 0.8954305, - 2.02906125e-16 2,0 Z" id="Rectangle" - fill="#C3CDDB"></path> - <text id="Action-1" font-family="HelveticaNeue-Bold, Helvetica Neue" font-size="12" font-weight="bold" fill="#1B3E6F"> - <tspan id="label" x="20" y="20">Action 1</tspan> - </text> + <use fill="black" fill-opacity="0" filter="url(#filter-2)" xlink:href="#custom-action"></use> + <use fill-rule="evenodd" xlink:href="#custom-action"></use> </g> </g> </g> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts index 72019bfa0..7411eed49 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts @@ -28,9 +28,9 @@ const FunctionElement = joint.shapes.standard.Rectangle.define('board.FunctionEl <g id="func-board-element-conponent" transform="translate(30.000000, 70.000000)"> <g id="execute" transform="translate(304.000000, 0.000000)"> <g id="Group" transform="translate(7.000000, 0.000000)"> - <rect id="func-board-element-rectangle" fill="#1B3E6F" x="15" y="0" width="330" height="84" rx="2"></rect> - <g id="Group-4" transform="translate(20.000000, 20.000000)" fill="#FFFFFF"> - <g id="database0-copy" transform="translate(15.000000, 0.000000)" fill-rule="nonzero"> + <rect id="func-board-element-rectangle" fill="#1B3E6F" x="15" y="0" width="280" height="150" rx="3"></rect> + <g id="Group-4" transform="translate(20.000000, 25.000000)" fill="#FFFFFF"> + <g id="database0-copy" transform="translate(115.000000, 5.000000)" fill-rule="nonzero"> <path d="M35.544,6.00705882 C34.7265882, 2.97882353 28.6425882,0 18,0 C7.35741176, 0 1.27270588,2.97882353 0.456,6.00705882 C0.396705882, @@ -304,8 +304,8 @@ const FunctionElement = joint.shapes.standard.Rectangle.define('board.FunctionEl font-family="HelveticaNeue-Bold, Helvetica Neue" font-size="13" font-weight="bold" line-spacing="18"> - <tspan id="label" x="64" y="18">execute</tspan> - <tspan id="type" x="64" y="40" + <tspan id="label" x="20" y="70">execute</tspan> + <tspan id="type" x="30" y="92" font-family="HelveticaNeue, Helvetica Neue" font-size="12" font-weight="normal"></tspan> </text> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts index 48a680982..25908b047 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts @@ -20,7 +20,7 @@ declare module 'jointjs' { } const rectWidth = 260; -const rectHeight = 60; +const rectHeight = 50; // custom element implementation // https://resources.jointjs.com/tutorials/joint/tutorials/custom-elements.html#markup const FunctionElement = joint.shapes.standard.Rectangle.define('palette.FunctionElement', { @@ -45,7 +45,7 @@ const FunctionElement = joint.shapes.standard.Rectangle.define('palette.Function </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="7.1-Designer" transform="translate(-14.000000, -618.000000)"> - <g id="controller" transform="translate(0.000000, 60.000000)"> + <g id="controller" transform="translate(0.000000, 70.000000)"> <g id="functions" transform="translate(0.000000, 479.000000)"> <g id="list" transform="translate(8.000000, 51.000000)"> <g id="1" transform="translate(12.000000, 32.000000)"> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html index f81b02643..0ffa9780a 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html @@ -6,9 +6,10 @@ <app-packages-header></app-packages-header> <div class="container-fluid body-container"> <!--Tour Starter--> + <div> <input id="clicker" [checked]="startTour" type="checkbox" /> <label class="ml-1" for="clicker">Start the tour</label> - + </div> <div class="panel-wrap packageWizard"> <div class="panel"> <button id="clicker1" class="close" type="button" (click)="stopTour()"> diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css index b215dd46a..252cb89b1 100644 --- a/cds-ui/designer-client/src/styles.css +++ b/cds-ui/designer-client/src/styles.css @@ -582,7 +582,7 @@ height: 40px; .packages-card [data-tooltip]:after { padding: 9px; font-size: 11px; - background: #fff; + background: #C3CDDB; border: solid 1px #E6EDF5; box-shadow: 0 0 12 rgba(0,0,0,0.8); border-radius: 3px; @@ -1946,8 +1946,8 @@ ul.package-contributers{ [data-tooltip]:after { z-index: 1000; padding: 8px 20px !important; - width: auto; - background-color: #fff !important; + width: max-content; + background-color: #C3CDDB !important; color: #1B3E6F; content: attr(data-tooltip); font-size: 12px; @@ -2015,7 +2015,7 @@ ul.package-contributers{ margin-right: -12px; margin-bottom: 0; border-top-color: transparent; - border-left-color: #fff; + border-left-color: #C3CDDB; /* border-left-color: hsla(0, 0%, 20%, 0.9); */ } @@ -2040,8 +2040,8 @@ ul.package-contributers{ margin-top: -12px; margin-bottom: 0; border-top-color: transparent; - border-bottom-color: #DEE8F3; - border-bottom-color: rgba(222, 232, 243, 1.0); + border-bottom-color: #C3CDDB; + border-bottom-color: rgba(195, 205, 219, 1.0); } .tooltip-bottom:hover:before, @@ -2064,7 +2064,7 @@ ul.package-contributers{ margin-bottom: 0; margin-left: -12px; border-top-color: transparent; - border-right-color: #fff; + border-right-color: #C3CDDB; /* border-right-color: hsla(0, 0%, 20%, 0.9); */ } @@ -2100,8 +2100,7 @@ ul.package-contributers{ width: 100% !important; } .tooltip .tooltip-inner{ - width: auto !important; - max-width: 280px !important; + width: max-content !important; text-align: left!important; /* color:#1B3E6F; background-color: #fff !important; */ @@ -2140,8 +2139,8 @@ padding-left: 20px !important; border-radius: 20px !important; } .btn-primary{ - background-color: #1273EB !important; - border-color: #1273EB !important; + background-color: #1273EB !important; + border-color: #1273EB !important; } .btn-primary:hover { background-color: #0069d9 !important; |