<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>
</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>
</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>
{{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>
</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>
</div>
</div>
</div>
-</div>
+</div>
\ No newline at end of file
.modal{
top: 60px;
}
+.modal-dialog-scrollable{
+ max-height: calc(100% - 20%) !important;
+}
.modal-backdrop{
z-index: 0 !important;
opacity: 0 !important;
}
.addedFunctionsList .scrollWrapper,
.nestedAttributes .scrollWrapper{
- height: 150px;
- max-height: 260px;
+ height: 230px;
+ max-height: 300px;
overflow-y: auto;
}
.addedFunctionsList .input-search-controller,
}
.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;
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");
+} */
Code Review / ccsdk / cds.git / commitdiff