From df8914c9a2d6dbb435460b9e252a771cac47880b Mon Sep 17 00:00:00 2001
From: Rigel Kent <sendmemail@rigelk.eu>
Date: Fri, 13 Mar 2020 01:29:11 +0100
Subject: More modern avatar upload, quota represented with progress bars

---
 .../my-account-settings/my-account-settings.component.html | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

(limited to 'client/src/app/+my-account/my-account-settings/my-account-settings.component.html')

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 ddcde828c..6fee087fb 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
@@ -8,13 +8,17 @@
 
     <div class="user-quota mb-3">
       <div>
-        <label i18n>Total video quota:</label>
-        <ng-container i18n>{{ userVideoQuotaUsed | bytes: 0 }} used</ng-container> / {{ userVideoQuota }}
+        <div class="progress" i18n-title title="Total video quota">
+          <div class="progress-bar" role="progressbar" [style]="{ width: userVideoQuotaPercentage + '%' }" [attr.aria-valuenow]="userVideoQuotaUsed" aria-valuemin="0" [attr.aria-valuemax]="userVideoQuota">{{ userVideoQuotaUsed | bytes: 0 }}</div>
+          <span class="ml-auto mr-2">{{ userVideoQuota }}</span>
+        </div>
       </div>
 
-      <div *ngIf="hasDailyQuota()">
-        <label i18n>Daily video quota:</label>
-        <ng-container>{{ userVideoQuotaUsedDaily | bytes: 0 }} used</ng-container> / {{ userVideoQuotaDaily }}
+      <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>
+          <span class="ml-auto mr-2">{{ userVideoQuotaDaily }}</span>
+        </div>
       </div>
     </div>
 
-- 
cgit v1.2.3