diff options
Diffstat (limited to 'cds-ui/designer-client/src/app')
2 files changed, 396 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 31d934565..f34058eb6 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 @@ -201,14 +201,14 @@ <div class="col-sm-9"> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline3" name="customRadioInline3" - class="custom-control-input" (click)="setOutputRequired(true)"> + class="custom-control-input" (click)="setOutputRequired(true)"> <label class="custom-control-label" for="customRadioInline3">True</label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline4" name="customRadioInline3" - class="custom-control-input"> + class="custom-control-input"> <label class="custom-control-label" for="customRadioInline4" - (click)="setOutputRequired(false)">False</label> + (click)="setOutputRequired(false)">False</label> </div> </div> </div> @@ -255,46 +255,57 @@ </div> </div> </div> - <div class="row mb-4"> - <div class="col-6"> - <b class="listBoxTitle">1. Choose Function Name</b> - <div class="list-group addedFunctionsList" id="list-tab" role="tablist"> - <input type="text" class="form-control input-search-controller" - placeholder="Functions"> - <div class="scrollWrapper" *ngFor="let step of steps"> - <a class="list-group-item list-group-item-action active" id="list-home-list" - data-toggle="list" href="#list-home" role="tab" aria-controls="home"><i - class="icon-resource_resolution mr-1" aria-hidden="true"></i> - {{step}} <i class="icon-next_arrow" aria-hidden="true" (click)="getAttributesAndOutputs( + + + + + <section class="carousel" aria-label="Gallery"> + + <ol class="carousel__viewport"> + <!--Function--> + <li id="carousel__slide1" tabindex="0" class="carousel__slide"> + <b class="listBoxTitle">1. Choose Function Name</b> + <div class="list-group addedFunctionsList" id="list-tab" role="tablist"> + <input type="text" class="form-control input-search-controller" + placeholder="Functions"> + <div class="scrollWrapper" *ngFor="let step of steps"> + <a class="list-group-item list-group-item-action active" id="list-home-list" + data-toggle="list" href="#list-home" role="tab" aria-controls="home"> + <i class="icon-resource_resolution mr-1" aria-hidden="true"></i> + {{step}} <i class="icon-next_arrow" aria-hidden="true" (click)="getAttributesAndOutputs( this.designerState.template.workflows[actionName]['steps'][step]['target'] )"></i></a> + </div> </div> - </div> - </div> - <div class="col-6"> - <b class="listBoxTitle">2. Choose Input Attribute Name</b> - <div class="tab-content nestedAttributes mt-0 p-0" id="nav-tabContent"> - <input type="text" class="form-control input-search-controller" - placeholder="Attributes"> - <div class="tab-pane fade show active" id="list-home" role="tabpanel" - aria-labelledby="list-home-list"> - <div class="scrollWrapper"> - <div *ngIf="suggestedAttributes.length>0" class="btn-group btn-group-toggle" - data-toggle="buttons"> - <label class="btn btn-secondary active" - *ngFor="let suggestedAttribute of suggestedAttributes" - (click)="addTempOutputAttr(suggestedAttribute)"> - <input type="radio" name="options" [id]="suggestedAttribute" - autocomplete="off" (click)="addTempOutputAttr(suggestedAttribute)"> - {{suggestedAttribute}} + <div class="carousel__snapper"> + <a href="#carousel__slide4" class="carousel__prev">Parmeters</a> + <a href="#carousel__slide2" class="carousel__next">Attributes</a> + </div> + </li> + <!--Attribute--> + <li id="carousel__slide2" tabindex="0" class="carousel__slide"> + <b class="listBoxTitle">2. Choose Attribute Name</b> + <div class="tab-content nestedAttributes mt-0 p-0" id="nav-tabContent"> + <input type="text" class="form-control input-search-controller" + placeholder="Attributes"> + <div class="tab-pane fade show active" id="list-home" role="tabpanel" + aria-labelledby="list-home-list"> + <div class="scrollWrapper"> + <div *ngIf="suggestedAttributes.length>0" + class="btn-group btn-group-toggle" data-toggle="buttons"> + <label class="btn btn-secondary active" + *ngFor="let suggestedAttribute of suggestedAttributes" + (click)="addTempOutputAttr(suggestedAttribute)"> + <input type="radio" name="options" [id]="suggestedAttribute" + autocomplete="off" + (click)="addTempOutputAttr(suggestedAttribute)"> + {{suggestedAttribute}} + </label> - - </label> - - </div> - <div *ngIf="suggestedAttributes.length == 0"> - <p class="noAttributes">No Attributes Available</p> - <!--Attribute Details + </div> + <div *ngIf="suggestedAttributes.length == 0"> + <p class="noAttributes">No Attributes Available</p> + <!--Attribute Details <div class="nav-item dropdown helpMenu"> <input class="dropdown-toggle" type="text"> <div class="dropdown-text"><i class="icon-info" aria-hidden="true"></i></div> @@ -312,13 +323,94 @@ </ul> </div> --> + </div> </div> </div> </div> - </div> - </div> - </div> - <!----> + <div class="carousel__snapper"></div> + <a href="#carousel__slide1" class="carousel__prev">Functions</a> + <a href="#carousel__slide3" class="carousel__next">Artifacts</a> + </li> + <!--Artifact--> + <li id="carousel__slide3" tabindex="0" class="carousel__slide"> + <b class="listBoxTitle">3. Choose Artifact Name</b> + <div class="tab-content nestedAttributes mt-0 p-0" id="nav-tabContent"> + <input type="text" class="form-control input-search-controller" + placeholder="Attributes"> + <div class="tab-pane fade show active" id="list-home" role="tabpanel" + aria-labelledby="list-home-list"> + <div class="scrollWrapper"> + <div *ngIf="suggestedAttributes.length>0" + class="btn-group btn-group-toggle" data-toggle="buttons"> + <label class="btn btn-secondary active" + *ngFor="let suggestedAttribute of suggestedAttributes" + (click)="addTempOutputAttr(suggestedAttribute)"> + <input type="radio" name="options" [id]="suggestedAttribute" + autocomplete="off" + (click)="addTempOutputAttr(suggestedAttribute)"> + {{suggestedAttribute}} + </label> + + </div> + <div *ngIf="suggestedAttributes.length == 0"> + <p class="noAttributes">No Attributes Available</p> + </div> + </div> + </div> + </div> + <div class="carousel__snapper"></div> + <a href="#carousel__slide2" class="carousel__prev">Attributes</a> + <a href="#carousel__slide4" class="carousel__next">Parmeters</a> + </li> + <!--Parameter--> + <li id="carousel__slide4" tabindex="0" class="carousel__slide"> + <b class="listBoxTitle">4. Choose Parameter Name</b> + <div class="tab-content nestedAttributes mt-0 p-0" id="nav-tabContent"> + <input type="text" class="form-control input-search-controller" + placeholder="Attributes"> + <div class="tab-pane fade show active" id="list-home" role="tabpanel" + aria-labelledby="list-home-list"> + <div class="scrollWrapper"> + <div *ngIf="suggestedAttributes.length>0" + class="btn-group btn-group-toggle" data-toggle="buttons"> + <label class="btn btn-secondary active" + *ngFor="let suggestedAttribute of suggestedAttributes" + (click)="addTempOutputAttr(suggestedAttribute)"> + <input type="radio" name="options" [id]="suggestedAttribute" + autocomplete="off" + (click)="addTempOutputAttr(suggestedAttribute)"> + {{suggestedAttribute}} + </label> + + </div> + <div *ngIf="suggestedAttributes.length == 0"> + <p class="noAttributes">No Attributes Available</p> + </div> + </div> + </div> + </div> + <div class="carousel__snapper"></div> + <a href="#carousel__slide3" class="carousel__prev">Artifacts</a> + <a href="#carousel__slide1" class="carousel__next">Functions</a> + </li> + </ol> + <aside class="carousel__navigation"> + <ol class="carousel__navigation-list"> + <li class="carousel__navigation-item"> + <a href="#carousel__slide1" class="carousel__navigation-button">Functions</a> + </li> + <li class="carousel__navigation-item"> + <a href="#carousel__slide2" class="carousel__navigation-button">Attributes</a> + </li> + <li class="carousel__navigation-item"> + <a href="#carousel__slide3" class="carousel__navigation-button">Artifacts</a> + </li> + <li class="carousel__navigation-item"> + <a href="#carousel__slide4" class="carousel__navigation-button">Parameters</a> + </li> + </ol> + </aside> + </section> </div> </div> </div> @@ -401,7 +493,9 @@ {{suggestedInput}} </label> </div> - <div *ngIf="suggestedInputs.length == 0">you don't have data</div> + <div *ngIf="suggestedInputs.length == 0"> + <p class="noAttributes">No Attributes Available</p> + </div> </div> </div> </div> @@ -453,7 +547,9 @@ </label> </div> - <div *ngIf="suggestedOutputs.length == 0">you don't have data</div> + <div *ngIf="suggestedOutputs.length == 0"> + <p class="noAttributes">No Attributes Available</p> + </div> </div> </div> </div> @@ -561,4 +657,4 @@ </div> </div> </div> -</div> +</div>
\ No newline at end of file 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 fe5f41f41..b076af378 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 @@ -1146,6 +1146,9 @@ ul.editor{ .modal{ top: 60px; } +.modal-dialog-scrollable{ + max-height: calc(100% - 20%) !important; +} .modal-backdrop{ z-index: 0 !important; opacity: 0 !important; @@ -1203,8 +1206,8 @@ ul.editor{ } .addedFunctionsList .scrollWrapper, .nestedAttributes .scrollWrapper{ - height: 150px; - max-height: 260px; + height: 230px; + max-height: 300px; overflow-y: auto; } .addedFunctionsList .input-search-controller, @@ -1249,8 +1252,8 @@ ul.editor{ } .addedFunctionsList .list-group-item i:last-child{ float: right; - font-size: 15px; - line-height: 17px; + font-size: 10px; + line-height: 20px; } .nestedAttributes .btn-group{ display: grid; @@ -1399,4 +1402,250 @@ ul.editor{ margin: 12px; padding: 8px 12px !important; line-height: 14px; -}
\ No newline at end of file +} +.testttt .test0{ + width: 48%; + margin: 0 1%; +} + + + + + + + +@keyframes tonext { + 75% { + left: 0; + } + 95% { + left: 100%; + } + 98% { + left: 100%; + } + 99% { + left: 0; + } +} + +@keyframes tostart { + 75% { + left: 0; + } + 95% { + left: -300%; + } + 98% { + left: -300%; + } + 99% { + left: 0; + } +} + +@keyframes snap { + 96% { + scroll-snap-align: center; + } + 97% { + scroll-snap-align: none; + } + 99% { + scroll-snap-align: none; + } + 100% { + scroll-snap-align: center; + } +} + + + +* { + box-sizing: border-box; + scrollbar-color: transparent transparent; /* thumb and track color */ + scrollbar-width: 0px; +} + +*::-webkit-scrollbar { + width: 0; +} + +*::-webkit-scrollbar-track { + background: transparent; +} + +*::-webkit-scrollbar-thumb { + background: transparent; + border: none; +} + +* { + -ms-overflow-style: none; +} + + +.carousel { + position: relative; + height: 360px; + /* padding-top: 75%; */ + /* filter: drop-shadow(0 0 10px #0003); */ + /* perspective: 100px; */ +} + +.carousel__viewport { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + margin-top: 40px; + margin-bottom: 0; + padding: 0 12px 0 0; + overflow-x: scroll; + counter-reset: item; + scroll-behavior: smooth; + scroll-snap-type: x mandatory; +} + +.carousel__slide { + position: relative; + flex: 0 0 50%; + width: 100%; + margin-right: 12px; + counter-increment: item; + list-style: none; +} + +/* +.carousel__slide:before { + position: absolute; + top: 50%; + left: 50%; + transform: translate3d(-50%,-40%,70px); + color: #fff; + font-size: 2em; +} */ + +.carousel__snapper { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + scroll-snap-align: center; +} + +@media (hover: hover) { + .carousel__snapper { + animation-name: tonext, snap; + animation-timing-function: ease; + animation-duration: 4s; + animation-iteration-count: infinite; + } + + .carousel__slide:last-child .carousel__snapper { + animation-name: tostart, snap; + } +} + +@media (prefers-reduced-motion: reduce) { + .carousel__snapper { + animation-name: none; + } +} + +.carousel:hover .carousel__snapper, +.carousel:focus-within .carousel__snapper { + animation-name: none; +} + +.carousel__navigation { + position: absolute; + right: 0; + top: 0; + left: 0; + text-align: center; + +} + +.carousel__navigation-list, +.carousel__navigation-item{ + display: inline-block; + margin-bottom: 0; +} +.carousel__navigation-item{ + width: 100px; + padding: 6px 12px; + background-color: #DEE8F3; + border-right: solid 1px #C8D6E6; + font-size: 11px; + font-weight: bold; +} +.carousel__navigation-item:first-child{ + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; +} +.carousel__navigation-item:last-child{ + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + border-right: 0; +} +.carousel__navigation-button, +.carousel__navigation-button:hover{ + display: inline-block; + width: auto; + /* background-clip: content-box; */ + transition: transform 0.1s; + color: #1B3E6F; +} +.carousel__navigation-button:hover{ + text-decoration: none; +} +.carousel::before, +.carousel::after, +.carousel__prev, +.carousel__next{ + position: absolute; + top: 0; + margin-top: 0; + width: 4rem; + transform: translateY(0); + border-radius: 3px; + font-size: 0; + outline: 0; +} + +/* .carousel::before, +.carousel__prev { + left: -1rem; +} + +.carousel::after, +.carousel__next { + right: -1rem; +} */ + +/* .carousel::before, +.carousel::after { + content: ''; + z-index: 1; + background-color: #333; + background-size: 1.5rem 1.5rem; + background-repeat: no-repeat; + background-position: center center; + color: #fff; + font-size: 2.5rem; + line-height: 4rem; + text-align: center; + pointer-events: none; +} + +.carousel::before { + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E"); +} + +.carousel::after { + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E"); +} */ |