From c7e1e432b0e5d321ff2331cf3ddff56c43500788 Mon Sep 17 00:00:00 2001 From: Julien Lemaire Date: Mon, 11 Dec 2017 11:59:39 -0500 Subject: [PATCH] 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. --- client/package.json | 1 + client/src/app/app.component.scss | 5 +++++ .../+video-watch/video-share.component.html | 18 ++++++++++++++++-- .../+video-watch/video-share.component.scss | 3 +++ .../+video-watch/video-share.component.ts | 12 ++++++++++-- .../videos/+video-watch/video-watch.module.ts | 4 +++- client/yarn.lock | 10 ++++++++++ 7 files changed, 48 insertions(+), 5 deletions(-) create mode 100644 client/src/app/videos/+video-watch/video-share.component.scss 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 @@ "ngc-webpack": "3.2.2", "ngx-bootstrap": "2.0.0-beta.9", "ngx-chips": "1.5.3", + "ngx-clipboard": "^9.0.0", "ngx-infinite-scroll": "^0.7.0", "ngx-pipes": "^2.0.5", "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 { margin-top: $footer-margin; height: $footer-height; } + +simple-notifications { + position: relative; + z-index: 1500; +} 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 @@
- +
+ +
+ +
+
- +
+ +
+ +
+
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 @@ +.btn-search { + padding: 4.1px 12px; +} 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 @@ import { Component, Input, ViewChild } from '@angular/core' + +import { NotificationsService } from 'angular2-notifications' + import { ModalDirective } from 'ngx-bootstrap/modal' import { VideoDetails } from '../../shared/video/video-details.model' @Component({ selector: 'my-video-share', - templateUrl: './video-share.component.html' + templateUrl: './video-share.component.html', + styleUrls: [ './video-share.component.scss' ] }) export class VideoShareComponent { @Input() video: VideoDetails = null @ViewChild('modal') modal: ModalDirective - constructor () { + constructor (private notificationsService: NotificationsService) { // empty } @@ -37,4 +41,8 @@ export class VideoShareComponent { notSecure () { return window.location.protocol === 'http:' } + + activateCopiedMessage () { + this.notificationsService.success('Success', 'Copied') + } } 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' import { VideoWatchRoutingModule } from './video-watch-routing.module' import { MarkdownService } from '../shared' import { SharedModule } from '../../shared' +import { ClipboardModule } from 'ngx-clipboard' import { VideoWatchComponent } from './video-watch.component' import { VideoReportComponent } from './video-report.component' @@ -12,7 +13,8 @@ import { VideoDownloadComponent } from './video-download.component' @NgModule({ imports: [ VideoWatchRoutingModule, - SharedModule + SharedModule, + ClipboardModule ], 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: dependencies: ng2-material-dropdown "0.7.10" +ngx-clipboard@^9.0.0: + version "9.0.0" + resolved "https://registry.yarnpkg.com/ngx-clipboard/-/ngx-clipboard-9.0.0.tgz#a56e4a3d0488a491898ee5209980b81ddad8b659" + dependencies: + ngx-window-token "0.0.4" + +ngx-window-token@0.0.4: + version "0.0.4" + resolved "https://registry.yarnpkg.com/ngx-window-token/-/ngx-window-token-0.0.4.tgz#47e7aaa465411c4ab5f7ba17601bc593c956c736" + ngx-infinite-scroll@^0.7.0: version "0.7.0" resolved "https://registry.yarnpkg.com/ngx-infinite-scroll/-/ngx-infinite-scroll-0.7.0.tgz#a390c61c6a05ac14485e1c5bc8b4e6f6bd62fd6a"