Commit cc328524 authored by Juan Manuel Solaro's avatar Juan Manuel Solaro
Browse files

(feat) Add ellipsis menu that contains common channel actions

parent 42344414

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

+44 −2
Original line number Original line Diff line number Diff line
@@ -67,8 +67,50 @@ 
      >Donate</a>

      >Donate</a>

    </ng-container>

    </ng-container>





    <m-pro-user-menu [channelName]="channel.username" [showNavItems]="collapseNavItems"

    <div class="m-proChannelTopbar_menu m-dropdown">

                     [query]="searchedText"></m-pro-user-menu>

      <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>





  <div class="m-proChannel__categories">

  <div class="m-proChannel__categories">

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

+36 −0
Original line number Original line Diff line number Diff line
@@ -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 {

  a.m-proChannelTopbar__navItem {

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

+10 −0
Original line number Original line Diff line number Diff line
@@ -46,6 +46,8 @@ export class ProChannelComponent implements OnInit, OnDestroy { 




  query: string;

  query: string;





  isMenuOpen: boolean = false;



  constructor(

  constructor(

    protected element: ElementRef,

    protected element: ElementRef,

    protected session: Session,

    protected session: Session,
@@ -187,6 +189,14 @@ export class ProChannelComponent implements OnInit, OnDestroy { 
    return this.session.getLoggedInUser();

    return this.session.getLoggedInUser();

  }

  }





  toggleMenu() {

    this.isMenuOpen = !this.isMenuOpen;

  }



  closeMenu() {

    this.isMenuOpen = false;

  }



  search() {

  search() {

    if (!this.currentURL) {

    if (!this.currentURL) {

      this.currentURL = `/pro/${this.channel.username}/articles`; //TODO ADD /TOP when algorithm is enabled

      this.currentURL = `/pro/${this.channel.username}/articles`; //TODO ADD /TOP when algorithm is enabled

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

+6 −0
Original line number Original line Diff line number Diff line
@@ -16,4 +16,10 @@ 
    class="m-pro--channel-footer--link"

    class="m-pro--channel-footer--link"

    [href]="link.href"

    [href]="link.href"

  >{{link.title}}</a>

  >{{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>
 
</div>

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

+13 −0
Original line number Original line Diff line number Diff line
@@ -10,4 +10,17 @@ 
    text-decoration: none;

    text-decoration: none;

    padding: 0 16px;

    padding: 0 16px;

  }

  }



  minds-button-user-dropdown {



    button.material-icons {

      border: none;

      color: var(--text-color) !important;

    }



    .minds-dropdown-menu {

      top: -100px;

      left: -130px;

    }

  }

}
 
}