aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-08-14 16:01:54 +0200
committerChocobozzz <me@florianbigard.com>2018-08-14 18:01:22 +0200
commit65b247ddc75aa9f131af86dde21c8d958f7f4b39 (patch)
treef93b5796aba61e6b2ac23f4d02afe6845ecc9662
parenteed24d26db4c8363d5e5874841ee0c4f5fa275a8 (diff)
downloadPeerTube-65b247ddc75aa9f131af86dde21c8d958f7f4b39.tar.gz
PeerTube-65b247ddc75aa9f131af86dde21c8d958f7f4b39.tar.zst
PeerTube-65b247ddc75aa9f131af86dde21c8d958f7f4b39.zip
Improve follow component routing
-rw-r--r--client/src/app/+admin/follows/follows.component.html14
-rw-r--r--client/src/app/+admin/follows/follows.component.ts58
-rw-r--r--client/src/sass/application.scss14
3 files changed, 22 insertions, 64 deletions
diff --git a/client/src/app/+admin/follows/follows.component.html b/client/src/app/+admin/follows/follows.component.html
index 8eabb3392..21d477132 100644
--- a/client/src/app/+admin/follows/follows.component.html
+++ b/client/src/app/+admin/follows/follows.component.html
@@ -1,15 +1,13 @@
1<div class="admin-sub-header"> 1<div class="admin-sub-header">
2 <div i18n class="form-sub-title">Manage follows</div> 2 <div i18n class="form-sub-title">Manage follows</div>
3 3
4 <ngb-tabset #followsMenuTabs type="pills"> 4 <div class="admin-sub-nav">
5 <a i18n routerLink="following-list" routerLinkActive="active">Following</a>
5 6
6 <ngb-tab *ngFor="let link of links"> 7 <a i18n routerLink="following-add" routerLinkActive="active">Follow</a>
7 <ng-template ngbTabTitle>
8 <a class="tab-link" [routerLink]="link.path">{{ link.title }}</a>
9 </ng-template>
10 </ngb-tab>
11 8
12 </ngb-tabset> 9 <a i18n routerLink="followers-list" routerLinkActive="active">Followers</a>
10 </div>
13</div> 11</div>
14 12
15<router-outlet></router-outlet> 13<router-outlet></router-outlet> \ No newline at end of file
diff --git a/client/src/app/+admin/follows/follows.component.ts b/client/src/app/+admin/follows/follows.component.ts
index b6f7715b3..1ec7e598b 100644
--- a/client/src/app/+admin/follows/follows.component.ts
+++ b/client/src/app/+admin/follows/follows.component.ts
@@ -1,62 +1,8 @@
1import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core' 1import { Component } from '@angular/core'
2import { NavigationEnd, Router } from '@angular/router'
3import { I18n } from '@ngx-translate/i18n-polyfill'
4import { NgbTabset } from '@ng-bootstrap/ng-bootstrap'
5 2
6@Component({ 3@Component({
7 templateUrl: './follows.component.html', 4 templateUrl: './follows.component.html',
8 styleUrls: [ './follows.component.scss' ] 5 styleUrls: [ './follows.component.scss' ]
9}) 6})
10export class FollowsComponent implements OnInit, AfterViewInit { 7export class FollowsComponent {
11 @ViewChild('followsMenuTabs') followsMenuTabs: NgbTabset
12
13 links: { path: string, title: string }[] = []
14
15 constructor (
16 private i18n: I18n,
17 private router: Router
18 ) {
19 this.links = [
20 {
21 path: 'following-list',
22 title: this.i18n('Following')
23 },
24 {
25 path: 'following-add',
26 title: this.i18n('Follow')
27 },
28 {
29 path: 'followers-list',
30 title: this.i18n('Followers')
31 }
32 ]
33 }
34
35 ngOnInit () {
36 this.router.events.subscribe(
37 event => {
38 if (event instanceof NavigationEnd) {
39 this.updateActiveTab()
40 }
41 }
42 )
43 }
44
45 ngAfterViewInit () {
46 // Avoid issue with change detector
47 setTimeout(() => this.updateActiveTab())
48 }
49
50 private updateActiveTab () {
51 const url = window.location.pathname
52
53 for (let i = 0; i < this.links.length; i++) {
54 const path = this.links[i].path
55
56 if (url.endsWith(path) === true) {
57 this.followsMenuTabs.select(path)
58 return
59 }
60 }
61 }
62} 8}
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index ba8701f5c..dc0ffe912 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -132,6 +132,20 @@ label {
132 .form-sub-title { 132 .form-sub-title {
133 flex-grow: 1; 133 flex-grow: 1;
134 } 134 }
135
136 .admin-sub-nav a {
137 @include disable-default-a-behaviour;
138
139 font-size: 16px;
140 color: #000;
141 padding: 5px 15px;
142 border-radius: 0.25rem;
143
144 &.active {
145 font-weight: $font-semibold;
146 background-color: #f0f0f0;
147 }
148 }
135} 149}
136 150
137.form-sub-title { 151.form-sub-title {