aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorJulien Lemaire <sticmac@outlook.fr>2017-12-11 11:59:39 -0500
committerChocobozzz <me@florianbigard.com>2017-12-11 17:59:39 +0100
commitc7e1e432b0e5d321ff2331cf3ddff56c43500788 (patch)
tree753cdd499a0f04059869a96f41fb6a20d8eef258
parented9f9f5fb04437b8dcf164fd0ae9c29b90826096 (diff)
downloadPeerTube-c7e1e432b0e5d321ff2331cf3ddff56c43500788.tar.gz
PeerTube-c7e1e432b0e5d321ff2331cf3ddff56c43500788.tar.zst
PeerTube-c7e1e432b0e5d321ff2331cf3ddff56c43500788.zip
Copy to clipboard (#142)
* Copy buttons on share view Ugly but working buttons to copy video url and video iframe code. Add ngx-clipboard dependency to allow easy copy to clipboard directive. * Designed copy buttons Using some css (scss) rules to make buttons look better. * First version on copy feedback Little success alert message on copy. Fix lint errors Move dependencies to dev dependencies * Update button design * Use of notifications service Provides feedback of copy action to the user through the angular2-notifications module.
-rw-r--r--client/package.json1
-rw-r--r--client/src/app/app.component.scss5
-rw-r--r--client/src/app/videos/+video-watch/video-share.component.html18
-rw-r--r--client/src/app/videos/+video-watch/video-share.component.scss3
-rw-r--r--client/src/app/videos/+video-watch/video-share.component.ts12
-rw-r--r--client/src/app/videos/+video-watch/video-watch.module.ts4
-rw-r--r--client/yarn.lock10
7 files changed, 48 insertions, 5 deletions
diff --git a/client/package.json b/client/package.json
index 45f555f29..7441d15ec 100644
--- a/client/package.json
+++ b/client/package.json
@@ -71,6 +71,7 @@
71 "ngc-webpack": "3.2.2", 71 "ngc-webpack": "3.2.2",
72 "ngx-bootstrap": "2.0.0-beta.9", 72 "ngx-bootstrap": "2.0.0-beta.9",
73 "ngx-chips": "1.5.3", 73 "ngx-chips": "1.5.3",
74 "ngx-clipboard": "^9.0.0",
74 "ngx-infinite-scroll": "^0.7.0", 75 "ngx-infinite-scroll": "^0.7.0",
75 "ngx-pipes": "^2.0.5", 76 "ngx-pipes": "^2.0.5",
76 "node-sass": "^4.1.1", 77 "node-sass": "^4.1.1",
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 008c6d1f0..c0ec2025d 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -86,3 +86,8 @@ footer {
86 margin-top: $footer-margin; 86 margin-top: $footer-margin;
87 height: $footer-height; 87 height: $footer-height;
88} 88}
89
90simple-notifications {
91 position: relative;
92 z-index: 1500;
93}
diff --git a/client/src/app/videos/+video-watch/video-share.component.html b/client/src/app/videos/+video-watch/video-share.component.html
index 36ec38d88..52ee36a2e 100644
--- a/client/src/app/videos/+video-watch/video-share.component.html
+++ b/client/src/app/videos/+video-watch/video-share.component.html
@@ -12,12 +12,26 @@
12 <div class="modal-body"> 12 <div class="modal-body">
13 <div class="form-group"> 13 <div class="form-group">
14 <label>URL</label> 14 <label>URL</label>
15 <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoUrl()" /> 15 <div class="input-group">
16 <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoUrl()" />
17 <div class="input-group-btn" placement="bottom right">
18 <button [ngxClipboard]="urlInput" (click)="activateCopiedMessage()" type="button" class="btn btn-default btn-search">
19 <span class="glyphicon glyphicon-copy"></span>
20 </button>
21 </div>
22 </div>
16 </div> 23 </div>
17 24
18 <div class="form-group"> 25 <div class="form-group">
19 <label>Embed</label> 26 <label>Embed</label>
20 <input #shareInput (click)="shareInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoIframeCode()" /> 27 <div class="input-group">
28 <input #shareInput (click)="shareInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoIframeCode()" />
29 <div class="input-group-btn" placement="bottom right">
30 <button [ngxClipboard]="shareInput" (click)="activateCopiedMessage()" type="button" class="btn btn-default btn-search">
31 <span class="glyphicon glyphicon-copy"></span>
32 </button>
33 </div>
34 </div>
21 </div> 35 </div>
22 36
23 <div *ngIf="notSecure()" class="alert alert-warning"> 37 <div *ngIf="notSecure()" class="alert alert-warning">
diff --git a/client/src/app/videos/+video-watch/video-share.component.scss b/client/src/app/videos/+video-watch/video-share.component.scss
new file mode 100644
index 000000000..519631792
--- /dev/null
+++ b/client/src/app/videos/+video-watch/video-share.component.scss
@@ -0,0 +1,3 @@
1.btn-search {
2 padding: 4.1px 12px;
3}
diff --git a/client/src/app/videos/+video-watch/video-share.component.ts b/client/src/app/videos/+video-watch/video-share.component.ts
index 4df9adf29..0664c28be 100644
--- a/client/src/app/videos/+video-watch/video-share.component.ts
+++ b/client/src/app/videos/+video-watch/video-share.component.ts
@@ -1,17 +1,21 @@
1import { Component, Input, ViewChild } from '@angular/core' 1import { Component, Input, ViewChild } from '@angular/core'
2
3import { NotificationsService } from 'angular2-notifications'
4
2import { ModalDirective } from 'ngx-bootstrap/modal' 5import { ModalDirective } from 'ngx-bootstrap/modal'
3import { VideoDetails } from '../../shared/video/video-details.model' 6import { VideoDetails } from '../../shared/video/video-details.model'
4 7
5@Component({ 8@Component({
6 selector: 'my-video-share', 9 selector: 'my-video-share',
7 templateUrl: './video-share.component.html' 10 templateUrl: './video-share.component.html',
11 styleUrls: [ './video-share.component.scss' ]
8}) 12})
9export class VideoShareComponent { 13export class VideoShareComponent {
10 @Input() video: VideoDetails = null 14 @Input() video: VideoDetails = null
11 15
12 @ViewChild('modal') modal: ModalDirective 16 @ViewChild('modal') modal: ModalDirective
13 17
14 constructor () { 18 constructor (private notificationsService: NotificationsService) {
15 // empty 19 // empty
16 } 20 }
17 21
@@ -37,4 +41,8 @@ export class VideoShareComponent {
37 notSecure () { 41 notSecure () {
38 return window.location.protocol === 'http:' 42 return window.location.protocol === 'http:'
39 } 43 }
44
45 activateCopiedMessage () {
46 this.notificationsService.success('Success', 'Copied')
47 }
40} 48}
diff --git a/client/src/app/videos/+video-watch/video-watch.module.ts b/client/src/app/videos/+video-watch/video-watch.module.ts
index 0b1dd5c15..18319de1a 100644
--- a/client/src/app/videos/+video-watch/video-watch.module.ts
+++ b/client/src/app/videos/+video-watch/video-watch.module.ts
@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core'
3import { VideoWatchRoutingModule } from './video-watch-routing.module' 3import { VideoWatchRoutingModule } from './video-watch-routing.module'
4import { MarkdownService } from '../shared' 4import { MarkdownService } from '../shared'
5import { SharedModule } from '../../shared' 5import { SharedModule } from '../../shared'
6import { ClipboardModule } from 'ngx-clipboard'
6 7
7import { VideoWatchComponent } from './video-watch.component' 8import { VideoWatchComponent } from './video-watch.component'
8import { VideoReportComponent } from './video-report.component' 9import { VideoReportComponent } from './video-report.component'
@@ -12,7 +13,8 @@ import { VideoDownloadComponent } from './video-download.component'
12@NgModule({ 13@NgModule({
13 imports: [ 14 imports: [
14 VideoWatchRoutingModule, 15 VideoWatchRoutingModule,
15 SharedModule 16 SharedModule,
17 ClipboardModule
16 ], 18 ],
17 19
18 declarations: [ 20 declarations: [
diff --git a/client/yarn.lock b/client/yarn.lock
index bd6870061..9cead52e4 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -4714,6 +4714,16 @@ ngx-chips@1.5.3:
4714 dependencies: 4714 dependencies:
4715 ng2-material-dropdown "0.7.10" 4715 ng2-material-dropdown "0.7.10"
4716 4716
4717ngx-clipboard@^9.0.0:
4718 version "9.0.0"
4719 resolved "https://registry.yarnpkg.com/ngx-clipboard/-/ngx-clipboard-9.0.0.tgz#a56e4a3d0488a491898ee5209980b81ddad8b659"
4720 dependencies:
4721 ngx-window-token "0.0.4"
4722
4723ngx-window-token@0.0.4:
4724 version "0.0.4"
4725 resolved "https://registry.yarnpkg.com/ngx-window-token/-/ngx-window-token-0.0.4.tgz#47e7aaa465411c4ab5f7ba17601bc593c956c736"
4726
4717ngx-infinite-scroll@^0.7.0: 4727ngx-infinite-scroll@^0.7.0:
4718 version "0.7.0" 4728 version "0.7.0"
4719 resolved "https://registry.yarnpkg.com/ngx-infinite-scroll/-/ngx-infinite-scroll-0.7.0.tgz#a390c61c6a05ac14485e1c5bc8b4e6f6bd62fd6a" 4729 resolved "https://registry.yarnpkg.com/ngx-infinite-scroll/-/ngx-infinite-scroll-0.7.0.tgz#a390c61c6a05ac14485e1c5bc8b4e6f6bd62fd6a"