OpenCloud
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube
1
0
Fork 0
Code Issues Releases Wiki Activity

Add style to cancel button

pull/213/merge
Chocobozzz 2018-01-23 15:15:03 +01:00
parent 531ab5b627
commit e494f91e67
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
3 changed files with 43 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/app/videos/+video-edit/video-add.component.html
View File

@ -32,17 +32,15 @@
</div> </div>
</div> </div>
<div <div *ngIf="isUploadingVideo" class="upload-progress-cancel">
*ngIf="isUploadingVideo"
>
<p-progressBar <p-progressBar
[value]="videoUploadPercents" [value]="videoUploadPercents"
[ngClass]="{ processing: videoUploadPercents === 100 && videoUploaded === false }" [ngClass]="{ processing: videoUploadPercents === 100 && videoUploaded === false }"
></p-progressBar> ></p-progressBar>
<input type="button" value="Cancel" (click)="cancelUpload()" /> <input *ngIf="videoUploaded === false" type="button" value="Cancel" (click)="cancelUpload()" />
</div> </div>
<!-- Hidden because we need to load the component --> <!-- Hidden because we want to load the component -->
<form [hidden]="!isUploadingVideo" novalidate [formGroup]="form"> <form [hidden]="!isUploadingVideo" novalidate [formGroup]="form">
<my-video-edit <my-video-edit
[form]="form" [formErrors]="formErrors" [form]="form" [formErrors]="formErrors"

66
client/src/app/videos/+video-edit/video-add.component.scss
View File

@ -41,39 +41,51 @@
} }
} }
p-progressBar { .upload-progress-cancel {
/deep/ .ui-progressbar { display: flex;
margin-top: 25px !important; margin-top: 25px;
margin-bottom: 40px !important; margin-bottom: 40px;
font-size: 15px !important;
color: #fff !important;
height: 30px !important;
line-height: 30px !important;
border-radius: 3px !important;
background-color: rgba(11, 204, 41, 0.16) !important;
.ui-progressbar-value { p-progressBar {
background-color: #0BCC29 !important; flex-grow: 1;
/deep/ .ui-progressbar {
font-size: 15px !important;
color: #fff !important;
height: 30px !important;
line-height: 30px !important;
border-radius: 3px !important;
background-color: rgba(11, 204, 41, 0.16) !important;
.ui-progressbar-value {
background-color: #0BCC29 !important;
}
.ui-progressbar-label {
text-align: left;
padding-left: 18px;
margin-top: 0 !important;
}
} }
.ui-progressbar-label { &.processing {
text-align: left; /deep/ .ui-progressbar-label {
padding-left: 18px; // Same color as background to hide "100%"
margin-top: 0 !important; color: rgba(11, 204, 41, 0.16) !important;
}
}
&.processing { &::before {
/deep/ .ui-progressbar-label { content: 'Processing...';
// Same color as background to hide "100%" color: #fff;
color: rgba(11, 204, 41, 0.16) !important; }
&::before {
content: 'Processing...';
color: #fff;
} }
} }
} }
input {
@include peertube-button;
@include grey-button;
margin-left: 10px;
}
} }

2
client/src/app/videos/+video-edit/video-add.component.ts
View File

@ -99,8 +99,8 @@ export class VideoAddComponent extends FormReactive implements OnInit {
this.videoUploadObservable.unsubscribe() this.videoUploadObservable.unsubscribe()
this.isUploadingVideo = false this.isUploadingVideo = false
this.videoUploadPercents = 0 this.videoUploadPercents = 0
this.notificationsService.error('Error', 'Upload cancelled')
this.videoUploadObservable = null this.videoUploadObservable = null
this.notificationsService.info('Info', 'Upload cancelled')
} }
} }