aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-01-21 09:35:23 +0100
committerChocobozzz <chocobozzz@cpy.re>2020-01-21 09:35:23 +0100
commitaa0f19635ae4632e286de1599fc24f95f32a108c (patch)
tree347518feb2534da9466b169a48a6cead0e1f2999 /client/src
parenta56053a2a49431aeddcf8bcdd804b2e0abb93621 (diff)
downloadPeerTube-aa0f19635ae4632e286de1599fc24f95f32a108c.tar.gz
PeerTube-aa0f19635ae4632e286de1599fc24f95f32a108c.tar.zst
PeerTube-aa0f19635ae4632e286de1599fc24f95f32a108c.zip
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
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/+accounts/accounts.component.html8
-rw-r--r--client/src/app/+accounts/accounts.component.scss13
-rw-r--r--client/src/app/+accounts/accounts.component.ts5
-rw-r--r--client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html4
-rw-r--r--client/src/app/+my-account/my-account-videos/my-account-videos.component.html4
-rw-r--r--client/src/app/+my-account/my-account-videos/my-account-videos.component.ts3
-rw-r--r--client/src/app/+video-channels/video-channels.component.html5
-rw-r--r--client/src/app/+video-channels/video-channels.component.scss16
-rw-r--r--client/src/app/+video-channels/video-channels.component.ts5
-rw-r--r--client/src/sass/application.scss1
-rw-r--r--client/src/sass/bootstrap.scss10
-rw-r--r--client/src/sass/include/_mixins.scss11
-rw-r--r--client/src/sass/include/_variables.scss3
13 files changed, 82 insertions, 6 deletions
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 @@
25 <my-user-moderation-dropdown 25 <my-user-moderation-dropdown
26 buttonSize="small" [account]="account" [user]="user" placement="bottom-right auto" 26 buttonSize="small" [account]="account" [user]="user" placement="bottom-right auto"
27 (userChanged)="onUserChanged()" (userDeleted)="onUserDeleted()" 27 (userChanged)="onUserChanged()" (userDeleted)="onUserDeleted()"
28 > 28 ></my-user-moderation-dropdown>
29 </my-user-moderation-dropdown>
30 </div> 29 </div>
31 <div class="actor-followers" i18n-title [title]="subscribersDisplayFor(account.followersCount) + ' to the account actor'"> 30 <div class="actor-followers" i18n-title [title]="subscribersDisplayFor(account.followersCount) + ' to the account actor'">
32 {{ subscribersDisplayFor(naiveAggregatedSubscribers) }} 31 {{ subscribersDisplayFor(naiveAggregatedSubscribers) }}
33 </div> 32 </div>
34 </div> 33 </div>
35 34
36 <my-subscribe-button *ngIf="videoChannels" [account]="account" [videoChannels]="videoChannels"></my-subscribe-button> 35 <div class="right-buttons">
36 <a *ngIf="isManageable" routerLink="/my-account" class="btn btn-outline-tertiary mr-2" i18n>Manage</a>
37 <my-subscribe-button *ngIf="videoChannels" [account]="account" [videoChannels]="videoChannels"></my-subscribe-button>
38 </div>
37 </div> 39 </div>
38 40
39 <div class="links"> 41 <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 @@
9 } 9 }
10} 10}
11 11
12my-subscribe-button { 12.right-buttons {
13 display: flex;
13 height: max-content; 14 height: max-content;
14 margin-left: auto; 15 margin-left: auto;
15 margin-top: 20px; 16 margin-top: 20px;
17
18 a {
19 @include peertube-button-outline;
20 height: auto;
21 line-height: 32px;
22 }
23
24 my-subscribe-button {
25 height: min-content;
26 }
16} 27}
17 28
18my-user-moderation-dropdown, 29my-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 {
65 ) 65 )
66 } 66 }
67 67
68 get isManageable () {
69 if (!this.authService.isLoggedIn()) return false
70 return this.user.id === this.authService.getUser().id
71 }
72
68 onUserChanged () { 73 onUserChanged () {
69 this.getUserIfNeeded(this.account) 74 this.getUserIfNeeded(this.account)
70 } 75 }
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 @@
1<div>
2 <h4 i18n>Playlists <span class="badge badge-secondary">{{ pagination.totalItems }}</span></h4>
3</div>
4
1<div class="video-playlists-header"> 5<div class="video-playlists-header">
2 <input type="text" placeholder="Search your playlists" i18n-placeholder [(ngModel)]="videoPlaylistsSearch" (ngModelChange)="onVideoPlaylistSearchChanged()" /> 6 <input type="text" placeholder="Search your playlists" i18n-placeholder [(ngModel)]="videoPlaylistsSearch" (ngModelChange)="onVideoPlaylistSearchChanged()" />
3 7
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 @@
1<div>
2 <h4 i18n>Videos <span class="badge badge-secondary">{{ pagination.totalItems }}</span></h4>
3</div>
4
1<div class="videos-header"> 5<div class="videos-header">
2 <input type="text" placeholder="Search your videos" i18n-placeholder [(ngModel)]="videosSearch" (ngModelChange)="onVideosSearchChanged()" /> 6 <input type="text" placeholder="Search your videos" i18n-placeholder [(ngModel)]="videosSearch" (ngModelChange)="onVideosSearchChanged()" />
3</div> 7</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 {
86 const newPagination = immutableAssign(this.pagination, { currentPage: page }) 86 const newPagination = immutableAssign(this.pagination, { currentPage: page })
87 87
88 return this.videoService.getMyVideos(newPagination, sort, this.videosSearch) 88 return this.videoService.getMyVideos(newPagination, sort, this.videosSearch)
89 .pipe(
90 tap(res => this.pagination.totalItems = res.total)
91 )
89 } 92 }
90 93
91 async deleteSelectedVideos () { 94 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 @@
15 </button> 15 </button>
16 </div> 16 </div>
17 17
18 <my-subscribe-button #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button> 18 <div class="right-buttons">
19 <a *ngIf="isManageable" [routerLink]="[ '/my-account/video-channels/update', videoChannel.nameWithHost ]" class="btn btn-outline-tertiary mr-2" i18n>Manage</a>
20 <my-subscribe-button #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
21 </div>
19 </div> 22 </div>
20 <div i18n class="actor-followers">{{ videoChannel.followersCount }} subscribers</div> 23 <div i18n class="actor-followers">{{ videoChannel.followersCount }} subscribers</div>
21 24
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 @@
17 margin-top: -2px; 17 margin-top: -2px;
18 } 18 }
19 } 19 }
20}
21
22.right-buttons {
23 display: flex;
24 height: max-content;
25 margin-left: auto;
26 margin-top: 20px;
27
28 a {
29 @include peertube-button-outline;
30 line-height: 1.8;
31 }
32
33 my-subscribe-button {
34 height: min-content;
35 }
20} \ No newline at end of file 36} \ 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 {
64 return this.authService.isLoggedIn() 64 return this.authService.isLoggedIn()
65 } 65 }
66 66
67 get isManageable () {
68 if (!this.isUserLoggedIn()) return false
69 return this.videoChannel.ownerAccount.userId === this.authService.getUser().id
70 }
71
67 activateCopiedMessage () { 72 activateCopiedMessage () {
68 this.notifier.success(this.i18n('Username copied')) 73 this.notifier.success(this.i18n('Username copied'))
69 } 74 }
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 {
26 --mainHoverColor: #{$orange-hover-color}; 26 --mainHoverColor: #{$orange-hover-color};
27 --mainBackgroundColor: #{$bg-color}; 27 --mainBackgroundColor: #{$bg-color};
28 --mainForegroundColor: #{$fg-color}; 28 --mainForegroundColor: #{$fg-color};
29 --secondaryColor: #{$cyan-color};
29 30
30 --menuBackgroundColor: #{$menu-background}; 31 --menuBackgroundColor: #{$menu-background};
31 --menuForegroundColor: #{$menu-color}; 32 --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 {
170ngb-modal-backdrop { 170ngb-modal-backdrop {
171 z-index: 10000 !important; 171 z-index: 10000 !important;
172} 172}
173
174.btn-outline-tertiary {
175 color: var(--secondaryColor);
176 border-color: var(--secondaryColor);
177
178 &:hover {
179 color: var(--mainBackgroundColor);
180 background-color: var(--secondaryColor);
181 }
182}
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 @@
179 @include peertube-button; 179 @include peertube-button;
180} 180}
181 181
182@mixin peertube-button-outline {
183 display: inline-block;
184
185 @include disable-default-a-behaviour;
186 @include peertube-button;
187
188 border: 1px solid;
189}
190
182@mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) { 191@mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
183 my-global-icon { 192 my-global-icon {
184 position: relative; 193 position: relative;
@@ -453,7 +462,7 @@
453} 462}
454 463
455@mixin sub-menu-with-actor { 464@mixin sub-menu-with-actor {
456 height: 160px; 465 height: max-content;
457 display: flex; 466 display: flex;
458 flex-direction: column; 467 flex-direction: column;
459 align-items: flex-start; 468 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;
14$orange-color: #F1680D; 14$orange-color: #F1680D;
15$orange-hover-color: #F97D46; 15$orange-hover-color: #F97D46;
16 16
17$cyan-color: hsl(187, 77%, 34%);
18
17$support-button: inherit; 19$support-button: inherit;
18$support-button-heart: #e83e8c; 20$support-button-heart: #e83e8c;
19 21
@@ -73,6 +75,7 @@ $variables: (
73 --mainHoverColor: var(--mainHoverColor), 75 --mainHoverColor: var(--mainHoverColor),
74 --mainBackgroundColor: var(--mainBackgroundColor), 76 --mainBackgroundColor: var(--mainBackgroundColor),
75 --mainForegroundColor: var(--mainForegroundColor), 77 --mainForegroundColor: var(--mainForegroundColor),
78 --secondaryColor: var(--secondaryColor),
76 79
77 --menuBackgroundColor: var(--menuBackgroundColor), 80 --menuBackgroundColor: var(--menuBackgroundColor),
78 --menuForegroundColor: var(--menuForegroundColor), 81 --menuForegroundColor: var(--menuForegroundColor),