This repository has been archived by the owner on Sep 5, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
-Improved text and image overlap on small screen.
-Fixed the lodash import. -Separated widget html from ts file.
- Loading branch information
1 parent
3685cf4
commit 6e38ec6
Showing
6 changed files
with
214 additions
and
210 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
106 changes: 106 additions & 0 deletions
106
src/image-animation-widget/image-animation-widget-config.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| <div class="form-group"> | ||
|
|
||
| <c8y-form-group> | ||
| <label for="AnimationAction">Animation type</label> | ||
| <select class="form-control" name="AnimationAction" id="AnimationAction" placeholder="Set the type of animation" [(ngModel)]="config.animationAction" required> | ||
| <option value="FADE IN">Fade in</option> | ||
| <option value="FADE OUT">Fade out</option> | ||
| <option value="SWAP">Swap</option> | ||
| <option value="ROTATE">Rotate</option> | ||
| <option value="SCROLL UP">Scroll up</option> | ||
| <option value="SCROLL DOWN">Scroll down</option> | ||
| <option value="SCROLL LEFT">Scroll left</option> | ||
| <option value="SCROLL RIGHT">Scroll right</option> | ||
| </select> | ||
| </c8y-form-group> | ||
|
|
||
| <ng-container *ngIf="config.animationAction !== 'SWAP'"> | ||
| <c8y-form-group> | ||
| <label for="imageFile">Image file (png, jpeg, jpg)</label> | ||
| <input type="file" class="form-control" id="imageFile" name="imageFile" alt="Image file" style="width:100%" accept=".png, .jpeg, .jpg" placeholder="Select the image file" (change)="onImageFileUpdated($event)" required> | ||
| </c8y-form-group> | ||
| </ng-container> | ||
|
|
||
| <ng-container *ngIf="config.animationAction === 'SWAP'"> | ||
| <c8y-form-group> | ||
| <label for="imageFile1">From image file (png, jpeg, jpg)</label> | ||
| <input type="file" class="form-control" id="imageFile1" name="imageFile1" alt="From image file" style="width:100%" accept=".png, .jpeg, .jpg" placeholder="Select the 'From' image file" (change)="onImageFile1Updated($event)" required> | ||
| </c8y-form-group> | ||
| </ng-container> | ||
|
|
||
| <ng-container *ngIf="config.animationAction === 'SWAP'"> | ||
| <c8y-form-group> | ||
| <label for="imageFile2">To image file (png, jpeg, jpg)</label> | ||
| <input type="file" class="form-control" id="imageFile2" name="imageFile2" alt="To image file" style="width:100%" accept=".png, .jpeg, .jpg" placeholder="Select the 'To' image file" (change)="onImageFile2Updated($event)" required> | ||
| </c8y-form-group> | ||
| </ng-container> | ||
|
|
||
| <c8y-form-group> | ||
| <div class="row"> | ||
| <div class="col-lg-6"> | ||
| <label for="animationActionOn">Event type to animate off to on</label> | ||
| <input type="string" class="form-control" id="animationActionOn" name="animationActionOn" placeholder="Enter the event type to animate from off to on" [(ngModel)]="config.animationActionOn" required> | ||
| </div> | ||
| <div class="col-lg-6"> | ||
| <label for="shortDescriptionOffToOn">Short description when animating off to on</label> | ||
| <input type="text" class="form-control" id="shortDescriptionOffToOn" name="shortDescriptionOffToOn" placeholder="Describe the animation" [(ngModel)]="config.shortDescriptionOffToOn"> | ||
| </div> | ||
| </div> | ||
| </c8y-form-group> | ||
|
|
||
| <c8y-form-group> | ||
| <div class="row"> | ||
| <div class="col-lg-6"> | ||
| <label for="animationActionOff">Event type to animate on to off</label> | ||
| <input type="string" class="form-control" id="animationActionOff" name="animationActionOff" style="width:100%" placeholder="Enter the event type to animate from off to on" [(ngModel)]="config.animationActionOff" required> | ||
| </div> | ||
| <div class="col-lg-6"> | ||
| <label for="shortDescriptionOnToOff">Short description when animating on to off</label> | ||
| <input type="text" class="form-control" id="shortDescriptionOnToOff" name="shortDescriptionOnToOff" placeholder="Describe the animation" [(ngModel)]="config.shortDescriptionOnToOff"> | ||
| </div> | ||
| </div> | ||
|
|
||
| </c8y-form-group> | ||
|
|
||
| <c8y-form-group> | ||
| <label for="height">Height (in pixels)</label> | ||
| <input type="number" class="form-control" id="height" name="height" style="width:100%" placeholder="Set the height of your image" [ngModel]="config.height" min="0" (change)="setHeight($event)" required> | ||
| </c8y-form-group> | ||
|
|
||
| <c8y-form-group> | ||
| <label for="width">Width (in pixels)</label> | ||
| <input type="number" class="form-control" id="width" name="width" style="width:100%" placeholder="Set the width of your image" [ngModel]="config.width" min="0" (change)="setWidth($event)" required> | ||
| </c8y-form-group> | ||
|
|
||
| <ng-container *ngIf="config.animationAction !== 'ROTATE' && config.animationAction !== 'SWAP'"> | ||
| <c8y-form-group> | ||
| <label for="remainingImagePercentage">Remaining image (in percentage)</label> | ||
| <input type="number" class="form-control" id="remainingImagePercentage" name="remainingImagePercentage" style="width:100%" placeholder="Set the image percentage which will remain on screen after animation" [ngModel]="config.remainingImagePercentage" min="0" max="100" (change)="setRemainingImagePercentage($event)" required> | ||
| </c8y-form-group> | ||
| </ng-container> | ||
|
|
||
| <ng-container *ngIf="config.animationAction === 'ROTATE'"> | ||
| <c8y-form-group> | ||
| <label for="rotationDegrees">Rotation (in degrees)</label> | ||
| <input type="number" class="form-control" id="rotationInDegrees" name="rotationInDegrees" style="width:100%" placeholder="Set the image rotation in degrees" [ngModel]="config.rotationInDegrees" min="-360" max="360" (change)="setRotationInDegrees($event)" required> | ||
| </c8y-form-group> | ||
| </ng-container> | ||
|
|
||
| <c8y-form-group> | ||
| <label for="animationTimeInSeconds">Animation time (in seconds)</label> | ||
| <input type="number" class="form-control" id="animationTimeInSeconds" name="animationTimeInSeconds" style="width:100%" placeholder="Set the amount of time taken to complete the animation" [ngModel]="config.animationTimeInSeconds" min="0" max="3600" (change)="setAnimationTimeInSeconds($event)" required> | ||
| </c8y-form-group> | ||
|
|
||
| <c8y-form-group> | ||
| <div class="row"> | ||
| <div class="col-lg-12"> | ||
| <label for="descriptionLocation">Location of the short description</label> | ||
| <select class="form-control" name="descriptionLocation" id="descriptionLocation" [(ngModel)]="config.shortDescriptionLocation"> | ||
| <option value="ABOVE">Above the image</option> | ||
| <option value="BELOW">Below the image</option> | ||
| </select> | ||
| </div> | ||
| </div> | ||
| </c8y-form-group> | ||
|
|
||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.