aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+my-account/shared
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2020-06-23 14:10:17 +0200
committerChocobozzz <chocobozzz@cpy.re>2020-06-23 16:00:49 +0200
commit67ed6552b831df66713bac9e672738796128d33f (patch)
tree59c97d41e0b49d75a90aa3de987968ab9b1ff447 /client/src/app/+my-account/shared
parent0c4bacbff53bc732f5a2677d62a6ead7752e2405 (diff)
downloadPeerTube-67ed6552b831df66713bac9e672738796128d33f.tar.gz
PeerTube-67ed6552b831df66713bac9e672738796128d33f.tar.zst
PeerTube-67ed6552b831df66713bac9e672738796128d33f.zip
Reorganize client shared modules
Diffstat (limited to 'client/src/app/+my-account/shared')
-rw-r--r--client/src/app/+my-account/shared/actor-avatar-info.component.html24
-rw-r--r--client/src/app/+my-account/shared/actor-avatar-info.component.scss71
-rw-r--r--client/src/app/+my-account/shared/actor-avatar-info.component.ts66
3 files changed, 0 insertions, 161 deletions
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
deleted file mode 100644
index d01b9ac7f..000000000
--- a/client/src/app/+my-account/shared/actor-avatar-info.component.html
+++ /dev/null
@@ -1,24 +0,0 @@
1<ng-container *ngIf="actor">
2 <div class="actor">
3 <div class="d-flex">
4 <img [src]="actor.avatarUrl" alt="Avatar" />
5
6 <div class="actor-img-edit-container">
7 <div class="actor-img-edit-button" [ngbTooltip]="'(extensions: '+ avatarExtensions +', '+ maxSizeText +': '+ maxAvatarSizeInBytes +')'" placement="right" container="body">
8 <my-global-icon iconName="edit"></my-global-icon>
9 <label for="avatarfile" i18n>Change your avatar</label>
10 <input #avatarfileInput type="file" title=" " name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange()"/>
11 </div>
12 </div>
13 </div>
14
15
16 <div class="actor-info">
17 <div class="actor-info-names">
18 <div class="actor-info-display-name">{{ actor.displayName }}</div>
19 <div class="actor-info-username">{{ actor.name }}</div>
20 </div>
21 <div i18n class="actor-info-followers">{{ actor.followersCount }} subscribers</div>
22 </div>
23 </div>
24</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
deleted file mode 100644
index 5a66ecfd2..000000000
--- a/client/src/app/+my-account/shared/actor-avatar-info.component.scss
+++ /dev/null
@@ -1,71 +0,0 @@
1@import '_variables';
2@import '_mixins';
3
4.actor {
5 display: flex;
6
7 img {
8 @include avatar(100px);
9
10 margin-right: 15px;
11 }
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
39 .actor-info {
40 justify-content: center;
41 display: inline-flex;
42 flex-direction: column;
43
44 .actor-info-names {
45 display: flex;
46 align-items: center;
47
48 .actor-info-display-name {
49 font-size: 20px;
50 font-weight: $font-bold;
51
52 @media screen and (max-width: $small-view) {
53 font-size: 16px;
54 }
55 }
56
57 .actor-info-username {
58 margin-left: 7px;
59 position: relative;
60 top: 2px;
61 font-size: 14px;
62 color: $grey-actor-name;
63 }
64 }
65
66 .actor-info-followers {
67 font-size: 15px;
68 padding-bottom: .5rem;
69 }
70 }
71}
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
deleted file mode 100644
index 8e4a7a602..000000000
--- a/client/src/app/+my-account/shared/actor-avatar-info.component.ts
+++ /dev/null
@@ -1,66 +0,0 @@
1import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
2import { ServerService } from '../../core/server'
3import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
4import { Account } from '@app/shared/account/account.model'
5import { Notifier } from '@app/core'
6import { ServerConfig } from '@shared/models'
7import { BytesPipe } from 'ngx-pipes'
8import { I18n } from '@ngx-translate/i18n-polyfill'
9
10@Component({
11 selector: 'my-actor-avatar-info',
12 templateUrl: './actor-avatar-info.component.html',
13 styleUrls: [ './actor-avatar-info.component.scss' ]
14})
15export class ActorAvatarInfoComponent implements OnInit {
16 @ViewChild('avatarfileInput') avatarfileInput: ElementRef<HTMLInputElement>
17
18 @Input() actor: VideoChannel | Account
19
20 @Output() avatarChange = new EventEmitter<FormData>()
21
22 maxSizeText: string
23
24 private serverConfig: ServerConfig
25 private bytesPipe: BytesPipe
26
27 constructor (
28 private serverService: ServerService,
29 private notifier: Notifier,
30 private i18n: I18n
31 ) {
32 this.bytesPipe = new BytesPipe()
33 this.maxSizeText = this.i18n('max size')
34 }
35
36 ngOnInit (): void {
37 this.serverConfig = this.serverService.getTmpConfig()
38 this.serverService.getConfig()
39 .subscribe(config => this.serverConfig = config)
40 }
41
42 onAvatarChange () {
43 const avatarfile = this.avatarfileInput.nativeElement.files[ 0 ]
44 if (avatarfile.size > this.maxAvatarSize) {
45 this.notifier.error('Error', 'This image is too large.')
46 return
47 }
48
49 const formData = new FormData()
50 formData.append('avatarfile', avatarfile)
51
52 this.avatarChange.emit(formData)
53 }
54
55 get maxAvatarSize () {
56 return this.serverConfig.avatar.file.size.max
57 }
58
59 get maxAvatarSizeInBytes () {
60 return this.bytesPipe.transform(this.maxAvatarSize)
61 }
62
63 get avatarExtensions () {
64 return this.serverConfig.avatar.file.extensions.join(', ')
65 }
66}