diff --git a/package-lock.json b/package-lock.json index 100de84ee..e2c77a532 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15001,9 +15001,9 @@ "dev": true }, "matchmediaquery": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.2.1.tgz", - "integrity": "sha1-IjxwBXk94D5HzpKxMoWnLEStos8=", + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.0.tgz", + "integrity": "sha512-u0dlv+VENJ+3YepvwSPBieuvnA6DWfaYa/ctwysAR13y4XLJNyt7bEVKzNj/Nvjo+50d88Pj+xL9xaSo6JmX/w==", "dev": true, "requires": { "css-mediaquery": "^0.1.2" @@ -19584,13 +19584,13 @@ } }, "react-responsive": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-4.1.0.tgz", - "integrity": "sha512-ZuDraf0qsJlyiTwzeva+foHx83IP6SIhru9o7BvMwQ4ZHjRIL5WjdgVNNrKSRbmeWO9rEJoMpabei/5lJn8KaA==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-5.0.0.tgz", + "integrity": "sha512-oEimZ0FTCC3/pjGDEBHOz06nWbBNDIbMGOdRYp6K9SBUmrqgNAX77hTiqvmRQeLyI97zz4F4kiaFRxFspDxE+w==", "dev": true, "requires": { "hyphenate-style-name": "^1.0.0", - "matchmediaquery": "^0.2.1", + "matchmediaquery": "^0.3.0", "prop-types": "^15.6.1" } }, diff --git a/package.json b/package.json index d546b9c17..afde65a13 100644 --- a/package.json +++ b/package.json @@ -176,7 +176,7 @@ "react-final-form": "^3.6.4", "react-popper": "^1.0.0-beta.6", "react-relay": "github:coralproject/patched#react-relay", - "react-responsive": "^4.1.0", + "react-responsive": "^5.0.0", "react-test-renderer": "^16.4.1", "react-timeago": "^4.1.9", "react-with-state-props": "^2.0.4", diff --git a/src/core/client/embed/index.html b/src/core/client/embed/index.html index 10106ff8c..b579dab8f 100644 --- a/src/core/client/embed/index.html +++ b/src/core/client/embed/index.html @@ -16,7 +16,7 @@

Talk 5.0 – Embed Stream

-
+
diff --git a/src/core/client/framework/lib/bootstrap/TalkContext.tsx b/src/core/client/framework/lib/bootstrap/TalkContext.tsx index 90ed10530..75ddc974c 100644 --- a/src/core/client/framework/lib/bootstrap/TalkContext.tsx +++ b/src/core/client/framework/lib/bootstrap/TalkContext.tsx @@ -2,6 +2,7 @@ import { LocalizationProvider } from "fluent-react/compat"; import { MessageContext } from "fluent/compat"; import { Child as PymChild } from "pym.js"; import React, { StatelessComponent } from "react"; +import { MediaQueryMatchers } from "react-responsive"; import { Formatter } from "react-timeago"; import { Environment } from "relay-runtime"; @@ -18,6 +19,9 @@ export interface TalkContext { /** formatter for timeago. */ timeagoFormatter?: Formatter; + /** media query values for testing purposes */ + mediaQueryValues?: MediaQueryMatchers; + /** * A way to listen for clicks that are e.g. outside of the * current frame for `ClickOutside` @@ -48,6 +52,7 @@ export const TalkContextProvider: StatelessComponent<{ value={{ timeagoFormatter: value.timeagoFormatter, registerClickFarAway: value.registerClickFarAway, + mediaQueryValues: value.mediaQueryValues, }} > {children} diff --git a/src/core/client/stream/components/Comment/TopBar.tsx b/src/core/client/stream/components/Comment/TopBar.tsx index 2dfe6419d..a82dd0a28 100644 --- a/src/core/client/stream/components/Comment/TopBar.tsx +++ b/src/core/client/stream/components/Comment/TopBar.tsx @@ -14,7 +14,7 @@ export interface TopBarProps { const TopBar: StatelessComponent = props => { const rootClassName = cn(styles.root, props.className); return ( - + {matches => ( = props => { return ( - + {matches => ( { active={visible} size="small" > - + share diff --git a/src/core/client/stream/components/UserBoxUnauthenticated.tsx b/src/core/client/stream/components/UserBoxUnauthenticated.tsx index 37a22ee0f..9d838a510 100644 --- a/src/core/client/stream/components/UserBoxUnauthenticated.tsx +++ b/src/core/client/stream/components/UserBoxUnauthenticated.tsx @@ -3,6 +3,7 @@ import React, { StatelessComponent } from "react"; import { Button, Flex, Typography } from "talk-ui/components"; +import MatchMedia from "talk-ui/components/MatchMedia"; import * as styles from "./UserBoxUnauthenticated.css"; export interface UserBoxUnauthenticatedProps { @@ -15,18 +16,20 @@ const UserBoxUnauthenticated: StatelessComponent< > = props => { return ( - - - Join the conversation + + + + Join the conversation + + + + | - - - | - +