diff options
author | Chocobozzz <me@florianbigard.com> | 2018-06-29 14:34:04 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2018-06-29 14:34:04 +0200 |
commit | 52d9f792b3fee5acce80f948295b59e3ad2073eb (patch) | |
tree | 661f577e9c7196d199b4b49e475ecd2d88e6d7b7 /client/src/app/+my-account/my-account-settings | |
parent | 4bbfc6c606c8d3794bae25c64c516120af41f4eb (diff) | |
download | PeerTube-52d9f792b3fee5acce80f948295b59e3ad2073eb.tar.gz PeerTube-52d9f792b3fee5acce80f948295b59e3ad2073eb.tar.zst PeerTube-52d9f792b3fee5acce80f948295b59e3ad2073eb.zip |
Client: Add ability to update video channel avatar
Diffstat (limited to 'client/src/app/+my-account/my-account-settings')
3 files changed, 2 insertions, 86 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 f5d593f19..ff08cb777 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 | |||
@@ -1,20 +1,4 @@ | |||
1 | <div class="user"> | 1 | <my-actor-avatar-info [actor]="user.account" (avatarChange)="onAvatarChange($event)"></my-actor-avatar-info> |
2 | <img [src]="user.accountAvatarUrl" alt="Avatar" /> | ||
3 | |||
4 | <div class="user-info"> | ||
5 | <div class="user-info-names"> | ||
6 | <div class="user-info-display-name">{{ user.account?.displayName }}</div> | ||
7 | <div class="user-info-username">{{ user.username }}</div> | ||
8 | </div> | ||
9 | <div i18n class="user-info-followers">{{ user.account?.followersCount }} subscribers</div> | ||
10 | </div> | ||
11 | </div> | ||
12 | |||
13 | <div class="button-file"> | ||
14 | <span i18n>Change your avatar</span> | ||
15 | <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="changeAvatar()" /> | ||
16 | </div> | ||
17 | <div i18n class="file-max-size">(extensions: {{ avatarExtensions }}, max size: {{ maxAvatarSize | bytes }})</div> | ||
18 | 2 | ||
19 | <div class="user-quota"> | 3 | <div class="user-quota"> |
20 | <span i18n class="user-quota-label">Video quota:</span> {{ userVideoQuotaUsed | bytes: 0 }} / {{ userVideoQuota }} | 4 | <span i18n class="user-quota-label">Video quota:</span> {{ userVideoQuotaUsed | bytes: 0 }} / {{ userVideoQuota }} |
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 ec0d40b93..16f26dfed 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 | |||
@@ -1,55 +1,6 @@ | |||
1 | @import '_variables'; | 1 | @import '_variables'; |
2 | @import '_mixins'; | 2 | @import '_mixins'; |
3 | 3 | ||
4 | .user { | ||
5 | display: flex; | ||
6 | |||
7 | img { | ||
8 | @include avatar(50px); | ||
9 | |||
10 | margin-right: 15px; | ||
11 | } | ||
12 | |||
13 | .user-info { | ||
14 | .user-info-names { | ||
15 | display: flex; | ||
16 | align-items: center; | ||
17 | |||
18 | .user-info-display-name { | ||
19 | font-size: 20px; | ||
20 | font-weight: $font-bold; | ||
21 | } | ||
22 | |||
23 | .user-info-username { | ||
24 | margin-left: 7px; | ||
25 | position: relative; | ||
26 | top: 2px; | ||
27 | font-size: 14px; | ||
28 | color: #777272; | ||
29 | } | ||
30 | } | ||
31 | |||
32 | .user-info-followers { | ||
33 | font-size: 15px; | ||
34 | } | ||
35 | } | ||
36 | } | ||
37 | |||
38 | .button-file { | ||
39 | @include peertube-button-file(160px); | ||
40 | |||
41 | margin-top: 10px; | ||
42 | margin-bottom: 5px; | ||
43 | } | ||
44 | |||
45 | .file-max-size { | ||
46 | display: inline-block; | ||
47 | font-size: 13px; | ||
48 | |||
49 | position: relative; | ||
50 | top: -10px; | ||
51 | } | ||
52 | |||
53 | .user-quota { | 4 | .user-quota { |
54 | font-size: 15px; | 5 | font-size: 15px; |
55 | margin-top: 20px; | 6 | margin-top: 20px; |
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 14293f14c..164a46a48 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 | |||
@@ -13,8 +13,6 @@ import { I18n } from '@ngx-translate/i18n-polyfill' | |||
13 | styleUrls: [ './my-account-settings.component.scss' ] | 13 | styleUrls: [ './my-account-settings.component.scss' ] |
14 | }) | 14 | }) |
15 | export class MyAccountSettingsComponent implements OnInit { | 15 | export class MyAccountSettingsComponent implements OnInit { |
16 | @ViewChild('avatarfileInput') avatarfileInput | ||
17 | |||
18 | user: User = null | 16 | user: User = null |
19 | userVideoQuota = '0' | 17 | userVideoQuota = '0' |
20 | userVideoQuotaUsed = 0 | 18 | userVideoQuotaUsed = 0 |
@@ -48,16 +46,7 @@ export class MyAccountSettingsComponent implements OnInit { | |||
48 | .subscribe(data => this.userVideoQuotaUsed = data.videoQuotaUsed) | 46 | .subscribe(data => this.userVideoQuotaUsed = data.videoQuotaUsed) |
49 | } | 47 | } |
50 | 48 | ||
51 | changeAvatar () { | 49 | onAvatarChange (formData: FormData) { |
52 | const avatarfile = this.avatarfileInput.nativeElement.files[ 0 ] | ||
53 | if (avatarfile.size > this.maxAvatarSize) { | ||
54 | this.notificationsService.error('Error', 'This image is too large.') | ||
55 | return | ||
56 | } | ||
57 | |||
58 | const formData = new FormData() | ||
59 | formData.append('avatarfile', avatarfile) | ||
60 | |||
61 | this.userService.changeAvatar(formData) | 50 | this.userService.changeAvatar(formData) |
62 | .subscribe( | 51 | .subscribe( |
63 | data => { | 52 | data => { |
@@ -69,12 +58,4 @@ export class MyAccountSettingsComponent implements OnInit { | |||
69 | err => this.notificationsService.error(this.i18n('Error'), err.message) | 58 | err => this.notificationsService.error(this.i18n('Error'), err.message) |
70 | ) | 59 | ) |
71 | } | 60 | } |
72 | |||
73 | get maxAvatarSize () { | ||
74 | return this.serverService.getConfig().avatar.file.size.max | ||
75 | } | ||
76 | |||
77 | get avatarExtensions () { | ||
78 | return this.serverService.getConfig().avatar.file.extensions.join(',') | ||
79 | } | ||
80 | } | 61 | } |