Reorganize left menu and account menu

Add my-settings and my-library in left menu
Move administration below my-library
Split account menu: my-setting and my library

3 files changed, 197 insertions, 0 deletions

diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
new file mode 100644
index 000000000..6ab3826ba
--- /dev/null
+++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
@@ -0,0 +1,42 @@
+<h1>
+  <span>
+    <my-global-icon iconName="subscriptions" aria-hidden="true"></my-global-icon>
+    <ng-container i18n>My subscriptions</ng-container>
+    <span class="badge badge-secondary"> {{ pagination.totalItems }}</span>
+  </span>
+</h1>
+
+<div class="video-subscriptions-header d-flex justify-content-between">
+  <div class="has-feedback has-clear">
+    <input type="text" placeholder="Search your subscriptions" i18n-placeholder [(ngModel)]="subscriptionsSearch"
+      (ngModelChange)="onSubscriptionsSearchChanged()" />
+    <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
+    <span class="sr-only" i18n>Clear filters</span>
+  </div>
+</div>
+
+<div class="no-results" i18n *ngIf="pagination.totalItems === 0">You don't have any subscriptions yet.</div>
+
+<div class="video-channels" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
+  <div *ngFor="let videoChannel of videoChannels" class="video-channel">
+    <a [routerLink]="[ '/video-channels', videoChannel.nameWithHost ]">
+      <img [src]="videoChannel.avatarUrl" alt="Avatar" />
+    </a>
+
+    <div class="video-channel-info">
+      <a [routerLink]="[ '/video-channels', videoChannel.nameWithHost ]" class="video-channel-names" i18n-title title="Channel page">
+        <div class="video-channel-display-name">{{ videoChannel.displayName }}</div>
+        <div class="video-channel-name">{{ videoChannel.nameWithHost }}</div>
+      </a>
+
+      <div i18n class="video-channel-followers">{{ videoChannel.followersCount }} subscribers</div>
+
+      <a [routerLink]="[ '/accounts', videoChannel.ownerBy ]" i18n-title title="Owner account page" class="actor-owner">
+        <span i18n>Created by {{ videoChannel.ownerBy }}</span>
+        <img [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" />
+      </a>
+    </div>
+
+    <my-subscribe-button [videoChannels]="[videoChannel]"></my-subscribe-button>
+  </div>
+</div>
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
new file mode 100644
index 000000000..5ead45dd8
--- /dev/null
+++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
@@ -0,0 +1,81 @@
+@import '_variables';
+@import '_mixins';
+
+input[type=text] {
+  @include peertube-input-text(300px);
+}
+
+.video-channel {
+  @include row-blocks;
+
+  img {
+    @include avatar(80px);
+
+    margin-right: 10px;
+  }
+
+  .video-channel-info {
+    flex-grow: 1;
+
+    a.video-channel-names {
+      @include disable-default-a-behaviour;
+
+      width: fit-content;
+      display: flex;
+      align-items: baseline;
+      color: pvar(--mainForegroundColor);
+
+      .video-channel-display-name {
+        font-weight: $font-semibold;
+        font-size: 18px;
+      }
+
+      .video-channel-name {
+        font-size: 14px;
+        color: $grey-actor-name;
+        margin-left: 5px;
+      }
+    }
+  }
+
+  .actor-owner {
+    @include actor-owner;
+
+    margin-top: 0;
+  }
+}
+
+.video-subscriptions-header {
+  margin-bottom: 30px;
+}
+
+@media screen and (max-width: $small-view) {
+  .video-channel {
+    .video-channel-info {
+      padding-bottom: 10px;
+      text-align: center;
+
+      .video-channel-names {
+        flex-direction: column;
+        align-items: center !important;
+        margin: auto;
+      }
+    }
+
+    img {
+      margin-right: 0;
+    }
+  }
+}
+
+@media screen and (max-width: $mobile-view) {
+  .video-subscriptions-header {
+    flex-direction: column;
+
+    input[type=text] {
+      width: 100% !important;
+    }
+  }
+}
+
+
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.ts b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.ts
new file mode 100644
index 000000000..3b748eccf
--- /dev/null
+++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.ts
@@ -0,0 +1,74 @@
+import { Subject } from 'rxjs'
+import { debounceTime } from 'rxjs/operators'
+import { Component, OnInit } from '@angular/core'
+import { ComponentPagination, Notifier } from '@app/core'
+import { VideoChannel } from '@app/shared/shared-main'
+import { UserSubscriptionService } from '@app/shared/shared-user-subscription'
+
+@Component({
+  templateUrl: './my-subscriptions.component.html',
+  styleUrls: [ './my-subscriptions.component.scss' ]
+})
+export class MySubscriptionsComponent implements OnInit {
+  videoChannels: VideoChannel[] = []
+
+  pagination: ComponentPagination = {
+    currentPage: 1,
+    itemsPerPage: 10,
+    totalItems: null
+  }
+
+  onDataSubject = new Subject<any[]>()
+
+  subscriptionsSearch: string
+  subscriptionsSearchChanged = new Subject<string>()
+
+  constructor (
+    private userSubscriptionService: UserSubscriptionService,
+    private notifier: Notifier
+  ) {}
+
+  ngOnInit () {
+    this.loadSubscriptions()
+
+    this.subscriptionsSearchChanged
+      .pipe(debounceTime(500))
+      .subscribe(() => {
+        this.pagination.currentPage = 1
+        this.loadSubscriptions(false)
+      })
+  }
+
+  resetSearch () {
+    this.subscriptionsSearch = ''
+    this.onSubscriptionsSearchChanged()
+  }
+
+  onSubscriptionsSearchChanged () {
+    this.subscriptionsSearchChanged.next()
+  }
+
+  onNearOfBottom () {
+    // Last page
+    if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return
+
+    this.pagination.currentPage += 1
+    this.loadSubscriptions()
+  }
+
+  private loadSubscriptions (more = true) {
+    this.userSubscriptionService.listSubscriptions({ pagination: this.pagination, search: this.subscriptionsSearch })
+        .subscribe(
+          res => {
+            this.videoChannels = more
+              ? this.videoChannels.concat(res.data)
+              : res.data
+            this.pagination.totalItems = res.total
+
+            this.onDataSubject.next(res.data)
+          },
+
+          error => this.notifier.error(error.message)
+        )
+  }
+}