aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-01-23 15:15:03 +0100
committerChocobozzz <me@florianbigard.com>2018-01-23 15:15:03 +0100
commite494f91e6798cd1f3c640f2f28aa2c8436501e20 (patch)
treecdac0f501c10a1d64474dae29aa8a70f25ccb063
parent531ab5b6279707b2d0d01d3153e62c4bdfca8480 (diff)
downloadPeerTube-e494f91e6798cd1f3c640f2f28aa2c8436501e20.tar.gz
PeerTube-e494f91e6798cd1f3c640f2f28aa2c8436501e20.tar.zst
PeerTube-e494f91e6798cd1f3c640f2f28aa2c8436501e20.zip
Add style to cancel button
-rw-r--r--client/src/app/videos/+video-edit/video-add.component.html8
-rw-r--r--client/src/app/videos/+video-edit/video-add.component.scss66
-rw-r--r--client/src/app/videos/+video-edit/video-add.component.ts2
3 files changed, 43 insertions, 33 deletions
diff --git a/client/src/app/videos/+video-edit/video-add.component.html b/client/src/app/videos/+video-edit/video-add.component.html
index 4e9b78cf2..a3a41aa12 100644
--- a/client/src/app/videos/+video-edit/video-add.component.html
+++ b/client/src/app/videos/+video-edit/video-add.component.html
@@ -32,17 +32,15 @@
32 </div> 32 </div>
33 </div> 33 </div>
34 34
35 <div 35 <div *ngIf="isUploadingVideo" class="upload-progress-cancel">
36 *ngIf="isUploadingVideo"
37 >
38 <p-progressBar 36 <p-progressBar
39 [value]="videoUploadPercents" 37 [value]="videoUploadPercents"
40 [ngClass]="{ processing: videoUploadPercents === 100 && videoUploaded === false }" 38 [ngClass]="{ processing: videoUploadPercents === 100 && videoUploaded === false }"
41 ></p-progressBar> 39 ></p-progressBar>
42 <input type="button" value="Cancel" (click)="cancelUpload()" /> 40 <input *ngIf="videoUploaded === false" type="button" value="Cancel" (click)="cancelUpload()" />
43 </div> 41 </div>
44 42
45 <!-- Hidden because we need to load the component --> 43 <!-- Hidden because we want to load the component -->
46 <form [hidden]="!isUploadingVideo" novalidate [formGroup]="form"> 44 <form [hidden]="!isUploadingVideo" novalidate [formGroup]="form">
47 <my-video-edit 45 <my-video-edit
48 [form]="form" [formErrors]="formErrors" 46 [form]="form" [formErrors]="formErrors"
diff --git a/client/src/app/videos/+video-edit/video-add.component.scss b/client/src/app/videos/+video-edit/video-add.component.scss
index 4bb509009..0c74552d3 100644
--- a/client/src/app/videos/+video-edit/video-add.component.scss
+++ b/client/src/app/videos/+video-edit/video-add.component.scss
@@ -41,39 +41,51 @@
41 } 41 }
42} 42}
43 43
44p-progressBar { 44.upload-progress-cancel {
45 /deep/ .ui-progressbar { 45 display: flex;
46 margin-top: 25px !important; 46 margin-top: 25px;
47 margin-bottom: 40px !important; 47 margin-bottom: 40px;
48 font-size: 15px !important; 48
49 color: #fff !important; 49 p-progressBar {
50 height: 30px !important; 50 flex-grow: 1;
51 line-height: 30px !important; 51
52 border-radius: 3px !important; 52 /deep/ .ui-progressbar {
53 background-color: rgba(11, 204, 41, 0.16) !important; 53 font-size: 15px !important;
54 54 color: #fff !important;
55 .ui-progressbar-value { 55 height: 30px !important;
56 background-color: #0BCC29 !important; 56 line-height: 30px !important;
57 } 57 border-radius: 3px !important;
58 background-color: rgba(11, 204, 41, 0.16) !important;
59
60 .ui-progressbar-value {
61 background-color: #0BCC29 !important;
62 }
58 63
59 .ui-progressbar-label { 64 .ui-progressbar-label {
60 text-align: left; 65 text-align: left;
61 padding-left: 18px; 66 padding-left: 18px;
62 margin-top: 0 !important; 67 margin-top: 0 !important;
68 }
63 } 69 }
64 }
65 70
66 &.processing { 71 &.processing {
67 /deep/ .ui-progressbar-label { 72 /deep/ .ui-progressbar-label {
68 // Same color as background to hide "100%" 73 // Same color as background to hide "100%"
69 color: rgba(11, 204, 41, 0.16) !important; 74 color: rgba(11, 204, 41, 0.16) !important;
70 75
71 &::before { 76 &::before {
72 content: 'Processing...'; 77 content: 'Processing...';
73 color: #fff; 78 color: #fff;
79 }
74 } 80 }
75 } 81 }
76 } 82 }
77}
78 83
84 input {
85 @include peertube-button;
86 @include grey-button;
87
88 margin-left: 10px;
89 }
90}
79 91
diff --git a/client/src/app/videos/+video-edit/video-add.component.ts b/client/src/app/videos/+video-edit/video-add.component.ts
index 6e0830ab7..73efd60bf 100644
--- a/client/src/app/videos/+video-edit/video-add.component.ts
+++ b/client/src/app/videos/+video-edit/video-add.component.ts
@@ -99,8 +99,8 @@ export class VideoAddComponent extends FormReactive implements OnInit {
99 this.videoUploadObservable.unsubscribe() 99 this.videoUploadObservable.unsubscribe()
100 this.isUploadingVideo = false 100 this.isUploadingVideo = false
101 this.videoUploadPercents = 0 101 this.videoUploadPercents = 0
102 this.notificationsService.error('Error', 'Upload cancelled')
103 this.videoUploadObservable = null 102 this.videoUploadObservable = null
103 this.notificationsService.info('Info', 'Upload cancelled')
104 } 104 }
105 } 105 }
106 106