aboutsummaryrefslogtreecommitdiffhomepage
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
parentc4741804bceac6f5f3ea06f9041c5b4fde7a3d7d (diff)
downloadPeerTube-e61151b01c80e525db068ff12fcfe2c8ae04e1a4.tar.gz
PeerTube-e61151b01c80e525db068ff12fcfe2c8ae04e1a4.tar.zst
PeerTube-e61151b01c80e525db068ff12fcfe2c8ae04e1a4.zip
Replace p-progressbar and bootstrap progressbar with pure CSS alt
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-settings.component.html2
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-settings.component.scss1
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss1
-rw-r--r--client/src/app/+my-account/shared/actor-avatar-info.component.html2
-rw-r--r--client/src/app/+my-account/shared/actor-avatar-info.component.ts17
-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
-rw-r--r--client/src/sass/application.scss1
-rw-r--r--client/src/sass/bootstrap.scss7
-rw-r--r--client/src/sass/include/_bootstrap.scss2
-rw-r--r--client/src/sass/include/_mixins.scss29
-rw-r--r--client/src/sass/primeng-custom.scss4
14 files changed, 70 insertions, 56 deletions
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
index 6fee087fb..f1c466545 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
@@ -16,7 +16,7 @@
16 16
17 <div *ngIf="hasDailyQuota()" class="mt-3"> 17 <div *ngIf="hasDailyQuota()" class="mt-3">
18 <div class="progress" i18n-title title="Daily video quota"> 18 <div class="progress" i18n-title title="Daily video quota">
19 <div class="progress-bar progress-bar-secondary" role="progressbar" [style]="{ width: userVideoQuotaDailyPercentage + '%' }" [attr.aria-valuenow]="userVideoQuotaUsedDaily" aria-valuemin="0" [attr.aria-valuemax]="userVideoQuotaDaily">{{ userVideoQuotaUsedDaily | bytes: 0 }}</div> 19 <div class="progress-bar secondary" role="progressbar" [style]="{ width: userVideoQuotaDailyPercentage + '%' }" [attr.aria-valuenow]="userVideoQuotaUsedDaily" aria-valuemin="0" [attr.aria-valuemax]="userVideoQuotaDaily">{{ userVideoQuotaUsedDaily | bytes: 0 }}</div>
20 <span class="ml-auto mr-2">{{ userVideoQuotaDaily }}</span> 20 <span class="ml-auto mr-2">{{ userVideoQuotaDaily }}</span>
21 </div> 21 </div>
22 </div> 22 </div>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
index e1a00fb8b..2660c2b72 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
@@ -15,6 +15,7 @@
15} 15}
16 16
17.progress { 17.progress {
18 @include progressbar;
18 width: 500px; 19 width: 500px;
19 max-width: 100%; 20 max-width: 100%;
20} 21}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss
index 56cef0398..50da3ff37 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss
@@ -10,7 +10,6 @@ input[type=submit] {
10 @include peertube-button; 10 @include peertube-button;
11 @include orange-button; 11 @include orange-button;
12 12
13 display: block;
14 margin-top: 15px; 13 margin-top: 15px;
15} 14}
16 15
diff --git a/client/src/app/+my-account/shared/actor-avatar-info.component.html b/client/src/app/+my-account/shared/actor-avatar-info.component.html
index a5a435726..2050950be 100644
--- a/client/src/app/+my-account/shared/actor-avatar-info.component.html
+++ b/client/src/app/+my-account/shared/actor-avatar-info.component.html
@@ -3,7 +3,7 @@
3 <img [src]="actor.avatarUrl" alt="Avatar" /> 3 <img [src]="actor.avatarUrl" alt="Avatar" />
4 4
5 <div class="actor-img-edit-container"> 5 <div class="actor-img-edit-container">
6 <div class="actor-img-edit-button" [ngbTooltip]="'(extensions: '+ avatarExtensions +', max size: 100KB)'" placement="right" container="body"> 6 <div class="actor-img-edit-button" [ngbTooltip]="'(extensions: '+ avatarExtensions +', '+ maxSizeText +': '+ maxAvatarSizeInBytes +')'" placement="right" container="body">
7 <my-global-icon iconName="edit"></my-global-icon> 7 <my-global-icon iconName="edit"></my-global-icon>
8 <input #avatarfileInput type="file" title=" " name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange()"/> 8 <input #avatarfileInput type="file" title=" " name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange()"/>
9 </div> 9 </div>
diff --git a/client/src/app/+my-account/shared/actor-avatar-info.component.ts b/client/src/app/+my-account/shared/actor-avatar-info.component.ts
index eb198587d..8e4a7a602 100644
--- a/client/src/app/+my-account/shared/actor-avatar-info.component.ts
+++ b/client/src/app/+my-account/shared/actor-avatar-info.component.ts
@@ -4,6 +4,8 @@ import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
4import { Account } from '@app/shared/account/account.model' 4import { Account } from '@app/shared/account/account.model'
5import { Notifier } from '@app/core' 5import { Notifier } from '@app/core'
6import { ServerConfig } from '@shared/models' 6import { ServerConfig } from '@shared/models'
7import { BytesPipe } from 'ngx-pipes'
8import { I18n } from '@ngx-translate/i18n-polyfill'
7 9
8@Component({ 10@Component({
9 selector: 'my-actor-avatar-info', 11 selector: 'my-actor-avatar-info',
@@ -17,12 +19,19 @@ export class ActorAvatarInfoComponent implements OnInit {
17 19
18 @Output() avatarChange = new EventEmitter<FormData>() 20 @Output() avatarChange = new EventEmitter<FormData>()
19 21
22 maxSizeText: string
23
20 private serverConfig: ServerConfig 24 private serverConfig: ServerConfig
25 private bytesPipe: BytesPipe
21 26
22 constructor ( 27 constructor (
23 private serverService: ServerService, 28 private serverService: ServerService,
24 private notifier: Notifier 29 private notifier: Notifier,
25 ) {} 30 private i18n: I18n
31 ) {
32 this.bytesPipe = new BytesPipe()
33 this.maxSizeText = this.i18n('max size')
34 }
26 35
27 ngOnInit (): void { 36 ngOnInit (): void {
28 this.serverConfig = this.serverService.getTmpConfig() 37 this.serverConfig = this.serverService.getTmpConfig()
@@ -47,6 +56,10 @@ export class ActorAvatarInfoComponent implements OnInit {
47 return this.serverConfig.avatar.file.size.max 56 return this.serverConfig.avatar.file.size.max
48 } 57 }
49 58
59 get maxAvatarSizeInBytes () {
60 return this.bytesPipe.transform(this.maxAvatarSize)
61 }
62
50 get avatarExtensions () { 63 get avatarExtensions () {
51 return this.serverConfig.avatar.file.extensions.join(', ') 64 return this.serverConfig.avatar.file.extensions.join(', ')
52 } 65 }
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,
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 413f8c49d..089a58009 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -181,6 +181,7 @@ label {
181 181
182.title-page-about, 182.title-page-about,
183.title-page-settings { 183.title-page-settings {
184 white-space: nowrap;
184 font-size: 115%; 185 font-size: 115%;
185 font-weight: $font-regular; 186 font-weight: $font-regular;
186 187
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 6c42acaff..5c1ce1028 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -236,10 +236,3 @@ ngb-tooltip-window {
236 background-color: var(--secondaryColor); 236 background-color: var(--secondaryColor);
237 } 237 }
238} 238}
239
240.progress-bar {
241 background-color: var(--mainColor);
242}
243.progress-bar-secondary {
244 background-color: var(--secondaryColor);
245}
diff --git a/client/src/sass/include/_bootstrap.scss b/client/src/sass/include/_bootstrap.scss
index 61bb4739d..b1a23be6b 100644
--- a/client/src/sass/include/_bootstrap.scss
+++ b/client/src/sass/include/_bootstrap.scss
@@ -26,7 +26,7 @@
26@import '~bootstrap/scss/badge'; 26@import '~bootstrap/scss/badge';
27//@import '~bootstrap/scss/jumbotron'; 27//@import '~bootstrap/scss/jumbotron';
28@import '~bootstrap/scss/alert'; 28@import '~bootstrap/scss/alert';
29@import '~bootstrap/scss/progress'; 29//@import '~bootstrap/scss/progress';
30//@import '~bootstrap/scss/media'; 30//@import '~bootstrap/scss/media';
31//@import '~bootstrap/scss/list-group'; 31//@import '~bootstrap/scss/list-group';
32@import '~bootstrap/scss/close'; 32@import '~bootstrap/scss/close';
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 5163ea056..e8dfb79bc 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -225,6 +225,7 @@
225 overflow: hidden; 225 overflow: hidden;
226 display: inline-block; 226 display: inline-block;
227 width: $width; 227 width: $width;
228 min-height: 30px;
228 229
229 @include peertube-button; 230 @include peertube-button;
230 @include orange-button; 231 @include orange-button;
@@ -233,8 +234,8 @@
233 position: absolute; 234 position: absolute;
234 top: 0; 235 top: 0;
235 right: 0; 236 right: 0;
236 min-width: 100%; 237 width: 100%;
237 min-height: 100%; 238 height: 100%;
238 font-size: 100px; 239 font-size: 100px;
239 text-align: right; 240 text-align: right;
240 filter: alpha(opacity=0); 241 filter: alpha(opacity=0);
@@ -596,3 +597,27 @@
596 top: -2px; 597 top: -2px;
597 } 598 }
598} 599}
600
601@mixin progressbar {
602 background-color: $grey-background-color;
603 display: flex;
604 height: 1rem;
605 overflow: hidden;
606 font-size: 0.75rem;
607 border-radius: 0.25rem;
608
609 .progress-bar {
610 color: var(--mainBackgroundColor);
611 background-color: var(--mainColor);
612 display: flex;
613 flex-direction: column;
614 justify-content: center;
615 text-align: center;
616 white-space: nowrap;
617 transition: width 0.6s ease;
618
619 &.secondary {
620 background-color: var(--secondaryColor);
621 }
622 }
623}
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index fbba2ad5c..0a3634c94 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -416,9 +416,9 @@ p-toast {
416 .ui-toast-close-icon { 416 .ui-toast-close-icon {
417 font-family: "Glyphicons Halflings"; 417 font-family: "Glyphicons Halflings";
418 418
419 opacity: .5; 419 opacity: .3;
420 &:hover { 420 &:hover {
421 opacity: .8; 421 opacity: .5;
422 } 422 }
423 423
424 &:after { 424 &:after {