aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-03-13 01:29:11 +0100
committerRigel Kent <sendmemail@rigelk.eu>2020-03-13 01:43:52 +0100
commitdf8914c9a2d6dbb435460b9e252a771cac47880b (patch)
tree7413eaf0012ed91354a1471f1252e09cf7685bb6 /client/src
parentc547bbf96a46166c4b4548413b092c58f7b0e37a (diff)
downloadPeerTube-df8914c9a2d6dbb435460b9e252a771cac47880b.tar.gz
PeerTube-df8914c9a2d6dbb435460b9e252a771cac47880b.tar.zst
PeerTube-df8914c9a2d6dbb435460b9e252a771cac47880b.zip
More modern avatar upload, quota represented with progress bars
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-settings.component.html14
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-settings.component.scss4
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-settings.component.ts4
-rw-r--r--client/src/app/+my-account/shared/actor-avatar-info.component.html13
-rw-r--r--client/src/app/+my-account/shared/actor-avatar-info.component.scss48
-rw-r--r--client/src/app/videos/+video-edit/video-add-components/video-upload.component.html2
-rw-r--r--client/src/sass/bootstrap.scss7
-rw-r--r--client/src/sass/include/_bootstrap.scss2
8 files changed, 65 insertions, 29 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 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 @@
8 8
9 <div class="user-quota mb-3"> 9 <div class="user-quota mb-3">
10 <div> 10 <div>
11 <label i18n>Total video quota:</label> 11 <div class="progress" i18n-title title="Total video quota">
12 <ng-container i18n>{{ userVideoQuotaUsed | bytes: 0 }} used</ng-container> / {{ userVideoQuota }} 12 <div class="progress-bar" role="progressbar" [style]="{ width: userVideoQuotaPercentage + '%' }" [attr.aria-valuenow]="userVideoQuotaUsed" aria-valuemin="0" [attr.aria-valuemax]="userVideoQuota">{{ userVideoQuotaUsed | bytes: 0 }}</div>
13 <span class="ml-auto mr-2">{{ userVideoQuota }}</span>
14 </div>
13 </div> 15 </div>
14 16
15 <div *ngIf="hasDailyQuota()"> 17 <div *ngIf="hasDailyQuota()" class="mt-3">
16 <label i18n>Daily video quota:</label> 18 <div class="progress" i18n-title title="Daily video quota">
17 <ng-container>{{ userVideoQuotaUsedDaily | bytes: 0 }} used</ng-container> / {{ userVideoQuotaDaily }} 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>
20 <span class="ml-auto mr-2">{{ userVideoQuotaDaily }}</span>
21 </div>
18 </div> 22 </div>
19 </div> 23 </div>
20 24
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 7eb60c7fb..2b90cc8cf 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
@@ -13,3 +13,7 @@
13.account-title { 13.account-title {
14 @include settings-big-title; 14 @include settings-big-title;
15} 15}
16
17.progress {
18 width: 500px;
19}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
index ada98401c..5f2db9854 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
@@ -17,9 +17,11 @@ export class MyAccountSettingsComponent implements OnInit, AfterViewChecked {
17 17
18 userVideoQuota = '0' 18 userVideoQuota = '0'
19 userVideoQuotaUsed = 0 19 userVideoQuotaUsed = 0
20 userVideoQuotaPercentage = 15
20 21
21 userVideoQuotaDaily = '0' 22 userVideoQuotaDaily = '0'
22 userVideoQuotaUsedDaily = 0 23 userVideoQuotaUsedDaily = 0
24 userVideoQuotaDailyPercentage = 15
23 25
24 constructor ( 26 constructor (
25 private viewportScroller: ViewportScroller, 27 private viewportScroller: ViewportScroller,
@@ -40,12 +42,14 @@ export class MyAccountSettingsComponent implements OnInit, AfterViewChecked {
40 () => { 42 () => {
41 if (this.user.videoQuota !== -1) { 43 if (this.user.videoQuota !== -1) {
42 this.userVideoQuota = new BytesPipe().transform(this.user.videoQuota, 0).toString() 44 this.userVideoQuota = new BytesPipe().transform(this.user.videoQuota, 0).toString()
45 this.userVideoQuotaPercentage = this.user.videoQuota * 100 / this.userVideoQuotaUsed
43 } else { 46 } else {
44 this.userVideoQuota = this.i18n('Unlimited') 47 this.userVideoQuota = this.i18n('Unlimited')
45 } 48 }
46 49
47 if (this.user.videoQuotaDaily !== -1) { 50 if (this.user.videoQuotaDaily !== -1) {
48 this.userVideoQuotaDaily = new BytesPipe().transform(this.user.videoQuotaDaily, 0).toString() 51 this.userVideoQuotaDaily = new BytesPipe().transform(this.user.videoQuotaDaily, 0).toString()
52 this.userVideoQuotaDailyPercentage = this.user.videoQuotaDaily * 100 / this.userVideoQuotaUsedDaily
49 } else { 53 } else {
50 this.userVideoQuotaDaily = this.i18n('Unlimited') 54 this.userVideoQuotaDaily = this.i18n('Unlimited')
51 } 55 }
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 8bdff2f5a..b992d0ebd 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
@@ -2,6 +2,13 @@
2 <div class="actor"> 2 <div class="actor">
3 <img [src]="actor.avatarUrl" alt="Avatar" /> 3 <img [src]="actor.avatarUrl" alt="Avatar" />
4 4
5 <div class="actor-img-edit-container">
6 <div class="actor-img-edit-button" [ngbTooltip]="'(extensions: '+ avatarExtensions +', max size: 100KB)'" placement="right" container="body">
7 <my-global-icon iconName="edit"></my-global-icon>
8 <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange()"/>
9 </div>
10 </div>
11
5 <div class="actor-info"> 12 <div class="actor-info">
6 <div class="actor-info-names"> 13 <div class="actor-info-names">
7 <div class="actor-info-display-name">{{ actor.displayName }}</div> 14 <div class="actor-info-display-name">{{ actor.displayName }}</div>
@@ -10,10 +17,4 @@
10 <div i18n class="actor-info-followers">{{ actor.followersCount }} subscribers</div> 17 <div i18n class="actor-info-followers">{{ actor.followersCount }} subscribers</div>
11 </div> 18 </div>
12 </div> 19 </div>
13
14 <div class="button-file">
15 <span i18n>Change the avatar</span>
16 <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange()" />
17 </div>
18 <div i18n class="file-max-size">(extensions: {{ avatarExtensions }}, max size: {{ maxAvatarSize | bytes }})</div>
19</ng-container> \ No newline at end of file 20</ng-container> \ No newline at end of file
diff --git a/client/src/app/+my-account/shared/actor-avatar-info.component.scss b/client/src/app/+my-account/shared/actor-avatar-info.component.scss
index 86f8108b9..5a66ecfd2 100644
--- a/client/src/app/+my-account/shared/actor-avatar-info.component.scss
+++ b/client/src/app/+my-account/shared/actor-avatar-info.component.scss
@@ -5,12 +5,42 @@
5 display: flex; 5 display: flex;
6 6
7 img { 7 img {
8 @include avatar(50px); 8 @include avatar(100px);
9 9
10 margin-right: 15px; 10 margin-right: 15px;
11 } 11 }
12 12
13 .actor-img-edit-container {
14 position: relative;
15 width: 0;
16
17 .actor-img-edit-button {
18 @include peertube-button-file(21px);
19 @include button-with-icon(19px);
20
21 margin-top: 10px;
22 margin-bottom: 5px;
23 border-radius: 50%;
24 top: 55px;
25 right: 45px;
26 cursor: pointer;
27
28 input {
29 width: 30px;
30 height: 30px;
31 }
32
33 my-global-icon {
34 right: 7px;
35 }
36 }
37 }
38
13 .actor-info { 39 .actor-info {
40 justify-content: center;
41 display: inline-flex;
42 flex-direction: column;
43
14 .actor-info-names { 44 .actor-info-names {
15 display: flex; 45 display: flex;
16 align-items: center; 46 align-items: center;
@@ -35,21 +65,7 @@
35 65
36 .actor-info-followers { 66 .actor-info-followers {
37 font-size: 15px; 67 font-size: 15px;
68 padding-bottom: .5rem;
38 } 69 }
39 } 70 }
40} 71}
41
42.button-file {
43 @include peertube-button-file(160px);
44
45 margin-top: 10px;
46 margin-bottom: 5px;
47}
48
49.file-max-size {
50 display: inline-block;
51 font-size: 13px;
52
53 position: relative;
54 top: -10px;
55}
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 0f904affb..bdbc2a2cb 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
@@ -68,7 +68,7 @@
68</div> 68</div>
69 69
70<!-- Hidden because we want to load the component --> 70<!-- Hidden because we want to load the component -->
71<form [hidden]="!isUploadingVideo" novalidate [formGroup]="form"> 71<form [hidden]="!isUploadingVideo" novalidate [formGroup]="form" class="mb-3">
72 <my-video-edit 72 <my-video-edit
73 [form]="form" [formErrors]="formErrors" [videoCaptions]="videoCaptions" 73 [form]="form" [formErrors]="formErrors" [videoCaptions]="videoCaptions"
74 [validationMessages]="validationMessages" [userVideoChannels]="userVideoChannels" 74 [validationMessages]="validationMessages" [userVideoChannels]="userVideoChannels"
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 5c1ce1028..6c42acaff 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -236,3 +236,10 @@ ngb-tooltip-window {
236 background-color: var(--secondaryColor); 236 background-color: var(--secondaryColor);
237 } 237 }
238} 238}
239
240.progress-bar {
241 background-color: var(--mainColor);
242}
243.progress-bar-secondary {
244 background-color: var(--secondaryColor);
245}
diff --git a/client/src/sass/include/_bootstrap.scss b/client/src/sass/include/_bootstrap.scss
index b1a23be6b..61bb4739d 100644
--- a/client/src/sass/include/_bootstrap.scss
+++ b/client/src/sass/include/_bootstrap.scss
@@ -26,7 +26,7 @@
26@import '~bootstrap/scss/badge'; 26@import '~bootstrap/scss/badge';
27//@import '~bootstrap/scss/jumbotron'; 27//@import '~bootstrap/scss/jumbotron';
28@import '~bootstrap/scss/alert'; 28@import '~bootstrap/scss/alert';
29//@import '~bootstrap/scss/progress'; 29@import '~bootstrap/scss/progress';
30//@import '~bootstrap/scss/media'; 30//@import '~bootstrap/scss/media';
31//@import '~bootstrap/scss/list-group'; 31//@import '~bootstrap/scss/list-group';
32@import '~bootstrap/scss/close'; 32@import '~bootstrap/scss/close';