diff options
5 files changed, 58 insertions, 5 deletions
diff --git a/client/src/app/account/account-videos/account-videos.component.html b/client/src/app/account/account-videos/account-videos.component.html index 81bda9477..30db69429 100644 --- a/client/src/app/account/account-videos/account-videos.component.html +++ b/client/src/app/account/account-videos/account-videos.component.html | |||
@@ -13,7 +13,12 @@ | |||
13 | <span class="video-info-date-views">{{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span> | 13 | <span class="video-info-date-views">{{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span> |
14 | </div> | 14 | </div> |
15 | 15 | ||
16 | <a class="edit-button" [routerLink]="[ '/videos', video.id, '/edit' ]"> | 16 | <a class="action-button action-button-delete" (click)="deleteVideo(video)"> |
17 | <span class="icon icon-delete"></span> | ||
18 | Delete | ||
19 | </a> | ||
20 | |||
21 | <a class="action-button" [routerLink]="[ '/videos', video.id, '/edit' ]"> | ||
17 | <span class="icon icon-edit"></span> | 22 | <span class="icon icon-edit"></span> |
18 | Edit | 23 | Edit |
19 | </a> | 24 | </a> |
diff --git a/client/src/app/account/account-videos/account-videos.component.scss b/client/src/app/account/account-videos/account-videos.component.scss index c31497350..7ac25afc3 100644 --- a/client/src/app/account/account-videos/account-videos.component.scss +++ b/client/src/app/account/account-videos/account-videos.component.scss | |||
@@ -25,7 +25,7 @@ | |||
25 | } | 25 | } |
26 | } | 26 | } |
27 | 27 | ||
28 | .edit-button { | 28 | .action-button { |
29 | @include peertube-button-link; | 29 | @include peertube-button-link; |
30 | 30 | ||
31 | font-size: 15px; | 31 | font-size: 15px; |
@@ -33,15 +33,27 @@ | |||
33 | color: #585858; | 33 | color: #585858; |
34 | background-color: #E5E5E5; | 34 | background-color: #E5E5E5; |
35 | 35 | ||
36 | .icon.icon-edit { | 36 | &.action-button-delete { |
37 | margin-right: 10px; | ||
38 | } | ||
39 | |||
40 | .icon.icon-edit, .icon.icon-delete { | ||
37 | display: inline-block; | 41 | display: inline-block; |
38 | background: url('../../../assets/images/account/edit.svg') no-repeat; | 42 | background-repeat: no-repeat; |
39 | background-size: contain; | 43 | background-size: contain; |
40 | width: 21px; | 44 | width: 21px; |
41 | height: 21px; | 45 | height: 21px; |
42 | vertical-align: middle; | 46 | vertical-align: middle; |
43 | position: relative; | 47 | position: relative; |
44 | top: -2px; | 48 | top: -2px; |
49 | |||
50 | &.icon-edit { | ||
51 | background-image: url('../../../assets/images/account/edit.svg'); | ||
52 | } | ||
53 | |||
54 | &.icon-delete { | ||
55 | background-image: url('../../../assets/images/account/delete.svg'); | ||
56 | } | ||
45 | } | 57 | } |
46 | } | 58 | } |
47 | } | 59 | } |
diff --git a/client/src/app/account/account-videos/account-videos.component.ts b/client/src/app/account/account-videos/account-videos.component.ts index 1bc6c0a35..9c2cc2404 100644 --- a/client/src/app/account/account-videos/account-videos.component.ts +++ b/client/src/app/account/account-videos/account-videos.component.ts | |||
@@ -1,7 +1,9 @@ | |||
1 | import { Component, OnInit } from '@angular/core' | 1 | import { Component, OnInit } from '@angular/core' |
2 | import { ActivatedRoute, Router } from '@angular/router' | 2 | import { ActivatedRoute, Router } from '@angular/router' |
3 | import { NotificationsService } from 'angular2-notifications' | 3 | import { NotificationsService } from 'angular2-notifications' |
4 | import { ConfirmService } from '../../core/confirm' | ||
4 | import { AbstractVideoList } from '../../shared/video/abstract-video-list' | 5 | import { AbstractVideoList } from '../../shared/video/abstract-video-list' |
6 | import { Video } from '../../shared/video/video.model' | ||
5 | import { VideoService } from '../../shared/video/video.service' | 7 | import { VideoService } from '../../shared/video/video.service' |
6 | 8 | ||
7 | @Component({ | 9 | @Component({ |
@@ -16,6 +18,7 @@ export class AccountVideosComponent extends AbstractVideoList implements OnInit | |||
16 | constructor (protected router: Router, | 18 | constructor (protected router: Router, |
17 | protected route: ActivatedRoute, | 19 | protected route: ActivatedRoute, |
18 | protected notificationsService: NotificationsService, | 20 | protected notificationsService: NotificationsService, |
21 | protected confirmService: ConfirmService, | ||
19 | private videoService: VideoService) { | 22 | private videoService: VideoService) { |
20 | super() | 23 | super() |
21 | } | 24 | } |
@@ -27,4 +30,23 @@ export class AccountVideosComponent extends AbstractVideoList implements OnInit | |||
27 | getVideosObservable () { | 30 | getVideosObservable () { |
28 | return this.videoService.getMyVideos(this.pagination, this.sort) | 31 | return this.videoService.getMyVideos(this.pagination, this.sort) |
29 | } | 32 | } |
33 | |||
34 | deleteVideo (video: Video) { | ||
35 | this.confirmService.confirm(`Do you really want to delete ${video.name}?`, 'Delete').subscribe( | ||
36 | res => { | ||
37 | if (res === false) return | ||
38 | |||
39 | this.videoService.removeVideo(video.id) | ||
40 | .subscribe( | ||
41 | status => { | ||
42 | this.notificationsService.success('Success', `Video ${video.name} deleted.`) | ||
43 | const index = this.videos.findIndex(v => v.id === video.id) | ||
44 | this.videos.splice(index, 1) | ||
45 | }, | ||
46 | |||
47 | error => this.notificationsService.error('Error', error.text) | ||
48 | ) | ||
49 | } | ||
50 | ) | ||
51 | } | ||
30 | } | 52 | } |
diff --git a/client/src/app/videos/video-list/shared/video-miniature.component.scss b/client/src/app/videos/video-list/shared/video-miniature.component.scss index 658d7af9d..37e84897b 100644 --- a/client/src/app/videos/video-list/shared/video-miniature.component.scss +++ b/client/src/app/videos/video-list/shared/video-miniature.component.scss | |||
@@ -37,7 +37,7 @@ | |||
37 | } | 37 | } |
38 | 38 | ||
39 | .video-miniature-account { | 39 | .video-miniature-account { |
40 | font-size: 12px; | 40 | font-size: 13px; |
41 | color: #585858; | 41 | color: #585858; |
42 | } | 42 | } |
43 | } | 43 | } |
diff --git a/client/src/assets/images/account/delete.svg b/client/src/assets/images/account/delete.svg new file mode 100644 index 000000000..67e9e2ce7 --- /dev/null +++ b/client/src/assets/images/account/delete.svg | |||
@@ -0,0 +1,14 @@ | |||
1 | <?xml version="1.0" encoding="UTF-8"?> | ||
2 | <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | ||
3 | <defs></defs> | ||
4 | <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | ||
5 | <g id="Artboard-4" transform="translate(-224.000000, -159.000000)"> | ||
6 | <g id="25" transform="translate(224.000000, 159.000000)"> | ||
7 | <path d="M5,7 L5,20.0081158 C5,21.1082031 5.89706013,22 7.00585866,22 L16.9941413,22 C18.1019465,22 19,21.1066027 19,20.0081158 L19,7" id="Path-296" stroke="#585858" stroke-width="2"></path> | ||
8 | <rect id="Rectangle-424" fill="#585858" x="2" y="4" width="20" height="2" rx="1"></rect> | ||
9 | <path d="M9,10.9970301 C9,10.4463856 9.44386482,10 10,10 C10.5522847,10 11,10.4530363 11,10.9970301 L11,17.0029699 C11,17.5536144 10.5561352,18 10,18 C9.44771525,18 9,17.5469637 9,17.0029699 L9,10.9970301 Z M13,10.9970301 C13,10.4463856 13.4438648,10 14,10 C14.5522847,10 15,10.4530363 15,10.9970301 L15,17.0029699 C15,17.5536144 14.5561352,18 14,18 C13.4477153,18 13,17.5469637 13,17.0029699 L13,10.9970301 Z" id="Combined-Shape" fill="#585858"></path> | ||
10 | <path d="M9,5 L9,2.99895656 C9,2.44724809 9.45097518,2 9.99077797,2 L14.009222,2 C14.5564136,2 15,2.44266033 15,2.99895656 L15,5" id="Path-33" stroke="#585858" stroke-width="2" stroke-linejoin="round"></path> | ||
11 | </g> | ||
12 | </g> | ||
13 | </g> | ||
14 | </svg> | ||