refactor subscribe button and comment-add for visitor-interact UX (#1100)

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / user-subscription / subscribe-button.component.html

<div class="btn-group-subscribe btn-group"
    [ngClass]="{'subscribe-button': subscribed !== true, 'unsubscribe-button': subscribed === true}">
  <button *ngIf="subscribed === false && isUserLoggedIn()" type="button"
          class="btn btn-sm" role="button"
          (click)="subscribe()" i18n>
    <span>
      Subscribe
    </span>
    <span *ngIf="displayFollowers && videoChannel.followersCount !== 0" class="followers-count">
      {{ videoChannel.followersCount | myNumberFormatter }}
    </span>
  </button>
  <button *ngIf="subscribed === true" type="button"
          class="btn btn-sm" role="button"
          (click)="unsubscribe()" i18n>Unsubscribe</button>

  <div class="btn-group" ngbDropdown autoClose="outside" 
       placement="bottom-right" role="group"
       aria-label="Multiple ways to subscribe to the current channel">
    <button class="btn btn-sm dropdown-toggle-split" ngbDropdownToggle>
      <span *ngIf="!isUserLoggedIn()">
        Subscribe
      </span>
      <span *ngIf="displayFollowers && videoChannel.followersCount !== 0" class="followers-count">
        {{ videoChannel.followersCount | myNumberFormatter }}
      </span>
    </button>
    <div class="dropdown-menu" ngbDropdownMenu>

      <h6 class="dropdown-header" i18n>Using an ActivityPub-compatible account</h6>
      <button class="dropdown-item" (click)="subscribe()"
              *ngIf="subscribed === false">
        <span *ngIf="!isUserLoggedIn()" i18n>Subscribe with an account on {{ videoChannel.host }}</span>
        <span *ngIf="isUserLoggedIn()" i18n>Subscribe with your local account</span>
      </button>
      <button class="dropdown-item" i18n>Subscribe with a remote account:</button>
      <my-remote-subscribe showHelp="true" account="{{ uriAccount }}"></my-remote-subscribe>
      <div class="dropdown-divider"></div>

      <h6 class="dropdown-header" i18n>Using a syndication feed</h6>
      <button (click)="rssOpen()" class="dropdown-item" i18n>Subscribe via RSS</button>

    </div>
  </div>
</div>