Browse Source

Avatar info component optimizations

pull/3592/head
Chocobozzz 1 week ago
parent
commit
0e4ca570fa
No known key found for this signature in database GPG Key ID: 583A612D890159BE
2 changed files with 17 additions and 26 deletions
  1. +3
    -3
      client/src/app/shared/shared-main/account/actor-avatar-info.component.html
  2. +14
    -23
      client/src/app/shared/shared-main/account/actor-avatar-info.component.ts

+ 3
- 3
client/src/app/shared/shared-main/account/actor-avatar-info.component.html View File

@@ -5,13 +5,13 @@

<div class="actor-img-edit-container">

<div *ngIf="!hasAvatar" class="actor-img-edit-button" [ngbTooltip]="avatarFormat" placement="right" container="body">
<div *ngIf="!hasAvatar()" class="actor-img-edit-button" [ngbTooltip]="avatarFormat" placement="right" container="body">
<my-global-icon iconName="upload"></my-global-icon>
<label class="sr-only" for="avatarfile" i18n>Upload a new avatar</label>
<input #avatarfileInput type="file" title=" " name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/>
</div>

<div *ngIf="hasAvatar" class="actor-img-edit-button" #avatarPopover="ngbPopover" [ngbPopover]="avatarEditContent" popoverClass="popover-avatar-info" autoClose="outside" placement="right">
<div *ngIf="hasAvatar()" class="actor-img-edit-button" #avatarPopover="ngbPopover" [ngbPopover]="avatarEditContent" popoverClass="popover-avatar-info" autoClose="outside" placement="right">
<my-global-icon iconName="edit"></my-global-icon>
<label class="sr-only" for="avatarMenu" i18n>Change your avatar</label>
</div>
@@ -40,4 +40,4 @@
<my-global-icon iconName="delete"></my-global-icon>
<span i18n>Remove avatar</span>
</div>
</ng-template>
</ng-template>

+ 14
- 23
client/src/app/shared/shared-main/account/actor-avatar-info.component.ts View File

@@ -1,10 +1,9 @@
import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'
import { Notifier, ServerService } from '@app/core'
import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
import { getBytes } from '@root-helpers/bytes'
import { ServerConfig } from '@shared/models'
import { VideoChannel } from '../video-channel/video-channel.model'
import { Account } from '../account/account.model'
import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
import { VideoChannel } from '../video-channel/video-channel.model'
import { Actor } from './actor.model'

@Component({
@@ -21,8 +20,11 @@ export class ActorAvatarInfoComponent implements OnInit, OnChanges {
@Output() avatarChange = new EventEmitter<FormData>()
@Output() avatarDelete = new EventEmitter<void>()

avatarFormat = ''
maxAvatarSize = 0
avatarExtensions = ''

private avatarUrl: string
private serverConfig: ServerConfig

constructor (
private serverService: ServerService,
@@ -30,9 +32,14 @@ export class ActorAvatarInfoComponent implements OnInit, OnChanges {
) { }

ngOnInit (): void {
this.serverConfig = this.serverService.getTmpConfig()
this.serverService.getConfig()
.subscribe(config => this.serverConfig = config)
.subscribe(config => {
this.maxAvatarSize = config.avatar.file.size.max
this.avatarExtensions = config.avatar.file.extensions.join(', ')

this.avatarFormat = `${$localize`max size`}: 192*192px, ` +
`${getBytes(this.maxAvatarSize)} ${$localize`extensions`}: ${this.avatarExtensions}`
})
}

ngOnChanges (changes: SimpleChanges) {
@@ -60,23 +67,7 @@ export class ActorAvatarInfoComponent implements OnInit, OnChanges {
this.avatarDelete.emit()
}

get maxAvatarSize () {
return this.serverConfig.avatar.file.size.max
}

get maxAvatarSizeInBytes () {
return getBytes(this.maxAvatarSize)
}

get avatarExtensions () {
return this.serverConfig.avatar.file.extensions.join(', ')
}

get avatarFormat () {
return `${$localize`max size`}: 192*192px, ${this.maxAvatarSizeInBytes} ${$localize`extensions`}: ${this.avatarExtensions}`
}

get hasAvatar () {
hasAvatar () {
return !!this.avatarUrl
}
}

Loading…
Cancel
Save