From e61151b01c80e525db068ff12fcfe2c8ae04e1a4 Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Fri, 13 Mar 2020 20:38:50 +0100 Subject: Replace p-progressbar and bootstrap progressbar with pure CSS alt --- .../my-account-settings.component.html | 2 +- .../my-account-settings.component.scss | 1 + .../my-account-video-settings.component.scss | 1 - .../shared/actor-avatar-info.component.html | 2 +- .../shared/actor-avatar-info.component.ts | 17 ++++++++- .../video-add-components/video-send.scss | 4 +- .../video-upload.component.html | 10 +++-- .../video-upload.component.scss | 44 +++++++--------------- .../src/app/videos/+video-edit/video-add.module.ts | 2 - client/src/sass/application.scss | 1 + client/src/sass/bootstrap.scss | 7 ---- client/src/sass/include/_bootstrap.scss | 2 +- client/src/sass/include/_mixins.scss | 29 +++++++++++++- client/src/sass/primeng-custom.scss | 4 +- 14 files changed, 70 insertions(+), 56 deletions(-) (limited to 'client') 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 @@
-
{{ userVideoQuotaUsedDaily | bytes: 0 }}
+
{{ userVideoQuotaUsedDaily | bytes: 0 }}
{{ userVideoQuotaDaily }}
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 @@ } .progress { + @include progressbar; width: 500px; max-width: 100%; } 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] { @include peertube-button; @include orange-button; - display: block; margin-top: 15px; } 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 @@ Avatar
-
+
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' import { Account } from '@app/shared/account/account.model' import { Notifier } from '@app/core' import { ServerConfig } from '@shared/models' +import { BytesPipe } from 'ngx-pipes' +import { I18n } from '@ngx-translate/i18n-polyfill' @Component({ selector: 'my-actor-avatar-info', @@ -17,12 +19,19 @@ export class ActorAvatarInfoComponent implements OnInit { @Output() avatarChange = new EventEmitter() + maxSizeText: string + private serverConfig: ServerConfig + private bytesPipe: BytesPipe constructor ( private serverService: ServerService, - private notifier: Notifier - ) {} + private notifier: Notifier, + private i18n: I18n + ) { + this.bytesPipe = new BytesPipe() + this.maxSizeText = this.i18n('max size') + } ngOnInit (): void { this.serverConfig = this.serverService.getTmpConfig() @@ -47,6 +56,10 @@ export class ActorAvatarInfoComponent implements OnInit { return this.serverConfig.avatar.file.size.max } + get maxAvatarSizeInBytes () { + return this.bytesPipe.transform(this.maxAvatarSize) + } + get avatarExtensions () { return this.serverConfig.avatar.file.extensions.join(', ') } 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; } .button-file { - @include peertube-button-file(auto); - - min-width: 190px; + @include peertube-button-file(max-content); } .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 @@
- +
+
+ Processing… + {{ videoUploadPercents }}% +
+
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 @@ margin-top: 25px; margin-bottom: 40px; - p-progressBar { + .progress { + @include progressbar; flex-grow: 1; - - ::ng-deep .ui-progressbar { - font-size: 15px !important; - 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; - color: #fff !important; - line-height: 30px !important; - } - } - - &.processing { - ::ng-deep .ui-progressbar-label { - // Same color as background to hide "100%" - color: rgba(11, 204, 41, 0.16) !important; - - &::before { - content: 'Processing...'; - color: #fff; - } + height: 30px; + font-size: 15px; + background-color: rgba(11, 204, 41, 0.16); + + .progress-bar { + background-color: $green; + line-height: 30px; + text-align: left; + font-weight: $font-bold; + + span { + margin-left: 18px; } } } 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 import { VideoUploadComponent } from '@app/videos/+video-edit/video-add-components/video-upload.component' import { VideoImportUrlComponent } from '@app/videos/+video-edit/video-add-components/video-import-url.component' import { VideoImportTorrentComponent } from '@app/videos/+video-edit/video-add-components/video-import-torrent.component' -import { ProgressBarModule } from 'primeng/progressbar' @NgModule({ imports: [ VideoAddRoutingModule, VideoEditModule, SharedModule, - ProgressBarModule ], declarations: [ 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 { .title-page-about, .title-page-settings { + white-space: nowrap; font-size: 115%; font-weight: $font-regular; 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 { background-color: var(--secondaryColor); } } - -.progress-bar { - background-color: var(--mainColor); -} -.progress-bar-secondary { - background-color: var(--secondaryColor); -} 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 @@ @import '~bootstrap/scss/badge'; //@import '~bootstrap/scss/jumbotron'; @import '~bootstrap/scss/alert'; -@import '~bootstrap/scss/progress'; +//@import '~bootstrap/scss/progress'; //@import '~bootstrap/scss/media'; //@import '~bootstrap/scss/list-group'; @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 @@ overflow: hidden; display: inline-block; width: $width; + min-height: 30px; @include peertube-button; @include orange-button; @@ -233,8 +234,8 @@ position: absolute; top: 0; right: 0; - min-width: 100%; - min-height: 100%; + width: 100%; + height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); @@ -596,3 +597,27 @@ top: -2px; } } + +@mixin progressbar { + background-color: $grey-background-color; + display: flex; + height: 1rem; + overflow: hidden; + font-size: 0.75rem; + border-radius: 0.25rem; + + .progress-bar { + color: var(--mainBackgroundColor); + background-color: var(--mainColor); + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + white-space: nowrap; + transition: width 0.6s ease; + + &.secondary { + background-color: var(--secondaryColor); + } + } +} 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 { .ui-toast-close-icon { font-family: "Glyphicons Halflings"; - opacity: .5; + opacity: .3; &:hover { - opacity: .8; + opacity: .5; } &:after { -- cgit v1.2.3