diff options
| author |   Sarah Abouzainah <sabouzainah.ext@orange.com> | 2020-07-16 17:52:00 +0200 |
|---|---|---|
| committer | Sarah Abouzainah <sabouzainah.ext@orange.com> | 2020-07-16 17:52:55 +0200 |
| commit | 75680a7215d2b8cd7b7ca95132df1eb6f90ef588 (patch) | |
| tree | b16edff22f7cd2ef395a030f116dda1a790e2b98 /cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard | |
| parent | 984d779d6701b32221d98282a05762b0467d4887 (diff) | |
Add Help link and User profile menu
Issue-ID: CCSDK-2567
Signed-off-by: Sarah Abouzainah <sabouzainah.ext@orange.com>
Change-Id: I55d6cd47910ef72a2015c60cc20d8a19bf5cc10b
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard')
| -rw-r--r-- | cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html | 896 |
1 files changed, 435 insertions, 461 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> |