aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-03-13 20:38:50 +0100
committerRigel Kent <sendmemail@rigelk.eu>2020-03-13 20:38:50 +0100
commite61151b01c80e525db068ff12fcfe2c8ae04e1a4 (patch)
tree000244ef543eee9608afb1646561c8287bb7e9ef /client/src/app/videos
parentc4741804bceac6f5f3ea06f9041c5b4fde7a3d7d (diff)
downloadPeerTube-e61151b01c80e525db068ff12fcfe2c8ae04e1a4.tar.gz
PeerTube-e61151b01c80e525db068ff12fcfe2c8ae04e1a4.tar.zst
PeerTube-e61151b01c80e525db068ff12fcfe2c8ae04e1a4.zip
Replace p-progressbar and bootstrap progressbar with pure CSS alt
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/+video-edit/video-add-components/video-send.scss4
-rw-r--r--client/src/app/videos/+video-edit/video-add-components/video-upload.component.html10
-rw-r--r--client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss44
-rw-r--r--client/src/app/videos/+video-edit/video-add.module.ts2
4 files changed, 21 insertions, 39 deletions
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-send.scss b/client/src/app/videos/+video-edit/video-add-components/video-send.scss
index 8769dd302..1979d0061 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-send.scss
+++ b/client/src/app/videos/+video-edit/video-add-components/video-send.scss
@@ -41,9 +41,7 @@ $width-size: 190px;
41 } 41 }
42 42
43 .button-file { 43 .button-file {
44 @include peertube-button-file(auto); 44 @include peertube-button-file(max-content);
45
46 min-width: 190px;
47 } 45 }
48 46
49 .button-file-extension { 47 .button-file-extension {
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html
index bdbc2a2cb..3cb57e375 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html
+++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html
@@ -51,10 +51,12 @@
51</div> 51</div>
52 52
53<div *ngIf="isUploadingVideo && !error" class="upload-progress-cancel"> 53<div *ngIf="isUploadingVideo && !error" class="upload-progress-cancel">
54 <p-progressBar 54 <div class="progress" i18n-title title="Total video quota">
55 [value]="videoUploadPercents" 55 <div class="progress-bar" role="progressbar" [style]="{ width: videoUploadPercents + '%' }" [attr.aria-valuenow]="videoUploadPercents" aria-valuemin="0" [attr.aria-valuemax]="100">
56 [ngClass]="{ processing: videoUploadPercents === 100 && videoUploaded === false }" 56 <span *ngIf="videoUploadPercents === 100 && videoUploaded === false" i18n>Processing…</span>
57 ></p-progressBar> 57 <span *ngIf="videoUploadPercents !== 100 || videoUploaded">{{ videoUploadPercents }}%</span>
58 </div>
59 </div>
58 <input *ngIf="videoUploaded === false" type="button" value="Cancel" (click)="cancelUpload()" /> 60 <input *ngIf="videoUploaded === false" type="button" value="Cancel" (click)="cancelUpload()" />
59</div> 61</div>
60 62
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss
index b5628e276..95baa3d0a 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss
+++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss
@@ -22,37 +22,21 @@
22 margin-top: 25px; 22 margin-top: 25px;
23 margin-bottom: 40px; 23 margin-bottom: 40px;
24 24
25 p-progressBar { 25 .progress {
26 @include progressbar;
26 flex-grow: 1; 27 flex-grow: 1;
27 28 height: 30px;
28 ::ng-deep .ui-progressbar { 29 font-size: 15px;
29 font-size: 15px !important; 30 background-color: rgba(11, 204, 41, 0.16);
30 height: 30px !important; 31
31 border-radius: 3px !important; 32 .progress-bar {
32 background-color: rgba(11, 204, 41, 0.16) !important; 33 background-color: $green;
33 34 line-height: 30px;
34 .ui-progressbar-value { 35 text-align: left;
35 background-color: #0BCC29 !important; 36 font-weight: $font-bold;
36 } 37
37 38 span {
38 .ui-progressbar-label { 39 margin-left: 18px;
39 text-align: left;
40 padding-left: 18px;
41 margin-top: 0 !important;
42 color: #fff !important;
43 line-height: 30px !important;
44 }
45 }
46
47 &.processing {
48 ::ng-deep .ui-progressbar-label {
49 // Same color as background to hide "100%"
50 color: rgba(11, 204, 41, 0.16) !important;
51
52 &::before {
53 content: 'Processing...';
54 color: #fff;
55 }
56 } 40 }
57 } 41 }
58 } 42 }
diff --git a/client/src/app/videos/+video-edit/video-add.module.ts b/client/src/app/videos/+video-edit/video-add.module.ts
index 870f7cb97..4386f10b6 100644
--- a/client/src/app/videos/+video-edit/video-add.module.ts
+++ b/client/src/app/videos/+video-edit/video-add.module.ts
@@ -7,14 +7,12 @@ import { CanDeactivateGuard } from '../../shared/guards/can-deactivate-guard.ser
7import { VideoUploadComponent } from '@app/videos/+video-edit/video-add-components/video-upload.component' 7import { VideoUploadComponent } from '@app/videos/+video-edit/video-add-components/video-upload.component'
8import { VideoImportUrlComponent } from '@app/videos/+video-edit/video-add-components/video-import-url.component' 8import { VideoImportUrlComponent } from '@app/videos/+video-edit/video-add-components/video-import-url.component'
9import { VideoImportTorrentComponent } from '@app/videos/+video-edit/video-add-components/video-import-torrent.component' 9import { VideoImportTorrentComponent } from '@app/videos/+video-edit/video-add-components/video-import-torrent.component'
10import { ProgressBarModule } from 'primeng/progressbar'
11 10
12@NgModule({ 11@NgModule({
13 imports: [ 12 imports: [
14 VideoAddRoutingModule, 13 VideoAddRoutingModule,
15 VideoEditModule, 14 VideoEditModule,
16 SharedModule, 15 SharedModule,
17 ProgressBarModule
18 ], 16 ],
19 declarations: [ 17 declarations: [
20 VideoAddComponent, 18 VideoAddComponent,