diff options
Diffstat (limited to 'client/src/app/+my-account/my-account-video-playlists')
3 files changed, 20 insertions, 18 deletions
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html index 8d69c3a5a..d8e3fb2fa 100644 --- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html +++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.html | |||
@@ -1,17 +1,20 @@ | |||
1 | <h1> | 1 | <h1 class="d-flex justify-content-between"> |
2 | <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon> | 2 | <span> |
3 | <ng-container i18n>My playlists</ng-container> <span class="badge badge-secondary">{{ pagination.totalItems }}</span> | 3 | <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon> |
4 | </h1> | 4 | <ng-container i18n>My playlists</ng-container> <span class="badge badge-secondary">{{ pagination.totalItems }}</span> |
5 | 5 | </span> | |
6 | 6 | ||
7 | <div class="video-playlists-header"> | 7 | <div class="has-feedback has-clear"> |
8 | <input type="text" placeholder="Search your playlists" i18n-placeholder [(ngModel)]="videoPlaylistsSearch" (ngModelChange)="onVideoPlaylistSearchChanged()" /> | 8 | <input type="text" placeholder="Search your playlists" i18n-placeholder [(ngModel)]="videoPlaylistsSearch" (ngModelChange)="onVideoPlaylistSearchChanged()" /> |
9 | <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a> | ||
10 | <span class="sr-only" i18n>Clear filters</span> | ||
11 | </div> | ||
9 | 12 | ||
10 | <a class="create-button" routerLink="create"> | 13 | <a class="create-button" routerLink="create"> |
11 | <my-global-icon iconName="add" aria-hidden="true"></my-global-icon> | 14 | <my-global-icon iconName="add" aria-hidden="true"></my-global-icon> |
12 | <ng-container i18n>Create playlist</ng-container> | 15 | <ng-container i18n>Create playlist</ng-container> |
13 | </a> | 16 | </a> |
14 | </div> | 17 | </h1> |
15 | 18 | ||
16 | <div class="video-playlists" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()"> | 19 | <div class="video-playlists" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()"> |
17 | <div *ngFor="let playlist of videoPlaylists" class="video-playlist"> | 20 | <div *ngFor="let playlist of videoPlaylists" class="video-playlist"> |
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss index 4381d74b0..ade28c70b 100644 --- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss +++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss | |||
@@ -5,6 +5,10 @@ | |||
5 | @include create-button; | 5 | @include create-button; |
6 | } | 6 | } |
7 | 7 | ||
8 | input[type=text] { | ||
9 | @include peertube-input-text(300px); | ||
10 | } | ||
11 | |||
8 | ::ng-deep .action-button { | 12 | ::ng-deep .action-button { |
9 | &.action-button-delete { | 13 | &.action-button-delete { |
10 | margin-right: 10px; | 14 | margin-right: 10px; |
@@ -33,16 +37,6 @@ | |||
33 | } | 37 | } |
34 | } | 38 | } |
35 | 39 | ||
36 | .video-playlists-header { | ||
37 | display: flex; | ||
38 | justify-content: space-between; | ||
39 | margin: 20px 0 50px; | ||
40 | |||
41 | input[type=text] { | ||
42 | @include peertube-input-text(300px); | ||
43 | } | ||
44 | } | ||
45 | |||
46 | @media screen and (max-width: $small-view) { | 40 | @media screen and (max-width: $small-view) { |
47 | .video-playlists-header { | 41 | .video-playlists-header { |
48 | text-align: center; | 42 | text-align: center; |
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.ts b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.ts index ea3bcde4f..668a23d8f 100644 --- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.ts +++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.ts | |||
@@ -84,6 +84,11 @@ export class MyAccountVideoPlaylistsComponent implements OnInit { | |||
84 | this.loadVideoPlaylists() | 84 | this.loadVideoPlaylists() |
85 | } | 85 | } |
86 | 86 | ||
87 | resetSearch () { | ||
88 | this.videoPlaylistsSearch = '' | ||
89 | this.onVideoPlaylistSearchChanged() | ||
90 | } | ||
91 | |||
87 | onVideoPlaylistSearchChanged () { | 92 | onVideoPlaylistSearchChanged () { |
88 | this.videoPlaylistSearchChanged.next() | 93 | this.videoPlaylistSearchChanged.next() |
89 | } | 94 | } |