diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html index 57498e98c..367258a06 100644 --- a/client/src/app/+accounts/accounts.component.html +++ b/client/src/app/+accounts/accounts.component.html @@ -25,15 +25,17 @@ <my-user-moderation-dropdown buttonSize="small" [account]="account" [user]="user" placement="bottom-right auto" (userChanged)="onUserChanged()" (userDeleted)="onUserDeleted()" - > - </my-user-moderation-dropdown> + ></my-user-moderation-dropdown> </div> <div class="actor-followers" i18n-title [title]="subscribersDisplayFor(account.followersCount) + ' to the account actor'"> {{ subscribersDisplayFor(naiveAggregatedSubscribers) }} </div> </div> - <my-subscribe-button *ngIf="videoChannels" [account]="account" [videoChannels]="videoChannels"></my-subscribe-button> + <div class="right-buttons"> + <a *ngIf="isManageable" routerLink="/my-account" class="btn btn-outline-tertiary mr-2" i18n>Manage</a> + <my-subscribe-button *ngIf="videoChannels" [account]="account" [videoChannels]="videoChannels"></my-subscribe-button> + </div> </div> <div class="links"> diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss index ab3aece54..a06f04055 100644 --- a/client/src/app/+accounts/accounts.component.scss +++ b/client/src/app/+accounts/accounts.component.scss @@ -9,10 +9,21 @@ } } -my-subscribe-button { +.right-buttons { + display: flex; height: max-content; margin-left: auto; margin-top: 20px; + + a { + @include peertube-button-outline; + height: auto; + line-height: 32px; + } + + my-subscribe-button { + height: min-content; + } } my-user-moderation-dropdown, diff --git a/client/src/app/+accounts/accounts.component.ts b/client/src/app/+accounts/accounts.component.ts index da4a0b28e..3d486f084 100644 --- a/client/src/app/+accounts/accounts.component.ts +++ b/client/src/app/+accounts/accounts.component.ts @@ -65,6 +65,11 @@ export class AccountsComponent implements OnInit, OnDestroy { ) } + get isManageable () { + if (!this.authService.isLoggedIn()) return false + return this.user.id === this.authService.getUser().id + } + onUserChanged () { this.getUserIfNeeded(this.account) } diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html index 878772359..49bf834c4 100644 --- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html +++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html @@ -1,3 +1,7 @@ +<div> + <h4 i18n>Playlists <span class="badge badge-secondary">{{ pagination.totalItems }}</span></h4> +</div> + <div class="video-playlists-header"> <input type="text" placeholder="Search your playlists" i18n-placeholder [(ngModel)]="videoPlaylistsSearch" (ngModelChange)="onVideoPlaylistSearchChanged()" /> diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html index a898cd938..7479c84f9 100644 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html +++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html @@ -1,3 +1,7 @@ +<div> + <h4 i18n>Videos <span class="badge badge-secondary">{{ pagination.totalItems }}</span></h4> +</div> + <div class="videos-header"> <input type="text" placeholder="Search your videos" i18n-placeholder [(ngModel)]="videosSearch" (ngModelChange)="onVideosSearchChanged()" /> </div> diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts index dd4b25d08..831d5c5b0 100644 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts +++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts @@ -86,6 +86,9 @@ export class MyAccountVideosComponent implements OnInit, DisableForReuseHook { const newPagination = immutableAssign(this.pagination, { currentPage: page }) return this.videoService.getMyVideos(newPagination, sort, this.videosSearch) + .pipe( + tap(res => this.pagination.totalItems = res.total) + ) } async deleteSelectedVideos () { diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html index f4b944c59..8ab79526d 100644 --- a/client/src/app/+video-channels/video-channels.component.html +++ b/client/src/app/+video-channels/video-channels.component.html @@ -15,7 +15,10 @@ </button> </div> - <my-subscribe-button #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button> + <div class="right-buttons"> + <a *ngIf="isManageable" [routerLink]="[ '/my-account/video-channels/update', videoChannel.nameWithHost ]" class="btn btn-outline-tertiary mr-2" i18n>Manage</a> + <my-subscribe-button #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button> + </div> </div> <div i18n class="actor-followers">{{ videoChannel.followersCount }} subscribers</div> diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss index d29575027..50b69e7ac 100644 --- a/client/src/app/+video-channels/video-channels.component.scss +++ b/client/src/app/+video-channels/video-channels.component.scss @@ -17,4 +17,20 @@ margin-top: -2px; } } +} + +.right-buttons { + display: flex; + height: max-content; + margin-left: auto; + margin-top: 20px; + + a { + @include peertube-button-outline; + line-height: 1.8; + } + + my-subscribe-button { + height: min-content; + } } \ No newline at end of file diff --git a/client/src/app/+video-channels/video-channels.component.ts b/client/src/app/+video-channels/video-channels.component.ts index 5ef46c58a..493a6d499 100644 --- a/client/src/app/+video-channels/video-channels.component.ts +++ b/client/src/app/+video-channels/video-channels.component.ts @@ -64,6 +64,11 @@ export class VideoChannelsComponent implements OnInit, OnDestroy { return this.authService.isLoggedIn() } + get isManageable () { + if (!this.isUserLoggedIn()) return false + return this.videoChannel.ownerAccount.userId === this.authService.getUser().id + } + activateCopiedMessage () { this.notifier.success(this.i18n('Username copied')) } diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 9877a07d5..5dacdd73b 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -26,6 +26,7 @@ body { --mainHoverColor: #{$orange-hover-color}; --mainBackgroundColor: #{$bg-color}; --mainForegroundColor: #{$fg-color}; + --secondaryColor: #{$cyan-color}; --menuBackgroundColor: #{$menu-background}; --menuForegroundColor: #{$menu-color}; diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss index dc0d075c9..fca116701 100644 --- a/client/src/sass/bootstrap.scss +++ b/client/src/sass/bootstrap.scss @@ -170,3 +170,13 @@ ngb-tabset.bootstrap { ngb-modal-backdrop { z-index: 10000 !important; } + +.btn-outline-tertiary { + color: var(--secondaryColor); + border-color: var(--secondaryColor); + + &:hover { + color: var(--mainBackgroundColor); + background-color: var(--secondaryColor); + } +} diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 099a909bb..136eddd3a 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -179,6 +179,15 @@ @include peertube-button; } +@mixin peertube-button-outline { + display: inline-block; + + @include disable-default-a-behaviour; + @include peertube-button; + + border: 1px solid; +} + @mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) { my-global-icon { position: relative; @@ -453,7 +462,7 @@ } @mixin sub-menu-with-actor { - height: 160px; + height: max-content; display: flex; flex-direction: column; align-items: flex-start; diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index 6dededb0e..5b5ac9adc 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss @@ -14,6 +14,8 @@ $grey-foreground-hover-color: #303030; $orange-color: #F1680D; $orange-hover-color: #F97D46; +$cyan-color: hsl(187, 77%, 34%); + $support-button: inherit; $support-button-heart: #e83e8c; @@ -73,6 +75,7 @@ $variables: ( --mainHoverColor: var(--mainHoverColor), --mainBackgroundColor: var(--mainBackgroundColor), --mainForegroundColor: var(--mainForegroundColor), + --secondaryColor: var(--secondaryColor), --menuBackgroundColor: var(--menuBackgroundColor), --menuForegroundColor: var(--menuForegroundColor),