From e61151b01c80e525db068ff12fcfe2c8ae04e1a4 Mon Sep 17 00:00:00 2001
From: Rigel Kent <sendmemail@rigelk.eu>
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 -
 9 files changed, 39 insertions(+), 44 deletions(-)

(limited to 'client/src/app')

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