From ec489ce2f74570f94dffb62266f4ed6f18621b3e Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 28 Apr 2021 09:45:49 +0200 Subject: Rename actor image edit module --- client/src/app/+admin/admin.module.ts | 6 +- client/src/app/+my-account/my-account.module.ts | 6 +- .../+my-video-channels/my-video-channels.module.ts | 4 +- .../actor-avatar-edit.component.html | 41 +++++++++++ .../actor-avatar-edit.component.scss | 54 ++++++++++++++ .../actor-avatar-edit.component.ts | 83 ++++++++++++++++++++++ .../actor-banner-edit.component.html | 34 +++++++++ .../actor-banner-edit.component.scss | 27 +++++++ .../actor-banner-edit.component.ts | 76 ++++++++++++++++++++ .../shared-actor-image-edit/actor-image-edit.scss | 35 +++++++++ .../app/shared/shared-actor-image-edit/index.ts | 1 + .../shared-actor-image-edit.module.ts | 29 ++++++++ .../actor-avatar-edit.component.html | 41 ----------- .../actor-avatar-edit.component.scss | 54 -------------- .../actor-avatar-edit.component.ts | 83 ---------------------- .../actor-banner-edit.component.html | 34 --------- .../actor-banner-edit.component.scss | 27 ------- .../actor-banner-edit.component.ts | 76 -------------------- .../shared-actor-image/actor-image-edit.scss | 35 --------- client/src/app/shared/shared-actor-image/index.ts | 1 - .../shared-actor-image.module.ts | 29 -------- 21 files changed, 388 insertions(+), 388 deletions(-) create mode 100644 client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html create mode 100644 client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss create mode 100644 client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts create mode 100644 client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.html create mode 100644 client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss create mode 100644 client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.ts create mode 100644 client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss create mode 100644 client/src/app/shared/shared-actor-image-edit/index.ts create mode 100644 client/src/app/shared/shared-actor-image-edit/shared-actor-image-edit.module.ts delete mode 100644 client/src/app/shared/shared-actor-image/actor-avatar-edit.component.html delete mode 100644 client/src/app/shared/shared-actor-image/actor-avatar-edit.component.scss delete mode 100644 client/src/app/shared/shared-actor-image/actor-avatar-edit.component.ts delete mode 100644 client/src/app/shared/shared-actor-image/actor-banner-edit.component.html delete mode 100644 client/src/app/shared/shared-actor-image/actor-banner-edit.component.scss delete mode 100644 client/src/app/shared/shared-actor-image/actor-banner-edit.component.ts delete mode 100644 client/src/app/shared/shared-actor-image/actor-image-edit.scss delete mode 100644 client/src/app/shared/shared-actor-image/index.ts delete mode 100644 client/src/app/shared/shared-actor-image/shared-actor-image.module.ts (limited to 'client') diff --git a/client/src/app/+admin/admin.module.ts b/client/src/app/+admin/admin.module.ts index 8d1c3eadb..97ce8d1b8 100644 --- a/client/src/app/+admin/admin.module.ts +++ b/client/src/app/+admin/admin.module.ts @@ -3,12 +3,13 @@ import { SelectButtonModule } from 'primeng/selectbutton' import { TableModule } from 'primeng/table' import { NgModule } from '@angular/core' import { SharedAbuseListModule } from '@app/shared/shared-abuse-list' -import { SharedActorImageModule } from '@app/shared/shared-actor-image' +import { SharedActorImageEditModule } from '@app/shared/shared-actor-image-edit' import { SharedFormModule } from '@app/shared/shared-forms' import { SharedGlobalIconModule } from '@app/shared/shared-icons' import { SharedMainModule } from '@app/shared/shared-main' import { SharedModerationModule } from '@app/shared/shared-moderation' import { SharedVideoCommentModule } from '@app/shared/shared-video-comment' +import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/shared-account-avatar.module' import { AdminRoutingModule } from './admin-routing.module' import { AdminComponent } from './admin.component' import { @@ -39,7 +40,6 @@ import { JobService, LogsComponent, LogsService, SystemComponent } from './syste import { DebugComponent, DebugService } from './system/debug' import { JobsComponent } from './system/jobs/jobs.component' import { UserCreateComponent, UserListComponent, UserPasswordComponent, UsersComponent, UserUpdateComponent } from './users' -import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/shared-account-avatar.module' @NgModule({ imports: [ @@ -52,7 +52,7 @@ import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/share SharedAbuseListModule, SharedVideoCommentModule, SharedAccountAvatarModule, - SharedActorImageModule, + SharedActorImageEditModule, TableModule, SelectButtonModule, diff --git a/client/src/app/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts index 050cd4b34..36df10edc 100644 --- a/client/src/app/+my-account/my-account.module.ts +++ b/client/src/app/+my-account/my-account.module.ts @@ -3,13 +3,14 @@ import { TableModule } from 'primeng/table' import { DragDropModule } from '@angular/cdk/drag-drop' import { NgModule } from '@angular/core' import { SharedAbuseListModule } from '@app/shared/shared-abuse-list' -import { SharedActorImageModule } from '@app/shared/shared-actor-image' +import { SharedActorImageEditModule } from '@app/shared/shared-actor-image-edit' import { SharedFormModule } from '@app/shared/shared-forms' import { SharedGlobalIconModule } from '@app/shared/shared-icons' import { SharedMainModule } from '@app/shared/shared-main' import { SharedModerationModule } from '@app/shared/shared-moderation' import { SharedShareModal } from '@app/shared/shared-share-modal' import { SharedUserInterfaceSettingsModule } from '@app/shared/shared-user-settings' +import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/shared-account-avatar.module' import { MyAccountAbusesListComponent } from './my-account-abuses/my-account-abuses-list.component' import { MyAccountApplicationsComponent } from './my-account-applications/my-account-applications.component' import { MyAccountBlocklistComponent } from './my-account-blocklist/my-account-blocklist.component' @@ -23,7 +24,6 @@ import { MyAccountNotificationPreferencesComponent } from './my-account-settings import { MyAccountProfileComponent } from './my-account-settings/my-account-profile/my-account-profile.component' import { MyAccountSettingsComponent } from './my-account-settings/my-account-settings.component' import { MyAccountComponent } from './my-account.component' -import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/shared-account-avatar.module' @NgModule({ imports: [ @@ -41,7 +41,7 @@ import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/share SharedAbuseListModule, SharedShareModal, SharedAccountAvatarModule, - SharedActorImageModule + SharedActorImageEditModule ], declarations: [ diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.module.ts b/client/src/app/+my-library/+my-video-channels/my-video-channels.module.ts index 53557ca02..a23b53ee0 100644 --- a/client/src/app/+my-library/+my-video-channels/my-video-channels.module.ts +++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.module.ts @@ -1,6 +1,6 @@ import { ChartModule } from 'primeng/chart' import { NgModule } from '@angular/core' -import { SharedActorImageModule } from '@app/shared/shared-actor-image' +import { SharedActorImageEditModule } from '@app/shared/shared-actor-image-edit' import { SharedFormModule } from '@app/shared/shared-forms' import { SharedGlobalIconModule } from '@app/shared/shared-icons' import { SharedMainModule } from '@app/shared/shared-main' @@ -18,7 +18,7 @@ import { MyVideoChannelsComponent } from './my-video-channels.component' SharedMainModule, SharedFormModule, SharedGlobalIconModule, - SharedActorImageModule + SharedActorImageEditModule ], declarations: [ diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html new file mode 100644 index 000000000..0829263f4 --- /dev/null +++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html @@ -0,0 +1,41 @@ +
+
+ Avatar + +
+ +
+ + + +
+ +
+ + +
+ +
+
+ +
+
{{ actor.displayName }}
+
{{ actor.name }}
+
{{ actor.followersCount }} subscribers
+
+
+ + +
+ + Upload a new avatar + +
+
+ + Remove avatar +
+ diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss new file mode 100644 index 000000000..8b0172315 --- /dev/null +++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss @@ -0,0 +1,54 @@ +@import '_variables'; +@import '_mixins'; + +.actor { + display: flex; + + img { + margin-right: 15px; + + &:not(.channel) { + @include avatar(100px); + } + + &.channel { + @include channel-avatar(100px); + } + } + + .actor-info { + display: inline-flex; + flex-direction: column; + + .actor-info-display-name { + font-size: 20px; + font-weight: $font-bold; + + @media screen and (max-width: $small-view) { + font-size: 16px; + } + } + + .actor-info-username { + position: relative; + font-size: 14px; + color: pvar(--greyForegroundColor); + } + + .actor-info-followers { + font-size: 15px; + padding-bottom: .5rem; + } + } +} + +.actor-img-edit-container { + position: relative; + width: 0; +} + +.actor-img-edit-button { + top: 55px; + right: 45px; + border-radius: 50%; +} diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts new file mode 100644 index 000000000..d0d269489 --- /dev/null +++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts @@ -0,0 +1,83 @@ +import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' +import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser' +import { Notifier, ServerService } from '@app/core' +import { Account, VideoChannel } from '@app/shared/shared-main' +import { NgbPopover } from '@ng-bootstrap/ng-bootstrap' +import { getBytes } from '@root-helpers/bytes' + +@Component({ + selector: 'my-actor-avatar-edit', + templateUrl: './actor-avatar-edit.component.html', + styleUrls: [ + './actor-image-edit.scss', + './actor-avatar-edit.component.scss' + ] +}) +export class ActorAvatarEditComponent implements OnInit { + @ViewChild('avatarfileInput') avatarfileInput: ElementRef + @ViewChild('avatarPopover') avatarPopover: NgbPopover + + @Input() actor: VideoChannel | Account + @Input() editable = true + @Input() displaySubscribers = true + @Input() displayUsername = true + @Input() previewImage = false + + @Output() avatarChange = new EventEmitter() + @Output() avatarDelete = new EventEmitter() + + avatarFormat = '' + maxAvatarSize = 0 + avatarExtensions = '' + + preview: SafeResourceUrl + + constructor ( + private sanitizer: DomSanitizer, + private serverService: ServerService, + private notifier: Notifier + ) { } + + ngOnInit (): void { + this.serverService.getConfig() + .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}` + }) + } + + onAvatarChange (input: HTMLInputElement) { + this.avatarfileInput = new ElementRef(input) + + const avatarfile = this.avatarfileInput.nativeElement.files[ 0 ] + if (avatarfile.size > this.maxAvatarSize) { + this.notifier.error('Error', $localize`This image is too large.`) + return + } + + const formData = new FormData() + formData.append('avatarfile', avatarfile) + this.avatarPopover?.close() + this.avatarChange.emit(formData) + + if (this.previewImage) { + this.preview = this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(avatarfile)) + } + } + + deleteAvatar () { + this.preview = undefined + this.avatarDelete.emit() + } + + hasAvatar () { + return !!this.preview || !!this.actor.avatar + } + + isChannel () { + return !!(this.actor as VideoChannel).ownerAccount + } +} diff --git a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.html b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.html new file mode 100644 index 000000000..266fc26c5 --- /dev/null +++ b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.html @@ -0,0 +1,34 @@ +
+
+ + +
+ + + +
+ +
+ + +
+
+
+ + +
+ + Upload a new banner + +
+ +
+ + Remove banner +
+ diff --git a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss new file mode 100644 index 000000000..23606f871 --- /dev/null +++ b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss @@ -0,0 +1,27 @@ +@import '_variables'; +@import '_mixins'; + +.banner-placeholder { + @include block-ratio('> div, > img', $banner-inverted-ratio); +} + +.banner-placeholder { + background-color: pvar(--greyBackgroundColor); +} + +.actor-img-edit-container { + position: relative; + display: flex; + justify-content: center; + align-items: center; +} + +.actor-img-edit-button { + position: absolute; + width: auto; + + label { + font-weight: $font-semibold; + margin-bottom: 0; + } +} diff --git a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.ts b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.ts new file mode 100644 index 000000000..8c12d3c4c --- /dev/null +++ b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.ts @@ -0,0 +1,76 @@ +import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core' +import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser' +import { Notifier, ServerService } from '@app/core' +import { VideoChannel } from '@app/shared/shared-main' +import { NgbPopover } from '@ng-bootstrap/ng-bootstrap' +import { getBytes } from '@root-helpers/bytes' + +@Component({ + selector: 'my-actor-banner-edit', + templateUrl: './actor-banner-edit.component.html', + styleUrls: [ + './actor-image-edit.scss', + './actor-banner-edit.component.scss' + ] +}) +export class ActorBannerEditComponent implements OnInit { + @ViewChild('bannerfileInput') bannerfileInput: ElementRef + @ViewChild('bannerPopover') bannerPopover: NgbPopover + + @Input() actor: VideoChannel + @Input() previewImage = false + + @Output() bannerChange = new EventEmitter() + @Output() bannerDelete = new EventEmitter() + + bannerFormat = '' + maxBannerSize = 0 + bannerExtensions = '' + + preview: SafeResourceUrl + + constructor ( + private sanitizer: DomSanitizer, + private serverService: ServerService, + private notifier: Notifier + ) { } + + ngOnInit (): void { + this.serverService.getConfig() + .subscribe(config => { + this.maxBannerSize = config.banner.file.size.max + this.bannerExtensions = config.banner.file.extensions.join(', ') + + // tslint:disable:max-line-length + this.bannerFormat = $localize`ratio 6/1, recommended size: 1600x266, max size: ${getBytes(this.maxBannerSize)}, extensions: ${this.bannerExtensions}` + }) + } + + onBannerChange (input: HTMLInputElement) { + this.bannerfileInput = new ElementRef(input) + + const bannerfile = this.bannerfileInput.nativeElement.files[ 0 ] + if (bannerfile.size > this.maxBannerSize) { + this.notifier.error('Error', $localize`This image is too large.`) + return + } + + const formData = new FormData() + formData.append('bannerfile', bannerfile) + this.bannerPopover?.close() + this.bannerChange.emit(formData) + + if (this.previewImage) { + this.preview = this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(bannerfile)) + } + } + + deleteBanner () { + this.preview = undefined + this.bannerDelete.emit() + } + + hasBanner () { + return !!this.preview || !!this.actor.bannerUrl + } +} diff --git a/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss b/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss new file mode 100644 index 000000000..918955a89 --- /dev/null +++ b/client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss @@ -0,0 +1,35 @@ +@import '_variables'; +@import '_mixins'; + +.actor ::ng-deep .popover-image-info .popover-body { + padding: 0; + + .dropdown-item { + padding: 6px 10px; + border-radius: 4px; + + &:first-child { + @include peertube-file; + display: block; + } + } +} + +.actor-img-edit-button { + @include peertube-button-file(21px); + @include button-with-icon(19px); + @include orange-button; + + margin-top: 10px; + margin-bottom: 5px; + cursor: pointer; + + input { + width: 30px; + height: 30px; + } + + my-global-icon { + right: 7px; + } +} diff --git a/client/src/app/shared/shared-actor-image-edit/index.ts b/client/src/app/shared/shared-actor-image-edit/index.ts new file mode 100644 index 000000000..276b2e2fb --- /dev/null +++ b/client/src/app/shared/shared-actor-image-edit/index.ts @@ -0,0 +1 @@ +export * from './shared-actor-image-edit.module' diff --git a/client/src/app/shared/shared-actor-image-edit/shared-actor-image-edit.module.ts b/client/src/app/shared/shared-actor-image-edit/shared-actor-image-edit.module.ts new file mode 100644 index 000000000..c9c6472b9 --- /dev/null +++ b/client/src/app/shared/shared-actor-image-edit/shared-actor-image-edit.module.ts @@ -0,0 +1,29 @@ + +import { CommonModule } from '@angular/common' +import { NgModule } from '@angular/core' +import { SharedGlobalIconModule } from '../shared-icons' +import { SharedMainModule } from '../shared-main' +import { ActorAvatarEditComponent } from './actor-avatar-edit.component' +import { ActorBannerEditComponent } from './actor-banner-edit.component' + +@NgModule({ + imports: [ + CommonModule, + + SharedMainModule, + SharedGlobalIconModule + ], + + declarations: [ + ActorAvatarEditComponent, + ActorBannerEditComponent + ], + + exports: [ + ActorAvatarEditComponent, + ActorBannerEditComponent + ], + + providers: [ ] +}) +export class SharedActorImageEditModule { } diff --git a/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.html b/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.html deleted file mode 100644 index 0829263f4..000000000 --- a/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.html +++ /dev/null @@ -1,41 +0,0 @@ -
-
- Avatar - -
- -
- - - -
- -
- - -
- -
-
- -
-
{{ actor.displayName }}
-
{{ actor.name }}
-
{{ actor.followersCount }} subscribers
-
-
- - -
- - Upload a new avatar - -
-
- - Remove avatar -
- diff --git a/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.scss b/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.scss deleted file mode 100644 index 8b0172315..000000000 --- a/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.scss +++ /dev/null @@ -1,54 +0,0 @@ -@import '_variables'; -@import '_mixins'; - -.actor { - display: flex; - - img { - margin-right: 15px; - - &:not(.channel) { - @include avatar(100px); - } - - &.channel { - @include channel-avatar(100px); - } - } - - .actor-info { - display: inline-flex; - flex-direction: column; - - .actor-info-display-name { - font-size: 20px; - font-weight: $font-bold; - - @media screen and (max-width: $small-view) { - font-size: 16px; - } - } - - .actor-info-username { - position: relative; - font-size: 14px; - color: pvar(--greyForegroundColor); - } - - .actor-info-followers { - font-size: 15px; - padding-bottom: .5rem; - } - } -} - -.actor-img-edit-container { - position: relative; - width: 0; -} - -.actor-img-edit-button { - top: 55px; - right: 45px; - border-radius: 50%; -} diff --git a/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.ts b/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.ts deleted file mode 100644 index d0d269489..000000000 --- a/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.ts +++ /dev/null @@ -1,83 +0,0 @@ -import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' -import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser' -import { Notifier, ServerService } from '@app/core' -import { Account, VideoChannel } from '@app/shared/shared-main' -import { NgbPopover } from '@ng-bootstrap/ng-bootstrap' -import { getBytes } from '@root-helpers/bytes' - -@Component({ - selector: 'my-actor-avatar-edit', - templateUrl: './actor-avatar-edit.component.html', - styleUrls: [ - './actor-image-edit.scss', - './actor-avatar-edit.component.scss' - ] -}) -export class ActorAvatarEditComponent implements OnInit { - @ViewChild('avatarfileInput') avatarfileInput: ElementRef - @ViewChild('avatarPopover') avatarPopover: NgbPopover - - @Input() actor: VideoChannel | Account - @Input() editable = true - @Input() displaySubscribers = true - @Input() displayUsername = true - @Input() previewImage = false - - @Output() avatarChange = new EventEmitter() - @Output() avatarDelete = new EventEmitter() - - avatarFormat = '' - maxAvatarSize = 0 - avatarExtensions = '' - - preview: SafeResourceUrl - - constructor ( - private sanitizer: DomSanitizer, - private serverService: ServerService, - private notifier: Notifier - ) { } - - ngOnInit (): void { - this.serverService.getConfig() - .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}` - }) - } - - onAvatarChange (input: HTMLInputElement) { - this.avatarfileInput = new ElementRef(input) - - const avatarfile = this.avatarfileInput.nativeElement.files[ 0 ] - if (avatarfile.size > this.maxAvatarSize) { - this.notifier.error('Error', $localize`This image is too large.`) - return - } - - const formData = new FormData() - formData.append('avatarfile', avatarfile) - this.avatarPopover?.close() - this.avatarChange.emit(formData) - - if (this.previewImage) { - this.preview = this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(avatarfile)) - } - } - - deleteAvatar () { - this.preview = undefined - this.avatarDelete.emit() - } - - hasAvatar () { - return !!this.preview || !!this.actor.avatar - } - - isChannel () { - return !!(this.actor as VideoChannel).ownerAccount - } -} diff --git a/client/src/app/shared/shared-actor-image/actor-banner-edit.component.html b/client/src/app/shared/shared-actor-image/actor-banner-edit.component.html deleted file mode 100644 index 266fc26c5..000000000 --- a/client/src/app/shared/shared-actor-image/actor-banner-edit.component.html +++ /dev/null @@ -1,34 +0,0 @@ -
-
- - -
- - - -
- -
- - -
-
-
- - -
- - Upload a new banner - -
- -
- - Remove banner -
- diff --git a/client/src/app/shared/shared-actor-image/actor-banner-edit.component.scss b/client/src/app/shared/shared-actor-image/actor-banner-edit.component.scss deleted file mode 100644 index 23606f871..000000000 --- a/client/src/app/shared/shared-actor-image/actor-banner-edit.component.scss +++ /dev/null @@ -1,27 +0,0 @@ -@import '_variables'; -@import '_mixins'; - -.banner-placeholder { - @include block-ratio('> div, > img', $banner-inverted-ratio); -} - -.banner-placeholder { - background-color: pvar(--greyBackgroundColor); -} - -.actor-img-edit-container { - position: relative; - display: flex; - justify-content: center; - align-items: center; -} - -.actor-img-edit-button { - position: absolute; - width: auto; - - label { - font-weight: $font-semibold; - margin-bottom: 0; - } -} diff --git a/client/src/app/shared/shared-actor-image/actor-banner-edit.component.ts b/client/src/app/shared/shared-actor-image/actor-banner-edit.component.ts deleted file mode 100644 index 8c12d3c4c..000000000 --- a/client/src/app/shared/shared-actor-image/actor-banner-edit.component.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core' -import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser' -import { Notifier, ServerService } from '@app/core' -import { VideoChannel } from '@app/shared/shared-main' -import { NgbPopover } from '@ng-bootstrap/ng-bootstrap' -import { getBytes } from '@root-helpers/bytes' - -@Component({ - selector: 'my-actor-banner-edit', - templateUrl: './actor-banner-edit.component.html', - styleUrls: [ - './actor-image-edit.scss', - './actor-banner-edit.component.scss' - ] -}) -export class ActorBannerEditComponent implements OnInit { - @ViewChild('bannerfileInput') bannerfileInput: ElementRef - @ViewChild('bannerPopover') bannerPopover: NgbPopover - - @Input() actor: VideoChannel - @Input() previewImage = false - - @Output() bannerChange = new EventEmitter() - @Output() bannerDelete = new EventEmitter() - - bannerFormat = '' - maxBannerSize = 0 - bannerExtensions = '' - - preview: SafeResourceUrl - - constructor ( - private sanitizer: DomSanitizer, - private serverService: ServerService, - private notifier: Notifier - ) { } - - ngOnInit (): void { - this.serverService.getConfig() - .subscribe(config => { - this.maxBannerSize = config.banner.file.size.max - this.bannerExtensions = config.banner.file.extensions.join(', ') - - // tslint:disable:max-line-length - this.bannerFormat = $localize`ratio 6/1, recommended size: 1600x266, max size: ${getBytes(this.maxBannerSize)}, extensions: ${this.bannerExtensions}` - }) - } - - onBannerChange (input: HTMLInputElement) { - this.bannerfileInput = new ElementRef(input) - - const bannerfile = this.bannerfileInput.nativeElement.files[ 0 ] - if (bannerfile.size > this.maxBannerSize) { - this.notifier.error('Error', $localize`This image is too large.`) - return - } - - const formData = new FormData() - formData.append('bannerfile', bannerfile) - this.bannerPopover?.close() - this.bannerChange.emit(formData) - - if (this.previewImage) { - this.preview = this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(bannerfile)) - } - } - - deleteBanner () { - this.preview = undefined - this.bannerDelete.emit() - } - - hasBanner () { - return !!this.preview || !!this.actor.bannerUrl - } -} diff --git a/client/src/app/shared/shared-actor-image/actor-image-edit.scss b/client/src/app/shared/shared-actor-image/actor-image-edit.scss deleted file mode 100644 index 918955a89..000000000 --- a/client/src/app/shared/shared-actor-image/actor-image-edit.scss +++ /dev/null @@ -1,35 +0,0 @@ -@import '_variables'; -@import '_mixins'; - -.actor ::ng-deep .popover-image-info .popover-body { - padding: 0; - - .dropdown-item { - padding: 6px 10px; - border-radius: 4px; - - &:first-child { - @include peertube-file; - display: block; - } - } -} - -.actor-img-edit-button { - @include peertube-button-file(21px); - @include button-with-icon(19px); - @include orange-button; - - margin-top: 10px; - margin-bottom: 5px; - cursor: pointer; - - input { - width: 30px; - height: 30px; - } - - my-global-icon { - right: 7px; - } -} diff --git a/client/src/app/shared/shared-actor-image/index.ts b/client/src/app/shared/shared-actor-image/index.ts deleted file mode 100644 index 18a9038eb..000000000 --- a/client/src/app/shared/shared-actor-image/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './shared-actor-image.module' diff --git a/client/src/app/shared/shared-actor-image/shared-actor-image.module.ts b/client/src/app/shared/shared-actor-image/shared-actor-image.module.ts deleted file mode 100644 index 6044f9925..000000000 --- a/client/src/app/shared/shared-actor-image/shared-actor-image.module.ts +++ /dev/null @@ -1,29 +0,0 @@ - -import { CommonModule } from '@angular/common' -import { NgModule } from '@angular/core' -import { SharedGlobalIconModule } from '../shared-icons' -import { SharedMainModule } from '../shared-main' -import { ActorAvatarEditComponent } from './actor-avatar-edit.component' -import { ActorBannerEditComponent } from './actor-banner-edit.component' - -@NgModule({ - imports: [ - CommonModule, - - SharedMainModule, - SharedGlobalIconModule - ], - - declarations: [ - ActorAvatarEditComponent, - ActorBannerEditComponent - ], - - exports: [ - ActorAvatarEditComponent, - ActorBannerEditComponent - ], - - providers: [ ] -}) -export class SharedActorImageModule { } -- cgit v1.2.3