aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared/channel
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-06-08 08:52:06 +0200
committerGitHub <noreply@github.com>2020-06-08 08:52:06 +0200
commitc2caa99b942dea7fa9d2856f53efd1316169658e (patch)
tree76dfa301d6fef72f6bdab38b2bf33bbac7cdb5b6 /client/src/app/shared/channel
parentc87d45df9b2f0d018d866d096c45ab70269105a5 (diff)
downloadPeerTube-c2caa99b942dea7fa9d2856f53efd1316169658e.tar.gz
PeerTube-c2caa99b942dea7fa9d2856f53efd1316169658e.tar.zst
PeerTube-c2caa99b942dea7fa9d2856f53efd1316169658e.zip
Add channel/account avatars in miniature (#2838)
* add small avatar to miniature * fix svg size for trending and search icons in plugins view * parametrize avatar in miniature display options
Diffstat (limited to 'client/src/app/shared/channel')
-rw-r--r--client/src/app/shared/channel/avatar.component.html6
-rw-r--r--client/src/app/shared/channel/avatar.component.scss13
-rw-r--r--client/src/app/shared/channel/avatar.component.ts28
3 files changed, 36 insertions, 11 deletions
diff --git a/client/src/app/shared/channel/avatar.component.html b/client/src/app/shared/channel/avatar.component.html
index 362feacd7..062ef5bde 100644
--- a/client/src/app/shared/channel/avatar.component.html
+++ b/client/src/app/shared/channel/avatar.component.html
@@ -1,8 +1,8 @@
1<div class="wrapper"> 1<div class="wrapper" [ngClass]="'avatar-' + size">
2 <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" i18n-title title="Go the channel page"> 2 <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
3 <img [src]="video.videoChannelAvatarUrl" alt="Channel avatar" /> 3 <img [src]="video.videoChannelAvatarUrl" alt="Channel avatar" />
4 </a> 4 </a>
5 <a [routerLink]="[ '/accounts', video.byAccount ]" i18n-title title="Go to the account page"> 5 <a [routerLink]="[ '/accounts', video.byAccount ]" [title]="accountLinkTitle">
6 <img [src]="video.accountAvatarUrl" alt="Account avatar" /> 6 <img [src]="video.accountAvatarUrl" alt="Account avatar" />
7 </a> 7 </a>
8</div> 8</div>
diff --git a/client/src/app/shared/channel/avatar.component.scss b/client/src/app/shared/channel/avatar.component.scss
index 6629a4327..77b90c579 100644
--- a/client/src/app/shared/channel/avatar.component.scss
+++ b/client/src/app/shared/channel/avatar.component.scss
@@ -1,13 +1,18 @@
1@import '_mixins'; 1@import '_mixins';
2 2
3.wrapper { 3.wrapper {
4 width: 35px; 4 $avatar-size: 35px;
5 height: 35px; 5
6 min-width: 35px; 6 width: $avatar-size;
7 min-height: 35px; 7 height: $avatar-size;
8 position: relative; 8 position: relative;
9 margin-right: 5px; 9 margin-right: 5px;
10 10
11 &.avatar-sm {
12 width: 28px;
13 height: 28px;
14 }
15
11 a { 16 a {
12 @include disable-outline; 17 @include disable-outline;
13 } 18 }
diff --git a/client/src/app/shared/channel/avatar.component.ts b/client/src/app/shared/channel/avatar.component.ts
index 2201c04ca..2c8eeb4b2 100644
--- a/client/src/app/shared/channel/avatar.component.ts
+++ b/client/src/app/shared/channel/avatar.component.ts
@@ -1,11 +1,31 @@
1import { Component, Input } from '@angular/core' 1import { Component, Input, OnInit } from '@angular/core'
2import { VideoDetails } from '../video/video-details.model' 2import { Video } from '../video/video.model'
3import { I18n } from '@ngx-translate/i18n-polyfill'
3 4
4@Component({ 5@Component({
5 selector: 'avatar-channel', 6 selector: 'avatar-channel',
6 templateUrl: './avatar.component.html', 7 templateUrl: './avatar.component.html',
7 styleUrls: [ './avatar.component.scss' ] 8 styleUrls: [ './avatar.component.scss' ]
8}) 9})
9export class AvatarComponent { 10export class AvatarComponent implements OnInit {
10 @Input() video: VideoDetails 11 @Input() video: Video
12 @Input() size: 'md' | 'sm' = 'md'
13
14 channelLinkTitle = ''
15 accountLinkTitle = ''
16
17 constructor (
18 private i18n: I18n
19 ) {}
20
21 ngOnInit () {
22 this.channelLinkTitle = this.i18n(
23 'Go to the channel page of {{name}} ({{handle}})',
24 { name: this.video.channel.name, handle: this.video.byVideoChannel }
25 )
26 this.accountLinkTitle = this.i18n(
27 'Go to the account page of {{name}} ({{handle}})',
28 { name: this.video.account.name, handle: this.video.byAccount }
29 )
30 }
11} 31}