diff options
11 files changed, 638 insertions, 510 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html index fb2dce6c9..318b30c14 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html @@ -121,534 +121,508 @@ aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> - <div class="modal-content"> - <div class="modal-header"> - <h5 class="modal-title" id="exampleModalLongTitle"></h5> - <button type="button" class="close" data-dismiss="modal" - aria-label="Close" title="Close"> - <i class="icon-action-close"></i> - </button> - </div> - <div class="modal-body"> - <div id="carouselExampleIndicators" class="carousel slide" - data-ride="carousel" data-interval="false"> - <div class="carousel-inner" style="height: 480px"> - <!--OPTIONS SLIDE--> - <div class="carousel-item active"> - <h1>Let’s create the 1st Action</h1> - <div class="row"> - <!--Custom Action--> - <div class="col-3 d-flex"> - <a class="d-flex" - data-target="#carouselExampleIndicators" - data-slide-to="1"> - <div class="card actionType custom"> - <div class="card-body"> - <h3>Custom</h3> - <p>Start with your own settings</p> - <button - data-target="#carouselExampleIndicators" - data-slide-to="1" class="btn"> - Create - </button> - </div> - </div> - </a> - </div> - <!--Default Action--> - <div class="col-3 d-flex"> - <a class="d-flex" - data-target="#carouselExampleIndicators" - data-slide-to="2"> - <div class="card actionType default"> - <div class="card-body"> - <h3>Default</h3> - <p>Explore preset actions from CDS - Action Catalog</p> - <button - data-target="#carouselExampleIndicators" - data-slide-to="2" class="btn"> - Select - </button> - </div> + <div class="modal-header"> + <h5 class="modal-title" id="exampleModalLongTitle"></h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close" + title="Close"> + <i class="icon-action-close"></i> + </button> + </div> + <div class="modal-body"> + <div id="carouselExampleIndicators" class="carousel slide" + data-ride="carousel" data-interval="false"> + <div class="carousel-inner"> + <!--OPTIONS SLIDE--> + <div class="carousel-item active"> + <h3 class="mainHead">Create an action</h3> + <h1>How would you like to get started?</h1> + <div class="row"> + <!--Custom Action--> + <div class="col-3 d-flex"> + <a class="d-flex" + data-target="#carouselExampleIndicators" + data-slide-to="1"> + <div class="card actionType custom"> + <div class="card-body"> + <h3>Custom</h3> + <p>Start with your own settings</p> + <button + data-target="#carouselExampleIndicators" + data-slide-to="1" class="btn"> + Create + </button> </div> - </a> - </div> - <!--Recent Action--> - <div class="col-3 d-flex"> - <a class="d-flex" - data-target="#carouselExampleIndicators" - data-slide-to="3"> - <div class="card actionType recent"> - <div class="card-body"> - <h3>Recent</h3> - <p>Re-use recent actions of your - recent - packages</p> - <button - data-target="#carouselExampleIndicators" - data-slide-to="3" class="btn"> - Select - </button> - </div> + </div> + </a> + </div> + <!--Default Action--> + <div class="col-3 d-flex"> + <a class="d-flex" + data-target="#carouselExampleIndicators" + data-slide-to="2"> + <div class="card actionType default"> + <div class="card-body"> + <h3>Default</h3> + <p>Explore preset actions from CDS + Action Catalog</p> + <button + data-target="#carouselExampleIndicators" + data-slide-to="2" class="btn"> + Select + </button> </div> - </a> - </div> - <!--Import Action--> - <div class="col-3 d-flex"> - <a class="d-flex" - data-target="#carouselExampleIndicators" - data-slide-to="4"> - <div class="card actionType import"> - <div class="card-body"> - <h3>Import</h3> - <p>Import your own action files</p> - <button - data-target="#carouselExampleIndicators" - data-slide-to="4" class="btn"> - Browse</button> - </div> + </div> + </a> + </div> + <!--Recent Action--> + <div class="col-3 d-flex"> + <a class="d-flex" + data-target="#carouselExampleIndicators" + data-slide-to="3"> + <div class="card actionType recent"> + <div class="card-body"> + <h3>Recent</h3> + <p>Re-use recent actions of your + recent + packages</p> + <button + data-target="#carouselExampleIndicators" + data-slide-to="3" class="btn"> + Select + </button> </div> - </a> - </div> + </div> + </a> </div> - <div class="row"> - <div class="col text-center"> - <button class="btn skip-btn" - (click)="goToDesignerMode(viewedPackage.id)">Skip - to Designer Canvas</button> - </div> + <!--Import Action--> + <div class="col-3 d-flex"> + <a class="d-flex" + data-target="#carouselExampleIndicators" + data-slide-to="4"> + <div class="card actionType import"> + <div class="card-body"> + <h3>Import</h3> + <p>Import your own action files</p> + <button + data-target="#carouselExampleIndicators" + data-slide-to="4" class="btn"> + Browse</button> + </div> + </div> + </a> </div> </div> - <!--Custom Action Form--> - <div class="carousel-item"> - <button data-target="#carouselExampleIndicators" - data-slide-to="0" title="Back" class="btn back"><i - class="icon-action-back"></i></button> - <h1>Create Custom Action</h1> - <div class="form-group text-center"> - <input type="text" [(ngModel)]="customActionName" - class="form-control customAction" - placeholder="Type Action Name" autofocus> - <button type="button" - (click)="goToDesignerMode(viewedPackage.id)" - class="btn submit">Start</button> + <div class="row"> + <div class="col text-center"> + <button class="btn skip-btn" + (click)="goToDesignerMode(viewedPackage.id)">Skip + to Designer Canvas</button> </div> - </div> - <!--Default Actions Form--> - <div class="carousel-item"> - <button data-target="#carouselExampleIndicators" - data-slide-to="0" title="Back" class="btn back"><i - class="icon-action-back"></i></button> - <h1>Choose Action(s) from CDS Default Package </h1> - <div class="actionFormWrapper"> - <div class="row mb-3"> - <div class="col sort-packages"> - <label class="actionlabel">Version</label> - <div class="dropdown" style="width: 90px"> - <input class="dropdown-toggle" type="text"> - <div class="dropdown-text">1.6.2</div> - <ul class="dropdown-content"> - <li> - <a>1.1.8</a> - </li> - <li> - <a>2.1.8</a> - </li> - </ul> - </div> - </div> - <div class="col"> - <input type="text" - class="form-control searchInput" - placeholder="Search"> + </div> + <!--Custom Action Form--> + <div class="carousel-item"> + <button data-target="#carouselExampleIndicators" + data-slide-to="0" title="Back" class="btn back"><i + class="icon-action-back"></i></button> + <h1>Create Custom Action</h1> + <div class="form-group text-center"> + <input type="text" [(ngModel)]="customActionName" + class="form-control customAction" + placeholder="Type Action Name" autofocus> + <button type="button" + (click)="goToDesignerMode(viewedPackage.id)" + class="btn submit">Start</button> + </div> + + </div> + <!--Default Actions Form--> + <div class="carousel-item"> + <button data-target="#carouselExampleIndicators" + data-slide-to="0" title="Back" class="btn back"><i + class="icon-action-back"></i></button> + <h1>Choose Action(s) from CDS Default Package </h1> + <div class="actionFormWrapper"> + <div class="row mb-3"> + <div class="col sort-packages"> + <label class="actionlabel">Version</label> + <div class="dropdown" style="width: 90px"> + <input class="dropdown-toggle" type="text"> + <div class="dropdown-text">1.6.2</div> + <ul class="dropdown-content"> + <li> + <a>1.1.8</a> + </li> + <li> + <a>2.1.8</a> + </li> + </ul> </div> </div> - <div class="row actionsListScroll"> - <div class="col-6"> - <div class="actionName"> - <div class="custom-control custom-checkbox"> - <input type="checkbox" - class="custom-control-input" - id="customControlValidation1" - required> - <label class="custom-control-label" - for="customControlValidation1">config-assign</label> - </div> + <div class="col"> + <input type="text" class="form-control searchInput" + placeholder="Search"> + </div> + </div> + <div class="row actionsListScroll"> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation1" required> + <label class="custom-control-label" + for="customControlValidation1">config-assign</label> </div> </div> - <div class="col-6"> - <div class="actionName"> - <div class="custom-control custom-checkbox"> - <input type="checkbox" - class="custom-control-input" - id="customControlValidation2" - required> - <label class="custom-control-label" - for="customControlValidation2">config-assign-test</label> - </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation2" required> + <label class="custom-control-label" + for="customControlValidation2">config-assign-test</label> </div> </div> - <div class="col-6"> - <div class="actionName"> - <div class="custom-control custom-checkbox"> - <input type="checkbox" - class="custom-control-input" - id="customControlValidation3" - required> - <label class="custom-control-label" - for="customControlValidation3">config-deploy</label> - </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation3" required> + <label class="custom-control-label" + for="customControlValidation3">config-deploy</label> </div> </div> - <div class="col-6"> - <div class="actionName"> - <div class="custom-control custom-checkbox"> - <input type="checkbox" - class="custom-control-input" - id="customControlValidation4" - required> - <label class="custom-control-label" - for="customControlValidation4">config-modify</label> - </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation4" required> + <label class="custom-control-label" + for="customControlValidation4">config-modify</label> </div> </div> - <div class="col-6"> - <div class="actionName"> - <div class="custom-control custom-checkbox"> - <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" - required> - <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> - </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> </div> </div> - <div class="col-6"> - <div class="actionName"> - <div class="custom-control custom-checkbox"> - <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" - required> - <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> - </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> </div> </div> - <div class="col-6"> - <div class="actionName"> - <div class="custom-control custom-checkbox"> - <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" - required> - <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> - </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> </div> </div> - <div class="col-6"> - <div class="actionName"> - <div class="custom-control custom-checkbox"> - <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" - required> - <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> - </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> </div> </div> - <div class="col-6"> - <div class="actionName"> - <div class="custom-control custom-checkbox"> - <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" - required> - <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> - </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> </div> </div> - <div class="col-6"> - <div class="actionName"> - <div class="custom-control custom-checkbox"> - <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" - required> - <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> - </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> </div> </div> - <div class="col-6"> - <div class="actionName"> - <div class="custom-control custom-checkbox"> - <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" - required> - <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> - </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> </div> </div> </div> - <div class="row"> - <div class="col text-center"> - <p class="selectedActions">0 selected</p> - <button type="button" - (click)="goToDesignerMode(viewedPackage.id)" - class="btn submit">Start</button> - </div> + </div> + <div class="row"> + <div class="col text-center"> + <p class="selectedActions">0 selected</p> + <button type="button" + (click)="goToDesignerMode(viewedPackage.id)" + class="btn submit">Start</button> </div> </div> </div> - <!--Recent Actions Form--> - <div class="carousel-item"> - <button data-target="#carouselExampleIndicators" - data-slide-to="0" title="Back" class="btn back"><i - class="icon-action-back"></i></button> - <h1>Choose Action(s) from Recent Packages</h1> - <div class="actionFormWrapper"> - <div class="row mb-3"> - <div class="col sort-packages"> - <label class="actionlabel">Package - Name</label> - <div class="dropdown"> - <input class="dropdown-toggle" type="text"> - <div class="dropdown-text">CDS (v 1.0.0) - </div> - <ul class="dropdown-content"> - <li> - <a>Test Package (v 1.1.8)</a> - </li> - <li> - <a>Test Package (v 1.1.8)</a> - </li> - <li> - <a>Test Package (v 1.1.8)</a> - </li> - <li> - <a>Test Package (v 1.1.8)</a> - </li> - </ul> + </div> + <!--Recent Actions Form--> + <div class="carousel-item"> + <button data-target="#carouselExampleIndicators" + data-slide-to="0" title="Back" class="btn back"><i + class="icon-action-back"></i></button> + <h1>Choose Action(s) from Recent Packages</h1> + <div class="actionFormWrapper"> + <div class="row mb-3"> + <div class="col sort-packages"> + <label class="actionlabel">Package + Name</label> + <div class="dropdown"> + <input class="dropdown-toggle" type="text"> + <div class="dropdown-text">CDS (v 1.0.0) </div> - </div> - <div class="col"> - <input type="text" - class="form-control searchInput" - placeholder="Search"> + <ul class="dropdown-content"> + <li> + <a>Test Package (v 1.1.8)</a> + </li> + <li> + <a>Test Package (v 1.1.8)</a> + </li> + <li> + <a>Test Package (v 1.1.8)</a> + </li> + <li> + <a>Test Package (v 1.1.8)</a> + </li> + </ul> </div> </div> - <div class="row actionsListScroll"> - <div class="col-6"> - <div class="actionName"> - <div class="custom-control custom-checkbox"> - <input type="checkbox" - class="custom-control-input" - id="customControlValidation1" - required> - <label class="custom-control-label" - for="customControlValidation1">config-assign</label> - </div> + <div class="col"> + <input type="text" class="form-control searchInput" + placeholder="Search"> + </div> + </div> + <div class="row actionsListScroll"> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation1" required> + <label class="custom-control-label" + for="customControlValidation1">config-assign</label> </div> </div> - <div class="col-6"> - <div class="actionName"> - <div class="custom-control custom-checkbox"> - <input type="checkbox" - class="custom-control-input" - id="customControlValidation2" - required> - <label class="custom-control-label" - for="customControlValidation2">config-assign-test</label> - </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation2" required> + <label class="custom-control-label" + for="customControlValidation2">config-assign-test</label> </div> </div> - <div class="col-6"> - <div class="actionName"> - <div class="custom-control custom-checkbox"> - <input type="checkbox" - class="custom-control-input" - id="customControlValidation3" - required> - <label class="custom-control-label" - for="customControlValidation3">config-deploy</label> - </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation3" required> + <label class="custom-control-label" + for="customControlValidation3">config-deploy</label> </div> </div> - <div class="col-6"> - <div class="actionName"> - <div class="custom-control custom-checkbox"> - <input type="checkbox" - class="custom-control-input" - id="customControlValidation4" - required> - <label class="custom-control-label" - for="customControlValidation4">config-modify</label> - </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation4" required> + <label class="custom-control-label" + for="customControlValidation4">config-modify</label> </div> </div> - <div class="col-6"> - <div class="actionName"> - <div class="custom-control custom-checkbox"> - <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" - required> - <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> - </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> </div> </div> - <div class="col-6"> - <div class="actionName"> - <div class="custom-control custom-checkbox"> - <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" - required> - <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> - </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> </div> </div> - <div class="col-6"> - <div class="actionName"> - <div class="custom-control custom-checkbox"> - <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" - required> - <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> - </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> </div> </div> - <div class="col-6"> - <div class="actionName"> - <div class="custom-control custom-checkbox"> - <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" - required> - <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> - </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> </div> </div> - <div class="col-6"> - <div class="actionName"> - <div class="custom-control custom-checkbox"> - <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" - required> - <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> - </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> </div> </div> - <div class="col-6"> - <div class="actionName"> - <div class="custom-control custom-checkbox"> - <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" - required> - <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> - </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> </div> </div> - <div class="col-6"> - <div class="actionName"> - <div class="custom-control custom-checkbox"> - <input type="checkbox" - class="custom-control-input" - id="customControlValidation5" - required> - <label class="custom-control-label" - for="customControlValidation5">config-assign1</label> - </div> + </div> + <div class="col-6"> + <div class="actionName"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" + class="custom-control-input" + id="customControlValidation5" required> + <label class="custom-control-label" + for="customControlValidation5">config-assign1</label> </div> </div> </div> - <div class="row"> - <div class="col text-center"> - <p class="selectedActions">0 selected</p> - <button type="button" - class="btn submit">Start</button> - </div> + </div> + <div class="row"> + <div class="col text-center"> + <p class="selectedActions">0 selected</p> + <button type="button" + class="btn submit">Start</button> </div> </div> </div> - <!--Import Actions Form--> - <div class="carousel-item"> - <button data-target="#carouselExampleIndicators" - data-slide-to="0" title="Back" class="btn back"><i - class="icon-action-back"></i></button> - <h1>Import Action(s)</h1> - <div class="actionFormWrapper"> - <div class="row"> - <div class="col"> - <ngx-file-drop accept=".json" - dropZoneLabel="Drop files here" - (onFileDrop)="dropped($event)" - (onFileOver)="fileOver($event)" - (onFileLeave)="fileLeave($event)"> - <ng-template ngx-file-drop-content-tmp - let-openFileSelector="openFileSelector"> - <div class="folder-upload"> - <img - src="assets/img/folder-upload.svg" /> - </div> - <div class="folder-upload-text"> - Drag & Drop file - </div> - <div class="folder-upload-text">or - <button type="button" - class="btn btn-sm btn-primary" - (click)="openFileSelector()">Browse - Files - </button> - </div> - <div class="folder-upload-type"> - Allowed file - type: json</div> - </ng-template> - </ngx-file-drop> - <div class="upload-table"> - <table class="table"> - <thead> - <tr - *ngFor="let item of uploadedFiles; let i=index"> - <th width="40"><img - src="assets/img/icon-file-code.svg" /> - </th> - <th>{{ item.name }}</th> - <th width="40" - class="text-right"> - <img - src="assets/img/icon-remove-file.svg" /> - </th> - </tr> - </thead> - </table> - </div> + </div> + <!--Import Actions Form--> + <div class="carousel-item"> + <button data-target="#carouselExampleIndicators" + data-slide-to="0" title="Back" class="btn back"><i + class="icon-action-back"></i></button> + <h1>Import Action(s)</h1> + <div class="actionFormWrapper"> + <div class="row"> + <div class="col"> + <ngx-file-drop accept=".json" + dropZoneLabel="Drop files here" + (onFileDrop)="dropped($event)" + (onFileOver)="fileOver($event)" + (onFileLeave)="fileLeave($event)"> + <ng-template ngx-file-drop-content-tmp + let-openFileSelector="openFileSelector"> + <div class="folder-upload"> + <img + src="assets/img/folder-upload.svg" /> + </div> + <div class="folder-upload-text"> + Drag & Drop file + </div> + <div class="folder-upload-text">or + <button type="button" + class="btn btn-sm btn-primary" + (click)="openFileSelector()">Browse + Files + </button> + </div> + <div class="folder-upload-type"> + Allowed file + type: json</div> + </ng-template> + </ngx-file-drop> + <div class="upload-table"> + <table class="table"> + <thead> + <tr + *ngFor="let item of uploadedFiles; let i=index"> + <th width="40"><img + src="assets/img/icon-file-code.svg" /> + </th> + <th>{{ item.name }}</th> + <th width="40" class="text-right"> + <img + src="assets/img/icon-remove-file.svg" /> + </th> + </tr> + </thead> + </table> </div> </div> - <div class="row"> - <div class="col text-center"> - <button type="button" - class="btn submit mt-4">Import</button> - </div> + </div> + <div class="row"> + <div class="col text-center"> + <button type="button" + class="btn submit mt-4">Import</button> </div> </div> </div> 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 22eeeeb32..f7cff5072 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 @@ -116,7 +116,7 @@ header{ .btn-topology-action, .btn-topology-action:hover{ margin: 0 6px; - padding: 4px 8px; + padding: 3px 8px; color: #fff; border-radius: 50%; border: solid .5px #fff; @@ -125,9 +125,10 @@ header{ margin-right: 0; } .btn-topology-action .fa{ - width: 16px; - height: 16px; + /* width: 16px; + height: 16px; */ text-align: center; + font-size: 14px; } .topology-actions .dropdown-text, .dropdown-toggle:hover ~ .dropdown-text, @@ -177,7 +178,7 @@ header{ padding: 0 !important; } .package-info h3{ - font-size: 15px; + font-size: 13px; font-weight: bold; } .package-info h3 span{ @@ -385,9 +386,9 @@ p.compType-4{ } .new-action, .new-action:hover{ - margin: 9px 0 4px 18px; + margin: 9px 0 4px 3px; padding: 6px; - font-size: 13px; + font-size: 12px; font-weight: bold; color: #1B3E6F; } @@ -486,7 +487,7 @@ p.compType-4{ /*CANVAS*/ .source-button.editBar{ position: absolute; - z-index: 9999999; + z-index: 1000 /*9999999*/; top: 60px; /* left: 50%; */ } @@ -527,6 +528,7 @@ p.compType-4{ } .editBar .toggoleBtn.active, .editBar2 .toggoleBtn.active{ + padding: 0 10px !important; background-color: #1B3E6F !important; color: #fff; } @@ -791,7 +793,7 @@ p.compType-4{ margin-top: 14px; padding-left: 30px!important; border: 0; - font-size: 12px; + font-size: 11px; color: #1B3E6F !important; background-color: #fff !important; background-repeat: no-repeat; @@ -826,13 +828,14 @@ ul.templateLegend{ color: #0ABDE3; } ul.editor{ - margin-right: -40px; + /* margin-right: -40px; */ margin-top: 16px; } .editor li{ list-style: none; } .editor .btn { + padding: 0 8px !important; box-shadow: none; } .ace_editor{ @@ -848,3 +851,6 @@ ul.editor{ margin-left: 12px; margin-right: 12px; } +.zoom-percent{ + font-size: 12px; +} 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 7f49d3cf3..6a432fec8 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 @@ -31,19 +31,23 @@ <img src="assets/img/icon-close.svg" /> </button> </div> - <div class="modal-body"> - <div class="row package-info"> + <div class="modal-body package-info"> + <div class="row"> <div class="col"> <h3>Test Package <span class="package-version">Version 1.0.2</span></h3> </div> + </div> + <div class="row"> <div class="col mb-3"> <span class="badge badge-primary">test</span> <span class="badge badge-primary">vDNS-CDS</span> <span class="badge badge-primary">SCALE-OUT</span> <span class="badge badge-primary">MARCO</span> </div> - <div class="col-2"> + </div> + <div class="row"> + <div class="col-2 pr-0"> <img src="/assets/img/img-user3.jpg" class="creator-pic"> </div> <div class="col-10 pl-0"> @@ -126,7 +130,7 @@ <li class="capability"><i class="icon-rectangle" aria-hidden="true"></i> Capability</li> </ul> - <ul class="editor navbar ml-auto"> + <ul class="editor navbar"> <li> <button type="button" class="btn tooltip-bottom" data-tooltip="Undo"> <img src="/assets/img/icon-undoActive.svg"> @@ -141,14 +145,14 @@ <li><button type="button" class="btn tooltip-bottom" data-tooltip="Zoom Out"> <img src="/assets/img/icon-zoomOut.svg"> </button></li> - <li>100%</li> + <li class="zoom-percent">100%</li> <li> <button type="button" class="btn tooltip-bottom" data-tooltip="Zoom In"> <img src="/assets/img/icon-zoomIn.svg"> </button> </li> </ul> - <ul class="navbar ml-auto" style="list-style: none"> + <ul class="navbar ml-2" 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> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html index 270482f12..eedbe9f85 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html @@ -4,11 +4,11 @@ <p class="logo mb-0"></p> <nav aria-label="breadcrumb"> <ol class="breadcrumb designer-breadcrumb mb-0"> - <li class="breadcrumb-item"> + <li class="breadcrumb-item"> <a href="#">CBA Packages</a> </li> - <i class="fa fa-angle-right ml-2 mr-2"></i> - <li class="breadcrumb-item"> + <i class="fa fa-angle-right ml-2 mr-2"></i> + <li class="breadcrumb-item"> <a href="/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a> <button type="button" class="btn package-info-btn" data-toggle="modal" data-target="#exampleModalLong"> @@ -30,19 +30,23 @@ <img src="assets/img/icon-close.svg" /> </button> </div> - <div class="modal-body"> - <div class="row package-info"> + <div class="modal-body package-info"> + <div class="row"> <div class="col"> <h3>Test Package <span class="package-version">Version 1.0.2</span></h3> </div> + </div> + <div class="row"> <div class="col mb-3"> <span class="badge badge-primary">test</span> <span class="badge badge-primary">vDNS-CDS</span> <span class="badge badge-primary">SCALE-OUT</span> <span class="badge badge-primary">MARCO</span> </div> - <div class="col-2"> + </div> + <div class="row"> + <div class="col-2 pr-0"> <img src="/assets/img/img-user3.jpg" class="creator-pic"> </div> <div class="col-10 pl-0"> @@ -120,11 +124,11 @@ </li> </ul> </li> - + <li class="nav-item"> <div class="btn-group viewBtns" role="group"> - <button (click)="convertAndOpenInDesingerView(viewedPackage.id)" - type="button" class="btn btn-secondary topologySource">Designer</button> + <button (click)="convertAndOpenInDesingerView(viewedPackage.id)" type="button" + class="btn btn-secondary topologySource">Designer</button> <button type="button" class="btn btn-secondary topologyView active">Scripting</button> </div> </li> @@ -148,9 +152,10 @@ </div> </ng-sidebar> -<div ng-sidebar-content id="board-paper"> - <ace-editor [(text)]="content" [mode]="'json'" [autoUpdateContent]="true" [durationBeforeCallback]="1000" - [theme]="'tomorrow_night_bright'" #editor style="height:500px"> - </ace-editor> + <div ng-sidebar-content id="board-paper"> + <ace-editor [(text)]="content" [mode]="'json'" [autoUpdateContent]="true" [durationBeforeCallback]="1000" + [theme]="'tomorrow_night_bright'" #editor style="height:500px"> + </ace-editor> - </div> + </div> +
\ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html index 9ac7a058a..8f2b554d9 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html @@ -1,5 +1,5 @@ <div class="import-container-all"> - <div class="import-container"> + <!-- <div class="import-container"> <div class="import-container-input"> <input placeholder="Enter file URL then ENTER" type="input" class="ng-pristine ng-valid ng-touched"> <a class="enter-link" href="#"><i class="icon-enter-link"></i></a> @@ -7,7 +7,7 @@ <span class="import-container-span">Or you can also <a href="#" data-toggle="modal" (click)="resetTheUploadedFiles()" data-target="#importModal"><b>Import File</b></a></span> - </div> + </div> --> <div class="accordion"> <!-- <div class="card creat-card"> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html index 7afea6b9a..fc001b11b 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html @@ -41,8 +41,8 @@ role="tab" aria-controls="nav-template" aria-selected="false">TEMPLATE & MAPPING</a> <a class="nav-item nav-link" id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts" role="tab" aria-controls="nav-scripts" aria-selected="false">SCRIPTS</a> - <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports" - role="tab" aria-controls="nav-imports" aria-selected="false">DEFINITIONS</a> + <!-- <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports" + role="tab" aria-controls="nav-imports" aria-selected="false">DEFINITIONS</a> --> <a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab" href="#nav-authentication" role="tab" aria-controls="nav-authentication" aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html index 09dd4187f..5e04b71ac 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html @@ -1,10 +1,70 @@ <!--Page Title--> -<header class="page-title"> +<header class="page-title" style="padding-top: 14px;padding-bottom: 13px;"> <div class="row"> - <h2 class="col m-0">CBA Packages + <h2 class="col m-0" style="line-height: 33px;">CBA Packages <span id="numberOfPackages">({{numberOfPackages}} packages)</span> </h2> - <div class="col"> + <div class="col profile-help"> + <nav class="navbar navbar-expand-lg navbar-light"> + <ul class="navbar-nav ml-auto"> + <li class="nav-item help-btn"> + <a class="nav-link mr-2" href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank" [delay]="300" + tooltip="Help" placement="bottom"><i class="icon-info" aria-hidden="true"></i></a> + </li> + <div class="nav-item dropdown"> + <input class="dropdown-toggle" type="text"> + <div class="dropdown-text"><img src="../assets/img/img-user.jpeg" align="right"></div> + <ul class="dropdown-content"> + <li> + <a href="#">Username</a> + </li> + <li> + <a href="#">Settings</a> + </li> + <li> + <a href="#">Projects</a> + </li> + <li> + <a href="#">Log out</a> + </li> + </ul> + </div> + <!-- <li class="nav-item dropdown"> + <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + Dropdown + </a> + <div class="dropdown-menu" aria-labelledby="navbarDropdown"> + <a class="dropdown-item" href="#">Action</a> + <a class="dropdown-item" href="#">Another action</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="#">Something else here</a> + </div> + </li> --> + </ul> + </nav> + <!-- <ul class="menu-dropdown userProfile"> + <li><button type="button" class="btn package-info-btn" data-toggle="modal" + data-target="#exampleModalLong"> + <i class="icon-info" aria-hidden="true"></i> + </button></li> + <li> + <div class="dropdown"> + <input class="dropdown-toggle" type="text"> + <div class="dropdown-text">User name</div> + <ul class="dropdown-content"> + <li> + <a href="#">Settings</a> + </li> + <li> + <a href="#">Projects</a> + </li> + <li> + <a href="#">Log out</a> + </li> + </ul> + </div> + </li> + </ul> --> </div> </div> </header> diff --git a/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.html b/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.html index bfccac7a0..5ecb38743 100644 --- a/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.html +++ b/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.html @@ -49,12 +49,12 @@ </li> --> </ul> </div> - <ul class="menu-dropdown userProfile"> + <!-- <ul class="menu-dropdown userProfile"> <li> <div class="dropdown"> <input class="dropdown-toggle" type="text"> <div class="dropdown-text">User name</div> - <!-- <ul class="dropdown-content"> + <ul class="dropdown-content"> <li> <a href="#">Settings</a> </li> @@ -64,10 +64,10 @@ <li> <a href="#">Log out</a> </li> - </ul> --> + </ul> </div> </li> - </ul> + </ul>--> </nav> </div>
\ No newline at end of file diff --git a/cds-ui/designer-client/src/assets/icomoon/style.css b/cds-ui/designer-client/src/assets/icomoon/style.css index 874f94a9b..fcf806c24 100755 --- a/cds-ui/designer-client/src/assets/icomoon/style.css +++ b/cds-ui/designer-client/src/assets/icomoon/style.css @@ -40,7 +40,6 @@ } .icon-rectangle:before { content: "\e906"; - color: #ff6b6b; } .icon-file:before { content: "\e905"; diff --git a/cds-ui/designer-client/src/assets/img/img-user.jpeg b/cds-ui/designer-client/src/assets/img/img-user.jpeg Binary files differnew file mode 100755 index 000000000..8b9f98b03 --- /dev/null +++ b/cds-ui/designer-client/src/assets/img/img-user.jpeg diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css index 320ae139e..d4f56c3b0 100644 --- a/cds-ui/designer-client/src/styles.css +++ b/cds-ui/designer-client/src/styles.css @@ -915,6 +915,67 @@ height: 40px; .main-container{ padding: 0 !important; } +/*Profile & Help Area*/ +.profile-help .navbar{ + padding: 0 !important; +} +.profile-help .dropdown{ + width: 50px; +} +.profile-help .dropdown-text{ + border: 0; + background: transparent; + box-shadow: none; + font-size: 13px; + /* text-indent: -999px; */ +} +.profile-help .dropdown-text img{ + width: 33px; + height: 33px; + border: solid 1px #fff; + object-fit: cover; + border-radius: 50%; +} +.profile-help .dropdown-toggle:hover ~ .dropdown-text{ + background: #fff; +} +.profile-help .dropdown-toggle:hover ~ .dropdown-text img{ + box-shadow: 0 2px 6px 6px rgba(47, 83, 151, .17); +} +.profile-help .dropdown-content{ + right: 0; + top: 47px; + padding: 4px 0; + background-color: #fff; + border: 1px solid #ECEDF2; + border-radius: 2px; + box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.12) !important; +} +.profile-help .dropdown-content li:hover{ + background-color: #ECEDF2; +} +.profile-help .dropdown-content a{ + padding: 3px; + color: #1B3E6F; + font-size: 13px; +} +.profile-help .dropdown-content a:hover{ + text-decoration: none; + background-color: transparent; +} +.help-btn{ + border-right: solid 1px #ECEDF2; +} +.help-btn .nav-link{ + padding: 7px 8px 0 !important; +} +.help-btn i{ + font-size: 19px; + color: #C3CDDB; +} +.help-btn a:hover i{ + color: #1B3E6F; +} .header-button-save button{ border-radius: 50px; } @@ -1443,11 +1504,22 @@ ul.package-contributers{ box-shadow: 0 10px 20px 0 rgba(27,62,111,.1); transition: 0.3s !important; } +.createActionModal h3.mainHead{ + text-transform: uppercase; + margin-bottom: 6px; + font-size: 14px; + font-weight: bold; + text-align: center; + color: #C1CDDD; +} .createActionModal h1{ margin-bottom: 21px; font-size: 22px; + font-weight: bold; text-align: center; - font-weight: normal; +} +.createActionModal .carousel-inner{ + height: 510px; } .createActionModal .skip-btn{ float: unset; @@ -1458,6 +1530,12 @@ ul.package-contributers{ border: solid 1px #F1F2FA; border-radius: 2px; } +.createActionModal .skip-btn:hover{ + background: #1273EB; + color: #fff; + box-shadow: 0 10px 20px 0 rgba(27,62,111,.1); +} + .actionType, .actionType:hover{ text-align: center; @@ -1932,9 +2010,11 @@ ul.package-contributers{ width: auto !important; max-width: 280px !important; text-align: left!important; + /* color:#1B3E6F; + background-color: #fff !important; */ color:#1B3E6F; - background-color: #fff !important; - border: solid 1px #E6EDF5; + background-color: #C3CDDB !important; + border: solid 1px #C3CDDB; border-radius: 3px !important; border-top-left-radius: 0 !important; font-size: 12px; @@ -1942,16 +2022,16 @@ ul.package-contributers{ } .bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before { - border-top-color: #E6EDF5 !important; + border-top-color: #C3CDDB !important; } .bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before { - border-right-color: #E6EDF5 !important; + border-right-color: #C3CDDB !important; } .bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before { - border-bottom-color: #E6EDF5 !important; + border-bottom-color: #C3CDDB !important; } .bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before { - border-left-color: #E6EDF5 !important; + border-left-color: #C3CDDB !important; } .btn{ @@ -2732,7 +2812,7 @@ hr{ border-right: 0px !important; color: #1B3E6F !important; } -.ace-tm .ace_gutter-active-line{ +.ace_gutter-active-line{ background-color: #265699 !important; color: #fff; } |
