@omnia/foundation

<div class="omf-document-picker image"> <div class="omf-clearfix"> <div class="col-sm-5" style="padding: 0"> <omf-spinner [spinning]="scope.isLoadingLibraries" [spinSize]="'md'"> <omf-dropdown-list *ngIf="scope.selectedLibrary != undefined" [items]="scope.libraries" textProperty="title" valueProperty="title" [(selectedItemValue)]="scope.selectedLibrary.title" [onItemSelected]="scope.changeSelectedLibrary"> </omf-dropdown-list> </omf-spinner> </div> <div class="col-sm-1" *ngIf="scope.selectedLibrary != undefined" [omfShow]="scope.selectedLibrary.id !== null"> <div class="omf-file-upload-button btn btn-default"> <span>{{'Buttons.Upload' | omfLocalize}}</span> <input type="file" omfFileRead [omfFileRead]="scope.fileToUpload" (onFileReadChange)="scope.onFileReadChange($event)" class="omf-input-file" accept="image/*" /> <span class="omf-input-file-disabled" [omfShow]="(scope.haveAddListItemsPermission == false) || scope.isLoadingLibraries || scope.isUploading || !scope.notInFilterMode()"></span> </div> </div> <div class="col-sm-6" style="padding-right: 0"> <div class="omf-search-box-container pull-right" style="width: 97%; float: right"> <input class="form-control omf-search-box" type="text" [(ngModel)]="scope.query.searchString" (keyup)="scope.searchImages()" style="margin:0;" /> <i class="fa fa-search"></i> </div> </div> </div> <div class="omf-clearfix filter-layout"> <div class="omf-clearfix"> <div class="omf-form-control omf-filter-control taxonomy" *ngFor="let field of scope.filterFields"> <label class="omf-form-label">{{field.displayName}}</label> <omf-dropdown-list *ngIf="field.displayType == 1" [items]="field.terms" textProperty="name" valueProperty="id" [showLoading]="field.isLoading" [onDropDownOpen]="scope.onOpenTermDropDown(field)" [onItemSelected]="scope.onSelectTermOnDropDown(field)"> </omf-dropdown-list> <omf-csom-taxonomy-picker *ngIf="field.displayType == 2" [termSetId]="field.termSetId" [(selected)]="field.value" (selectedChange)="scope.onSelectTermOnTermPicker(field,$event)"> </omf-csom-taxonomy-picker> </div> </div> <div class="omf-clearfix filter-value-layout"> <span *ngFor="let filter of scope.filterValues" class="filter-value">{{filter.displayValue}} <span class="delete-filter" (click)="scope.deleteFilterValue(filter)">x</span></span> </div> </div> <div class="omf-clearfix omf-image-picker-breadcrumb" [omfShow]="scope.notInFilterMode()"> <span *ngFor="let folder of scope.breadcrumb; let i = index; let last = last"> <a href="javascript:void(0)" [omfInnerHtml]="folder.title" (click)="scope.navigateToFolder(folder)"></a> <span [omfShow]="!last"> > </span> </span> </div> <div> <fieldset [disabled]="scope.isLoadingLibraries"> <div class="omf-document-picker-itemlist image"> <omf-spinner [spinning]="scope.isLoadingImages || scope.isUploading"> <div class="omf-dropzone omf-clearfix" omfFileDrop [omfFileDrop]="scope.onFileDrop" [enableDrop]="scope.haveAddListItemsPermission != false"> <div class="image-item relative" [ngClass]="{'selected' : image.selected == true}" *ngFor="let image of scope.imageList" (click)="scope.changeSelectedImage(image)"> <img class="icon" [src]="scope.getImageUrl(image)" /> <p class="title" [omfInnerHtml]="scope.getImageTitle(image)"></p> </div> <div *ngIf="scope.imageList != undefined && scope.imageList.length == 0"> {{'Components.ImagePicker.NoResult' | omfLocalize}} </div> </div> </omf-spinner> </div> <div [omfShow]="scope.isInSPContext && scope.selectedDocument && scope.availableImageRenditions.length > 0" class="image-renditions"> <label>{{'ImageManagement.ImageRendition' | omfLocalize}}:</label> <fieldset [disabled]="scope.haveEditListItemsPermission == false"> <div class="rendition-options"> <label> <input type="radio" (ngModelChange)="scope.updateImageUrl($event)" [(ngModel)]="scope.selectedImageRendition" [value]="0" name="imageRenditionGrp" class="rendition-radio" /> <span>{{'ImageManagement.NoneImageRendition' | omfLocalize}}</span> </label> <label *ngFor="let imageRendition of scope.availableImageRenditions"> <input type="radio" (ngModelChange)="scope.updateImageUrl($event)" [(ngModel)]="scope.selectedImageRendition" [value]="imageRendition.id" name="imageRenditionGrp" class="rendition-radio" /> <span class="rendition-edit-link" (click)="scope.openEditRenditionDialog(imageRendition)">{{imageRendition.name}}</span> </label> </div> </fieldset> </div> <div [omfShow]="scope.selectedDocument && scope.enableRotation" class="image-rotation"> <label>{{'ImageManagement.ImageRotation' | omfLocalize}}:</label> <fieldset> <div class="rotation-options"> <div class="rotation-option-container col-lg-3"> <div class="rotation-option-radio"> <label> <input type="radio" (ngModelChange)="scope.updateImageRotation($event)" [(ngModel)]="scope.selectedImageRotation" [value]="0" name="imageRotationGrp" class="rotation-radio" /> <span> {{'ImageManagement.NoRotate' | omfLocalize}} </span> </label> </div> <div class="rotation-option-preview"> <img class="icon" [src]="scope.selectedDocument && scope.selectedDocument.imageUrl" /> </div> </div> <div class="rotation-option-container col-lg-3"> <div class="rotation-option-radio"> <label> <input type="radio" (ngModelChange)="scope.updateImageRotation($event)" [(ngModel)]="scope.selectedImageRotation" [value]="270" name="imageRotationGrp" class="rotation-radio" /> <span> {{'ImageManagement.Rotate270deg' | omfLocalize}} </span> </label> </div> <div class="rotation-option-preview"> <img class="icon fa-rotate-270" [src]="scope.selectedDocument && scope.selectedDocument.imageUrl" /> </div> </div> <div class="rotation-option-container col-lg-3"> <div class="rotation-option-radio"> <label> <input type="radio" (ngModelChange)="scope.updateImageRotation($event)" [(ngModel)]="scope.selectedImageRotation" [value]="90" name="imageRotationGrp" class="rotation-radio" /> <span> {{'ImageManagement.Rotate90deg' | omfLocalize}} </span> </label> </div> <div class="rotation-option-preview"> <img class="icon fa-rotate-90" [src]="scope.selectedDocument && scope.selectedDocument.imageUrl" /> </div> </div> <div class="rotation-option-container col-lg-3"> <div class="rotation-option-radio"> <label> <input type="radio" (ngModelChange)="scope.updateImageRotation($event)" [(ngModel)]="scope.selectedImageRotation" [value]="180" name="imageRotationGrp" class="rotation-radio" /> <span> {{'ImageManagement.Rotate180deg' | omfLocalize}} </span> </label> </div> <div class="rotation-option-preview"> <img class="icon fa-rotate-180" [src]="scope.selectedDocument && scope.selectedDocument.imageUrl" /> </div> </div> </div> </fieldset> </div> </fieldset> </div> </div>