-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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 <[email protected]>
- Loading branch information
Showing
11 changed files
with
141 additions
and
77 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 21 additions & 0 deletions
21
client/src/app/shared/shared-main/users/user-quota.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
31 changes: 31 additions & 0 deletions
31
client/src/app/shared/shared-main/users/user-quota.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| @import '_variables'; | ||
| @import '_mixins'; | ||
|
|
||
| .user-quota { | ||
| font-size: 15px; | ||
| margin-top: 20px; | ||
|
|
||
| label { | ||
| margin-right: 5px; | ||
| } | ||
|
|
||
| &, .progress { | ||
| width: 100% !important; | ||
| } | ||
|
|
||
| .user-quota-title, .progress { | ||
| @include disable-outline; | ||
| @include button-focus(pvar(--mainColorLightest)); | ||
| } | ||
|
|
||
| .progress { | ||
| @include progressbar; | ||
|
|
||
| height: 2rem; | ||
|
|
||
| span { | ||
| align-self: center; | ||
| } | ||
| } | ||
| } | ||
|
|
68 changes: 68 additions & 0 deletions
68
client/src/app/shared/shared-main/users/user-quota.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import { Subject } from 'rxjs' | ||
| import { BytesPipe } from 'ngx-pipes' | ||
| import { Component, Input, OnInit } from '@angular/core' | ||
| import { User, UserService } from '@app/core' | ||
| import { I18n } from '@ngx-translate/i18n-polyfill' | ||
|
|
||
| @Component({ | ||
| selector: 'my-user-quota', | ||
| templateUrl: './user-quota.component.html', | ||
| styleUrls: ['./user-quota.component.scss'] | ||
| }) | ||
|
|
||
| export class UserQuotaComponent implements OnInit { | ||
| @Input() user: User = null | ||
| @Input() userInformationLoaded: Subject<any> | ||
|
|
||
| userVideoQuota = '0' | ||
| userVideoQuotaUsed = 0 | ||
| userVideoQuotaPercentage = 15 | ||
|
|
||
| userVideoQuotaDaily = '0' | ||
| userVideoQuotaUsedDaily = 0 | ||
| userVideoQuotaDailyPercentage = 15 | ||
|
|
||
| constructor ( | ||
| private userService: UserService, | ||
| private i18n: I18n | ||
| ) { } | ||
|
|
||
| ngOnInit () { | ||
| this.userInformationLoaded.subscribe( | ||
| () => { | ||
| if (this.user.videoQuota !== -1) { | ||
| this.userVideoQuota = new BytesPipe().transform(this.user.videoQuota, 0).toString() | ||
| } else { | ||
| this.userVideoQuota = this.i18n('Unlimited') | ||
| } | ||
|
|
||
| if (this.user.videoQuotaDaily !== -1) { | ||
| this.userVideoQuotaDaily = new BytesPipe().transform(this.user.videoQuotaDaily, 0).toString() | ||
| } else { | ||
| this.userVideoQuotaDaily = this.i18n('Unlimited') | ||
| } | ||
| } | ||
| ) | ||
|
|
||
| this.userService.getMyVideoQuotaUsed() | ||
| .subscribe(data => { | ||
| this.userVideoQuotaUsed = data.videoQuotaUsed | ||
| this.userVideoQuotaPercentage = this.userVideoQuotaUsed * 100 / this.user.videoQuota | ||
|
|
||
| this.userVideoQuotaUsedDaily = data.videoQuotaUsedDaily | ||
| this.userVideoQuotaDailyPercentage = this.userVideoQuotaUsedDaily * 100 / this.user.videoQuotaDaily | ||
| }) | ||
| } | ||
|
|
||
| hasDailyQuota () { | ||
| return this.user.videoQuotaDaily !== -1 | ||
| } | ||
|
|
||
| titleVideoQuota () { | ||
| return `${new BytesPipe().transform(this.userVideoQuotaUsed, 0).toString()} / ${this.userVideoQuota}` | ||
| } | ||
|
|
||
| titleVideoQuotaDaily () { | ||
| return `${new BytesPipe().transform(this.userVideoQuotaUsedDaily, 0).toString()} / ${this.userVideoQuotaDaily}` | ||
| } | ||
| } |