diff --git a/src/frontend/app/viewer/document-viewer.component.html b/src/frontend/app/viewer/document-viewer.component.html index 02720cd8ccc6c50b5b07ee9f6b14f784f477f4f0..ec99c4b2e0aa3649e11b6ec54faee962ce7902d2 100644 --- a/src/frontend/app/viewer/document-viewer.component.html +++ b/src/frontend/app/viewer/document-viewer.component.html @@ -23,39 +23,22 @@ <div style="padding-top: 10px;">{{loadingInfo.message}}</div> </div> <div *ngIf="file.content === null && !loading" class="view-doc-container" appUploadFileDragDrop - (onFileDropped)="dndUploadFile($event)"> + (onFileDropped)="dndUploadFile($event)" [disabled]="!editMode"> <i class="fa fa-file-upload upload-icon"></i><br /> {{lang.dragAndDrop}}<br />{{lang.or}} <div style="display: flex;"> - <!--<button mat-button class="button-form-primary-alt" (click)="loadTemplates()" [matMenuTriggerFor]="menu" - style="margin-right:20px;align-items: center;justify-content: center;text-align: center;display: flex;"> - <span class="menu-label"> - {{lang.chooseModel}} - </span> - <i class="fa fa-chevron-down menu-icon"></i> - </button> - <mat-menu #menu="matMenu" [class]="'menuForm'"> - <ng-container *ngFor="let templateType of listTemplates | keyvalue"> - <button mat-menu-item disabled>{{templateType.key}}</button> - <ng-container *ngFor="let template of templateType.value"> - <button mat-menu-item (click)="editTemplate(template)"> {{template.label}}</button> - </ng-container> - </ng-container> - </mat-menu>--> <div style="margin-right:20px;align-items: center;justify-content: center;text-align: center;display: flex;"> <plugin-select-search *ngIf="listTemplates.length > 0" [label]="lang.chooseModel" [placeholderLabel]="lang.chooseModel" [datas]="listTemplates" [class]="'input-form-filled'" (afterSelected)="editTemplate($event)" style="width: 240px;text-align: left;font-weight:normal;font-size: 13px;"> </plugin-select-search> </div> - - <button mat-button (click)="docToUpload.click()" class="button-form-primary-alt" style="align-items: center;justify-content: center;text-align: center;display: flex;">{{lang.chooseFile}}</button> </div> </div> <input type="file" #docToUpload name="files[]" (change)="uploadTrigger($event)" style="display:none;"> - <div style="display: block;width:100%;" appUploadFileDragDrop (onFileDropped)="dndUploadFile($event)"> + <div style="display: block;width:100%;" appUploadFileDragDrop (onFileDropped)="dndUploadFile($event)" [disabled]="!editMode"> <div *ngIf="!loading" class="viewer-tools"> <button *ngIf="editMode" mat-icon-button (click)="docToUpload.click()" [matTooltip]="lang.uploadAnOtherFile"> @@ -75,7 +58,7 @@ [original-size]="false" [show-all]="true" (error)="onError($event)" style="width:100%;"></pdf-viewer> </div> <div *ngIf="file.content !== null && noConvertedFound" class="no-doc-container" appUploadFileDragDrop - (onFileDropped)="dndUploadFile($event)"> + (onFileDropped)="dndUploadFile($event)" [disabled]="!editMode"> <div class="loaded-file"><i class="fa fa-file"></i> <a (click)="docToUpload.click()">{{file.name}}</a> <b>{{lang.loaded}}</b></div> diff --git a/src/frontend/app/viewer/upload-file-dnd.directive.ts b/src/frontend/app/viewer/upload-file-dnd.directive.ts index e97f9a0a5e981f05ff55bfbf89a42d9fd9a682d9..9653f24b3a9f144c448f888360a6bef3da846cd1 100644 --- a/src/frontend/app/viewer/upload-file-dnd.directive.ts +++ b/src/frontend/app/viewer/upload-file-dnd.directive.ts @@ -1,4 +1,4 @@ -import { Directive, Output, EventEmitter, HostBinding, HostListener } from '@angular/core'; +import { Directive, Output, EventEmitter, HostBinding, HostListener, Input } from '@angular/core'; @Directive({ selector: '[appUploadFileDragDrop]' @@ -6,36 +6,46 @@ import { Directive, Output, EventEmitter, HostBinding, HostListener } from '@ang export class DragDropDirective { @Output() onFileDropped = new EventEmitter<any>(); + @Input() disabled: boolean = false; @HostBinding('style.background-color') private background = 'none'; @HostBinding('style.opacity') private opacity = '1'; //Dragover listener @HostListener('dragover', ['$event']) onDragOver(evt: any) { - evt.preventDefault(); - evt.stopPropagation(); - this.background = '#9ecbec'; - this.opacity = '0.8'; + if (!this.disabled) { + evt.preventDefault(); + evt.stopPropagation(); + this.background = '#9ecbec'; + this.opacity = '0.8'; + } + } //Dragleave listener @HostListener('dragleave', ['$event']) public onDragLeave(evt: any) { - evt.preventDefault(); - evt.stopPropagation(); - this.background = 'none'; - this.opacity = '1'; + if (!this.disabled) { + evt.preventDefault(); + evt.stopPropagation(); + this.background = 'none'; + this.opacity = '1'; + } + } //Drop listener @HostListener('drop', ['$event']) public ondrop(evt: any) { - evt.preventDefault(); - evt.stopPropagation(); - this.background = 'none'; - this.opacity = '1'; - let files = evt.dataTransfer.files; - if (files.length > 0) { - this.onFileDropped.emit(files) + if (!this.disabled) { + evt.preventDefault(); + evt.stopPropagation(); + this.background = 'none'; + this.opacity = '1'; + let files = evt.dataTransfer.files; + if (files.length > 0) { + this.onFileDropped.emit(files) + } } + } } \ No newline at end of file