diff options
author | Rigel Kent <sendmemail@rigelk.eu> | 2020-04-02 17:55:03 +0200 |
---|---|---|
committer | Rigel Kent <sendmemail@rigelk.eu> | 2020-04-02 17:55:03 +0200 |
commit | 6f02515e2aff2a8750ad3515b23b345f01c64ab2 (patch) | |
tree | 829f556ea78c5f981fabfdc4819c716bb0ead773 /client/src/app/shared/images | |
parent | 9f77adb8fe9be0064599c183bb8f221ebbc5ede5 (diff) | |
download | PeerTube-6f02515e2aff2a8750ad3515b23b345f01c64ab2.tar.gz PeerTube-6f02515e2aff2a8750ad3515b23b345f01c64ab2.tar.zst PeerTube-6f02515e2aff2a8750ad3515b23b345f01c64ab2.zip |
Enlarge right column in video-edit on small screens
Diffstat (limited to 'client/src/app/shared/images')
3 files changed, 20 insertions, 8 deletions
diff --git a/client/src/app/shared/images/preview-upload.component.html b/client/src/app/shared/images/preview-upload.component.html index 5e1d5211b..7c3a2b588 100644 --- a/client/src/app/shared/images/preview-upload.component.html +++ b/client/src/app/shared/images/preview-upload.component.html | |||
@@ -1,13 +1,11 @@ | |||
1 | <div class="root"> | 1 | <div class="root"> |
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" | 4 | [inputName]="inputName" [inputLabel]="inputLabel" [extensions]="videoImageExtensions" [maxFileSize]="maxVideoImageSize" placement="right" |
5 | icon="edit" (fileChanged)="onFileChanged($event)" | 5 | icon="edit" (fileChanged)="onFileChanged($event)" [ngbTooltip]="'(extensions: '+ videoImageExtensions +', '+ maxSizeText +': '+ maxVideoImageSizeInBytes +')'" |
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" /> |
9 | <div *ngIf="!imageSrc" [ngStyle]="{ width: previewWidth, height: previewHeight }" class="preview no-image"></div> | 9 | <div *ngIf="!imageSrc" [ngStyle]="{ width: previewWidth, height: previewHeight }" class="preview no-image"></div> |
10 | </div> | 10 | </div> |
11 | |||
12 | <div i18n class="file-constraints">(extensions: {{ allowedExtensionsMessage }}, max size: {{ maxVideoImageSize | bytes }})</div> | ||
13 | </div> | 11 | </div> |
diff --git a/client/src/app/shared/images/preview-upload.component.scss b/client/src/app/shared/images/preview-upload.component.scss index 257060239..8f3522115 100644 --- a/client/src/app/shared/images/preview-upload.component.scss +++ b/client/src/app/shared/images/preview-upload.component.scss | |||
@@ -16,11 +16,13 @@ | |||
16 | } | 16 | } |
17 | 17 | ||
18 | .preview { | 18 | .preview { |
19 | border: 2px solid grey; | 19 | object-fit: cover; |
20 | border-radius: 4px; | 20 | border-radius: 4px; |
21 | max-width: 100%; | ||
21 | 22 | ||
22 | &.no-image { | 23 | &.no-image { |
23 | background-color: #ececec; | 24 | border: 2px solid grey; |
25 | background-color: var(--mainBackgroundColor); | ||
24 | } | 26 | } |
25 | } | 27 | } |
26 | } | 28 | } |
diff --git a/client/src/app/shared/images/preview-upload.component.ts b/client/src/app/shared/images/preview-upload.component.ts index 85a2173e9..7519734ba 100644 --- a/client/src/app/shared/images/preview-upload.component.ts +++ b/client/src/app/shared/images/preview-upload.component.ts | |||
@@ -3,6 +3,8 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms' | |||
3 | import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser' | 3 | import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser' |
4 | import { ServerService } from '@app/core' | 4 | import { ServerService } from '@app/core' |
5 | import { ServerConfig } from '@shared/models' | 5 | import { ServerConfig } from '@shared/models' |
6 | import { BytesPipe } from 'ngx-pipes' | ||
7 | import { I18n } from '@ngx-translate/i18n-polyfill' | ||
6 | 8 | ||
7 | @Component({ | 9 | @Component({ |
8 | selector: 'my-preview-upload', | 10 | selector: 'my-preview-upload', |
@@ -24,14 +26,20 @@ export class PreviewUploadComponent implements OnInit, ControlValueAccessor { | |||
24 | 26 | ||
25 | imageSrc: SafeResourceUrl | 27 | imageSrc: SafeResourceUrl |
26 | allowedExtensionsMessage = '' | 28 | allowedExtensionsMessage = '' |
29 | maxSizeText: string | ||
27 | 30 | ||
28 | private serverConfig: ServerConfig | 31 | private serverConfig: ServerConfig |
32 | private bytesPipe: BytesPipe | ||
29 | private file: Blob | 33 | private file: Blob |
30 | 34 | ||
31 | constructor ( | 35 | constructor ( |
32 | private sanitizer: DomSanitizer, | 36 | private sanitizer: DomSanitizer, |
33 | private serverService: ServerService | 37 | private serverService: ServerService, |
34 | ) {} | 38 | private i18n: I18n |
39 | ) { | ||
40 | this.bytesPipe = new BytesPipe() | ||
41 | this.maxSizeText = this.i18n('max size') | ||
42 | } | ||
35 | 43 | ||
36 | get videoImageExtensions () { | 44 | get videoImageExtensions () { |
37 | return this.serverConfig.video.image.extensions | 45 | return this.serverConfig.video.image.extensions |
@@ -41,6 +49,10 @@ export class PreviewUploadComponent implements OnInit, ControlValueAccessor { | |||
41 | return this.serverConfig.video.image.size.max | 49 | return this.serverConfig.video.image.size.max |
42 | } | 50 | } |
43 | 51 | ||
52 | get maxVideoImageSizeInBytes () { | ||
53 | return this.bytesPipe.transform(this.maxVideoImageSize) | ||
54 | } | ||
55 | |||
44 | ngOnInit () { | 56 | ngOnInit () { |
45 | this.serverConfig = this.serverService.getTmpConfig() | 57 | this.serverConfig = this.serverService.getTmpConfig() |
46 | this.serverService.getConfig() | 58 | this.serverService.getConfig() |