diff options
author | Rigel Kent <sendmemail@rigelk.eu> | 2020-03-13 20:38:50 +0100 |
---|---|---|
committer | Rigel Kent <sendmemail@rigelk.eu> | 2020-03-13 20:38:50 +0100 |
commit | e61151b01c80e525db068ff12fcfe2c8ae04e1a4 (patch) | |
tree | 000244ef543eee9608afb1646561c8287bb7e9ef /client/src | |
parent | c4741804bceac6f5f3ea06f9041c5b4fde7a3d7d (diff) | |
download | PeerTube-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')
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' | |||
4 | import { Account } from '@app/shared/account/account.model' | 4 | import { Account } from '@app/shared/account/account.model' |
5 | import { Notifier } from '@app/core' | 5 | import { Notifier } from '@app/core' |
6 | import { ServerConfig } from '@shared/models' | 6 | import { ServerConfig } from '@shared/models' |
7 | import { BytesPipe } from 'ngx-pipes' | ||
8 | import { 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 | |||
7 | import { VideoUploadComponent } from '@app/videos/+video-edit/video-add-components/video-upload.component' | 7 | import { VideoUploadComponent } from '@app/videos/+video-edit/video-add-components/video-upload.component' |
8 | import { VideoImportUrlComponent } from '@app/videos/+video-edit/video-add-components/video-import-url.component' | 8 | import { VideoImportUrlComponent } from '@app/videos/+video-edit/video-add-components/video-import-url.component' |
9 | import { VideoImportTorrentComponent } from '@app/videos/+video-edit/video-add-components/video-import-torrent.component' | 9 | import { VideoImportTorrentComponent } from '@app/videos/+video-edit/video-add-components/video-import-torrent.component' |
10 | import { 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 { |