aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-12-06 14:05:38 +0100
committerChocobozzz <florian.bigard@gmail.com>2017-12-06 14:05:38 +0100
commit332542bc6814bd16c2daf47dc776f9f4b126ec2e (patch)
tree83178767d115b04769e538bfb51a23631bef1044
parenta2b817d322ef4074bdaaf2589ada567f338323f4 (diff)
downloadPeerTube-332542bc6814bd16c2daf47dc776f9f4b126ec2e.tar.gz
PeerTube-332542bc6814bd16c2daf47dc776f9f4b126ec2e.tar.zst
PeerTube-332542bc6814bd16c2daf47dc776f9f4b126ec2e.zip
Add delete button to my videos
-rw-r--r--client/src/app/account/account-videos/account-videos.component.html7
-rw-r--r--client/src/app/account/account-videos/account-videos.component.scss18
-rw-r--r--client/src/app/account/account-videos/account-videos.component.ts22
-rw-r--r--client/src/app/videos/video-list/shared/video-miniature.component.scss2
-rw-r--r--client/src/assets/images/account/delete.svg14
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 @@
1import { Component, OnInit } from '@angular/core' 1import { Component, OnInit } from '@angular/core'
2import { ActivatedRoute, Router } from '@angular/router' 2import { ActivatedRoute, Router } from '@angular/router'
3import { NotificationsService } from 'angular2-notifications' 3import { NotificationsService } from 'angular2-notifications'
4import { ConfirmService } from '../../core/confirm'
4import { AbstractVideoList } from '../../shared/video/abstract-video-list' 5import { AbstractVideoList } from '../../shared/video/abstract-video-list'
6import { Video } from '../../shared/video/video.model'
5import { VideoService } from '../../shared/video/video.service' 7import { 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>