(feat) Add ellipsis menu that contains common channel actions

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

@@ -67,8 +67,50 @@
  >Donate</a>
  </ng-container>
 
- <m-pro-user-menu [channelName]="channel.username" [showNavItems]="collapseNavItems"
- [query]="searchedText"></m-pro-user-menu>
+ <div class="m-proChannelTopbar_menu m-dropdown">
+ <a class="m-proChannelTopbarMenu__Anchor" (click)="toggleMenu()"><i class="material-icons">menu</i></a>
+ 
+ <ul class="m-dropdown__list m-proChannelTopbarMenu__dropdown mdl-shadow--3dp" [hidden]="!isMenuOpen">
+ <ng-container *ngIf="collapseNavItems">
+ <li
+ class="m-dropdownList__item m-proChannelTopbarMenuDropdown__item"
+ (click)="closeMenu()"
+ >
+ <a [routerLink]="linkTo('videos', query)" routerLinkActive="active" i18n>Videos</a>
+ </li>
+ 
+ <li
+ class="m-dropdownList__item m-proChannelTopbarMenuDropdown__item"
+ (click)="closeMenu()"
+ >
+ <a [routerLink]="linkTo('images', query)" routerLinkActive="active" i18n>Images</a>
+ </li>
+ 
+ <li
+ class="m-dropdownList__item m-proChannelTopbarMenuDropdown__item"
+ (click)="closeMenu()"
+ >
+ <a [routerLink]="linkTo('articles', query)" routerLinkActive="active" i18n>Articles</a>
+ </li>
+ 
+ <li
+ class="m-dropdownList__item m-proChannelTopbarMenuDropdown__item"
+ (click)="closeMenu()"
+ >
+ <a [routerLink]="linkTo('groups', query)" routerLinkActive="active" i18n>Groups</a>
+ </li>
+ 
+ <li
+ class="m-dropdownList__item m-proChannelTopbarMenuDropdown__item"
+ (click)="closeMenu()"
+ >
+ <a [routerLink]="['/pro', channel.username, 'donate']" routerLinkActive="active">Donate</a>
+ </li>
+ </ng-container>
+ </ul>
+ </div>
+ 
+ <div class="minds-bg-overlay" (click)="closeMenu()" [hidden]="!isMenuOpen"></div>
  </div>
 
  <div class="m-proChannel__categories">

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

@@ -97,6 +97,42 @@ m-pro--channel {
 
  
  }
+
+ .m-proChannelTopbar_menu.m-dropdown {
+ display: inline-block;
+ position: relative;
+ cursor: pointer;
+ 
+ @media screen and (min-width: 1000px) {
+ display: none;
+ }
+ 
+ .m-proChannelTopbarMenu__dropdown {
+ list-style: none;
+ margin: 34px 0 0;
+ @include m-theme() {
+ background-color: themed('m-white');
+ color: themed('m-grey-700');
+ }
+ 
+ li.proChannelTopbarMenuDropdown__item {
+ &:hover {
+ @include m-theme() {
+ background-color: rgba(themed('m-grey-50'), 0.5);
+ }
+ }
+ 
+ a {
+ color: #555 !important;
+ }
+ 
+ i {
+ color: #555 !important;
+ }
+ }
+ }
+ }
+
  }
 
  a.m-proChannelTopbar__navItem {

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

@@ -46,6 +46,8 @@ export class ProChannelComponent implements OnInit, OnDestroy {
 
  query: string;
 
+ isMenuOpen: boolean = false;
+
  constructor(
  protected element: ElementRef,
  protected session: Session,
@@ -187,6 +189,14 @@ export class ProChannelComponent implements OnInit, OnDestroy {
  return this.session.getLoggedInUser();
  }
 
+ toggleMenu() {
+ this.isMenuOpen = !this.isMenuOpen;
+ }
+
+ closeMenu() {
+ this.isMenuOpen = false;
+ }
+
  search() {
  if (!this.currentURL) {
  this.currentURL = `/pro/${this.channel.username}/articles`; //TODO ADD /TOP when algorithm is enabled

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

@@ -16,4 +16,10 @@
  class="m-pro--channel-footer--link"
  [href]="link.href"
  >{{link.title}}</a>
+
+ <ng-container *ngIf="session.getLoggedInUser()">
+ <span style="position: relative">
+ <minds-button-user-dropdown [(user)]="user" *ngIf="session.getLoggedInUser().guid != user.guid"></minds-button-user-dropdown>
+ </span>
+ </ng-container>
 </div>

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

@@ -10,4 +10,17 @@
  text-decoration: none;
  padding: 0 16px;
  }
+
+ minds-button-user-dropdown {
+
+ button.material-icons {
+ border: none;
+ color: var(--text-color) !important;
+ }
+
+ .minds-dropdown-menu {
+ top: -100px;
+ left: -130px;
+ }
+ }
 }

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

 import { Component } from '@angular/core';
 import { ProChannelService } from "../channel.service";
+import { Session } from '../../../../services/session';
 
 export interface SocialProfileMeta {
 
@@ -19,6 +20,13 @@ export interface SocialProfileMeta {
 
 export class ProChannelFooterComponent {
 
+ constructor(
+ private channelService: ProChannelService,
+ protected _session: Session
+ ) {
+
+ }
+
  private socialProfileMeta: SocialProfileMeta[] = [
  {
  key: 'facebook',
@@ -270,9 +278,11 @@ export class ProChannelFooterComponent {
  return defaultMeta;
  }
 
- constructor(
- private channelService: ProChannelService,
- ) {
+ get user() {
+ return this.channelService.currentChannel;
+ }
 
+ get session() {
+ return this._session;
  }
 }

src/app/modules/pro/channel/pro-user-menu/pro-user-menu.component.html

@@ -2,7 +2,6 @@
  <a class="m-pro-user-menu__Anchor" (click)="toggleMenu()"><i class="material-icons">menu</i></a>
 
  <ul class="m-dropdown__list m-pro-user-menu__dropdown mdl-shadow--3dp" [hidden]="!isOpen">
- <ng-container *ngIf="showNavItems">
 <!-- <li
  class="m-dropdownList__item m-pro-user-menuDropdown__item"
  (click)="closeMenu()"
@@ -44,7 +43,6 @@
  >
  <a [routerLink]="['/pro', channel.username, 'donate']" routerLinkActive="active">Donate</a>
  </li>
- </ng-container>
  </ul>
 </div>
 

src/app/modules/pro/channel/pro-user-menu/pro-user-menu.component.scss

@@ -2,13 +2,10 @@ m-pro-user-menu {
  display: inline-block;
  position: relative;
  cursor: pointer;
-
- @media screen and (min-width: 1000px) {
- display: none;
- }
 }
 
 .m-pro-user-menu__dropdown {
+ top: -238px !important;
  list-style: none;
  margin: 34px 0 0;
  @include m-theme() {

src/app/modules/pro/channel/pro-user-menu/pro-user-menu.component.ts

@@ -11,10 +11,6 @@ import { ProChannelService } from "../channel.service";
 export class ProUserMenuComponent implements OnInit {
  isOpen: boolean = false;
 
- @Input() channelName: string;
- @Input() showNavItems: boolean;
- @Input() query: string;
-
  get channel() {
  return this.channelService.currentChannel;
  }