Add manage buttons for own channels and account, video counts (#2421)

* Add manage buttons for own channels and account, video counts

* Change manage button color and introduce secondary color

diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index 57498e98c85c68298438207fb85935a5962012f8..367258a0618319b40396a4fac41ab43aa85e4cc9 100644 (file)
--- 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 ab3aece54a90f679f0fc8641e02e77a61efed163..a06f04055fd1ee641590cd0e66edba2b994e08dd 100644 (file)
--- 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 da4a0b28e72d156c7b19365c8bf268bf0d4cfa94..3d486f084e5ccf02a073d313c7dc98c264a30945 100644 (file)
--- 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 878772359538c8dbb12e3edf23776cc826c0a56d..49bf834c46023f886aff696ee5030c12ba60acbe 100644 (file)
--- 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 a898cd93860daf7c9ca77a65caf49bc178264c80..7479c84f9b0f05903f966cc34444dff9b738b225 100644 (file)
--- 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 dd4b25d0832e12962ca6fe13b2ef89ec3b9decfb..831d5c5b0b1d7a26513616bc31b094add77ffbe4 100644 (file)
--- 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 f4b944c599a5b236d70bb1810a21d18c5f03aaee..8ab79526d02c48d12d5ddd7c2e19779ae84ace96 100644 (file)
--- 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 d29575027736790cd8368f0397f55d9db121f89f..50b69e7acf7e1489d523b3904db63aa57a125a4c 100644 (file)
--- 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 5ef46c58aaaf3771a6b71ec3347cc7502fb1ee12..493a6d499e6ef245e2b4a70fec075a32b4fdd5ee 100644 (file)
--- 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 9877a07d59b5375587ef47dd9be4ae678d44cba7..5dacdd73b1e4fa626eb049e41c7ebda7a8d9370d 100644 (file)
--- 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 dc0d075c9a0dbb588c03c91458516f3a42e539eb..fca1167014d894322ca76a3cf388d4d2265c78fa 100644 (file)
--- 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 099a909bbc4c42e590ad2ead5ab23bd097245bff..136eddd3aafa07ac6d090b1377b7f17187d9a131 100644 (file)
--- 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 6dededb0ee976eef9dafb526ad9e705c5dad4470..5b5ac9adce25823b3ebc1f3139870c13525bfb55 100644 (file)
--- 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),