diff --git a/package-lock.json b/package-lock.json index c6dd91c93..c8a6caf98 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1612,7 +1612,6 @@ "version": "16.4.2", "resolved": "https://registry.npmjs.org/@types/react/-/react-16.4.2.tgz", "integrity": "sha512-oVcVteCDNiVc/fkDjowRfAZQDEOR76j3CJ3FvwXNvfV6zJguhghy1lMgpAzYox+9AZsWch+JPV6Imml3wvIUeg==", - "dev": true, "requires": { "csstype": "^2.2.0" } @@ -1641,6 +1640,14 @@ "@types/react": "*" } }, + "@types/react-tooltip": { + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/@types/react-tooltip/-/react-tooltip-3.3.5.tgz", + "integrity": "sha512-wpWzjtMWBPymIoYjqZTeWX1v5dJe4V1akmcTM6iZwSS/cL8jdi6dFt4BoLXDOxgL5tEe/9yVBlQD+MAYvexBfw==", + "requires": { + "@types/react": "*" + } + }, "@types/recompose": { "version": "0.26.1", "resolved": "https://registry.npmjs.org/@types/recompose/-/recompose-0.26.1.tgz", @@ -2050,6 +2057,14 @@ "acorn": "^5.0.0" } }, + "add-dom-event-listener": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/add-dom-event-listener/-/add-dom-event-listener-1.0.2.tgz", + "integrity": "sha1-j67SxBAIchzxEdodMNmVuFvkK+0=", + "requires": { + "object-assign": "4.x" + } + }, "address": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/address/-/address-1.0.3.tgz", @@ -4166,7 +4181,6 @@ "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=", - "dev": true, "requires": { "core-js": "^2.4.0", "regenerator-runtime": "^0.11.0" @@ -5076,8 +5090,7 @@ "classnames": { "version": "2.2.6", "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", - "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==", - "dev": true + "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" }, "clean-css": { "version": "4.1.11", @@ -5369,12 +5382,25 @@ "integrity": "sha512-MAAAIOdi2s4Gl6rZ76PNcUa9IOYB+5ICdT41o5uMRf09aEu/F9RK+qhe8RjXNPwcTjGV7KU7h2P/fljThFVqyQ==", "dev": true }, + "component-classes": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/component-classes/-/component-classes-1.2.6.tgz", + "integrity": "sha1-xkI5TDYYpNiwuJGe/Mu9kw5c1pE=", + "requires": { + "component-indexof": "0.0.3" + } + }, "component-emitter": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz", "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=", "dev": true }, + "component-indexof": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/component-indexof/-/component-indexof-0.0.3.tgz", + "integrity": "sha1-EdCRMSI5648yyPJa6csAL/6NPCQ=" + }, "compressible": { "version": "2.0.14", "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.14.tgz", @@ -5881,6 +5907,15 @@ "integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=", "dev": true }, + "css-animation": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/css-animation/-/css-animation-1.4.1.tgz", + "integrity": "sha1-W4gTEl3g+7uwu+G0cq6EIhRpt6g=", + "requires": { + "babel-runtime": "6.x", + "component-classes": "^1.2.5" + } + }, "css-color-names": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", @@ -6248,8 +6283,7 @@ "csstype": { "version": "2.5.5", "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.5.5.tgz", - "integrity": "sha512-EGMjeoiN3aqEX5u/cyH5mSdGBDGdLcCQvcEcBWNGFSPXKd9uOTIeVG91YQ22OxI44DKpvI+4C7VUSmEpsHWJaA==", - "dev": true + "integrity": "sha512-EGMjeoiN3aqEX5u/cyH5mSdGBDGdLcCQvcEcBWNGFSPXKd9uOTIeVG91YQ22OxI44DKpvI+4C7VUSmEpsHWJaA==" }, "currently-unhandled": { "version": "0.4.1", @@ -7019,6 +7053,11 @@ "webfontloader": "^1.6.28" } }, + "dom-align": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.8.0.tgz", + "integrity": "sha512-B85D4ef2Gj5lw0rK0KM2+D5/pH7yqNxg2mB+E8uzFaolpm7RQmsxEfjyEuNiF8UBBkffumYDeKRzTzc3LePP+w==" + }, "dom-converter": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.1.4.tgz", @@ -11305,8 +11344,7 @@ "js-tokens": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", - "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=", - "dev": true + "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=" }, "js-yaml": { "version": "3.12.0", @@ -11829,6 +11867,11 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz", "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==" }, + "lodash._getnative": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz", + "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=" + }, "lodash._reinterpolate": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz", @@ -11899,6 +11942,16 @@ "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=", "dev": true }, + "lodash.isarguments": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz", + "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo=" + }, + "lodash.isarray": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz", + "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=" + }, "lodash.isempty": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/lodash.isempty/-/lodash.isempty-4.4.0.tgz", @@ -12050,7 +12103,6 @@ "version": "1.3.1", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz", "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=", - "dev": true, "requires": { "js-tokens": "^3.0.0" } @@ -12939,8 +12991,7 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", - "dev": true + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" }, "object-copy": { "version": "0.1.0", @@ -15853,7 +15904,6 @@ "version": "15.6.2", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz", "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==", - "dev": true, "requires": { "loose-envify": "^1.3.1", "object-assign": "^4.1.1" @@ -16082,6 +16132,81 @@ "strip-json-comments": "~2.0.1" } }, + "rc-align": { + "version": "2.4.3", + "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-2.4.3.tgz", + "integrity": "sha512-h5KgyB5IXYR7iKpYFcMr54cuQ2eozPCZ11kbXPG5+6CWvmyJ+c0R/yjndVndiNk2G3MKcTMbJNdDv5DIckLAxQ==", + "requires": { + "babel-runtime": "^6.26.0", + "dom-align": "^1.7.0", + "prop-types": "^15.5.8", + "rc-util": "^4.0.4" + } + }, + "rc-animate": { + "version": "2.4.4", + "resolved": "https://registry.npmjs.org/rc-animate/-/rc-animate-2.4.4.tgz", + "integrity": "sha512-DjJLTUQj7XKKcuS8cczN0uOLfuSmgrVXFGieP1SZc87xUUTFGh8B/KjNmEtlfvxkSrSuVfb2rrEPER4SqKUtEA==", + "requires": { + "babel-runtime": "6.x", + "css-animation": "^1.3.2", + "prop-types": "15.x" + } + }, + "rc-tooltip": { + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-3.7.2.tgz", + "integrity": "sha512-vsF29ohlfgr7lEP12aJ5j4U/4hzqSBYjWQo8I09re+q95v1o4nDjH1q/B3qFkf9aml2FbgdkJw9KYz/zXUgApA==", + "requires": { + "babel-runtime": "6.x", + "prop-types": "^15.5.8", + "rc-trigger": "^2.2.2" + } + }, + "rc-trigger": { + "version": "2.5.4", + "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-2.5.4.tgz", + "integrity": "sha512-clgXOdazDW2qg4vTZSAExpvOuojPNuMoamG+SxAm5Ih+rpVcrtEiDlDZWY4yUHyfEWJZBzgbrr4np/z2FK6RfA==", + "requires": { + "babel-runtime": "6.x", + "classnames": "^2.2.6", + "prop-types": "15.x", + "rc-align": "^2.4.0", + "rc-animate": "2.x", + "rc-util": "^4.4.0" + } + }, + "rc-util": { + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-4.5.1.tgz", + "integrity": "sha512-PdCmHyBBodZdw6Oaikt0l+/R79IcRXpYkTrqD/Rbl4ZdoOi61t5TtEe40Q+A7rkWG5U1xjcN+h8j9H6GdtnICw==", + "requires": { + "add-dom-event-listener": "1.x", + "babel-runtime": "6.x", + "prop-types": "^15.5.10", + "shallowequal": "^0.2.2" + }, + "dependencies": { + "lodash.keys": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz", + "integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=", + "requires": { + "lodash._getnative": "^3.0.0", + "lodash.isarguments": "^3.0.0", + "lodash.isarray": "^3.0.0" + } + }, + "shallowequal": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-0.2.2.tgz", + "integrity": "sha1-HjL9W8q2rWiKSBLLDMBO/HXHAU4=", + "requires": { + "lodash.keys": "^3.1.2" + } + } + } + }, "react": { "version": "16.4.1", "resolved": "https://registry.npmjs.org/react/-/react-16.4.1.tgz", @@ -16487,6 +16612,15 @@ "react-is": "^16.4.1" } }, + "react-tooltip": { + "version": "3.6.1", + "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-3.6.1.tgz", + "integrity": "sha512-4NVjHNIx1ZazFYBNP044DHW0cr95Qaq0DSwWbrEQ7VyE8AxemHDjp0DoYvV8wilK9vR9jMlSwDW6ebRgbk3aHw==", + "requires": { + "classnames": "^2.2.5", + "prop-types": "^15.6.0" + } + }, "read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", @@ -16673,8 +16807,7 @@ "regenerator-runtime": { "version": "0.11.1", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", - "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==", - "dev": true + "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==" }, "regenerator-transform": { "version": "0.12.4", diff --git a/package.json b/package.json index 820605d35..e8082799a 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "author": "", "license": "Apache-2.0", "dependencies": { + "@types/react-tooltip": "^3.3.5", "apollo-server-express": "^1.3.6", "bunyan": "^1.8.12", "convict": "^4.3.0", @@ -45,6 +46,8 @@ "mongodb": "^3.0.10", "passport": "^0.4.0", "performance-now": "^2.1.0", + "rc-tooltip": "^3.7.2", + "react-tooltip": "^3.6.1", "subscriptions-transport-ws": "^0.9.11", "uuid": "^3.2.1" }, diff --git a/src/core/client/stream/components/Comment.css b/src/core/client/stream/components/Comment.css index d43780d8f..8e5301ecd 100644 --- a/src/core/client/stream/components/Comment.css +++ b/src/core/client/stream/components/Comment.css @@ -3,9 +3,17 @@ } .gutterBottom { - margin-bottom: calc(2px * $spacing-unit); + margin-bottom: calc(2 px * $spacing-unit); } .author { font-weight: $font-weight-medium; } + +.shareButton { + padding: 10px 0; +} + +.input { + margin-right: 5px; +} diff --git a/src/core/client/stream/components/Comment.tsx b/src/core/client/stream/components/Comment.tsx index c1b3f9303..1f4e11b1c 100644 --- a/src/core/client/stream/components/Comment.tsx +++ b/src/core/client/stream/components/Comment.tsx @@ -1,9 +1,7 @@ import cn from "classnames"; import React from "react"; import { StatelessComponent } from "react"; - -import { Typography } from "talk-ui/components"; - +import { Button, Input, Tooltip, Typography } from "talk-ui/components"; import * as styles from "./Comment.css"; export interface CommentProps { @@ -25,6 +23,20 @@ const Comment: StatelessComponent = props => { {props.author && props.author.username} {props.body} +
+ + + + + +
); }; diff --git a/src/core/client/stream/components/Permalink.tsx b/src/core/client/stream/components/Permalink.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/src/core/client/ui/components/Input/Input.css b/src/core/client/ui/components/Input/Input.css new file mode 100644 index 000000000..4d2e9e88a --- /dev/null +++ b/src/core/client/ui/components/Input/Input.css @@ -0,0 +1,11 @@ +.root { + font-family: "Source Sans Pro"; + font-weight: 400; + font-size: 16px; + letter-spacing: calc(0.57em / 16); + background: #ffffff; + border: 1px solid #979797; + box-sizing: border-box; + border-radius: 1px; + padding: 5px 20px; +} diff --git a/src/core/client/ui/components/Input/Input.tsx b/src/core/client/ui/components/Input/Input.tsx new file mode 100644 index 000000000..261b3b1af --- /dev/null +++ b/src/core/client/ui/components/Input/Input.tsx @@ -0,0 +1,14 @@ +import cn from "classnames"; +import React, { InputHTMLAttributes, StatelessComponent } from "react"; + +import * as styles from "./Input.css"; + +interface InnerProps extends InputHTMLAttributes { + classes?: typeof styles; +} + +const Input: StatelessComponent = ({ className, ...rest }) => { + return ; +}; + +export default Input; diff --git a/src/core/client/ui/components/Input/index.ts b/src/core/client/ui/components/Input/index.ts new file mode 100644 index 000000000..ae0d7a775 --- /dev/null +++ b/src/core/client/ui/components/Input/index.ts @@ -0,0 +1,2 @@ +export * from "./Input"; +export { default } from "./Input"; diff --git a/src/core/client/ui/components/Tooltip/Tooltip.css b/src/core/client/ui/components/Tooltip/Tooltip.css new file mode 100644 index 000000000..e3de3d8fe --- /dev/null +++ b/src/core/client/ui/components/Tooltip/Tooltip.css @@ -0,0 +1,14 @@ +.root { + background: #ffffff !important; + border: 1px solid #c9cacb; + box-sizing: border-box; + box-shadow: 1px 0px 4px rgba(0, 0, 0, 0.25); + border-radius: 1px; + color: #222 !important; + display: flex !important; + + &:after, + &::before { + border-top-color: transparent !important; + } +} diff --git a/src/core/client/ui/components/Tooltip/Tooltip.tsx b/src/core/client/ui/components/Tooltip/Tooltip.tsx new file mode 100644 index 000000000..dffda088a --- /dev/null +++ b/src/core/client/ui/components/Tooltip/Tooltip.tsx @@ -0,0 +1,11 @@ +import React from "react"; +import ReactTooltip from "react-tooltip"; +import * as styles from "./Tooltip.css"; + +class Tooltip extends React.Component { + public render() { + return ; + } +} + +export default Tooltip; diff --git a/src/core/client/ui/components/Tooltip/index.ts b/src/core/client/ui/components/Tooltip/index.ts new file mode 100644 index 000000000..9474b3888 --- /dev/null +++ b/src/core/client/ui/components/Tooltip/index.ts @@ -0,0 +1,2 @@ +export * from "./Tooltip"; +export { default } from "./Tooltip"; diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts index 54643cb2a..6e1fcd8a6 100644 --- a/src/core/client/ui/components/index.ts +++ b/src/core/client/ui/components/index.ts @@ -2,3 +2,5 @@ export { default as BaseButton } from "./BaseButton"; export { default as Button } from "./Button"; export { default as Center } from "./Center"; export { default as Typography } from "./Typography"; +export { default as Tooltip } from "./Tooltip"; +export { default as Input } from "./Input";