From 17119e4a546522468878cf115558b17949ab50d0 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 12 Nov 2020 15:28:54 +0100 Subject: 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 --- .../modals/video-change-ownership.component.html | 33 ---- .../modals/video-change-ownership.component.scss | 10 -- .../modals/video-change-ownership.component.ts | 69 -------- .../my-account-videos.component.html | 46 ------ .../my-account-videos.component.scss | 127 --------------- .../my-account-videos.component.ts | 179 --------------------- 6 files changed, 464 deletions(-) delete mode 100644 client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.html delete mode 100644 client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.scss delete mode 100644 client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.ts delete mode 100644 client/src/app/+my-account/my-account-videos/my-account-videos.component.html delete mode 100644 client/src/app/+my-account/my-account-videos/my-account-videos.component.scss delete mode 100644 client/src/app/+my-account/my-account-videos/my-account-videos.component.ts (limited to 'client/src/app/+my-account/my-account-videos') diff --git a/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.html b/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.html deleted file mode 100644 index c7c5a0b69..000000000 --- a/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.html +++ /dev/null @@ -1,33 +0,0 @@ - -
-

Change ownership

- - -
- -
-
- - -
- {{ formErrors.username }} -
-
-
- -
-
- - - -
-
- diff --git a/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.scss b/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.scss deleted file mode 100644 index a79fec179..000000000 --- a/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import '_variables'; -@import '_mixins'; - -p-autocomplete { - display: block; -} - -.form-group { - margin: 20px 0; -} \ No newline at end of file diff --git a/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.ts b/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.ts deleted file mode 100644 index 84237dee1..000000000 --- a/client/src/app/+my-account/my-account-videos/modals/video-change-ownership.component.ts +++ /dev/null @@ -1,69 +0,0 @@ -import { Component, ElementRef, OnInit, ViewChild } from '@angular/core' -import { Notifier, UserService } from '@app/core' -import { OWNERSHIP_CHANGE_USERNAME_VALIDATOR } from '@app/shared/form-validators/video-ownership-change-validators' -import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' -import { Video, VideoOwnershipService } from '@app/shared/shared-main' -import { NgbModal } from '@ng-bootstrap/ng-bootstrap' - -@Component({ - selector: 'my-video-change-ownership', - templateUrl: './video-change-ownership.component.html', - styleUrls: [ './video-change-ownership.component.scss' ] -}) -export class VideoChangeOwnershipComponent extends FormReactive implements OnInit { - @ViewChild('modal', { static: true }) modal: ElementRef - - usernamePropositions: string[] - - error: string = null - - private video: Video | undefined = undefined - - constructor ( - protected formValidatorService: FormValidatorService, - private videoOwnershipService: VideoOwnershipService, - private notifier: Notifier, - private userService: UserService, - private modalService: NgbModal - ) { - super() - } - - ngOnInit () { - this.buildForm({ - username: OWNERSHIP_CHANGE_USERNAME_VALIDATOR - }) - this.usernamePropositions = [] - } - - show (video: Video) { - this.video = video - this.modalService - .open(this.modal, { centered: true }) - .result - .then(() => this.changeOwnership()) - .catch((_) => _) // Called when closing (cancel) the modal without validating, do nothing - } - - search (event: { query: string }) { - const query = event.query - this.userService.autocomplete(query) - .subscribe( - usernames => this.usernamePropositions = usernames, - - err => this.notifier.error(err.message) - ) - } - - changeOwnership () { - const username = this.form.value['username'] - - this.videoOwnershipService - .changeOwnership(this.video.id, username) - .subscribe( - () => this.notifier.success($localize`Ownership change request sent.`), - - err => this.notifier.error(err.message) - ) - } -} diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html deleted file mode 100644 index aa5b284e7..000000000 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html +++ /dev/null @@ -1,46 +0,0 @@ -

- - - My videos - {{ pagination.totalItems }} - -

- -
-
- - - Clear filters -
-
- - - - - - Delete - - - - -
- - - -
- - - - - - diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss deleted file mode 100644 index 246f46320..000000000 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss +++ /dev/null @@ -1,127 +0,0 @@ -@import '_variables'; -@import '_mixins'; - -input[type=text] { - @include peertube-input-text(300px); -} - -.action-button-delete-selection { - display: inline-block; - - @include peertube-button; - @include orange-button; - @include button-with-icon(21px); - - my-global-icon { - @include apply-svg-color(#fff); - } -} - -::ng-deep { - .video { - flex-wrap: wrap; - } - - .action-button span { - white-space: nowrap; - } - - .video-miniature { - &.display-as-row { - // width: min-content !important; - width: 100% !important; - - .video-bottom .video-miniature-information { - width: max-content !important; - min-width: unset !important; - } - } - - .video-bottom { - max-width: 350px; - } - } -} - -.action-button { - display: flex; - margin-left: 55px; - margin-top: 10px; - align-self: flex-end; -} - -my-delete-button, -my-edit-button { - margin-right: 10px; -} - -@media screen and (max-width: $small-view) { - .action-button { - flex-direction: column; - align-self: center; - margin-left: 0px; - } - - ::ng-deep { - .video-miniature { - align-items: center; - - .video-bottom, - .video-bottom .video-miniature-information { - /* same width than a.video-thumbnail */ - max-width: $video-thumbnail-width !important; - } - } - } - - my-delete-button, - my-edit-button { - margin-right: 0px; - - ::ng-deep { - span, a { - margin-right: 0px; - } - } - } - - my-delete-button, - my-edit-button, - my-button { - margin-top: 15px; - width: 100%; - text-align: center; - - ::ng-deep { - .action-button { - /* same width than a.video-thumbnail */ - width: $video-thumbnail-width; - } - } - } -} - -// Adapt my-video-miniature on small screens with menu -@media screen and (min-width: $small-view) and (max-width: #{breakpoint(lg) + ($not-expanded-horizontal-margins / 3) * 2}) { - :host-context(.main-col:not(.expanded)) { - ::ng-deep { - .video-miniature { - flex-direction: column; - - .video-miniature-name { - max-width: $video-thumbnail-width; - } - } - } - } -} - -@media screen and (max-width: $mobile-view) { - .videos-header { - flex-direction: column; - - input[type=text] { - width: 100% !important; - } - } -} diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts deleted file mode 100644 index 84f022ad2..000000000 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts +++ /dev/null @@ -1,179 +0,0 @@ -import { concat, Observable, Subject } from 'rxjs' -import { debounceTime, tap, toArray } from 'rxjs/operators' -import { Component, OnInit, ViewChild } from '@angular/core' -import { ActivatedRoute, Router } from '@angular/router' -import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, ServerService } from '@app/core' -import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook' -import { immutableAssign } from '@app/helpers' -import { DropdownAction, Video, VideoService } from '@app/shared/shared-main' -import { LiveStreamInformationComponent } from '@app/shared/shared-video-live' -import { MiniatureDisplayOptions, OwnerDisplayType, SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature' -import { VideoSortField } from '@shared/models' -import { VideoChangeOwnershipComponent } from './modals/video-change-ownership.component' - -@Component({ - selector: 'my-account-videos', - templateUrl: './my-account-videos.component.html', - styleUrls: [ './my-account-videos.component.scss' ] -}) -export class MyAccountVideosComponent implements OnInit, DisableForReuseHook { - @ViewChild('videosSelection', { static: true }) videosSelection: VideosSelectionComponent - @ViewChild('videoChangeOwnershipModal', { static: true }) videoChangeOwnershipModal: VideoChangeOwnershipComponent - @ViewChild('liveStreamInformationModal', { static: true }) liveStreamInformationModal: LiveStreamInformationComponent - - titlePage: string - selection: SelectionType = {} - pagination: ComponentPagination = { - currentPage: 1, - itemsPerPage: 10, - totalItems: null - } - miniatureDisplayOptions: MiniatureDisplayOptions = { - date: true, - views: true, - by: true, - privacyLabel: false, - privacyText: true, - state: true, - blacklistInfo: true - } - ownerDisplayType: OwnerDisplayType = 'videoChannel' - - videoActions: DropdownAction<{ video: Video }>[] = [] - - videos: Video[] = [] - videosSearch: string - videosSearchChanged = new Subject() - getVideosObservableFunction = this.getVideosObservable.bind(this) - - constructor ( - protected router: Router, - protected serverService: ServerService, - protected route: ActivatedRoute, - protected authService: AuthService, - protected notifier: Notifier, - protected screenService: ScreenService, - private confirmService: ConfirmService, - private videoService: VideoService - ) { - this.titlePage = $localize`My videos` - } - - ngOnInit () { - this.buildActions() - - this.videosSearchChanged - .pipe(debounceTime(500)) - .subscribe(() => { - this.videosSelection.reloadVideos() - }) - } - - resetSearch () { - this.videosSearch = '' - this.onVideosSearchChanged() - } - - onVideosSearchChanged () { - this.videosSearchChanged.next() - } - - disableForReuse () { - this.videosSelection.disableForReuse() - } - - enabledForReuse () { - this.videosSelection.enabledForReuse() - } - - getVideosObservable (page: number, sort: VideoSortField) { - const newPagination = immutableAssign(this.pagination, { currentPage: page }) - - return this.videoService.getMyVideos(newPagination, sort, this.videosSearch) - .pipe( - tap(res => this.pagination.totalItems = res.total) - ) - } - - async deleteSelectedVideos () { - const toDeleteVideosIds = Object.keys(this.selection) - .filter(k => this.selection[ k ] === true) - .map(k => parseInt(k, 10)) - - const res = await this.confirmService.confirm( - $localize`Do you really want to delete ${toDeleteVideosIds.length} videos?`, - $localize`Delete` - ) - if (res === false) return - - const observables: Observable[] = [] - for (const videoId of toDeleteVideosIds) { - const o = this.videoService.removeVideo(videoId) - .pipe(tap(() => this.removeVideoFromArray(videoId))) - - observables.push(o) - } - - concat(...observables) - .pipe(toArray()) - .subscribe( - () => { - this.notifier.success($localize`${toDeleteVideosIds.length} videos deleted.`) - this.selection = {} - }, - - err => this.notifier.error(err.message) - ) - } - - async deleteVideo (video: Video) { - const res = await this.confirmService.confirm( - $localize`Do you really want to delete ${video.name}?`, - $localize`Delete` - ) - if (res === false) return - - this.videoService.removeVideo(video.id) - .subscribe( - () => { - this.notifier.success($localize`Video ${video.name} deleted.`) - this.removeVideoFromArray(video.id) - }, - - error => this.notifier.error(error.message) - ) - } - - changeOwnership (video: Video) { - this.videoChangeOwnershipModal.show(video) - } - - displayLiveInformation (video: Video) { - this.liveStreamInformationModal.show(video) - } - - private removeVideoFromArray (id: number) { - this.videos = this.videos.filter(v => v.id !== id) - } - - private buildActions () { - this.videoActions = [ - { - label: $localize`Display live information`, - handler: ({ video }) => this.displayLiveInformation(video), - isDisplayed: ({ video }) => video.isLive, - iconName: 'live' - }, - { - label: $localize`Change ownership`, - handler: ({ video }) => this.changeOwnership(video), - iconName: 'ownership-change' - }, - { - label: $localize`Delete`, - handler: ({ video }) => this.deleteVideo(video), - iconName: 'delete' - } - ] - } -} -- cgit v1.2.3