2020-07-16 04:36:29 +03:00
|
|
|
import * as React from "react";
|
2020-08-12 11:34:17 +03:00
|
|
|
import * as Constants from "~/common/constants";
|
2020-07-16 04:36:29 +03:00
|
|
|
import * as System from "~/components/system";
|
2020-09-05 02:15:29 +03:00
|
|
|
import * as SVG from "~/common/svg";
|
2020-07-16 04:36:29 +03:00
|
|
|
|
2020-11-04 20:55:48 +03:00
|
|
|
import { css } from "@emotion/core";
|
2020-09-03 02:17:31 +03:00
|
|
|
import { TabGroup } from "~/components/core/TabGroup";
|
2020-09-14 08:22:19 +03:00
|
|
|
import { ButtonSecondary } from "~/components/system/components/Buttons";
|
|
|
|
import { SearchModal } from "~/components/core/SearchModal";
|
|
|
|
import { dispatchCustomEvent } from "~/common/custom-events";
|
2020-09-25 09:31:56 +03:00
|
|
|
import { WarningMessage } from "~/components/core/WarningMessage";
|
2020-07-16 04:36:29 +03:00
|
|
|
|
|
|
|
import ScenePage from "~/components/core/ScenePage";
|
2020-08-22 07:25:34 +03:00
|
|
|
import ScenePageHeader from "~/components/core/ScenePageHeader";
|
2020-07-27 11:33:39 +03:00
|
|
|
import Section from "~/components/core/Section";
|
2020-10-02 02:44:22 +03:00
|
|
|
import SlatePreviewBlocks from "~/components/core/SlatePreviewBlock";
|
2020-09-01 07:44:56 +03:00
|
|
|
import CircleButtonGray from "~/components/core/CircleButtonGray";
|
2020-09-02 03:15:56 +03:00
|
|
|
import EmptyState from "~/components/core/EmptyState";
|
2020-07-16 04:36:29 +03:00
|
|
|
|
2020-09-14 08:22:19 +03:00
|
|
|
const STYLES_ICONS = css`
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
justify-content: center;
|
|
|
|
`;
|
|
|
|
|
2020-07-27 06:20:34 +03:00
|
|
|
// TODO(jim): Slates design.
|
2020-07-16 04:36:29 +03:00
|
|
|
export default class SceneSlates extends React.Component {
|
2020-09-01 07:44:56 +03:00
|
|
|
state = {
|
2020-09-03 02:17:31 +03:00
|
|
|
tab: 0,
|
2020-09-01 07:44:56 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
_handleAdd = () => {
|
2020-09-04 01:42:08 +03:00
|
|
|
this.props.onAction({
|
2020-09-01 07:44:56 +03:00
|
|
|
name: "Create slate",
|
|
|
|
type: "SIDEBAR",
|
|
|
|
value: "SIDEBAR_CREATE_SLATE",
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2020-09-14 08:22:19 +03:00
|
|
|
_handleSearch = () => {
|
|
|
|
dispatchCustomEvent({
|
|
|
|
name: "create-modal",
|
2020-10-31 02:12:20 +03:00
|
|
|
detail: { modal: <SearchModal viewer={this.props.viewer} onAction={this.props.onAction} /> },
|
2020-09-14 08:22:19 +03:00
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2020-07-16 04:36:29 +03:00
|
|
|
render() {
|
2020-09-03 02:24:10 +03:00
|
|
|
let subscriptions = this.props.viewer.subscriptions
|
|
|
|
.filter((each) => {
|
|
|
|
return !!each.target_slate_id;
|
|
|
|
})
|
2020-10-02 02:44:22 +03:00
|
|
|
.map((relation) => relation.slate);
|
|
|
|
// .map((relation) => (
|
|
|
|
// <div
|
|
|
|
// key={relation.slate.id}
|
|
|
|
// onClick={() =>
|
|
|
|
// this.props.onAction({
|
|
|
|
// type: "NAVIGATE",
|
|
|
|
// value: "V1_NAVIGATION_SLATE",
|
|
|
|
// data: relation.slate,
|
|
|
|
// })
|
|
|
|
// }
|
|
|
|
// >
|
|
|
|
// <SlatePreviewBlock username={null} slate={relation.slate} />
|
|
|
|
// </div>
|
|
|
|
// ));
|
2020-09-03 02:24:10 +03:00
|
|
|
|
2020-07-27 11:33:39 +03:00
|
|
|
return (
|
|
|
|
<ScenePage>
|
2020-09-01 07:44:56 +03:00
|
|
|
<ScenePageHeader
|
|
|
|
title="Slates"
|
|
|
|
actions={
|
2020-09-03 02:17:31 +03:00
|
|
|
this.state.tab === 0 ? (
|
2020-10-31 02:12:20 +03:00
|
|
|
<CircleButtonGray onClick={this._handleAdd} style={{ marginLeft: 12 }}>
|
2020-09-01 07:44:56 +03:00
|
|
|
<SVG.Plus height="16px" />
|
|
|
|
</CircleButtonGray>
|
|
|
|
) : null
|
|
|
|
}
|
|
|
|
/>
|
2020-09-25 08:32:56 +03:00
|
|
|
|
2020-09-03 02:17:31 +03:00
|
|
|
<TabGroup
|
|
|
|
tabs={["My Slates", "Following"]}
|
|
|
|
value={this.state.tab}
|
|
|
|
onChange={(value) => this.setState({ tab: value })}
|
|
|
|
/>
|
2020-09-03 09:00:02 +03:00
|
|
|
|
2020-09-08 01:16:02 +03:00
|
|
|
{this.state.tab === 0 ? (
|
|
|
|
this.props.viewer.slates && this.props.viewer.slates.length ? (
|
2020-10-02 02:44:22 +03:00
|
|
|
<SlatePreviewBlocks
|
2020-10-05 00:30:28 +03:00
|
|
|
isOwner
|
2020-10-02 02:44:22 +03:00
|
|
|
slates={this.props.viewer.slates}
|
|
|
|
username={this.props.viewer.username}
|
|
|
|
onAction={this.props.onAction}
|
|
|
|
/>
|
2020-09-08 01:16:02 +03:00
|
|
|
) : (
|
2020-09-14 08:22:19 +03:00
|
|
|
<EmptyState>
|
|
|
|
<div css={STYLES_ICONS}>
|
|
|
|
<SVG.Sound height="24px" style={{ margin: "0 16px" }} />
|
|
|
|
<SVG.Document height="24px" style={{ margin: "0 16px" }} />
|
|
|
|
<SVG.Image height="24px" style={{ margin: "0 16px" }} />
|
|
|
|
<SVG.Book height="24px" style={{ margin: "0 16px" }} />
|
|
|
|
<SVG.Video height="24px" style={{ margin: "0 16px" }} />
|
|
|
|
</div>
|
|
|
|
<div style={{ marginTop: 24 }}>
|
2020-10-31 02:12:20 +03:00
|
|
|
Use slates to create mood boards, share files, and organize research.
|
2020-09-14 08:22:19 +03:00
|
|
|
</div>
|
2020-10-31 02:12:20 +03:00
|
|
|
<ButtonSecondary onClick={this._handleAdd} style={{ marginTop: 32 }}>
|
2020-09-14 08:22:19 +03:00
|
|
|
Create slate
|
|
|
|
</ButtonSecondary>
|
2020-09-08 01:16:02 +03:00
|
|
|
</EmptyState>
|
|
|
|
)
|
|
|
|
) : null}
|
2020-10-02 02:44:22 +03:00
|
|
|
{/* this.props.viewer.slates.map((slate) => (
|
|
|
|
<div
|
|
|
|
key={slate.id}
|
|
|
|
onClick={() =>
|
|
|
|
this.props.onAction({
|
|
|
|
type: "NAVIGATE",
|
|
|
|
value: slate.id,
|
|
|
|
data: { decorator: "SLATE", ...slate },
|
|
|
|
})
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<SlatePreviewBlock
|
|
|
|
slate={slate}
|
|
|
|
username={this.props.viewer.username}
|
2020-10-05 00:30:28 +03:00
|
|
|
isOwner
|
2020-10-02 02:44:22 +03:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
)) */}
|
2020-09-08 01:16:02 +03:00
|
|
|
{this.state.tab === 1 ? (
|
2020-09-14 23:42:52 +03:00
|
|
|
subscriptions && subscriptions.length ? (
|
2020-10-02 02:44:22 +03:00
|
|
|
<SlatePreviewBlocks
|
|
|
|
slates={subscriptions}
|
|
|
|
username={null}
|
|
|
|
onAction={this.props.onAction}
|
|
|
|
/>
|
2020-09-08 01:16:02 +03:00
|
|
|
) : (
|
2020-09-14 08:22:19 +03:00
|
|
|
<EmptyState>
|
|
|
|
You can follow any public slates on the network.
|
2020-10-31 02:12:20 +03:00
|
|
|
<ButtonSecondary onClick={this._handleSearch} style={{ marginTop: 32 }}>
|
2020-09-14 08:22:19 +03:00
|
|
|
Browse slates
|
|
|
|
</ButtonSecondary>
|
2020-09-08 01:16:02 +03:00
|
|
|
</EmptyState>
|
|
|
|
)
|
|
|
|
) : null}
|
2020-07-27 11:33:39 +03:00
|
|
|
</ScenePage>
|
|
|
|
);
|
2020-07-16 04:36:29 +03:00
|
|
|
}
|
|
|
|
}
|