aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+my-account
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-03-13 20:38:50 +0100
committerRigel Kent <sendmemail@rigelk.eu>2020-03-13 20:38:50 +0100
commite61151b01c80e525db068ff12fcfe2c8ae04e1a4 (patch)
tree000244ef543eee9608afb1646561c8287bb7e9ef /client/src/app/+my-account
parentc4741804bceac6f5f3ea06f9041c5b4fde7a3d7d (diff)
downloadPeerTube-e61151b01c80e525db068ff12fcfe2c8ae04e1a4.tar.gz
PeerTube-e61151b01c80e525db068ff12fcfe2c8ae04e1a4.tar.zst
PeerTube-e61151b01c80e525db068ff12fcfe2c8ae04e1a4.zip
Replace p-progressbar and bootstrap progressbar with pure CSS alt
Diffstat (limited to 'client/src/app/+my-account')
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-settings.component.html2
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-settings.component.scss1
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss1
-rw-r--r--client/src/app/+my-account/shared/actor-avatar-info.component.html2
-rw-r--r--client/src/app/+my-account/shared/actor-avatar-info.component.ts17
5 files changed, 18 insertions, 5 deletions
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 @@
16 16
17 <div *ngIf="hasDailyQuota()" class="mt-3"> 17 <div *ngIf="hasDailyQuota()" class="mt-3">
18 <div class="progress" i18n-title title="Daily video quota"> 18 <div class="progress" i18n-title title="Daily video quota">
19 <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> 19 <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>
20 <span class="ml-auto mr-2">{{ userVideoQuotaDaily }}</span> 20 <span class="ml-auto mr-2">{{ userVideoQuotaDaily }}</span>
21 </div> 21 </div>
22 </div> 22 </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 @@
15} 15}
16 16
17.progress { 17.progress {
18 @include progressbar;
18 width: 500px; 19 width: 500px;
19 max-width: 100%; 20 max-width: 100%;
20} 21}
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] {
10 @include peertube-button; 10 @include peertube-button;
11 @include orange-button; 11 @include orange-button;
12 12
13 display: block;
14 margin-top: 15px; 13 margin-top: 15px;
15} 14}
16 15
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 @@
3 <img [src]="actor.avatarUrl" alt="Avatar" /> 3 <img [src]="actor.avatarUrl" alt="Avatar" />
4 4
5 <div class="actor-img-edit-container"> 5 <div class="actor-img-edit-container">
6 <div class="actor-img-edit-button" [ngbTooltip]="'(extensions: '+ avatarExtensions +', max size: 100KB)'" placement="right" container="body"> 6 <div class="actor-img-edit-button" [ngbTooltip]="'(extensions: '+ avatarExtensions +', '+ maxSizeText +': '+ maxAvatarSizeInBytes +')'" placement="right" container="body">
7 <my-global-icon iconName="edit"></my-global-icon> 7 <my-global-icon iconName="edit"></my-global-icon>
8 <input #avatarfileInput type="file" title=" " name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange()"/> 8 <input #avatarfileInput type="file" title=" " name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange()"/>
9 </div> 9 </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'
4import { Account } from '@app/shared/account/account.model' 4import { Account } from '@app/shared/account/account.model'
5import { Notifier } from '@app/core' 5import { Notifier } from '@app/core'
6import { ServerConfig } from '@shared/models' 6import { ServerConfig } from '@shared/models'
7import { BytesPipe } from 'ngx-pipes'
8import { I18n } from '@ngx-translate/i18n-polyfill'
7 9
8@Component({ 10@Component({
9 selector: 'my-actor-avatar-info', 11 selector: 'my-actor-avatar-info',
@@ -17,12 +19,19 @@ export class ActorAvatarInfoComponent implements OnInit {
17 19
18 @Output() avatarChange = new EventEmitter<FormData>() 20 @Output() avatarChange = new EventEmitter<FormData>()
19 21
22 maxSizeText: string
23
20 private serverConfig: ServerConfig 24 private serverConfig: ServerConfig
25 private bytesPipe: BytesPipe
21 26
22 constructor ( 27 constructor (
23 private serverService: ServerService, 28 private serverService: ServerService,
24 private notifier: Notifier 29 private notifier: Notifier,
25 ) {} 30 private i18n: I18n
31 ) {
32 this.bytesPipe = new BytesPipe()
33 this.maxSizeText = this.i18n('max size')
34 }
26 35
27 ngOnInit (): void { 36 ngOnInit (): void {
28 this.serverConfig = this.serverService.getTmpConfig() 37 this.serverConfig = this.serverService.getTmpConfig()
@@ -47,6 +56,10 @@ export class ActorAvatarInfoComponent implements OnInit {
47 return this.serverConfig.avatar.file.size.max 56 return this.serverConfig.avatar.file.size.max
48 } 57 }
49 58
59 get maxAvatarSizeInBytes () {
60 return this.bytesPipe.transform(this.maxAvatarSize)
61 }
62
50 get avatarExtensions () { 63 get avatarExtensions () {
51 return this.serverConfig.avatar.file.extensions.join(', ') 64 return this.serverConfig.avatar.file.extensions.join(', ')
52 } 65 }