diff --git a/.eslintignore b/.eslintignore index 8a8c3a213..3a259c106 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/talk-plugin-permalink node_modules diff --git a/.gitignore b/.gitignore index b3e0eaa73..0be1266c6 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/talk-plugin-permalink **/node_modules/* diff --git a/client/coral-admin/src/components/TagsInput.css b/client/coral-admin/src/components/TagsInput.css new file mode 100644 index 000000000..6bb630521 --- /dev/null +++ b/client/coral-admin/src/components/TagsInput.css @@ -0,0 +1,51 @@ +.root { + background-color: #fff; + border: 1px solid #ccc; + overflow: hidden; + padding-left: 5px; + padding-top: 5px; + +} + +.rootFocuesd { + border-color: rgb(142, 76, 65); +} + +.tag { + background-color: rgb(255, 220, 214); + border-radius: 2px; + border: 1px solid rgb(244, 126, 107); + color: rgb(244, 126, 107); + display: inline-block; + font-family: sans-serif; + font-size: 13px; + font-weight: 400; + margin-bottom: 5px; + margin-right: 5px; + padding: 5px; +} + +.tagRemove { + cursor: pointer; + font-weight: bold; + color: rgb(101, 24, 23); + + &::before { + content: " ×"; + } +} + +.input > input { + background: transparent; + border: 0; + color: #777; + font-family: sans-serif; + font-size: 13px; + font-weight: 400; + margin-bottom: 6px; + margin-top: 1px; + outline: none; + padding: 5px; +} + + diff --git a/client/coral-admin/src/components/TagsInput.js b/client/coral-admin/src/components/TagsInput.js new file mode 100644 index 000000000..d9854ed86 --- /dev/null +++ b/client/coral-admin/src/components/TagsInput.js @@ -0,0 +1,31 @@ +import React from 'react'; +import TagsInput from 'react-tagsinput'; +import styles from './TagsInput.css'; +import AutosizeInput from 'react-input-autosize'; + +const autosizingRenderInput = ({onChange, value, addTag: _, ...other}) => + ; + +export default (props) => { + return ( + data.split(',').map((d) => d.trim())} + className={styles.root} + focusedClassName={styles.rootFocus} + renderInput={autosizingRenderInput} + {...props} + + tagProps={{ + className: styles.tag, + classNameRemove: styles.tagRemove, + ...props.tagProps, + }} + inputProps={{ + className: styles.input, + ...props.inputProps, + }} + /> + ); +}; diff --git a/client/coral-admin/src/routes/Configure/components/Configure.css b/client/coral-admin/src/routes/Configure/components/Configure.css index 22e46518c..5b02b963a 100644 --- a/client/coral-admin/src/routes/Configure/components/Configure.css +++ b/client/coral-admin/src/routes/Configure/components/Configure.css @@ -136,13 +136,6 @@ resize: none; } -#bannedWordlist, #suspectWordlist { - display: block; - input { - width: 100%; - } -} - .customCSSInput { width: 100%; font-size: 14px; diff --git a/client/coral-admin/src/routes/Configure/components/Domainlist.js b/client/coral-admin/src/routes/Configure/components/Domainlist.js index 45790ec89..7b7565c5e 100644 --- a/client/coral-admin/src/routes/Configure/components/Domainlist.js +++ b/client/coral-admin/src/routes/Configure/components/Domainlist.js @@ -1,7 +1,7 @@ import React from 'react'; import {Card} from 'coral-ui'; import styles from './Configure.css'; -import TagsInput from 'react-tagsinput'; +import TagsInput from 'coral-admin/src/components/TagsInput'; import t from 'coral-framework/services/i18n'; const Domainlist = ({domains, onChangeDomainlist}) => { @@ -14,8 +14,6 @@ const Domainlist = ({domains, onChangeDomainlist}) => { data.split(',').map((d) => d.trim())} onChange={(tags) => onChangeDomainlist('whitelist', tags)} /> diff --git a/client/coral-admin/src/routes/Configure/components/Wordlist.js b/client/coral-admin/src/routes/Configure/components/Wordlist.js index af8c1b383..e96f37f9f 100644 --- a/client/coral-admin/src/routes/Configure/components/Wordlist.js +++ b/client/coral-admin/src/routes/Configure/components/Wordlist.js @@ -1,6 +1,6 @@ import React from 'react'; import t from 'coral-framework/services/i18n'; -import TagsInput from 'react-tagsinput'; +import TagsInput from 'coral-admin/src/components/TagsInput'; import styles from './Configure.css'; import {Card} from 'coral-ui'; @@ -13,8 +13,6 @@ const Wordlist = ({suspectWords, bannedWords, onChangeWordlist}) => ( data.split(',').map((d) => d.trim())} onChange={(tags) => onChangeWordlist('banned', tags)} /> @@ -26,8 +24,6 @@ const Wordlist = ({suspectWords, bannedWords, onChangeWordlist}) => ( data.split(',').map((d) => d.trim())} onChange={(tags) => onChangeWordlist('suspect', tags)} /> diff --git a/client/coral-admin/src/routes/Install/components/Steps/PermittedDomainsStep.js b/client/coral-admin/src/routes/Install/components/Steps/PermittedDomainsStep.js index 6741954ec..20b037890 100644 --- a/client/coral-admin/src/routes/Install/components/Steps/PermittedDomainsStep.js +++ b/client/coral-admin/src/routes/Install/components/Steps/PermittedDomainsStep.js @@ -1,7 +1,7 @@ import React from 'react'; import styles from './style.css'; import {Button, Card} from 'coral-ui'; -import TagsInput from 'react-tagsinput'; +import TagsInput from 'coral-admin/src/components/TagsInput'; import t from 'coral-framework/services/i18n'; @@ -16,9 +16,6 @@ const PermittedDomainsStep = (props) => { data.split(',').map((d) => d.trim())} onChange={(tags) => handleDomainsChange(tags)} /> diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index efa88d0dd..e7e7bb345 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.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} = this.state; - return ( - - - this.linkButton = ref} - onClick={this.toggle} - className={`${name}-button`}> - {t('permalink')} - link - - this.popover = ref} - className={`${name}-popover ${styles.container} ${this.state.popoverOpen ? 'active' : ''}`}> - this.permalinkInput = input} - value={`${this.props.articleURL}#${this.props.commentId}`} - onChange={() => {}} /> - - {!copyFailure && !copySuccessful && 'Copy'} - {copySuccessful && 'Copied'} - {copyFailure && 'Not supported'} - - - - - ); - } -} diff --git a/client/coral-plugin-permalinks/styles.css b/client/coral-plugin-permalinks/styles.css deleted file mode 100644 index a4671c685..000000000 --- a/client/coral-plugin-permalinks/styles.css +++ /dev/null @@ -1,67 +0,0 @@ -.container { - border-radius: 3px; - padding: 15px 10px; - box-sizing: border-box; - /* box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3); */ - border: solid 1px rgba(153, 153, 153, 0.33); - left: 0; - width: 100%; - - &::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/package.json b/package.json index 729358ffc..9d48f39cd 100644 --- a/package.json +++ b/package.json @@ -109,6 +109,7 @@ "passport-local": "^1.0.0", "prop-types": "^15.5.10", "react-apollo": "^1.1.0", + "react-input-autosize": "^1.1.4", "react-recaptcha": "^2.2.6", "react-toastify": "^1.5.0", "react-transition-group": "^1.1.3", @@ -195,7 +196,7 @@ "react-mdl-selectfield": "^0.2.0", "react-redux": "^4.4.5", "react-router": "^3.0.0", - "react-tagsinput": "^3.14.0", + "react-tagsinput": "^3.17.0", "redux": "^3.6.0", "redux-mock-store": "^1.2.1", "redux-thunk": "^2.1.0", diff --git a/plugin-api/beta/client/components/index.js b/plugin-api/beta/client/components/index.js index 5d76732fc..6466b9ffc 100644 --- a/plugin-api/beta/client/components/index.js +++ b/plugin-api/beta/client/components/index.js @@ -1 +1,2 @@ export {Slot} from 'coral-framework/components'; +export {default as ClickOutside} from 'coral-framework/components/ClickOutside'; 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..68406472e --- /dev/null +++ b/plugins/talk-plugin-permalink/client/components/PermalinkButton.js @@ -0,0 +1,107 @@ +import React from 'react'; +import cn from 'classnames'; +import styles from './styles.css'; +import {t} from 'plugin-api/beta/client/services'; +import {ClickOutside} from 'plugin-api/beta/client/components'; +import {Icon, Button} from 'plugin-api/beta/client/components/ui'; + +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 + }); + } + + this.timeout = window.setTimeout(() => { + this.setState({ + copyFailure: null, + copySuccessful: null + }); + }, 3000); + } + + componentWillUnmount() { + window.clearTimeout(this.timeout); + } + + render () { + const {copySuccessful, copyFailure, popoverOpen} = this.state; + const {asset} = this.props; + return ( + + + + this.linkButton = ref} + onClick={this.toggle} + className={`${name}-button`}> + {t('permalink')} + + + + this.popover = ref} + className={cn([`${name}-popover`, styles.popover, {[styles.active]: popoverOpen}])}> + + this.permalinkInput = input} + defaultValue={`${asset.url}#${this.props.commentId}`} + /> + + + {!copyFailure && !copySuccessful && 'Copy'} + {copySuccessful && 'Copied'} + {copyFailure && 'Not supported'} + + + + + + ); + } +} 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..56d069755 --- /dev/null +++ b/plugins/talk-plugin-permalink/client/components/styles.css @@ -0,0 +1,77 @@ +.popover { + display: none; + background-color: white; + position: absolute; + 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; +} +.popover::before { + content: ''; + border: 10px solid transparent; + border-top-color: white; + position: absolute; + right: 7em; + bottom: -20px; + z-index: 2; +} + +.popover::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; +} + +.container { + z-index: 2; +} + +.active { + display: block; +} \ No newline at end of file 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..fefeb9f16 --- /dev/null +++ b/plugins/talk-plugin-permalink/package.json @@ -0,0 +1,8 @@ +{ + "name": "talk-plugin-permalink", + "version": "1.0.0", + "description": "", + "main": "index.js", + "author": "", + "license": "ISC" +} diff --git a/views/admin.ejs b/views/admin.ejs index 4ef4112da..54c666395 100644 --- a/views/admin.ejs +++ b/views/admin.ejs @@ -33,58 +33,6 @@ #root > div { height: 100%; } - - /* putting this here until I can get webpack to behave */ - .react-tagsinput { - background-color: #fff; - border: 1px solid #ccc; - overflow: hidden; - padding-left: 5px; - padding-top: 5px; - } - - .react-tagsinput--focused { - border-color: rgb(142, 76, 65); - } - - .react-tagsinput-tag { - background-color: rgb(255, 220, 214); - border-radius: 2px; - border: 1px solid rgb(244, 126, 107); - color: rgb(244, 126, 107); - display: inline-block; - font-family: sans-serif; - font-size: 13px; - font-weight: 400; - margin-bottom: 5px; - margin-right: 5px; - padding: 5px; - } - - .react-tagsinput-remove { - cursor: pointer; - font-weight: bold; - color: rgb(101, 24, 23); - } - - .react-tagsinput-tag a::before { - content: " ×"; - } - - .react-tagsinput-input { - background: transparent; - border: 0; - color: #777; - font-family: sans-serif; - font-size: 13px; - font-weight: 400; - margin-bottom: 6px; - margin-top: 1px; - outline: none; - padding: 5px; - width: 90px; - } - <% if (data != null) { %> diff --git a/yarn.lock b/yarn.lock index df7efdaf8..6e8776e08 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2041,7 +2041,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.2: create-hash "^1.1.0" inherits "^2.0.1" -create-react-class@^15.5.1: +create-react-class@^15.5.1, create-react-class@^15.5.2: version "15.5.2" resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.5.2.tgz#6a8758348df660b88326a0e764d569f274aad681" dependencies: @@ -6878,6 +6878,13 @@ react-highlight-words@^0.6.0: dependencies: highlight-words-core "^1.0.2" +react-input-autosize@^1.1.4: + version "1.1.4" + resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-1.1.4.tgz#cbc45072d4084ddc57806db8e3b34e644b8366ac" + dependencies: + create-react-class "^15.5.2" + prop-types "^15.5.8" + react-linkify@^0.1.3: version "0.1.3" resolved "https://registry.yarnpkg.com/react-linkify/-/react-linkify-0.1.3.tgz#6e886180bda6c8fdc5f9f8a7ebe82fc0f48db7ad" @@ -6931,9 +6938,9 @@ react-router@^3.0.0: prop-types "^15.5.6" warning "^3.0.0" -react-tagsinput@^3.14.0: - version "3.16.1" - resolved "https://registry.yarnpkg.com/react-tagsinput/-/react-tagsinput-3.16.1.tgz#dfb3bcbe5fc4430f60c145716c17cdc2613ce117" +react-tagsinput@^3.17.0: + version "3.17.0" + resolved "https://registry.yarnpkg.com/react-tagsinput/-/react-tagsinput-3.17.0.tgz#d699bc7ff3be3492d5a3d2a57f6976908774fba3" react-toastify@^1.5.0: version "1.5.0"