From 2e7f262724dd64a209e0bad5930ba29bb4f801c3 Mon Sep 17 00:00:00 2001
From: Kim <1877318+kimsible@users.noreply.github.com>
Date: Fri, 24 Jul 2020 08:53:25 +0200
Subject: Display user quota progress bars above upload form (#2981)

* Move user-quota to my-user-quota shared component

* Add user-quota to upload form

* Increase progress bar height and make it focusable

* Correct syntax parenthesis

* Add explicit title to user-quota bars + tooltip with quota values

* Hide user-quota in second upload step

* Customize focus styles on user-quota

Co-authored-by: kimsible <kimsible@users.noreply.github.com>
---
 .../shared-main/users/user-quota.component.html     | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 client/src/app/shared/shared-main/users/user-quota.component.html

(limited to 'client/src/app/shared/shared-main/users/user-quota.component.html')

diff --git a/client/src/app/shared/shared-main/users/user-quota.component.html b/client/src/app/shared/shared-main/users/user-quota.component.html
new file mode 100644
index 000000000..f9fb32133
--- /dev/null
+++ b/client/src/app/shared/shared-main/users/user-quota.component.html
@@ -0,0 +1,21 @@
+<div class="user-quota mb-3">
+  <div>
+    <strong class="user-quota-title" tabindex="0" i18n>Total video quota</strong>
+    <div class="progress" tabindex="0" [ngbTooltip]="titleVideoQuota()">
+      <div class="progress-bar" tabindex="0" role="progressbar" [style]="{ width: userVideoQuotaPercentage + '%' }"
+        [attr.aria-valuenow]="userVideoQuotaUsed" aria-valuemin="0" [attr.aria-valuemax]="user.videoQuota">
+        {{ userVideoQuotaUsed | bytes: 0 }}</div>
+      <span class="ml-auto mr-2">{{ userVideoQuota }}</span>
+    </div>
+  </div>
+
+  <div *ngIf="hasDailyQuota()" class="mt-3">
+    <strong class="user-quota-title" tabindex="0" i18n>Daily video quota</strong>
+    <div class="progress" tabindex="0" [ngbTooltip]="titleVideoQuotaDaily()">
+      <div class="progress-bar secondary" role="progressbar" [style]="{ width: userVideoQuotaDailyPercentage + '%' }"
+        [attr.aria-valuenow]="userVideoQuotaUsedDaily" aria-valuemin="0" [attr.aria-valuemax]="user.videoQuotaDaily">
+        {{ userVideoQuotaUsedDaily | bytes: 0 }}</div>
+      <span class="ml-auto mr-2">{{ userVideoQuotaDaily }}</span>
+    </div>
+  </div>
+</div>
\ No newline at end of file
-- 
cgit v1.2.3