src/app/modules/pro/channel/categories/categories.component.html

+<div
+ class="m-proChannel__category"
+ [class.m-proChannel__selectedCategory]="!!tag.selected"
+ (click)="selectTag(tag)"
+ *ngFor="let tag of tags"
+>
+ {{tag.label}}
+</div>

src/app/modules/pro/channel/categories/categories.component.ts

@@ -5,28 +5,17 @@ import { MindsUser, Tag } from "../../../../interfaces/entities";
 
 @Component({
  selector: 'm-pro--channel--categories',
- template: `
- <div
- class="m-proChannel__category"
- [class.m-proChannel__selectedCategory]="!!tag.selected"
- (click)="selectTag(tag)"
- *ngFor="let tag of channel.pro_settings.tag_list"
- >
- {{tag.label}}
- </div>
- `,
+ templateUrl: 'categories.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 
 export class ProCategoriesComponent {
-
- @Input() type: string;
- @Input() params: any = {};
-
  @Input() set selectedHashtag(value: string) {
  this.selectTag(value, false);
  }
 
+ @Input() showAllTag: boolean = true;
+
  @Output() onSelectTag: EventEmitter<string | null> = new EventEmitter<string|null>();
 
  get channel(): MindsUser {
@@ -55,6 +44,16 @@ export class ProCategoriesComponent {
  }
  }
 
+ get tags() {
+ const tags = this.channel.pro_settings.tag_list.concat([]);
+
+ if (this.showAllTag) {
+ tags.unshift({ label: 'All', tag: 'all', selected: false });
+ }
+
+ return tags;
+ }
+
  detectChanges() {
  this.cd.markForCheck();
  this.cd.detectChanges();

src/app/modules/pro/channel/channel.component.scss

@@ -54,6 +54,9 @@ m-pro--channel {
  min-height: 100%;
 
  .m-proChannel__topbar {
+ width: 100%;
+ box-sizing: border-box;
+
  grid-row: 1 / span 1;
  grid-column: 1 / span 12;
 
@@ -177,19 +180,20 @@ m-pro--channel {
  padding: 12px 16px;
  font-family: 'Roboto', Helvetica, sans-serif;
  cursor: pointer;
- border: none;
  border-radius: 4px;
  margin-left: 16px;
- color: var(--m-pro--plain-background-color);
- background-color: var(--m-pro--primary-color);
+ background: none transparent;
+ color: var(--m-pro--primary-color);
+ border: 1px solid var(--m-pro--primary-color);
+ font-weight: 600;
 
  &.m-proChannelTopbar__subscribe--subscribed {
+ border: none;
  color: var(--m-pro--text-color);
- background-color: var(--m-pro--plain-background-color);
  }
 
  .m-proChannelTopbar__subscribe--label {
- opacity: 0.65;
+ opacity: 0.85;
  }
 
  .m-proChannelTopbar__subscribe--counter {

src/app/modules/pro/channel/channel.service.ts

@@ -41,8 +41,6 @@ export class ProChannelService {
  this.currentChannel.pro_settings.tag_list = [];
  }
 
- this.currentChannel.pro_settings.tag_list.unshift({ tag: 'all', label: 'All', selected: false });
-
  this.featuredContent = null;
 
  return this.currentChannel;

src/app/modules/pro/channel/home/home.component.html

 <div class="m-pro--channel-home">
+ <m-pro--channel--categories
+ [showAllTag]="false"
+ [selectedHashtag]="''"
+ (onSelectTag)="navigateToCategory($event)"
+ ></m-pro--channel--categories>
 
  <div class="m-pro--channel-home--section" *ngIf="featuredContent?.length">
  <div class="m-pro--channel-home--featured-content">

src/app/modules/pro/channel/home/home.component.scss

 .m-pro--channel-home {
- margin-top: 72px;
+ m-pro--channel--categories {
+ margin: 16px 0 32px;
+ }
 
  .m-pro--channel-home--section {
- margin-top: 72px;
+ margin-bottom: 72px;
 
- &:first-child {
- margin-top: 0;
+ &:last-child {
+ margin-bottom: 0;
  }
 
  > h2 {

src/app/modules/pro/channel/home/home.component.ts

 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Observable } from 'rxjs';
 import { ProChannelService } from '../channel.service';
 import { OverlayModalService } from '../../../../services/ux/overlay-modal';
-import { Observable } from 'rxjs';
 
 @Component({
  selector: 'm-pro--channel-home',
@@ -22,6 +23,7 @@ export class ProChannelHomeComponent implements OnInit {
  moreData: boolean = true;
 
  constructor(
+ protected router: Router,
  protected channelService: ProChannelService,
  protected modalService: OverlayModalService,
  protected cd: ChangeDetectorRef,
@@ -74,6 +76,10 @@ export class ProChannelHomeComponent implements OnInit {
  return this.channelService.open(entity, this.modalService);
  }
 
+ navigateToCategory(tag) {
+ this.router.navigate(this.channelService.getRouterLink('all', { hashtag: tag }));
+ }
+
  get settings() {
  return this.channelService.currentChannel && this.channelService.currentChannel.pro_settings;
  }

src/app/modules/pro/channel/list/list.component.html

 <m-pro--channel--categories
- [type]="paramsType"
  [selectedHashtag]="selectedHashtag"
  (onSelectTag)="selectHashtag($event)"
  [style.visibility]="shouldShowCategories ? 'visible' : 'hidden'"