Improve follow component routing

diff --git a/client/src/app/+admin/follows/follows.component.html b/client/src/app/+admin/follows/follows.component.html
index 8eabb339210989296c5cab5c9a4bcbaaf5b90991..21d47713210c2a53454cba6ee179cb9c71ba1c17 100644 (file)
--- a/client/src/app/+admin/follows/follows.component.html
+++ b/client/src/app/+admin/follows/follows.component.html
@@ -1,15 +1,13 @@
 <div class="admin-sub-header">
   <div i18n class="form-sub-title">Manage follows</div>
 
-  <ngb-tabset #followsMenuTabs type="pills">
+  <div class="admin-sub-nav">
+    <a i18n routerLink="following-list" routerLinkActive="active">Following</a>
 
-    <ngb-tab *ngFor="let link of links">
-      <ng-template ngbTabTitle>
-        <a class="tab-link" [routerLink]="link.path">{{ link.title }}</a>
-      </ng-template>
-    </ngb-tab>
+    <a i18n routerLink="following-add" routerLinkActive="active">Follow</a>
 
-  </ngb-tabset>
+    <a i18n routerLink="followers-list" routerLinkActive="active">Followers</a>
+  </div>
 </div>
 
-<router-outlet></router-outlet>
+<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 b6f7715b38cf4d37303ffbe9f19136febc3bbff5..1ec7e598ba652bdaac3510c29bc5b3306b433e77 100644 (file)
--- a/client/src/app/+admin/follows/follows.component.ts
+++ b/client/src/app/+admin/follows/follows.component.ts
@@ -1,62 +1,8 @@
-import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'
-import { NavigationEnd, Router } from '@angular/router'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { NgbTabset } from '@ng-bootstrap/ng-bootstrap'
+import { Component } from '@angular/core'
 
 @Component({
   templateUrl: './follows.component.html',
   styleUrls: [ './follows.component.scss' ]
 })
-export class FollowsComponent implements OnInit, AfterViewInit {
-  @ViewChild('followsMenuTabs') followsMenuTabs: NgbTabset
-
-  links: { path: string, title: string }[] = []
-
-  constructor (
-    private i18n: I18n,
-    private router: Router
-  ) {
-    this.links = [
-      {
-        path: 'following-list',
-        title: this.i18n('Following')
-      },
-      {
-        path: 'following-add',
-        title: this.i18n('Follow')
-      },
-      {
-        path: 'followers-list',
-        title: this.i18n('Followers')
-      }
-    ]
-  }
-
-  ngOnInit () {
-    this.router.events.subscribe(
-      event => {
-        if (event instanceof NavigationEnd) {
-          this.updateActiveTab()
-        }
-      }
-    )
-  }
-
-  ngAfterViewInit () {
-    // Avoid issue with change detector
-    setTimeout(() => this.updateActiveTab())
-  }
-
-  private updateActiveTab () {
-    const url = window.location.pathname
-
-    for (let i = 0; i < this.links.length; i++) {
-      const path = this.links[i].path
-
-      if (url.endsWith(path) === true) {
-        this.followsMenuTabs.select(path)
-        return
-      }
-    }
-  }
+export class FollowsComponent {
 }

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index ba8701f5ca321e3a03c4b24e43a791ac5b07c8f2..dc0ffe912a67ed6186abb7840d7c43b423ef16bd 100644 (file)
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -132,6 +132,20 @@ label {
   .form-sub-title {
     flex-grow: 1;
   }
+
+  .admin-sub-nav a {
+    @include disable-default-a-behaviour;
+
+    font-size: 16px;
+    color: #000;
+    padding: 5px 15px;
+    border-radius: 0.25rem;
+
+    &.active {
+      font-weight: $font-semibold;
+      background-color: #f0f0f0;
+    }
+  }
 }
 
 .form-sub-title {