mirror of
https://github.com/wassname/talk.git
synced 2026-07-02 14:49:50 +08:00
Add UserBox
This commit is contained in:
Chi Vinh Le
@@ -6,6 +6,12 @@
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
:global {
|
||||
body {
|
||||
margin: "0";
|
||||
padding: 2px;
|
||||
|
||||
/* Support for all WebKit browsers. */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
.root {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
composes: bodyCopy from "talk-ui/shared/typography.css";
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@ export interface PostCommentFormProps {
|
||||
const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
|
||||
<Form onSubmit={props.onSubmit}>
|
||||
{({ handleSubmit, submitting }) => (
|
||||
<form autoComplete="off" onSubmit={handleSubmit}>
|
||||
<form autoComplete="off" onSubmit={handleSubmit} className={styles.root}>
|
||||
<Field name="body" validate={required}>
|
||||
{({ input, meta }) => (
|
||||
<div>
|
||||
|
||||
@@ -7,6 +7,7 @@ import { Button, Flex } from "talk-ui/components";
|
||||
import CommentContainer from "../containers/CommentContainer";
|
||||
import PostCommentFormContainer from "../containers/PostCommentFormContainer";
|
||||
import ReplyListContainer from "../containers/ReplyListContainer";
|
||||
import UserBoxContainer from "../containers/UserBoxContainer";
|
||||
import * as styles from "./Stream.css";
|
||||
|
||||
export interface StreamProps {
|
||||
@@ -20,7 +21,8 @@ export interface StreamProps {
|
||||
|
||||
const Stream: StatelessComponent<StreamProps> = props => {
|
||||
return (
|
||||
<div className={styles.root}>
|
||||
<Flex className={styles.root} direction="column" itemGutter>
|
||||
<UserBoxContainer />
|
||||
<PostCommentFormContainer assetID={props.assetID} />
|
||||
<Flex
|
||||
direction="column"
|
||||
@@ -50,7 +52,7 @@ const Stream: StatelessComponent<StreamProps> = props => {
|
||||
</Localized>
|
||||
)}
|
||||
</Flex>
|
||||
</div>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
.joinText {
|
||||
margin-right: var(--spacing-unit);
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import React, { StatelessComponent } from "react";
|
||||
|
||||
import { Button, Flex, Typography } from "talk-ui/components";
|
||||
|
||||
import * as styles from "./UserBox.css";
|
||||
|
||||
export interface UserBoxProps {
|
||||
onSignIn: () => void;
|
||||
onRegister: () => void;
|
||||
}
|
||||
|
||||
const UserBox: StatelessComponent<UserBoxProps> = props => {
|
||||
return (
|
||||
<Flex>
|
||||
<Typography
|
||||
className={styles.joinText}
|
||||
variant="bodyCopyBold"
|
||||
component="span"
|
||||
>
|
||||
Join the conversation
|
||||
</Typography>
|
||||
<Typography variant="bodyCopyBold" component="span">
|
||||
|
|
||||
</Typography>
|
||||
<Button color="primary" size="small" onClick={props.onSignIn}>
|
||||
Sign In
|
||||
</Button>
|
||||
<Button
|
||||
color="primary"
|
||||
size="small"
|
||||
variant="outlined"
|
||||
onClick={props.onRegister}
|
||||
>
|
||||
Register
|
||||
</Button>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserBox;
|
||||
@@ -1,9 +1,12 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders correctly 1`] = `
|
||||
<div
|
||||
<withPropsOnChange(Flex)
|
||||
className="Stream-root"
|
||||
direction="column"
|
||||
itemGutter={true}
|
||||
>
|
||||
<withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(UserBoxContainer)))))) />
|
||||
<withContext(createMutationContainer(PostCommentFormContainer))
|
||||
assetID="asset-id"
|
||||
/>
|
||||
@@ -55,13 +58,16 @@ exports[`renders correctly 1`] = `
|
||||
/>
|
||||
</withPropsOnChange(Flex)>
|
||||
</withPropsOnChange(Flex)>
|
||||
</div>
|
||||
</withPropsOnChange(Flex)>
|
||||
`;
|
||||
|
||||
exports[`when there is more disables load more button 1`] = `
|
||||
<div
|
||||
<withPropsOnChange(Flex)
|
||||
className="Stream-root"
|
||||
direction="column"
|
||||
itemGutter={true}
|
||||
>
|
||||
<withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(UserBoxContainer)))))) />
|
||||
<withContext(createMutationContainer(PostCommentFormContainer))
|
||||
assetID="asset-id"
|
||||
/>
|
||||
@@ -127,13 +133,16 @@ exports[`when there is more disables load more button 1`] = `
|
||||
</withPropsOnChange(Button)>
|
||||
</Localized>
|
||||
</withPropsOnChange(Flex)>
|
||||
</div>
|
||||
</withPropsOnChange(Flex)>
|
||||
`;
|
||||
|
||||
exports[`when there is more renders a load more button 1`] = `
|
||||
<div
|
||||
<withPropsOnChange(Flex)
|
||||
className="Stream-root"
|
||||
direction="column"
|
||||
itemGutter={true}
|
||||
>
|
||||
<withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(UserBoxContainer)))))) />
|
||||
<withContext(createMutationContainer(PostCommentFormContainer))
|
||||
assetID="asset-id"
|
||||
/>
|
||||
@@ -199,5 +208,5 @@ exports[`when there is more renders a load more button 1`] = `
|
||||
</withPropsOnChange(Button)>
|
||||
</Localized>
|
||||
</withPropsOnChange(Flex)>
|
||||
</div>
|
||||
</withPropsOnChange(Flex)>
|
||||
`;
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
import * as React from "react";
|
||||
import { Component } from "react";
|
||||
|
||||
import { graphql, withLocalStateContainer } from "talk-framework/lib/relay";
|
||||
import { UserBoxContainerLocal as Local } from "talk-stream/__generated__/UserBoxContainerLocal.graphql";
|
||||
import {
|
||||
SetAuthPopupStateMutation,
|
||||
ShowAuthPopupMutation,
|
||||
withSetAuthPopupStateMutation,
|
||||
withShowAuthPopupMutation,
|
||||
} from "talk-stream/mutations";
|
||||
import { Popup } from "talk-ui/components";
|
||||
|
||||
import UserBox from "../components/UserBox";
|
||||
|
||||
interface InnerProps {
|
||||
local: Local;
|
||||
showAuthPopup: ShowAuthPopupMutation;
|
||||
setAuthPopupState: SetAuthPopupStateMutation;
|
||||
}
|
||||
|
||||
class UserBoxContainer extends Component<InnerProps> {
|
||||
private handleFocus = () => this.props.setAuthPopupState({ focus: true });
|
||||
private handleBlur = () => this.props.setAuthPopupState({ focus: false });
|
||||
private handleClose = () => this.props.setAuthPopupState({ open: false });
|
||||
private handleSignIn = () => this.props.showAuthPopup({ view: "SIGN_IN" });
|
||||
private handleRegister = () => this.props.showAuthPopup({ view: "SIGN_UP" });
|
||||
|
||||
public render() {
|
||||
const {
|
||||
local: {
|
||||
authPopup: { open, focus, view },
|
||||
},
|
||||
} = this.props;
|
||||
return (
|
||||
<>
|
||||
<Popup
|
||||
href={`/auth.html?view=${view}`}
|
||||
title="Talk Auth"
|
||||
features="menubar=0,resizable=0,width=500,height=550,top=200,left=500"
|
||||
open={open}
|
||||
focus={focus}
|
||||
onFocus={this.handleFocus}
|
||||
onBlur={this.handleBlur}
|
||||
onClose={this.handleClose}
|
||||
/>
|
||||
<UserBox
|
||||
onSignIn={this.handleSignIn}
|
||||
onRegister={this.handleRegister}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const enhanced = withSetAuthPopupStateMutation(
|
||||
withShowAuthPopupMutation(
|
||||
withLocalStateContainer<Local>(
|
||||
graphql`
|
||||
fragment UserBoxContainerLocal on Local {
|
||||
authPopup {
|
||||
open
|
||||
focus
|
||||
view
|
||||
}
|
||||
}
|
||||
`
|
||||
)(UserBoxContainer)
|
||||
)
|
||||
);
|
||||
|
||||
export default enhanced;
|
||||
@@ -4,3 +4,6 @@
|
||||
|
||||
export const NETWORK_TYPE = "Network";
|
||||
export const NETWORK_ID = "client:root.local.network";
|
||||
|
||||
export const AUTH_POPUP_TYPE = "AuthPopup";
|
||||
export const AUTH_POPUP_ID = "client:root.local.authPopup";
|
||||
|
||||
@@ -7,7 +7,12 @@ import {
|
||||
LOCAL_TYPE,
|
||||
} from "talk-framework/lib/relay";
|
||||
|
||||
import { NETWORK_ID, NETWORK_TYPE } from "./constants";
|
||||
import {
|
||||
AUTH_POPUP_ID,
|
||||
AUTH_POPUP_TYPE,
|
||||
NETWORK_ID,
|
||||
NETWORK_TYPE,
|
||||
} from "./constants";
|
||||
|
||||
/**
|
||||
* Initializes the local state, before we start the App.
|
||||
@@ -18,6 +23,7 @@ export default async function initLocalState(environment: Environment) {
|
||||
|
||||
// Create the Local Record which is the Root for the client states.
|
||||
const localRecord = createAndRetain(environment, s, LOCAL_ID, LOCAL_TYPE);
|
||||
root.setLinkedRecord(localRecord, "local");
|
||||
|
||||
// Parse query params
|
||||
const query = qs.parse(location.search);
|
||||
@@ -47,6 +53,17 @@ export default async function initLocalState(environment: Environment) {
|
||||
);
|
||||
networkRecord.setValue(false, "isOffline");
|
||||
localRecord.setLinkedRecord(networkRecord, "network");
|
||||
root.setLinkedRecord(localRecord, "local");
|
||||
|
||||
// Create authPopup Record
|
||||
const authPopupRecord = createAndRetain(
|
||||
environment,
|
||||
s,
|
||||
AUTH_POPUP_ID,
|
||||
AUTH_POPUP_TYPE
|
||||
);
|
||||
authPopupRecord.setValue(false, "open");
|
||||
authPopupRecord.setValue(false, "focus");
|
||||
authPopupRecord.setValue("", "href");
|
||||
localRecord.setLinkedRecord(authPopupRecord, "authPopup");
|
||||
});
|
||||
}
|
||||
|
||||
@@ -3,11 +3,24 @@ type Network {
|
||||
isOffline: Boolean!
|
||||
}
|
||||
|
||||
enum View {
|
||||
SIGN_UP
|
||||
SIGN_IN
|
||||
FORGOT_PASSWORD
|
||||
}
|
||||
|
||||
type AuthPopup {
|
||||
open: Boolean!
|
||||
focus: Boolean!
|
||||
view: View
|
||||
}
|
||||
|
||||
type Local {
|
||||
network: Network!
|
||||
assetID: String
|
||||
commentID: String
|
||||
assetURL: String
|
||||
commentID: String
|
||||
authPopup: AuthPopup!
|
||||
}
|
||||
|
||||
extend type Query {
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
import { Environment, RecordSource } from "relay-runtime";
|
||||
|
||||
import { createRelayEnvironment } from "talk-framework/testHelpers";
|
||||
|
||||
import { AUTH_POPUP_ID, AUTH_POPUP_TYPE } from "../local";
|
||||
import { commit } from "./SetAuthPopupStateMutation";
|
||||
|
||||
let environment: Environment;
|
||||
const source: RecordSource = new RecordSource();
|
||||
|
||||
beforeAll(() => {
|
||||
environment = createRelayEnvironment({
|
||||
source,
|
||||
initLocalState: (localRecord, sourceProxy) => {
|
||||
const record = sourceProxy.create(AUTH_POPUP_ID, AUTH_POPUP_TYPE);
|
||||
record.setValue(false, "open");
|
||||
record.setValue(false, "focus");
|
||||
localRecord.setLinkedRecord(record, "authPopup");
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it("sets state", () => {
|
||||
commit(environment, { open: true, focus: false });
|
||||
expect(source.get(AUTH_POPUP_ID)!.open).toEqual(true);
|
||||
expect(source.get(AUTH_POPUP_ID)!.focus).toEqual(false);
|
||||
});
|
||||
|
||||
it("sets state", () => {
|
||||
commit(environment, {
|
||||
open: false,
|
||||
focus: true,
|
||||
href: "https://coralproject.net",
|
||||
});
|
||||
expect(source.get(AUTH_POPUP_ID)!.open).toEqual(false);
|
||||
expect(source.get(AUTH_POPUP_ID)!.focus).toEqual(true);
|
||||
expect(source.get(AUTH_POPUP_ID)!.href).toEqual("https://coralproject.net");
|
||||
});
|
||||
|
||||
it("keep previous state", () => {
|
||||
commit(environment, { open: false, focus: true });
|
||||
commit(environment, {});
|
||||
expect(source.get(AUTH_POPUP_ID)!.open).toEqual(false);
|
||||
expect(source.get(AUTH_POPUP_ID)!.focus).toEqual(true);
|
||||
});
|
||||
|
||||
it("change only one", () => {
|
||||
commit(environment, { open: false, focus: true });
|
||||
commit(environment, { open: true });
|
||||
expect(source.get(AUTH_POPUP_ID)!.open).toEqual(true);
|
||||
expect(source.get(AUTH_POPUP_ID)!.focus).toEqual(true);
|
||||
});
|
||||
@@ -0,0 +1,38 @@
|
||||
import { commitLocalUpdate, Environment } from "relay-runtime";
|
||||
|
||||
import { createMutationContainer } from "talk-framework/lib/relay";
|
||||
|
||||
import { AUTH_POPUP_ID } from "../local";
|
||||
|
||||
export interface SetAuthPopupStateInput {
|
||||
open?: boolean;
|
||||
focus?: boolean;
|
||||
href?: string;
|
||||
}
|
||||
|
||||
export type SetAuthPopupStateMutation = (
|
||||
input: SetAuthPopupStateInput
|
||||
) => Promise<void>;
|
||||
|
||||
export async function commit(
|
||||
environment: Environment,
|
||||
input: SetAuthPopupStateInput
|
||||
) {
|
||||
return commitLocalUpdate(environment, store => {
|
||||
const record = store.get(AUTH_POPUP_ID)!;
|
||||
if (input.open !== undefined) {
|
||||
record.setValue(input.open, "open");
|
||||
}
|
||||
if (input.focus !== undefined) {
|
||||
record.setValue(input.focus, "focus");
|
||||
}
|
||||
if (input.href !== undefined) {
|
||||
record.setValue(input.href, "href");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export const withSetAuthPopupStateMutation = createMutationContainer(
|
||||
"setAuthPopupState",
|
||||
commit
|
||||
);
|
||||
@@ -3,7 +3,6 @@ import { Environment, RecordSource } from "relay-runtime";
|
||||
import { createRelayEnvironment } from "talk-framework/testHelpers";
|
||||
|
||||
import { NETWORK_ID, NETWORK_TYPE } from "../local";
|
||||
|
||||
import { commit } from "./SetNetworkStatusMutation";
|
||||
|
||||
let environment: Environment;
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
import { Environment, RecordSource } from "relay-runtime";
|
||||
|
||||
import { createRelayEnvironment } from "talk-framework/testHelpers";
|
||||
|
||||
import { AUTH_POPUP_ID, AUTH_POPUP_TYPE } from "../local";
|
||||
import { commit } from "./ShowAuthPopupMutation";
|
||||
|
||||
let environment: Environment;
|
||||
const source: RecordSource = new RecordSource();
|
||||
|
||||
beforeAll(() => {
|
||||
environment = createRelayEnvironment({
|
||||
source,
|
||||
initLocalState: (localRecord, sourceProxy) => {
|
||||
const record = sourceProxy.create(AUTH_POPUP_ID, AUTH_POPUP_TYPE);
|
||||
record.setValue(false, "open");
|
||||
record.setValue(false, "focus");
|
||||
localRecord.setLinkedRecord(record, "authPopup");
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it("opens popup", () => {
|
||||
commit(environment, { view: "SIGN_IN" });
|
||||
expect(source.get(AUTH_POPUP_ID)!.open).toEqual(true);
|
||||
expect(source.get(AUTH_POPUP_ID)!.focus).toEqual(false);
|
||||
expect(source.get(AUTH_POPUP_ID)!.view).toEqual("SIGN_IN");
|
||||
});
|
||||
|
||||
it("focuses popup", () => {
|
||||
commit(environment, { view: "SIGN_IN" });
|
||||
expect(source.get(AUTH_POPUP_ID)!.open).toEqual(true);
|
||||
expect(source.get(AUTH_POPUP_ID)!.focus).toEqual(true);
|
||||
expect(source.get(AUTH_POPUP_ID)!.view).toEqual("SIGN_IN");
|
||||
});
|
||||
|
||||
it("only change view when opened and focused", () => {
|
||||
commit(environment, { view: "FORGOT_PASSWORD" });
|
||||
expect(source.get(AUTH_POPUP_ID)!.open).toEqual(true);
|
||||
expect(source.get(AUTH_POPUP_ID)!.focus).toEqual(true);
|
||||
expect(source.get(AUTH_POPUP_ID)!.view).toEqual("FORGOT_PASSWORD");
|
||||
});
|
||||
@@ -0,0 +1,36 @@
|
||||
import { commitLocalUpdate, Environment } from "relay-runtime";
|
||||
|
||||
import { createMutationContainer } from "talk-framework/lib/relay";
|
||||
|
||||
import { AUTH_POPUP_ID } from "../local";
|
||||
|
||||
export interface ShowAuthPopupInput {
|
||||
view: "SIGN_IN" | "SIGN_UP" | "FORGOT_PASSWORD";
|
||||
}
|
||||
|
||||
export type ShowAuthPopupMutation = (
|
||||
input: ShowAuthPopupInput
|
||||
) => Promise<void>;
|
||||
|
||||
export async function commit(
|
||||
environment: Environment,
|
||||
input: ShowAuthPopupInput
|
||||
) {
|
||||
return commitLocalUpdate(environment, store => {
|
||||
const record = store.get(AUTH_POPUP_ID)!;
|
||||
record.setValue(input.view, "view");
|
||||
if (!record.getValue("open")) {
|
||||
record.setValue(true, "open");
|
||||
return;
|
||||
}
|
||||
if (!record.getValue("focus")) {
|
||||
record.setValue(true, "focus");
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export const withShowAuthPopupMutation = createMutationContainer(
|
||||
"showAuthPopup",
|
||||
commit
|
||||
);
|
||||
@@ -13,3 +13,11 @@ export {
|
||||
SetCommentIDMutation,
|
||||
SetCommentIDInput,
|
||||
} from "./SetCommentIDMutation";
|
||||
export {
|
||||
withShowAuthPopupMutation,
|
||||
ShowAuthPopupMutation,
|
||||
} from "./ShowAuthPopupMutation";
|
||||
export {
|
||||
withSetAuthPopupStateMutation,
|
||||
SetAuthPopupStateMutation,
|
||||
} from "./SetAuthPopupStateMutation";
|
||||
|
||||
@@ -5,10 +5,49 @@ exports[`loads more comments 1`] = `
|
||||
className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
|
||||
>
|
||||
<div
|
||||
className="Stream-root"
|
||||
className="Flex-root Stream-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<div
|
||||
className="Flex-root Flex-alignCenter"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBox-joinText"
|
||||
>
|
||||
Join the conversation
|
||||
</span>
|
||||
<span
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
|
||||
>
|
||||
|
|
||||
</span>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
<form
|
||||
autoComplete="off"
|
||||
className="PostCommentForm-root"
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<div>
|
||||
@@ -148,10 +187,49 @@ exports[`renders comment stream 1`] = `
|
||||
className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
|
||||
>
|
||||
<div
|
||||
className="Stream-root"
|
||||
className="Flex-root Stream-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<div
|
||||
className="Flex-root Flex-alignCenter"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBox-joinText"
|
||||
>
|
||||
Join the conversation
|
||||
</span>
|
||||
<span
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
|
||||
>
|
||||
|
|
||||
</span>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
<form
|
||||
autoComplete="off"
|
||||
className="PostCommentForm-root"
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<div>
|
||||
|
||||
@@ -61,10 +61,49 @@ exports[`show all comments 1`] = `
|
||||
className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
|
||||
>
|
||||
<div
|
||||
className="Stream-root"
|
||||
className="Flex-root Stream-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<div
|
||||
className="Flex-root Flex-alignCenter"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBox-joinText"
|
||||
>
|
||||
Join the conversation
|
||||
</span>
|
||||
<span
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
|
||||
>
|
||||
|
|
||||
</span>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
<form
|
||||
autoComplete="off"
|
||||
className="PostCommentForm-root"
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<div>
|
||||
|
||||
+40
-1
@@ -34,10 +34,49 @@ exports[`show all comments 1`] = `
|
||||
className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
|
||||
>
|
||||
<div
|
||||
className="Stream-root"
|
||||
className="Flex-root Stream-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<div
|
||||
className="Flex-root Flex-alignCenter"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBox-joinText"
|
||||
>
|
||||
Join the conversation
|
||||
</span>
|
||||
<span
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
|
||||
>
|
||||
|
|
||||
</span>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
<form
|
||||
autoComplete="off"
|
||||
className="PostCommentForm-root"
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<div>
|
||||
|
||||
@@ -5,10 +5,49 @@ exports[`renders comment stream 1`] = `
|
||||
className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
|
||||
>
|
||||
<div
|
||||
className="Stream-root"
|
||||
className="Flex-root Stream-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<div
|
||||
className="Flex-root Flex-alignCenter"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBox-joinText"
|
||||
>
|
||||
Join the conversation
|
||||
</span>
|
||||
<span
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
|
||||
>
|
||||
|
|
||||
</span>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
<form
|
||||
autoComplete="off"
|
||||
className="PostCommentForm-root"
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<div>
|
||||
|
||||
@@ -5,10 +5,49 @@ exports[`renders comment stream 1`] = `
|
||||
className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
|
||||
>
|
||||
<div
|
||||
className="Stream-root"
|
||||
className="Flex-root Stream-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<div
|
||||
className="Flex-root Flex-alignCenter"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBox-joinText"
|
||||
>
|
||||
Join the conversation
|
||||
</span>
|
||||
<span
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
|
||||
>
|
||||
|
|
||||
</span>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
<form
|
||||
autoComplete="off"
|
||||
className="PostCommentForm-root"
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<div>
|
||||
|
||||
@@ -5,10 +5,49 @@ exports[`renders comment stream 1`] = `
|
||||
className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
|
||||
>
|
||||
<div
|
||||
className="Stream-root"
|
||||
className="Flex-root Stream-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<div
|
||||
className="Flex-root Flex-alignCenter"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBox-joinText"
|
||||
>
|
||||
Join the conversation
|
||||
</span>
|
||||
<span
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
|
||||
>
|
||||
|
|
||||
</span>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
<form
|
||||
autoComplete="off"
|
||||
className="PostCommentForm-root"
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<div>
|
||||
@@ -137,10 +176,49 @@ exports[`show all replies 1`] = `
|
||||
className="Flex-root App-root Flex-justifyCenter Flex-alignCenter"
|
||||
>
|
||||
<div
|
||||
className="Stream-root"
|
||||
className="Flex-root Stream-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
|
||||
>
|
||||
<div
|
||||
className="Flex-root Flex-alignCenter"
|
||||
>
|
||||
<span
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBox-joinText"
|
||||
>
|
||||
Join the conversation
|
||||
</span>
|
||||
<span
|
||||
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
|
||||
>
|
||||
|
|
||||
</span>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
<button
|
||||
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
>
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
<form
|
||||
autoComplete="off"
|
||||
className="PostCommentForm-root"
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<div>
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
import { IResolvers } from "graphql-tools";
|
||||
import { Environment, RecordProxy, RecordSourceProxy } from "relay-runtime";
|
||||
import { createRelayEnvironment } from "talk-framework/testHelpers";
|
||||
import { AUTH_POPUP_ID, AUTH_POPUP_TYPE } from "talk-stream/local";
|
||||
|
||||
interface CreateEnvironmentParams {
|
||||
logNetwork?: boolean;
|
||||
resolvers: IResolvers<any, any>;
|
||||
initLocalState?: (
|
||||
local: RecordProxy,
|
||||
source: RecordSourceProxy,
|
||||
environment: Environment
|
||||
) => void;
|
||||
}
|
||||
|
||||
export default function createEnvironment(params: CreateEnvironmentParams) {
|
||||
return createRelayEnvironment({
|
||||
network: {
|
||||
logNetwork: params.logNetwork,
|
||||
resolvers: params.resolvers,
|
||||
projectName: "tenant",
|
||||
},
|
||||
initLocalState: (localRecord, source, environment) => {
|
||||
const authPopupRecord = source.create(AUTH_POPUP_ID, AUTH_POPUP_TYPE);
|
||||
authPopupRecord.setValue(false, "open");
|
||||
authPopupRecord.setValue(false, "focus");
|
||||
authPopupRecord.setValue("", "href");
|
||||
localRecord.setLinkedRecord(authPopupRecord, "authPopup");
|
||||
if (params.initLocalState) {
|
||||
params.initLocalState(localRecord, source, environment);
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -1,13 +1,12 @@
|
||||
import React from "react";
|
||||
import TestRenderer from "react-test-renderer";
|
||||
import { RecordProxy } from "relay-runtime";
|
||||
import sinon from "sinon";
|
||||
|
||||
import { timeout } from "talk-common/utils";
|
||||
import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
|
||||
import { createRelayEnvironment } from "talk-framework/testHelpers";
|
||||
import AppContainer from "talk-stream/containers/AppContainer";
|
||||
|
||||
import createEnvironment from "./createEnvironment";
|
||||
import { assets, comments } from "./fixtures";
|
||||
|
||||
const connectionStub = sinon.stub().throws();
|
||||
@@ -61,14 +60,11 @@ const resolvers = {
|
||||
},
|
||||
};
|
||||
|
||||
const environment = createRelayEnvironment({
|
||||
network: {
|
||||
// Set this to true, to see graphql responses.
|
||||
logNetwork: false,
|
||||
resolvers,
|
||||
projectName: "tenant",
|
||||
},
|
||||
initLocalState: (localRecord: RecordProxy) => {
|
||||
const environment = createEnvironment({
|
||||
// Set this to true, to see graphql responses.
|
||||
logNetwork: false,
|
||||
resolvers,
|
||||
initLocalState: (localRecord, source) => {
|
||||
localRecord.setValue(assetStub.id, "assetID");
|
||||
},
|
||||
});
|
||||
|
||||
@@ -5,9 +5,9 @@ import sinon from "sinon";
|
||||
|
||||
import { timeout } from "talk-common/utils";
|
||||
import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
|
||||
import { createRelayEnvironment } from "talk-framework/testHelpers";
|
||||
import AppContainer from "talk-stream/containers/AppContainer";
|
||||
|
||||
import createEnvironment from "./createEnvironment";
|
||||
import { assets, comments } from "./fixtures";
|
||||
|
||||
const commentStub = {
|
||||
@@ -44,13 +44,10 @@ const resolvers = {
|
||||
},
|
||||
};
|
||||
|
||||
const environment = createRelayEnvironment({
|
||||
network: {
|
||||
// Set this to true, to see graphql responses.
|
||||
logNetwork: false,
|
||||
resolvers,
|
||||
projectName: "tenant",
|
||||
},
|
||||
const environment = createEnvironment({
|
||||
// Set this to true, to see graphql responses.
|
||||
logNetwork: false,
|
||||
resolvers,
|
||||
initLocalState: (localRecord: RecordProxy) => {
|
||||
localRecord.setValue(assetStub.id, "assetID");
|
||||
localRecord.setValue(commentStub.id, "commentID");
|
||||
|
||||
@@ -4,9 +4,10 @@ import { RecordProxy } from "relay-runtime";
|
||||
|
||||
import { timeout } from "talk-common/utils";
|
||||
import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
|
||||
import { createRelayEnvironment } from "talk-framework/testHelpers";
|
||||
import AppContainer from "talk-stream/containers/AppContainer";
|
||||
|
||||
import createEnvironment from "./createEnvironment";
|
||||
|
||||
const resolvers = {
|
||||
Query: {
|
||||
comment: () => null,
|
||||
@@ -14,13 +15,10 @@ const resolvers = {
|
||||
},
|
||||
};
|
||||
|
||||
const environment = createRelayEnvironment({
|
||||
network: {
|
||||
// Set this to true, to see graphql responses.
|
||||
logNetwork: false,
|
||||
resolvers,
|
||||
projectName: "tenant",
|
||||
},
|
||||
const environment = createEnvironment({
|
||||
// Set this to true, to see graphql responses.
|
||||
logNetwork: false,
|
||||
resolvers,
|
||||
initLocalState: (localRecord: RecordProxy) => {
|
||||
localRecord.setValue("unknown-asset-id", "assetID");
|
||||
localRecord.setValue("unknown-comment-id", "commentID");
|
||||
|
||||
@@ -5,9 +5,9 @@ import sinon from "sinon";
|
||||
|
||||
import { timeout } from "talk-common/utils";
|
||||
import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
|
||||
import { createRelayEnvironment } from "talk-framework/testHelpers";
|
||||
import AppContainer from "talk-stream/containers/AppContainer";
|
||||
|
||||
import createEnvironment from "./createEnvironment";
|
||||
import { assets, comments } from "./fixtures";
|
||||
|
||||
const commentStub = {
|
||||
@@ -40,13 +40,10 @@ const resolvers = {
|
||||
},
|
||||
};
|
||||
|
||||
const environment = createRelayEnvironment({
|
||||
network: {
|
||||
// Set this to true, to see graphql responses.
|
||||
logNetwork: false,
|
||||
resolvers,
|
||||
projectName: "tenant",
|
||||
},
|
||||
const environment = createEnvironment({
|
||||
// Set this to true, to see graphql responses.
|
||||
logNetwork: false,
|
||||
resolvers,
|
||||
initLocalState: (localRecord: RecordProxy) => {
|
||||
localRecord.setValue(assetStub.id, "assetID");
|
||||
localRecord.setValue("unknown-comment-id", "commentID");
|
||||
|
||||
@@ -5,9 +5,9 @@ import sinon from "sinon";
|
||||
|
||||
import { timeout } from "talk-common/utils";
|
||||
import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
|
||||
import { createRelayEnvironment } from "talk-framework/testHelpers";
|
||||
import AppContainer from "talk-stream/containers/AppContainer";
|
||||
|
||||
import createEnvironment from "./createEnvironment";
|
||||
import { assetWithReplies } from "./fixtures";
|
||||
|
||||
const resolvers = {
|
||||
@@ -20,13 +20,10 @@ const resolvers = {
|
||||
},
|
||||
};
|
||||
|
||||
const environment = createRelayEnvironment({
|
||||
network: {
|
||||
// Set this to true, to see graphql responses.
|
||||
logNetwork: false,
|
||||
resolvers,
|
||||
projectName: "tenant",
|
||||
},
|
||||
const environment = createEnvironment({
|
||||
// Set this to true, to see graphql responses.
|
||||
logNetwork: false,
|
||||
resolvers,
|
||||
initLocalState: (localRecord: RecordProxy) => {
|
||||
localRecord.setValue(assetWithReplies.id, "assetID");
|
||||
},
|
||||
|
||||
@@ -5,9 +5,9 @@ import sinon from "sinon";
|
||||
|
||||
import { timeout } from "talk-common/utils";
|
||||
import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
|
||||
import { createRelayEnvironment } from "talk-framework/testHelpers";
|
||||
import AppContainer from "talk-stream/containers/AppContainer";
|
||||
|
||||
import createEnvironment from "./createEnvironment";
|
||||
import { assets } from "./fixtures";
|
||||
|
||||
const resolvers = {
|
||||
@@ -20,13 +20,10 @@ const resolvers = {
|
||||
},
|
||||
};
|
||||
|
||||
const environment = createRelayEnvironment({
|
||||
network: {
|
||||
// Set this to true, to see graphql responses.
|
||||
logNetwork: false,
|
||||
resolvers,
|
||||
projectName: "tenant",
|
||||
},
|
||||
const environment = createEnvironment({
|
||||
// Set this to true, to see graphql responses.
|
||||
logNetwork: false,
|
||||
resolvers,
|
||||
initLocalState: (localRecord: RecordProxy) => {
|
||||
localRecord.setValue(assets[0].id, "assetID");
|
||||
},
|
||||
|
||||
@@ -5,9 +5,9 @@ import sinon from "sinon";
|
||||
|
||||
import { timeout } from "talk-common/utils";
|
||||
import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
|
||||
import { createRelayEnvironment } from "talk-framework/testHelpers";
|
||||
import AppContainer from "talk-stream/containers/AppContainer";
|
||||
|
||||
import createEnvironment from "./createEnvironment";
|
||||
import { assets, comments } from "./fixtures";
|
||||
|
||||
const connectionStub = sinon.stub().throws();
|
||||
@@ -77,13 +77,10 @@ const resolvers = {
|
||||
},
|
||||
};
|
||||
|
||||
const environment = createRelayEnvironment({
|
||||
network: {
|
||||
// Set this to true, to see graphql responses.
|
||||
logNetwork: false,
|
||||
resolvers,
|
||||
projectName: "tenant",
|
||||
},
|
||||
const environment = createEnvironment({
|
||||
// Set this to true, to see graphql responses.
|
||||
logNetwork: false,
|
||||
resolvers,
|
||||
initLocalState: (localRecord: RecordProxy) => {
|
||||
localRecord.setValue(assetStub.id, "assetID");
|
||||
},
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid transparent;
|
||||
border: 0px solid transparent;
|
||||
|
||||
& > * {
|
||||
margin: 0 calc(0.5 * var(--spacing-unit)) 0 0;
|
||||
@@ -154,6 +154,7 @@
|
||||
}
|
||||
|
||||
.variantOutlined {
|
||||
border: 1px solid transparent;
|
||||
&.colorRegular {
|
||||
color: var(--palette-grey-main);
|
||||
border: 1px solid currentColor;
|
||||
@@ -220,6 +221,7 @@
|
||||
}
|
||||
|
||||
.variantGhost {
|
||||
border: 1px solid transparent;
|
||||
&.colorRegular {
|
||||
color: var(--palette-grey-main);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,5 @@
|
||||
.root {
|
||||
display: flex;
|
||||
& > * {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.halfItemGutter {
|
||||
|
||||
@@ -80,6 +80,10 @@ const Flex: StatelessComponent<InnerProps> = props => {
|
||||
return <div ref={forwardRef} className={classNames} {...rest} />;
|
||||
};
|
||||
|
||||
Flex.defaultProps = {
|
||||
wrap: true,
|
||||
};
|
||||
|
||||
const enhanced = withForwardRef(withStyles(styles)(Flex));
|
||||
export default enhanced;
|
||||
export type FlexProps = PropTypesOf<typeof enhanced>;
|
||||
|
||||
@@ -36,6 +36,9 @@ export default class Popup extends Component<PopupProps> {
|
||||
}
|
||||
|
||||
private setCallbacks() {
|
||||
if (!this.ref) {
|
||||
return;
|
||||
}
|
||||
this.ref!.onload = e => {
|
||||
if (this.detectCloseInterval) {
|
||||
clearInterval(this.detectCloseInterval);
|
||||
|
||||
@@ -23,6 +23,10 @@
|
||||
composes: bodyCopy from "talk-ui/shared/typography.css";
|
||||
}
|
||||
|
||||
.bodyCopyBold {
|
||||
composes: bodyCopyBold from "talk-ui/shared/typography.css";
|
||||
}
|
||||
|
||||
.button {
|
||||
composes: button from "talk-ui/shared/typography.css";
|
||||
}
|
||||
|
||||
@@ -17,6 +17,7 @@ import Flex from '../Flex'
|
||||
<Typography variant="heading3">Heading3</Typography>
|
||||
<Typography variant="heading4">Heading4</Typography>
|
||||
<Typography variant="bodyCopy">BodyCopy</Typography>
|
||||
<Typography variant="bodyCopyBold">bodyCopyBold</Typography>
|
||||
<Typography variant="timestamp">timestamp</Typography>
|
||||
</Flex>
|
||||
</Playground>
|
||||
|
||||
@@ -13,6 +13,7 @@ type Variant =
|
||||
| "heading3"
|
||||
| "heading4"
|
||||
| "bodyCopy"
|
||||
| "bodyCopyBold"
|
||||
| "timestamp";
|
||||
|
||||
// Based on Typography Component of Material UI.
|
||||
@@ -130,6 +131,7 @@ Typography.defaultProps = {
|
||||
heading3: "h1",
|
||||
heading4: "h1",
|
||||
bodyCopy: "p",
|
||||
bodyCopyBold: "p",
|
||||
timestamp: "span",
|
||||
},
|
||||
noWrap: false,
|
||||
|
||||
@@ -100,6 +100,11 @@
|
||||
color: var(--palette-text-primary);
|
||||
}
|
||||
|
||||
.bodyCopyBold {
|
||||
composes: bodyCopy;
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.button {
|
||||
color: var(--palette-text-secondary);
|
||||
font-family: "Source Sans Pro";
|
||||
|
||||
@@ -774,7 +774,8 @@ type Mutation {
|
||||
"""
|
||||
updateSettings will update the Settings for the given Tenant.
|
||||
"""
|
||||
updateSettings(input: UpdateSettingsInput!): UpdateSettingsPayload @auth(roles: [ADMIN])
|
||||
updateSettings(input: UpdateSettingsInput!): UpdateSettingsPayload
|
||||
@auth(roles: [ADMIN])
|
||||
}
|
||||
|
||||
################################################################################
|
||||
|
||||
Reference in New Issue
Block a user