From fedca113d2d218c6a2bcba7bdfdd66f78ce268ec Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Mon, 26 Jun 2017 11:50:51 -0300 Subject: [PATCH 1/7] Adding plugin --- .eslintignore | 1 + .gitignore | 1 + .../src/components/Comment.js | 10 ++- .../coral-plugin-permalink/client/.babelrc | 14 ++++ .../client/.eslintrc.json | 23 ++++++ .../client/components}/PermalinkButton.js | 72 +++++++++++-------- .../client/components}/styles.css | 2 +- .../coral-plugin-permalink/client/index.js | 7 ++ plugins/coral-plugin-permalink/index.js | 1 + plugins/coral-plugin-permalink/package.json | 11 +++ 10 files changed, 106 insertions(+), 36 deletions(-) create mode 100644 plugins/coral-plugin-permalink/client/.babelrc create mode 100644 plugins/coral-plugin-permalink/client/.eslintrc.json rename {client/coral-plugin-permalinks => plugins/coral-plugin-permalink/client/components}/PermalinkButton.js (53%) rename {client/coral-plugin-permalinks => plugins/coral-plugin-permalink/client/components}/styles.css (95%) create mode 100644 plugins/coral-plugin-permalink/client/index.js create mode 100644 plugins/coral-plugin-permalink/index.js create mode 100644 plugins/coral-plugin-permalink/package.json diff --git a/.eslintignore b/.eslintignore index 8a8c3a213..48c4f4844 100644 --- a/.eslintignore +++ b/.eslintignore @@ -12,4 +12,5 @@ plugins/* !plugins/coral-plugin-love !plugins/coral-plugin-viewing-options !plugins/coral-plugin-comment-content +!plugins/coral-plugin-permalink node_modules diff --git a/.gitignore b/.gitignore index b3e0eaa73..0709912e5 100644 --- a/.gitignore +++ b/.gitignore @@ -25,5 +25,6 @@ plugins/* !plugins/coral-plugin-love !plugins/coral-plugin-viewing-options !plugins/coral-plugin-comment-content +!plugins/coral-plugin-permalink **/node_modules/* diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index 754f44558..4fa7d234b 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/client/coral-embed-stream/src/components/Comment.js @@ -1,6 +1,5 @@ import React, {PropTypes} from 'react'; -import PermalinkButton from 'coral-plugin-permalinks/PermalinkButton'; import AuthorName from 'coral-plugin-author-name/AuthorName'; import TagLabel from 'coral-plugin-tag-label/TagLabel'; import PubDate from 'coral-plugin-pubdate/PubDate'; @@ -509,19 +508,18 @@ export default class Comment extends React.Component { currentUserId={currentUser && currentUser.id} /> } + +
-
-
- - - { this.popover.style.top = `${this.linkButton.offsetTop - 80}px`; - this.setState({popoverOpen: !this.state.popoverOpen}); + + this.setState({ + popoverOpen: !this.state.popoverOpen + }); } handleClickOutside = () => { - this.setState({popoverOpen: false}); + this.setState({ + popoverOpen: false + }); } - copyPermalink () { + copyPermalink = () => { this.permalinkInput.select(); try { document.execCommand('copy'); - this.setState({copySuccessful: true, copyFailure: null}); + this.setState({ + copySuccessful: true, + copyFailure: null + }); } catch (err) { - this.setState({copyFailure: true, copySuccessful: null}); + this.setState({ + copyFailure: true, + copySuccessful: null + }); } setTimeout(() => { - this.setState({copyFailure: null, copySuccessful: null}); + this.setState({ + copyFailure: null, + copySuccessful: null + }); }, 3000); } render () { - const {copySuccessful, copyFailure} = this.state; + const {copySuccessful, copyFailure, popoverOpen} = this.state; + const {asset} = this.props; return (
@@ -60,15 +71,18 @@ export default class PermalinkButton extends React.Component {
this.popover = ref} - className={`${name}-popover ${styles.container} ${this.state.popoverOpen ? 'active' : ''}`}> + className={cn([`${name}-popover`, styles.container, {active: popoverOpen}])}> this.permalinkInput = input} - value={`${this.props.articleURL}#${this.props.commentId}`} - onChange={() => {}} /> - -
this.popover = ref} - className={cn([`${name}-popover`, styles.container, {active: popoverOpen}])}> - this.permalinkInput = input} - value={`${asset.url}#${this.props.commentId}`} - /> - - -
-
- - ); - } -} diff --git a/plugins/coral-plugin-permalink/client/components/styles.css b/plugins/coral-plugin-permalink/client/components/styles.css deleted file mode 100644 index ba263fe0c..000000000 --- a/plugins/coral-plugin-permalink/client/components/styles.css +++ /dev/null @@ -1,67 +0,0 @@ -.container { - border-radius: 3px; - padding: 15px 10px; - box-sizing: border-box; - border: solid 1px rgba(153, 153, 153, 0.33); - left: 0; - width: 100%; - z-index: 10; - - &::before { - content: ''; - border: 10px solid transparent; - border-top-color: white; - position: absolute; - right: 7em; - bottom: -20px; - z-index: 2; - } - - &::after{ - content: ''; - border: 10px solid transparent; - border-top-color: rgba(153, 153, 153, 0.33); - position: absolute; - right: 7em; - bottom: -21px; - z-index: 1; - } - - input { - display: inline-block; - width: calc(100% - 78px); - padding: 8px; - border-radius: 3px; - border: solid 1px #e0e0e0; - height: 32px; - box-sizing: border-box; - font-size: 1em; - } - - button { - display: inline-block; - float: right; - box-sizing: border-box; - margin: 0; - background-color: #e0e0e0; - font-size: 1em; - width: auto; - height: auto; - padding: 2px; - transition: background-color 0.4s ease; - - &:hover{ - color: black; - } - - &.success { - background-color: #00897B; - color: white; - } - - &.failure { - background-color: #FF5252; - color: white; - } - } -} diff --git a/plugins/coral-plugin-permalink/client/index.js b/plugins/coral-plugin-permalink/client/index.js deleted file mode 100644 index d413da870..000000000 --- a/plugins/coral-plugin-permalink/client/index.js +++ /dev/null @@ -1,7 +0,0 @@ -import PermalinkButton from './components/PermalinkButton'; - -export default { - slots: { - commentActions: [PermalinkButton] - } -}; diff --git a/plugins/coral-plugin-permalink/index.js b/plugins/coral-plugin-permalink/index.js deleted file mode 100644 index f053ebf79..000000000 --- a/plugins/coral-plugin-permalink/index.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = {}; diff --git a/plugins/coral-plugin-permalink/package.json b/plugins/coral-plugin-permalink/package.json deleted file mode 100644 index 0d1f1e6ba..000000000 --- a/plugins/coral-plugin-permalink/package.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "name": "coral-plugin-permalink", - "version": "1.0.0", - "description": "", - "main": "index.js", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "author": "", - "license": "ISC" -} From 5e1450ffb0c131e82da72e952605eda380221d21 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Mon, 26 Jun 2017 15:46:53 -0300 Subject: [PATCH 3/7] Renaming to talk --- .eslintignore | 2 +- .gitignore | 2 +- plugins/talk-plugin-permalink/client/.babelrc | 14 +++ .../client/.eslintrc.json | 23 ++++ .../client/components/PermalinkButton.js | 101 ++++++++++++++++++ .../client/components/styles.css | 66 ++++++++++++ plugins/talk-plugin-permalink/client/index.js | 7 ++ plugins/talk-plugin-permalink/index.js | 1 + plugins/talk-plugin-permalink/package.json | 11 ++ 9 files changed, 225 insertions(+), 2 deletions(-) create mode 100644 plugins/talk-plugin-permalink/client/.babelrc create mode 100644 plugins/talk-plugin-permalink/client/.eslintrc.json create mode 100644 plugins/talk-plugin-permalink/client/components/PermalinkButton.js create mode 100644 plugins/talk-plugin-permalink/client/components/styles.css create mode 100644 plugins/talk-plugin-permalink/client/index.js create mode 100644 plugins/talk-plugin-permalink/index.js create mode 100644 plugins/talk-plugin-permalink/package.json diff --git a/.eslintignore b/.eslintignore index 48c4f4844..3a259c106 100644 --- a/.eslintignore +++ b/.eslintignore @@ -12,5 +12,5 @@ plugins/* !plugins/coral-plugin-love !plugins/coral-plugin-viewing-options !plugins/coral-plugin-comment-content -!plugins/coral-plugin-permalink +!plugins/talk-plugin-permalink node_modules diff --git a/.gitignore b/.gitignore index 0709912e5..0be1266c6 100644 --- a/.gitignore +++ b/.gitignore @@ -25,6 +25,6 @@ plugins/* !plugins/coral-plugin-love !plugins/coral-plugin-viewing-options !plugins/coral-plugin-comment-content -!plugins/coral-plugin-permalink +!plugins/talk-plugin-permalink **/node_modules/* diff --git a/plugins/talk-plugin-permalink/client/.babelrc b/plugins/talk-plugin-permalink/client/.babelrc new file mode 100644 index 000000000..60be246eb --- /dev/null +++ b/plugins/talk-plugin-permalink/client/.babelrc @@ -0,0 +1,14 @@ +{ + "presets": [ + "es2015" + ], + "plugins": [ + "add-module-exports", + "transform-class-properties", + "transform-decorators-legacy", + "transform-object-assign", + "transform-object-rest-spread", + "transform-async-to-generator", + "transform-react-jsx" + ] +} \ No newline at end of file diff --git a/plugins/talk-plugin-permalink/client/.eslintrc.json b/plugins/talk-plugin-permalink/client/.eslintrc.json new file mode 100644 index 000000000..9fe56bd14 --- /dev/null +++ b/plugins/talk-plugin-permalink/client/.eslintrc.json @@ -0,0 +1,23 @@ +{ + "env": { + "browser": true, + "es6": true, + "mocha": true + }, + "parserOptions": { + "sourceType": "module", + "ecmaFeatures": { + "experimentalObjectRestSpread": true, + "jsx": true + } + }, + "parser": "babel-eslint", + "plugins": [ + "react" + ], + "rules": { + "react/jsx-uses-react": "error", + "react/jsx-uses-vars": "error", + "no-console": ["warn", { "allow": ["warn", "error"] }] + } +} diff --git a/plugins/talk-plugin-permalink/client/components/PermalinkButton.js b/plugins/talk-plugin-permalink/client/components/PermalinkButton.js new file mode 100644 index 000000000..b4dd190d8 --- /dev/null +++ b/plugins/talk-plugin-permalink/client/components/PermalinkButton.js @@ -0,0 +1,101 @@ +import React from 'react'; +import {Button} from 'coral-ui'; +import styles from './styles.css'; +import t from 'coral-framework/services/i18n'; +import ClickOutside from 'coral-framework/components/ClickOutside'; +import cn from 'classnames'; + +const name = 'talk-plugin-permalink'; + +export default class PermalinkButton extends React.Component { + constructor (props) { + super(props); + + this.state = { + popoverOpen: false, + copySuccessful: null, + copyFailure: null + }; + + } + + toggle = () => { + this.popover.style.top = `${this.linkButton.offsetTop - 80}px`; + + this.setState({ + popoverOpen: !this.state.popoverOpen + }); + } + + handleClickOutside = () => { + this.setState({ + popoverOpen: false + }); + } + + copyPermalink = () => { + this.permalinkInput.select(); + try { + document.execCommand('copy'); + this.setState({ + copySuccessful: true, + copyFailure: null + }); + } catch (err) { + this.setState({ + copyFailure: true, + copySuccessful: null + }); + } + + setTimeout(() => { + this.setState({ + copyFailure: null, + copySuccessful: null + }); + }, 3000); + } + + render () { + const {copySuccessful, copyFailure, popoverOpen} = this.state; + const {asset} = this.props; + return ( + +
+ +
this.popover = ref} + className={cn([`${name}-popover`, styles.container, {active: popoverOpen}])}> + + this.permalinkInput = input} + value={`${asset.url}#${this.props.commentId}`} + /> + + + +
+
+ + ); + } +} diff --git a/plugins/talk-plugin-permalink/client/components/styles.css b/plugins/talk-plugin-permalink/client/components/styles.css new file mode 100644 index 000000000..df417dd23 --- /dev/null +++ b/plugins/talk-plugin-permalink/client/components/styles.css @@ -0,0 +1,66 @@ +.container { + border-radius: 3px; + padding: 15px 10px; + box-sizing: border-box; + border: solid 1px rgba(153, 153, 153, 0.33); + left: 0; + width: 100%; + z-index: 10; +} +.container::before { + content: ''; + border: 10px solid transparent; + border-top-color: white; + position: absolute; + right: 7em; + bottom: -20px; + z-index: 2; +} + +.container::after{ + content: ''; + border: 10px solid transparent; + border-top-color: rgba(153, 153, 153, 0.33); + position: absolute; + right: 7em; + bottom: -21px; + z-index: 1; +} + +.input { + display: inline-block; + width: calc(100% - 78px); + padding: 8px; + border-radius: 3px; + border: solid 1px #e0e0e0; + height: 32px; + box-sizing: border-box; + font-size: 1em; +} + +.button { + display: inline-block; + float: right; + box-sizing: border-box; + margin: 0; + background-color: #e0e0e0; + font-size: 1em; + width: auto; + height: auto; + padding: 2px; + transition: background-color 0.4s ease; +} + +.button:hover{ + color: black; +} + +.button.success { + background-color: #00897B; + color: white; +} + +.button.failure { + background-color: #FF5252; + color: white; +} diff --git a/plugins/talk-plugin-permalink/client/index.js b/plugins/talk-plugin-permalink/client/index.js new file mode 100644 index 000000000..d413da870 --- /dev/null +++ b/plugins/talk-plugin-permalink/client/index.js @@ -0,0 +1,7 @@ +import PermalinkButton from './components/PermalinkButton'; + +export default { + slots: { + commentActions: [PermalinkButton] + } +}; diff --git a/plugins/talk-plugin-permalink/index.js b/plugins/talk-plugin-permalink/index.js new file mode 100644 index 000000000..f053ebf79 --- /dev/null +++ b/plugins/talk-plugin-permalink/index.js @@ -0,0 +1 @@ +module.exports = {}; diff --git a/plugins/talk-plugin-permalink/package.json b/plugins/talk-plugin-permalink/package.json new file mode 100644 index 000000000..0d1f1e6ba --- /dev/null +++ b/plugins/talk-plugin-permalink/package.json @@ -0,0 +1,11 @@ +{ + "name": "coral-plugin-permalink", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC" +} From b00d2f569eef91bce6dae967a175ef9d7d372b04 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Mon, 26 Jun 2017 16:01:07 -0300 Subject: [PATCH 4/7] Removing styles from default.css --- client/coral-embed-stream/style/default.css | 27 ------------------- .../client/components/PermalinkButton.js | 7 ++--- .../client/components/styles.css | 18 ++++++++++--- 3 files changed, 19 insertions(+), 33 deletions(-) diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css index 701a06fd5..a752493a3 100644 --- a/client/coral-embed-stream/style/default.css +++ b/client/coral-embed-stream/style/default.css @@ -335,33 +335,6 @@ button.comment__action-button[disabled], display: inline-block; } -.coral-plugin-permalinks-container { - /*position: relative;*/ - z-index: 2; -} - -.coral-plugin-permalinks-popover { - display: none; - background-color: white; - border: 1px solid black; - position: absolute; - padding: 5px; -} - -.coral-plugin-permalinks-popover.active { - display: block; -} - -.coral-plugin-permalinks-copy-field { - display: block; - width: calc(100% - 5px); -} - -.coral-plugin-permalinks-copied-text { - float: right; - margin: 8px; -} - /* Flag Styles */ .coral-plugin-flags-popup-form { diff --git a/plugins/talk-plugin-permalink/client/components/PermalinkButton.js b/plugins/talk-plugin-permalink/client/components/PermalinkButton.js index b4dd190d8..6a92d69ce 100644 --- a/plugins/talk-plugin-permalink/client/components/PermalinkButton.js +++ b/plugins/talk-plugin-permalink/client/components/PermalinkButton.js @@ -61,7 +61,7 @@ export default class PermalinkButton extends React.Component { const {asset} = this.props; return ( -
+
+
this.popover = ref} - className={cn([`${name}-popover`, styles.container, {active: popoverOpen}])}> + className={cn([`${name}-popover`, styles.popover, {[styles.active]: popoverOpen}])}> this.permalinkInput = input} - value={`${asset.url}#${this.props.commentId}`} + defaultValue={`${asset.url}#${this.props.commentId}`} />
Date: Mon, 26 Jun 2017 16:26:05 -0300 Subject: [PATCH 7/7] renamed to talk --- plugins/talk-plugin-permalink/package.json | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/plugins/talk-plugin-permalink/package.json b/plugins/talk-plugin-permalink/package.json index 0d1f1e6ba..fefeb9f16 100644 --- a/plugins/talk-plugin-permalink/package.json +++ b/plugins/talk-plugin-permalink/package.json @@ -1,11 +1,8 @@ { - "name": "coral-plugin-permalink", + "name": "talk-plugin-permalink", "version": "1.0.0", "description": "", "main": "index.js", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, "author": "", "license": "ISC" }