From c1956a307db8d03797bfb1ebe153ca8f5805d9cc Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Wed, 8 Aug 2018 16:30:43 +0200 Subject: [PATCH 01/16] Make readonly and add translations --- .../PermalinkButton/PermalinkButton.tsx | 2 +- .../PermalinkButton/PermalinkPopover.tsx | 10 +++++-- .../stream/components/PermalinkView.tsx | 29 ++++++++++++------- src/locales/en-US/stream.ftl | 8 +++-- 4 files changed, 31 insertions(+), 18 deletions(-) diff --git a/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx b/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx index 493625e2b..aedf477e5 100644 --- a/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx +++ b/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx @@ -60,7 +60,7 @@ class Permalink extends React.Component { share - + Share diff --git a/src/core/client/stream/components/PermalinkButton/PermalinkPopover.tsx b/src/core/client/stream/components/PermalinkButton/PermalinkPopover.tsx index 218bd78f6..9e7afcc9d 100644 --- a/src/core/client/stream/components/PermalinkButton/PermalinkPopover.tsx +++ b/src/core/client/stream/components/PermalinkButton/PermalinkPopover.tsx @@ -38,15 +38,19 @@ class PermalinkPopover extends React.Component { const { copied } = this.state; return ( - + + + + + )} + {!comment && ( + + Comment not found + )} - {!comment && Comment not found} {comment && ( diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl index 08a397cc1..1ae160503 100644 --- a/src/locales/en-US/stream.ftl +++ b/src/locales/en-US/stream.ftl @@ -6,6 +6,8 @@ comments-postCommentForm-post = Post comments-stream-loadMore = Load more comments-replyList-showAll = Show all -comments-permalink-share = Share -comments-permalink-copy = Copy -comments-permalink-copied = Copied +comments-permalinkButton-share = Share +comments-permalinkPopover-copy = Copy +comments-permalinkPopover-copied = Copied +comments-permalinkView-showAllComments = Show all comments +comments-permalinkView-commentNotFound = Comment not found From 22a0e80c669a812cbbac74b18e434babdf24543d Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Wed, 8 Aug 2018 17:14:41 +0200 Subject: [PATCH 02/16] Readd comments not found --- src/core/client/stream/components/PermalinkView.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/core/client/stream/components/PermalinkView.tsx b/src/core/client/stream/components/PermalinkView.tsx index 655108d80..4d3035b8d 100644 --- a/src/core/client/stream/components/PermalinkView.tsx +++ b/src/core/client/stream/components/PermalinkView.tsx @@ -36,6 +36,11 @@ const PermalinkView: StatelessComponent = ({ )} + {!comment && ( + + Comment not found + + )} {comment && ( From 8634647c9f4b99ca141e8733fd2c924b5e771c96 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 8 Aug 2018 13:23:20 -0300 Subject: [PATCH 03/16] Changes added --- .../client/ui/components/TextField/TextField.css | 12 ++++++++++-- .../client/ui/components/TextField/TextField.mdx | 1 + 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/core/client/ui/components/TextField/TextField.css b/src/core/client/ui/components/TextField/TextField.css index 924d6483a..eb8ac9ee9 100644 --- a/src/core/client/ui/components/TextField/TextField.css +++ b/src/core/client/ui/components/TextField/TextField.css @@ -8,7 +8,7 @@ } .colorRegular { - backgroun-color: var(--palette-common-white); + background-color: var(--palette-common-white); color: var(--palette-common-black); border: 1px solid var(--palette-grey-light); } @@ -16,10 +16,18 @@ .colorError { background-color: var(--palette-common-white); border-color: var(--palette-error-main); - border: 2px solid #FA4643; + border: 2px solid var(--palette-error-darkest); } .fullWidth { width: 100%; } +::placeholder { + font-family: var(--font-family); + font-style: normal; + font-weight: normal; + line-height: normal; + font-size: calc(16rem / var(--rem-base)); + color: var(--palette-grey-lighter); +} diff --git a/src/core/client/ui/components/TextField/TextField.mdx b/src/core/client/ui/components/TextField/TextField.mdx index 82196c778..bbfceb20d 100644 --- a/src/core/client/ui/components/TextField/TextField.mdx +++ b/src/core/client/ui/components/TextField/TextField.mdx @@ -12,6 +12,7 @@ import Flex from '../Flex' ## Basic Use + From b5d626ad8c086efc55bb822cea92af5f42a97262 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Thu, 9 Aug 2018 09:45:29 -0300 Subject: [PATCH 04/16] Updated code, and snapshots --- src/core/client/ui/components/TextField/TextField.css | 2 +- .../ValidationMessage/ValidationMessage.css | 2 +- .../ValidationMessage/ValidationMessage.spec.tsx | 1 - .../__snapshots__/ValidationMessage.spec.tsx.snap | 1 - src/core/client/ui/shared/typography.css | 11 ++++++++++- 5 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/core/client/ui/components/TextField/TextField.css b/src/core/client/ui/components/TextField/TextField.css index eb8ac9ee9..335fc3734 100644 --- a/src/core/client/ui/components/TextField/TextField.css +++ b/src/core/client/ui/components/TextField/TextField.css @@ -27,7 +27,7 @@ font-family: var(--font-family); font-style: normal; font-weight: normal; - line-height: normal; + line-height: calc(16rem / var(--rem-base)); font-size: calc(16rem / var(--rem-base)); color: var(--palette-grey-lighter); } diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.css b/src/core/client/ui/components/ValidationMessage/ValidationMessage.css index 330281ad4..b3d6a6290 100644 --- a/src/core/client/ui/components/ValidationMessage/ValidationMessage.css +++ b/src/core/client/ui/components/ValidationMessage/ValidationMessage.css @@ -1,5 +1,5 @@ .root { - composes: validationMessage from "talk-ui/shared/typography.css"; + composes: alertMessage from "talk-ui/shared/typography.css"; position: relative; display: inline-flex; justify-content: flex-start; diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.spec.tsx b/src/core/client/ui/components/ValidationMessage/ValidationMessage.spec.tsx index ddd3d343e..f336fb06e 100644 --- a/src/core/client/ui/components/ValidationMessage/ValidationMessage.spec.tsx +++ b/src/core/client/ui/components/ValidationMessage/ValidationMessage.spec.tsx @@ -8,7 +8,6 @@ import ValidationMessage from "./ValidationMessage"; it("renders correctly", () => { const props: PropTypesOf = { className: "custom", - color: "error", children: "Hello World", }; const renderer = TestRenderer.create(); diff --git a/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap b/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap index b26303e81..2a80be622 100644 --- a/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap +++ b/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap @@ -3,7 +3,6 @@ exports[`renders correctly 1`] = `
Date: Thu, 9 Aug 2018 09:50:17 -0300 Subject: [PATCH 05/16] Ordering code, alerts --- src/core/client/stream/components/Auth.tsx | 2 +- src/core/client/stream/components/Stream.tsx | 2 +- src/core/client/stream/containers/AuthContainer.tsx | 10 +++++----- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/core/client/stream/components/Auth.tsx b/src/core/client/stream/components/Auth.tsx index 04284be43..c922ef7ae 100644 --- a/src/core/client/stream/components/Auth.tsx +++ b/src/core/client/stream/components/Auth.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import { StatelessComponent } from "react"; -import { Flex, Button, Popup, Typography } from "talk-ui/components"; +import { Button, Flex, Popup, Typography } from "talk-ui/components"; interface AuthProps { open: boolean; diff --git a/src/core/client/stream/components/Stream.tsx b/src/core/client/stream/components/Stream.tsx index b543ba125..21f5a0fde 100644 --- a/src/core/client/stream/components/Stream.tsx +++ b/src/core/client/stream/components/Stream.tsx @@ -4,10 +4,10 @@ import { StatelessComponent } from "react"; import { Button, Flex } from "talk-ui/components"; +import AuthContainer from "../containers/AuthContainer"; import CommentContainer from "../containers/CommentContainer"; import PostCommentFormContainer from "../containers/PostCommentFormContainer"; import ReplyListContainer from "../containers/ReplyListContainer"; -import AuthContainer from "../containers/AuthContainer"; import * as styles from "./Stream.css"; export interface StreamProps { diff --git a/src/core/client/stream/containers/AuthContainer.tsx b/src/core/client/stream/containers/AuthContainer.tsx index 688d6627e..825e50493 100644 --- a/src/core/client/stream/containers/AuthContainer.tsx +++ b/src/core/client/stream/containers/AuthContainer.tsx @@ -3,30 +3,30 @@ import * as React from "react"; import Auth from "../components/Auth"; class AuthContainer extends React.Component { - state = { + public state = { open: false, focus: false, }; - openPopup = () => { + public openPopup = () => { this.setState({ open: true, }); }; - closePopup = () => { + public closePopup = () => { this.setState({ open: false, }); }; - setFocus = (focus: boolean) => { + public setFocus = (focus: boolean) => { this.setState({ focus, }); }; - render() { + public render() { const { open, focus } = this.state; return ( Date: Thu, 9 Aug 2018 10:04:12 -0300 Subject: [PATCH 06/16] Adding Button Underlined --- src/core/client/stream/components/Auth.css | 3 + src/core/client/stream/components/Auth.tsx | 15 +++- .../client/ui/components/Button/Button.css | 70 +++++++++++++++++++ .../client/ui/components/Button/Button.tsx | 3 +- 4 files changed, 87 insertions(+), 4 deletions(-) create mode 100644 src/core/client/stream/components/Auth.css diff --git a/src/core/client/stream/components/Auth.css b/src/core/client/stream/components/Auth.css new file mode 100644 index 000000000..aa42b9550 --- /dev/null +++ b/src/core/client/stream/components/Auth.css @@ -0,0 +1,3 @@ +.root { + padding: var(--spacing-unit) 0; +} diff --git a/src/core/client/stream/components/Auth.tsx b/src/core/client/stream/components/Auth.tsx index c922ef7ae..168b30d8d 100644 --- a/src/core/client/stream/components/Auth.tsx +++ b/src/core/client/stream/components/Auth.tsx @@ -1,5 +1,6 @@ import * as React from "react"; import { StatelessComponent } from "react"; +import * as styles from "./Auth.css"; import { Button, Flex, Popup, Typography } from "talk-ui/components"; @@ -24,12 +25,20 @@ const Auth: StatelessComponent = props => { onBlur={() => props.setFocus(false)} onClose={props.closePopup} /> - - Join the conversation | -
`; + +exports[`renders less than and great than correctly 1`] = ` + +
+ Hello World +
+ +`; From 5f4fbfc209224907c5a7aa451028dc440c438518 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Thu, 9 Aug 2018 15:03:27 -0300 Subject: [PATCH 16/16] latests --- src/core/client/auth/components/ForgotPassword.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/client/auth/components/ForgotPassword.tsx b/src/core/client/auth/components/ForgotPassword.tsx index 1c60ea9c6..4c06dcbc4 100644 --- a/src/core/client/auth/components/ForgotPassword.tsx +++ b/src/core/client/auth/components/ForgotPassword.tsx @@ -17,7 +17,7 @@ const ForgotPassword: StatelessComponent = props => { Forgot Password - + Enter your email address below and we will send you a link to reset your password.