Replace p-progressbar and bootstrap progressbar with pure CSS alt

client/src/app/+my-account/my-account-settings/my-account-settings.component.html

@@ -16,7 +16,7 @@
 
       <div *ngIf="hasDailyQuota()" class="mt-3">
         <div class="progress" i18n-title title="Daily video quota">
-          <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>
+          <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>
           <span class="ml-auto mr-2">{{ userVideoQuotaDaily }}</span>
         </div>
       </div>

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%;
 }

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;
 }
 

client/src/app/+my-account/shared/actor-avatar-info.component.html

@@ -3,7 +3,7 @@
     <img [src]="actor.avatarUrl" alt="Avatar" />
 
     <div class="actor-img-edit-container">
-      <div class="actor-img-edit-button" [ngbTooltip]="'(extensions: '+ avatarExtensions +', max size: 100KB)'" placement="right" container="body">
+      <div class="actor-img-edit-button" [ngbTooltip]="'(extensions: '+ avatarExtensions +', '+ maxSizeText +': '+ maxAvatarSizeInBytes +')'" placement="right" container="body">
         <my-global-icon iconName="edit"></my-global-icon>
         <input #avatarfileInput type="file" title=" " name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange()"/>
       </div>

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<FormData>()
 
+  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(', ')
   }

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);
+    @include peertube-button-file(max-content);
-
-    min-width: 190px;
   }
 
   .button-file-extension {

client/src/app/videos/+video-edit/video-add-components/video-upload.component.html

@@ -51,10 +51,12 @@
 </div>
 
 <div *ngIf="isUploadingVideo && !error" class="upload-progress-cancel">
-  <p-progressBar
+  <div class="progress" i18n-title title="Total video quota">
-    [value]="videoUploadPercents"
+    <div class="progress-bar" role="progressbar" [style]="{ width: videoUploadPercents + '%' }" [attr.aria-valuenow]="videoUploadPercents" aria-valuemin="0" [attr.aria-valuemax]="100">
-    [ngClass]="{ processing: videoUploadPercents === 100 && videoUploaded === false }"
+      <span *ngIf="videoUploadPercents === 100 && videoUploaded === false" i18n>Processing…</span>
-  ></p-progressBar>
+      <span *ngIf="videoUploadPercents !== 100 || videoUploaded">{{ videoUploadPercents }}%</span>
+    </div>
+  </div>
   <input *ngIf="videoUploaded === false" type="button" value="Cancel" (click)="cancelUpload()" />
 </div>
 

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;
+    height: 30px;
+    font-size: 15px;
+    background-color: rgba(11, 204, 41, 0.16);
 
-    ::ng-deep .ui-progressbar {
+    .progress-bar {
-      font-size: 15px !important;
+      background-color: $green;
-      height: 30px !important;
+      line-height: 30px;
-      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;
+      font-weight: $font-bold;
-        margin-top: 0 !important;
-        color: #fff !important;
-        line-height: 30px !important;
-      }
-    }
 
-    &.processing {
+      span {
-      ::ng-deep .ui-progressbar-label {
+        margin-left: 18px;
-        // Same color as background to hide "100%"
-        color: rgba(11, 204, 41, 0.16) !important;
-
-        &::before {
-          content: 'Processing...';
-          color: #fff;
-        }
       }
     }
   }

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,

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;
 

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);
-}

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';

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%;
+    width: 100%;
-    min-height: 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);
+    }
+  }
+}

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 {