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

* refactor subscribe button for visitor-subscribe UX
* refactor comment-add for visitor-interact UX

1 files changed, 45 insertions, 15 deletions

diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.html b/client/src/app/shared/user-subscription/subscribe-button.component.html
index 34c024c17..b62fb7dfa 100644
--- a/client/src/app/shared/user-subscription/subscribe-button.component.html
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.html
@@ -1,15 +1,45 @@
-<span i18n *ngIf="subscribed === false" class="subscribe-button" [ngClass]="size" role="button" (click)="subscribe()">
-  <span>Subscribe</span>
-  <span *ngIf="displayFollowers && videoChannel.followersCount !== 0" class="followers-count">
-    {{ videoChannel.followersCount | myNumberFormatter }}
-  </span>
-</span>
-
-<span *ngIf="subscribed === true" class="unsubscribe-button" [ngClass]="size" role="button" (click)="unsubscribe()">
-  <span class="subscribed" i18n>Subscribed</span>
-  <span class="unsubscribe" i18n>Unsubscribe</span>
-
-  <span *ngIf="displayFollowers && videoChannel.followersCount !== 0" class="followers-count">
-    {{ videoChannel.followersCount | myNumberFormatter }}
-  </span>
-</span>
+<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>
\ No newline at end of file