aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/shared')
-rw-r--r--client/src/app/shared/shared-forms/preview-upload.component.html2
-rw-r--r--client/src/app/shared/shared-forms/preview-upload.component.ts4
-rw-r--r--client/src/app/shared/shared-forms/reactive-file.component.html6
-rw-r--r--client/src/app/shared/shared-forms/reactive-file.component.scss11
-rw-r--r--client/src/app/shared/shared-forms/reactive-file.component.ts12
5 files changed, 32 insertions, 3 deletions
diff --git a/client/src/app/shared/shared-forms/preview-upload.component.html b/client/src/app/shared/shared-forms/preview-upload.component.html
index 7c3a2b588..11e7bdf7f 100644
--- a/client/src/app/shared/shared-forms/preview-upload.component.html
+++ b/client/src/app/shared/shared-forms/preview-upload.component.html
@@ -2,7 +2,7 @@
2 <div class="preview-container"> 2 <div class="preview-container">
3 <my-reactive-file 3 <my-reactive-file
4 [inputName]="inputName" [inputLabel]="inputLabel" [extensions]="videoImageExtensions" [maxFileSize]="maxVideoImageSize" placement="right" 4 [inputName]="inputName" [inputLabel]="inputLabel" [extensions]="videoImageExtensions" [maxFileSize]="maxVideoImageSize" placement="right"
5 icon="edit" (fileChanged)="onFileChanged($event)" [ngbTooltip]="'(extensions: '+ videoImageExtensions +', '+ maxSizeText +': '+ maxVideoImageSizeInBytes +')'" 5 icon="edit" (fileChanged)="onFileChanged($event)" [buttonTooltip]="getReactiveFileButtonTooltip()"
6 ></my-reactive-file> 6 ></my-reactive-file>
7 7
8 <img *ngIf="imageSrc" [ngStyle]="{ width: previewWidth, height: previewHeight }" [src]="imageSrc" class="preview" /> 8 <img *ngIf="imageSrc" [ngStyle]="{ width: previewWidth, height: previewHeight }" [src]="imageSrc" class="preview" />
diff --git a/client/src/app/shared/shared-forms/preview-upload.component.ts b/client/src/app/shared/shared-forms/preview-upload.component.ts
index a857b0a4f..46920dd27 100644
--- a/client/src/app/shared/shared-forms/preview-upload.component.ts
+++ b/client/src/app/shared/shared-forms/preview-upload.component.ts
@@ -50,6 +50,10 @@ export class PreviewUploadComponent implements OnInit, ControlValueAccessor {
50 return this.bytesPipe.transform(this.maxVideoImageSize) 50 return this.bytesPipe.transform(this.maxVideoImageSize)
51 } 51 }
52 52
53 getReactiveFileButtonTooltip () {
54 return $localize`(extensions: ${this.videoImageExtensions}, ${this.maxSizeText}: ${this.maxVideoImageSizeInBytes})`
55 }
56
53 ngOnInit () { 57 ngOnInit () {
54 this.serverConfig = this.serverService.getHTMLConfig() 58 this.serverConfig = this.serverService.getHTMLConfig()
55 59
diff --git a/client/src/app/shared/shared-forms/reactive-file.component.html b/client/src/app/shared/shared-forms/reactive-file.component.html
index f6bf5f9ae..d18a99d46 100644
--- a/client/src/app/shared/shared-forms/reactive-file.component.html
+++ b/client/src/app/shared/shared-forms/reactive-file.component.html
@@ -1,5 +1,5 @@
1<div class="root"> 1<div class="root">
2 <div class="button-file" [ngClass]="{ 'with-icon': !!icon }"> 2 <div class="button-file" [ngClass]="{ 'with-icon': !!icon }" [ngbTooltip]="buttonTooltip">
3 <my-global-icon *ngIf="icon" [iconName]="icon"></my-global-icon> 3 <my-global-icon *ngIf="icon" [iconName]="icon"></my-global-icon>
4 4
5 <span>{{ inputLabel }}</span> 5 <span>{{ inputLabel }}</span>
@@ -12,4 +12,8 @@
12 </div> 12 </div>
13 13
14 <div class="filename" *ngIf="displayFilename === true && filename">{{ filename }}</div> 14 <div class="filename" *ngIf="displayFilename === true && filename">{{ filename }}</div>
15
16 <button *ngIf="displayReset && filename" i18n class="reset-button" (click)="reset()">
17 Reset
18 </button>
15</div> 19</div>
diff --git a/client/src/app/shared/shared-forms/reactive-file.component.scss b/client/src/app/shared/shared-forms/reactive-file.component.scss
index f8db1aa25..7643f29af 100644
--- a/client/src/app/shared/shared-forms/reactive-file.component.scss
+++ b/client/src/app/shared/shared-forms/reactive-file.component.scss
@@ -20,4 +20,15 @@
20 20
21 font-weight: $font-semibold; 21 font-weight: $font-semibold;
22 } 22 }
23
24 .reset-button {
25 @include peertube-button;
26 @include grey-button;
27
28 font-size: 80%;
29 margin-left: 5px;
30 line-height: initial;
31 padding: 2px 5px;
32 height: auto;
33 }
23} 34}
diff --git a/client/src/app/shared/shared-forms/reactive-file.component.ts b/client/src/app/shared/shared-forms/reactive-file.component.ts
index 9d27ad07a..50b7d4c3e 100644
--- a/client/src/app/shared/shared-forms/reactive-file.component.ts
+++ b/client/src/app/shared/shared-forms/reactive-file.component.ts
@@ -20,8 +20,12 @@ export class ReactiveFileComponent implements OnInit, ControlValueAccessor {
20 @Input() inputName: string 20 @Input() inputName: string
21 @Input() extensions: string[] = [] 21 @Input() extensions: string[] = []
22 @Input() maxFileSize: number 22 @Input() maxFileSize: number
23
23 @Input() displayFilename = false 24 @Input() displayFilename = false
25 @Input() displayReset = false
26
24 @Input() icon: GlobalIconName 27 @Input() icon: GlobalIconName
28 @Input() buttonTooltip: string
25 29
26 @Output() fileChanged = new EventEmitter<Blob>() 30 @Output() fileChanged = new EventEmitter<Blob>()
27 31
@@ -62,8 +66,14 @@ export class ReactiveFileComponent implements OnInit, ControlValueAccessor {
62 this.file = file 66 this.file = file
63 67
64 this.propagateChange(this.file) 68 this.propagateChange(this.file)
65 this.fileChanged.emit(this.file)
66 } 69 }
70 this.fileChanged.emit(this.file)
71 }
72
73 reset () {
74 this.writeValue(undefined)
75 this.propagateChange(undefined)
76 this.fileChanged.emit(undefined)
67 } 77 }
68 78
69 propagateChange = (_: any) => { /* empty */ } 79 propagateChange = (_: any) => { /* empty */ }