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/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/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"