mirror of
https://github.com/filecoin-project/slate.git
synced 2024-11-24 06:45:59 +03:00
Merge pull request #216 from filecoin-project/@martinalong/directory-style-update
Directory style update
This commit is contained in:
martinalong
GitHub
commit
e2115eb418
@ -19,7 +19,7 @@ export const system = {
|
||||
darkGray: "#b2b2b2",
|
||||
black: "#1b1f23",
|
||||
pitchBlack: "#0c0c0c",
|
||||
brand: "#0047FF",
|
||||
brand: "#0061BB",
|
||||
link: "#2935ff",
|
||||
green: "#28a745",
|
||||
yellow: " #FFC940",
|
||||
|
||||
@ -5,6 +5,7 @@ import { css } from "@emotion/react";
|
||||
import { ProcessedText } from "~/components/system/components/Typography";
|
||||
|
||||
import SlatePreviewBlock from "~/components/core/SlatePreviewBlock";
|
||||
import SceneContent from "~/components/core/SceneContent";
|
||||
|
||||
const STYLES_PROFILE = css`
|
||||
text-align: center;
|
||||
@ -67,42 +68,44 @@ export default class Profile extends React.Component {
|
||||
<br />
|
||||
{this.props.buttons}
|
||||
<br />
|
||||
{data.slates && data.slates.length ? (
|
||||
<div>
|
||||
{data.slates.map((slate) => {
|
||||
if (this.props.onAction) {
|
||||
<SceneContent>
|
||||
{data.slates && data.slates.length ? (
|
||||
<div>
|
||||
{data.slates.map((slate) => {
|
||||
if (this.props.onAction) {
|
||||
return (
|
||||
<div
|
||||
key={slate.id}
|
||||
onClick={() =>
|
||||
this.props.onAction({
|
||||
type: "NAVIGATE",
|
||||
value: this.props.sceneId,
|
||||
scene: "PUBLIC_SLATE",
|
||||
data: slate,
|
||||
})
|
||||
}
|
||||
>
|
||||
<SlatePreviewBlock
|
||||
slate={slate}
|
||||
username={data.username}
|
||||
editing={this.props.editing}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div
|
||||
<a
|
||||
key={slate.id}
|
||||
onClick={() =>
|
||||
this.props.onAction({
|
||||
type: "NAVIGATE",
|
||||
value: this.props.sceneId,
|
||||
scene: "PUBLIC_SLATE",
|
||||
data: slate,
|
||||
})
|
||||
}
|
||||
href={`/${data.username}/${slate.slatename}`}
|
||||
css={STYLES_LINK}
|
||||
>
|
||||
<SlatePreviewBlock
|
||||
slate={slate}
|
||||
username={data.username}
|
||||
editing={this.props.editing}
|
||||
/>
|
||||
</div>
|
||||
<SlatePreviewBlock external slate={slate} />
|
||||
</a>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<a
|
||||
key={slate.id}
|
||||
href={`/${data.username}/${slate.slatename}`}
|
||||
css={STYLES_LINK}
|
||||
>
|
||||
<SlatePreviewBlock external slate={slate} />
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : null}
|
||||
})}
|
||||
</div>
|
||||
) : null}
|
||||
</SceneContent>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -50,10 +50,6 @@ const STYLES_IMAGE_ROW_SMALL = css`
|
||||
height: 56px;
|
||||
overflow: hidden;
|
||||
margin: 0px -8px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
justify-content: center;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_ITEM_BOX_SMALL = css`
|
||||
@ -64,10 +60,6 @@ const STYLES_ITEM_BOX_SMALL = css`
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0px 0px 0px 1px rgba(229, 229, 229, 0.5) inset;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
margin: 0 auto;
|
||||
}
|
||||
`;
|
||||
|
||||
export function SlatePreviewRow(props) {
|
||||
@ -120,14 +112,6 @@ const STYLES_TITLE_LINE = css`
|
||||
margin-bottom: 16px;
|
||||
`;
|
||||
|
||||
const STYLES_BUTTON = css`
|
||||
display: inline-block;
|
||||
margin-left: 12px;
|
||||
padding: 4px 8px;
|
||||
cursor: pointer;
|
||||
color: ${Constants.system.brand};
|
||||
`;
|
||||
|
||||
const STYLES_COPY_INPUT = css`
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
@ -358,9 +342,11 @@ export default class SlatePreviewBlock extends React.Component {
|
||||
previewStyle={this.props.previewStyle}
|
||||
/>
|
||||
) : (
|
||||
<div css={STYLES_CREATE_NEW}>
|
||||
<SVG.Plus height="24px" />
|
||||
<div>Add Files</div>
|
||||
<div css={STYLES_IMAGE_ROW}>
|
||||
<div css={STYLES_CREATE_NEW}>
|
||||
<SVG.Plus height="24px" />
|
||||
<div>Add Files</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -6,33 +6,58 @@ import * as SVG from "~/common/svg";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import { TabGroup } from "~/components/core/TabGroup";
|
||||
import { Boundary } from "~/components/system/components/fragments/Boundary";
|
||||
import { PopoverNavigation } from "~/components/system/components/PopoverNavigation";
|
||||
|
||||
import ScenePage from "~/components/core/ScenePage";
|
||||
import ScenePageHeader from "~/components/core/ScenePageHeader";
|
||||
import SceneContent from "~/components/core/SceneContent";
|
||||
import EmptyState from "~/components/core/EmptyState";
|
||||
|
||||
const STYLES_USER_ENTRY = css`
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: center;
|
||||
font-size: ${Constants.typescale.lvl1};
|
||||
cursor: pointer;
|
||||
border: 1px solid rgba(229, 229, 229, 0.75);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
`;
|
||||
|
||||
const STYLES_USER = css`
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: center;
|
||||
margin: 24px;
|
||||
color: ${Constants.system.brand};
|
||||
font-family: ${Constants.font.medium};
|
||||
font-size: ${Constants.typescale.lvl1};
|
||||
`;
|
||||
|
||||
const STYLES_BUTTONS = css`
|
||||
justify-self: end;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-right: 48px;
|
||||
`;
|
||||
|
||||
const STYLES_ITEM_BOX = css`
|
||||
position: relative;
|
||||
justify-self: end;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px;
|
||||
margin-right: 48px;
|
||||
color: ${Constants.system.darkGray};
|
||||
`;
|
||||
|
||||
const STYLES_ACTION_BUTTON = css`
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
justify-self: end;
|
||||
|
||||
:hover {
|
||||
color: ${Constants.system.brand};
|
||||
}
|
||||
padding: 8px;
|
||||
color: ${Constants.system.brand};
|
||||
font-family: ${Constants.font.medium};
|
||||
`;
|
||||
|
||||
const STYLES_PROFILE_IMAGE = css`
|
||||
@ -40,11 +65,22 @@ const STYLES_PROFILE_IMAGE = css`
|
||||
background-position: 50% 50%;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin: 8px 24px 8px 8px;
|
||||
border-radius: 50%;
|
||||
margin-right: 16px;
|
||||
border-radius: 4px;
|
||||
`;
|
||||
|
||||
function UserEntry({ user, button, onClick }) {
|
||||
const STYLES_MESSAGE = css`
|
||||
color: ${Constants.system.black};
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
function UserEntry({ user, button, onClick, message }) {
|
||||
return (
|
||||
<div key={user.username} css={STYLES_USER_ENTRY}>
|
||||
<div css={STYLES_USER} onClick={onClick}>
|
||||
@ -52,71 +88,110 @@ function UserEntry({ user, button, onClick }) {
|
||||
css={STYLES_PROFILE_IMAGE}
|
||||
style={{ backgroundImage: `url(${user.data.photo})` }}
|
||||
/>
|
||||
<div>@{user.username}</div>
|
||||
<span>
|
||||
{user.data.name || `@${user.username}`}
|
||||
{message ? <span css={STYLES_MESSAGE}>{message}</span> : null}
|
||||
</span>
|
||||
</div>
|
||||
{button}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const STYLES_COPY_INPUT = css`
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
tabindex: -1;
|
||||
opacity: 0;
|
||||
`;
|
||||
|
||||
export default class SceneDirectory extends React.Component {
|
||||
_ref;
|
||||
|
||||
state = {
|
||||
copyValue: "",
|
||||
loading: false,
|
||||
tab: 0,
|
||||
viewer: this.props.viewer,
|
||||
contextMenu: null,
|
||||
};
|
||||
|
||||
_handleUpdate = async (e) => {
|
||||
let response = await this.props.onRehydrate();
|
||||
// const response = await Actions.hydrateAuthenticatedUser();
|
||||
_handleCopy = (e, value) => {
|
||||
e.stopPropagation();
|
||||
this.setState({ copyValue: value }, () => {
|
||||
this._ref.select();
|
||||
document.execCommand("copy");
|
||||
this._handleHide();
|
||||
});
|
||||
};
|
||||
|
||||
if (!response || response.error) {
|
||||
alert("TODO: error fetching authenticated viewer");
|
||||
return null;
|
||||
_handleHide = (e) => {
|
||||
this.setState({ contextMenu: null });
|
||||
};
|
||||
|
||||
_handleClick = (e, value) => {
|
||||
e.stopPropagation();
|
||||
if (this.state.contextMenu === value) {
|
||||
this._handleHide();
|
||||
} else {
|
||||
this.setState({ contextMenu: value });
|
||||
}
|
||||
|
||||
let viewer = response.data;
|
||||
|
||||
this.setState({ viewer });
|
||||
};
|
||||
|
||||
_handleDelete = async (id) => {
|
||||
_handleDelete = async (e, id) => {
|
||||
this._handleHide();
|
||||
e.stopPropagation();
|
||||
const response = await Actions.deleteTrustRelationship({
|
||||
id: id,
|
||||
});
|
||||
await this._handleUpdate();
|
||||
await this.props.onRehydrate();
|
||||
};
|
||||
|
||||
_handleAccept = async (id) => {
|
||||
_handleAccept = async (e, id) => {
|
||||
this._handleHide();
|
||||
e.stopPropagation();
|
||||
const response = await Actions.updateTrustRelationship({
|
||||
userId: id,
|
||||
});
|
||||
await this._handleUpdate();
|
||||
await this.props.onRehydrate();
|
||||
};
|
||||
|
||||
_handleFollow = async (id) => {
|
||||
_handleFollow = async (e, id) => {
|
||||
this._handleHide();
|
||||
e.stopPropagation();
|
||||
const response = await Actions.createSubscription({
|
||||
userId: id,
|
||||
});
|
||||
await this._handleUpdate();
|
||||
await this.props.onRehydrate();
|
||||
};
|
||||
|
||||
render() {
|
||||
let requests = this.state.viewer.pendingTrusted
|
||||
let requests = this.props.viewer.pendingTrusted
|
||||
.filter((relation) => {
|
||||
return !relation.data.verified;
|
||||
})
|
||||
.map((relation) => {
|
||||
let button = (
|
||||
<div
|
||||
css={STYLES_ACTION_BUTTON}
|
||||
onClick={() => this._handleAccept(relation.owner.id)}
|
||||
>
|
||||
Accept
|
||||
<div css={STYLES_BUTTONS}>
|
||||
<div
|
||||
css={STYLES_ACTION_BUTTON}
|
||||
onClick={(e) => this._handleAccept(e, relation.owner.id)}
|
||||
>
|
||||
Accept
|
||||
</div>
|
||||
<div
|
||||
css={STYLES_ACTION_BUTTON}
|
||||
style={{ color: Constants.system.darkGray, marginLeft: "16px" }}
|
||||
onClick={(e) => {
|
||||
this._handleDelete(e, relation.id);
|
||||
}}
|
||||
>
|
||||
Decline
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<UserEntry
|
||||
key={relation.id}
|
||||
user={relation.owner}
|
||||
button={button}
|
||||
onClick={() => {
|
||||
@ -127,26 +202,56 @@ export default class SceneDirectory extends React.Component {
|
||||
data: relation.owner,
|
||||
});
|
||||
}}
|
||||
message=" requested to trust you"
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
let trusted = this.state.viewer.pendingTrusted
|
||||
let trusted = this.props.viewer.pendingTrusted
|
||||
.filter((relation) => {
|
||||
return relation.data.verified;
|
||||
})
|
||||
.map((relation) => {
|
||||
let button = (
|
||||
<div
|
||||
css={STYLES_ACTION_BUTTON}
|
||||
onClick={() => this._handleDelete(relation.id)}
|
||||
css={STYLES_ITEM_BOX}
|
||||
onClick={(e) => this._handleClick(e, relation.id)}
|
||||
>
|
||||
Remove
|
||||
<SVG.MoreHorizontal height="24px" />
|
||||
{this.state.contextMenu === relation.id ? (
|
||||
<Boundary
|
||||
captureResize={true}
|
||||
captureScroll={false}
|
||||
enabled
|
||||
onOutsideRectEvent={(e) => this._handleClick(e, relation.id)}
|
||||
>
|
||||
<PopoverNavigation
|
||||
style={{
|
||||
top: "40px",
|
||||
right: "0px",
|
||||
}}
|
||||
navigation={[
|
||||
{
|
||||
text: "Copy Profile URL",
|
||||
onClick: (e) =>
|
||||
this._handleCopy(
|
||||
e,
|
||||
`https://slate.host/${relation.owner.username}`
|
||||
),
|
||||
},
|
||||
{
|
||||
text: "Remove Peer",
|
||||
onClick: (e) => this._handleDelete(e, relation.id),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Boundary>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
console.log(relation.owner);
|
||||
return (
|
||||
<UserEntry
|
||||
key={relation.id}
|
||||
user={relation.owner}
|
||||
button={button}
|
||||
onClick={() => {
|
||||
@ -164,21 +269,51 @@ export default class SceneDirectory extends React.Component {
|
||||
trusted = [];
|
||||
}
|
||||
trusted.push(
|
||||
...this.state.viewer.trusted
|
||||
...this.props.viewer.trusted
|
||||
.filter((relation) => {
|
||||
return relation.data.verified;
|
||||
})
|
||||
.map((relation) => {
|
||||
let button = (
|
||||
<div
|
||||
css={STYLES_ACTION_BUTTON}
|
||||
onClick={() => this._handleDelete(relation.id)}
|
||||
css={STYLES_ITEM_BOX}
|
||||
onClick={(e) => this._handleClick(e, relation.id)}
|
||||
>
|
||||
Remove
|
||||
<SVG.MoreHorizontal height="24px" />
|
||||
{this.state.contextMenu === relation.id ? (
|
||||
<Boundary
|
||||
captureResize={true}
|
||||
captureScroll={false}
|
||||
enabled
|
||||
onOutsideRectEvent={(e) => this._handleClick(e, relation.id)}
|
||||
>
|
||||
<PopoverNavigation
|
||||
style={{
|
||||
top: "16px",
|
||||
right: "-12px",
|
||||
}}
|
||||
navigation={[
|
||||
{
|
||||
text: "Copy Profile URL",
|
||||
onClick: (e) =>
|
||||
this._handleCopy(
|
||||
e,
|
||||
`https://slate.host/${relation.user.username}`
|
||||
),
|
||||
},
|
||||
{
|
||||
text: "Remove Peer",
|
||||
onClick: (e) => this._handleDelete(e, relation.id),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Boundary>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<UserEntry
|
||||
key={relation.id}
|
||||
user={relation.user}
|
||||
button={button}
|
||||
onClick={() => {
|
||||
@ -194,21 +329,51 @@ export default class SceneDirectory extends React.Component {
|
||||
})
|
||||
);
|
||||
|
||||
let following = this.state.viewer.subscriptions
|
||||
let following = this.props.viewer.subscriptions
|
||||
.filter((relation) => {
|
||||
return !!relation.target_user_id;
|
||||
})
|
||||
.map((relation) => {
|
||||
let button = (
|
||||
<div
|
||||
css={STYLES_ACTION_BUTTON}
|
||||
onClick={() => this._handleFollow(relation.user.id)}
|
||||
css={STYLES_ITEM_BOX}
|
||||
onClick={(e) => this._handleClick(e, relation.id)}
|
||||
>
|
||||
Unfollow
|
||||
<SVG.MoreHorizontal height="24px" />
|
||||
{this.state.contextMenu === relation.id ? (
|
||||
<Boundary
|
||||
captureResize={true}
|
||||
captureScroll={false}
|
||||
enabled
|
||||
onOutsideRectEvent={(e) => this._handleClick(e, relation.id)}
|
||||
>
|
||||
<PopoverNavigation
|
||||
style={{
|
||||
top: "16px",
|
||||
right: "-12px",
|
||||
}}
|
||||
navigation={[
|
||||
{
|
||||
text: "Copy Profile URL",
|
||||
onClick: (e) =>
|
||||
this._handleCopy(
|
||||
e,
|
||||
`https://slate.host/${relation.user.username}`
|
||||
),
|
||||
},
|
||||
{
|
||||
text: "Unfollow",
|
||||
onClick: (e) => this._handleFollow(e, relation.user.id),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Boundary>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<UserEntry
|
||||
key={relation.id}
|
||||
user={relation.user}
|
||||
button={button}
|
||||
onClick={() => {
|
||||
@ -230,36 +395,46 @@ export default class SceneDirectory extends React.Component {
|
||||
value={this.state.tab}
|
||||
onChange={(value) => this.setState({ tab: value })}
|
||||
/>
|
||||
{this.state.tab === 0 ? (
|
||||
requests.length ? (
|
||||
requests
|
||||
) : (
|
||||
<EmptyState style={{ marginTop: 88 }}>
|
||||
No requests at the moment! Once someone sends you a trust request
|
||||
it will appear here.
|
||||
</EmptyState>
|
||||
)
|
||||
) : null}
|
||||
{this.state.tab === 1 ? (
|
||||
trusted.length ? (
|
||||
trusted
|
||||
) : (
|
||||
<EmptyState style={{ marginTop: 88 }}>
|
||||
You have no peers yet. Get started by searching for your friends
|
||||
and sending them a peer request!
|
||||
</EmptyState>
|
||||
)
|
||||
) : null}
|
||||
{this.state.tab === 2 ? (
|
||||
following.length ? (
|
||||
following
|
||||
) : (
|
||||
<EmptyState style={{ marginTop: 88 }}>
|
||||
You are not following anybody. Get started by searching for your
|
||||
friends and clicking follow!
|
||||
</EmptyState>
|
||||
)
|
||||
) : null}
|
||||
<SceneContent>
|
||||
{this.state.tab === 0 ? (
|
||||
requests.length ? (
|
||||
requests
|
||||
) : (
|
||||
<EmptyState style={{ marginTop: 88 }}>
|
||||
No requests at the moment! Once someone sends you a trust
|
||||
request it will appear here.
|
||||
</EmptyState>
|
||||
)
|
||||
) : null}
|
||||
{this.state.tab === 1 ? (
|
||||
trusted.length ? (
|
||||
trusted
|
||||
) : (
|
||||
<EmptyState style={{ marginTop: 88 }}>
|
||||
You have no peers yet. Get started by searching for your friends
|
||||
and sending them a peer request!
|
||||
</EmptyState>
|
||||
)
|
||||
) : null}
|
||||
{this.state.tab === 2 ? (
|
||||
following.length ? (
|
||||
following
|
||||
) : (
|
||||
<EmptyState style={{ marginTop: 88 }}>
|
||||
You are not following anybody. Get started by searching for your
|
||||
friends and clicking follow!
|
||||
</EmptyState>
|
||||
)
|
||||
) : null}
|
||||
<input
|
||||
readOnly
|
||||
ref={(c) => {
|
||||
this._ref = c;
|
||||
}}
|
||||
value={this.state.copyValue}
|
||||
css={STYLES_COPY_INPUT}
|
||||
/>
|
||||
</SceneContent>
|
||||
</ScenePage>
|
||||
);
|
||||
}
|
||||
|
||||
@ -13,15 +13,6 @@ import {
|
||||
import ScenePage from "~/components/core/ScenePage";
|
||||
import Profile from "~/components/core/Profile";
|
||||
|
||||
const BUTTON_STYLES = {
|
||||
border: `1px solid ${Constants.system.border}`,
|
||||
boxShadow: "none",
|
||||
fontFamily: Constants.font.text,
|
||||
margin: "8px",
|
||||
padding: "8px 16px",
|
||||
minHeight: "30px",
|
||||
};
|
||||
|
||||
const STATUS_BUTTON_MAP = {
|
||||
trusted: "Remove peer",
|
||||
untrusted: "Add peer",
|
||||
|
||||
@ -8,16 +8,12 @@ import { TabGroup } from "~/components/core/TabGroup";
|
||||
|
||||
import ScenePage from "~/components/core/ScenePage";
|
||||
import ScenePageHeader from "~/components/core/ScenePageHeader";
|
||||
import SceneContent from "~/components/core/SceneContent";
|
||||
import Section from "~/components/core/Section";
|
||||
import SlatePreviewBlock from "~/components/core/SlatePreviewBlock";
|
||||
import CircleButtonGray from "~/components/core/CircleButtonGray";
|
||||
import EmptyState from "~/components/core/EmptyState";
|
||||
|
||||
const STYLES_NUMBER = css`
|
||||
font-family: ${Constants.font.semiBold};
|
||||
font-weight: 400;
|
||||
`;
|
||||
|
||||
// TODO(jim): Slates design.
|
||||
export default class SceneSlates extends React.Component {
|
||||
state = {
|
||||
@ -30,7 +26,6 @@ export default class SceneSlates extends React.Component {
|
||||
type: "SIDEBAR",
|
||||
value: "SIDEBAR_CREATE_SLATE",
|
||||
});
|
||||
console.log(this.props.viewer);
|
||||
this.props.onRehydrate();
|
||||
};
|
||||
|
||||
@ -76,44 +71,46 @@ export default class SceneSlates extends React.Component {
|
||||
onChange={(value) => this.setState({ tab: value })}
|
||||
/>
|
||||
|
||||
{this.state.tab === 0 ? (
|
||||
this.props.viewer.slates && this.props.viewer.slates.length ? (
|
||||
this.props.viewer.slates.map((slate) => (
|
||||
<div
|
||||
key={slate.id}
|
||||
onClick={() =>
|
||||
this.props.onAction({
|
||||
type: "NAVIGATE",
|
||||
value: slate.id,
|
||||
data: slate,
|
||||
})
|
||||
}
|
||||
>
|
||||
<SlatePreviewBlock
|
||||
slate={slate}
|
||||
username={this.props.viewer.username}
|
||||
editing
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<EmptyState style={{ marginTop: 88 }}>
|
||||
You have no slates yet! Create a new slate by clicking the plus
|
||||
button
|
||||
</EmptyState>
|
||||
)
|
||||
) : null}
|
||||
<SceneContent>
|
||||
{this.state.tab === 0 ? (
|
||||
this.props.viewer.slates && this.props.viewer.slates.length ? (
|
||||
this.props.viewer.slates.map((slate) => (
|
||||
<div
|
||||
key={slate.id}
|
||||
onClick={() =>
|
||||
this.props.onAction({
|
||||
type: "NAVIGATE",
|
||||
value: slate.id,
|
||||
data: slate,
|
||||
})
|
||||
}
|
||||
>
|
||||
<SlatePreviewBlock
|
||||
slate={slate}
|
||||
username={this.props.viewer.username}
|
||||
editing
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<EmptyState style={{ marginTop: 88 }}>
|
||||
You have no slates yet! Create a new slate by clicking the plus
|
||||
button
|
||||
</EmptyState>
|
||||
)
|
||||
) : null}
|
||||
|
||||
{this.state.tab === 1 ? (
|
||||
subscriptions.length ? (
|
||||
subscriptions
|
||||
) : (
|
||||
<EmptyState style={{ marginTop: 88 }}>
|
||||
You aren't following any slates yet! Get started by following any
|
||||
slates you encounter that you want to be updated on
|
||||
</EmptyState>
|
||||
)
|
||||
) : null}
|
||||
{this.state.tab === 1 ? (
|
||||
subscriptions.length ? (
|
||||
subscriptions
|
||||
) : (
|
||||
<EmptyState style={{ marginTop: 88 }}>
|
||||
You aren't following any slates yet! Get started by following
|
||||
any slates you encounter that you want to be updated on
|
||||
</EmptyState>
|
||||
)
|
||||
) : null}
|
||||
</SceneContent>
|
||||
</ScenePage>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user