wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-06 05:17:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

Permalink ui

Browse Source
This commit is contained in:
okbel
2018-07-06 23:44:29 -03:00
parent 01e14cc110
commit 89c697b18f
12 changed files with 230 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+147 -14
View File
@@ -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",
package.json
+3
View File
@@ -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"
},
src/core/client/stream/components/Comment.css
+9 -1
View File
@@ -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;
}
src/core/client/stream/components/Comment.tsx
+15 -3
View File
@@ -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<CommentProps> = props => {
{props.author && props.author.username}
</Typography>
<Typography>{props.body}</Typography>
<div className={cn("talk-comment-footer")}>
<Button
className={styles.shareButton}
data-tip
data-for="tooltip"
data-event="click"
>
Share
</Button>
<Tooltip id="tooltip" effect="solid">
<Input value="ad" className={styles.input} />
<Button primary>Copy</Button>
</Tooltip>
</div>
</div>
);
};
src/core/client/stream/components/Permalink.tsx
View File
src/core/client/ui/components/Input/Input.css
+11
View File
@@ -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;
}
src/core/client/ui/components/Input/Input.tsx
+14
View File
@@ -0,0 +1,14 @@
import cn from "classnames";
import React, { InputHTMLAttributes, StatelessComponent } from "react";
import * as styles from "./Input.css";
interface InnerProps extends InputHTMLAttributes<HTMLInputElement> {
classes?: typeof styles;
}
const Input: StatelessComponent<InnerProps> = ({ className, ...rest }) => {
return <input {...rest} className={cn(styles.root, className)} />;
};
export default Input;
src/core/client/ui/components/Input/index.ts
+2
View File
@@ -0,0 +1,2 @@
export * from "./Input";
export { default } from "./Input";
src/core/client/ui/components/Tooltip/Tooltip.css
+14
View File
@@ -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;
}
}
src/core/client/ui/components/Tooltip/Tooltip.tsx
+11
View File
@@ -0,0 +1,11 @@
import React from "react";
import ReactTooltip from "react-tooltip";
import * as styles from "./Tooltip.css";
class Tooltip extends React.Component<ReactTooltip.Props> {
public render() {
return <ReactTooltip className={styles.root} {...this.props} />;
}
}
export default Tooltip;
src/core/client/ui/components/Tooltip/index.ts
+2
View File
@@ -0,0 +1,2 @@
export * from "./Tooltip";
export { default } from "./Tooltip";
src/core/client/ui/components/index.ts
+2
View File
@@ -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";