mirror of
https://github.com/filecoin-project/slate.git
synced 2024-11-10 13:14:04 +03:00
more style updates
This commit is contained in:
Martina
parent
c8607d54f4
commit
77b428f97a
@ -735,20 +735,3 @@ export const NoImage = (props) => (
|
||||
<path d="M15.28 15.28C14.9481 15.765 14.5134 16.171 14.0068 16.469C13.5002 16.7669 12.9342 16.9496 12.3489 17.004C11.7637 17.0584 11.1737 16.9831 10.6209 16.7836C10.0681 16.5841 9.56601 16.2652 9.15042 15.8496C8.73483 15.434 8.41593 14.9319 8.2164 14.3791C8.01688 13.8263 7.94163 13.2363 7.99601 12.6511C8.05039 12.0658 8.23306 11.4998 8.53103 10.9932C8.829 10.4866 9.23495 10.0519 9.72 9.72M21 21H3C2.46957 21 1.96086 20.7893 1.58579 20.4142C1.21071 20.0391 1 19.5304 1 19V8C1 7.46957 1.21071 6.96086 1.58579 6.58579C1.96086 6.21071 2.46957 6 3 6H6L21 21ZM9 3H15L17 6H21C21.5304 6 22.0391 6.21071 22.4142 6.58579C22.7893 6.96086 23 7.46957 23 8V17.34L9 3Z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Lock = (props) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height={props.height}
|
||||
style={props.style}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M19 11H5C3.89543 11 3 11.8954 3 13V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V13C21 11.8954 20.1046 11 19 11Z" />
|
||||
<path d="M7 11V7C7 5.67392 7.52678 4.40215 8.46447 3.46447C9.40215 2.52678 10.6739 2 12 2C13.3261 2 14.5979 2.52678 15.5355 3.46447C16.4732 4.40215 17 5.67392 17 7V11" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
@ -64,7 +64,7 @@ const STYLES_BLOCK = css`
|
||||
|
||||
const STYLES_TITLE_LINE = css`
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
grid-template-columns: auto auto 1fr;
|
||||
align-items: center;
|
||||
font-size: ${Constants.typescale.lvl1};
|
||||
margin-bottom: 16px;
|
||||
@ -85,6 +85,14 @@ const STYLES_COPY_INPUT = css`
|
||||
opacity: 0;
|
||||
`;
|
||||
|
||||
const STYLES_TAG = css`
|
||||
margin-left: 24px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
background-color: ${Constants.system.gray};
|
||||
color: ${Constants.system.white};
|
||||
`;
|
||||
|
||||
export default class SlatePreviewBlock extends Component {
|
||||
_ref;
|
||||
|
||||
@ -108,10 +116,12 @@ export default class SlatePreviewBlock extends Component {
|
||||
<strong style={{ fontSize: Constants.typescale.lvl2 }}>
|
||||
{this.props.slate.data.name}
|
||||
</strong>
|
||||
{this.props.editing && !this.props.slate.data.public ? (
|
||||
<div style={{ marginLeft: "24px" }}>
|
||||
<SVG.Lock height="16px" />
|
||||
</div>
|
||||
{this.props.editing ? (
|
||||
this.props.slate.data.public ? (
|
||||
<div css={STYLES_TAG}>Public</div>
|
||||
) : (
|
||||
<div css={STYLES_TAG}>Private</div>
|
||||
)
|
||||
) : null}
|
||||
{this.props.editing ? (
|
||||
<div style={{ justifySelf: "end" }}>
|
||||
|
||||
@ -5,6 +5,7 @@ import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import { TabGroup } from "~/components/core/TabGroup";
|
||||
|
||||
import ScenePage from "~/components/core/ScenePage";
|
||||
import ScenePageHeader from "~/components/core/ScenePageHeader";
|
||||
@ -80,7 +81,7 @@ function UserEntry({ user, button, onClick }) {
|
||||
export default class SceneDirectory extends React.Component {
|
||||
state = {
|
||||
loading: false,
|
||||
tab: "requests",
|
||||
tab: 0,
|
||||
viewer: this.props.viewer,
|
||||
};
|
||||
|
||||
@ -242,46 +243,12 @@ export default class SceneDirectory extends React.Component {
|
||||
return (
|
||||
<ScenePage>
|
||||
<ScenePageHeader title="Directory" />
|
||||
<div css={STYLES_TAB_GROUP}>
|
||||
<div
|
||||
css={STYLES_TAB}
|
||||
style={{
|
||||
color:
|
||||
this.state.tab === "requests"
|
||||
? Constants.system.pitchBlack
|
||||
: Constants.system.gray,
|
||||
}}
|
||||
onClick={() => this.setState({ tab: "requests" })}
|
||||
>
|
||||
Requests
|
||||
</div>
|
||||
<div
|
||||
css={STYLES_TAB}
|
||||
style={{
|
||||
color:
|
||||
this.state.tab === "peers"
|
||||
? Constants.system.pitchBlack
|
||||
: Constants.system.gray,
|
||||
}}
|
||||
onClick={() => this.setState({ tab: "peers" })}
|
||||
>
|
||||
Trusted
|
||||
</div>
|
||||
<div
|
||||
css={STYLES_TAB}
|
||||
style={{
|
||||
marginRight: "0px",
|
||||
color:
|
||||
this.state.tab === "following"
|
||||
? Constants.system.pitchBlack
|
||||
: Constants.system.gray,
|
||||
}}
|
||||
onClick={() => this.setState({ tab: "following" })}
|
||||
>
|
||||
Following
|
||||
</div>
|
||||
</div>
|
||||
{this.state.tab === "requests" ? (
|
||||
<TabGroup
|
||||
tabs={["Requests", "Trusted", "Following"]}
|
||||
value={this.state.tab}
|
||||
onChange={(value) => this.setState({ tab: value })}
|
||||
/>
|
||||
{this.state.tab === 0 ? (
|
||||
requests.length ? (
|
||||
requests
|
||||
) : (
|
||||
@ -291,7 +258,7 @@ export default class SceneDirectory extends React.Component {
|
||||
</EmptyState>
|
||||
)
|
||||
) : null}
|
||||
{this.state.tab === "peers" ? (
|
||||
{this.state.tab === 1 ? (
|
||||
trusted.length ? (
|
||||
trusted
|
||||
) : (
|
||||
@ -301,7 +268,7 @@ export default class SceneDirectory extends React.Component {
|
||||
</EmptyState>
|
||||
)
|
||||
) : null}
|
||||
{this.state.tab === "following" ? (
|
||||
{this.state.tab === 2 ? (
|
||||
following.length ? (
|
||||
following
|
||||
) : (
|
||||
|
||||
@ -183,6 +183,7 @@ export default class SceneProfile extends React.Component {
|
||||
return (
|
||||
<ScenePage>
|
||||
<Profile
|
||||
{...this.props}
|
||||
onAction={this.props.onAction}
|
||||
creator={this.props.data}
|
||||
sceneId={this.props.sceneId}
|
||||
|
||||
@ -61,7 +61,8 @@ export default class SceneSlate extends React.Component {
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const updated =
|
||||
this.props.current.updated_at !== prevProps.current.updated_at;
|
||||
this.props.current.updated_at !== prevProps.current.updated_at ||
|
||||
this.props.data.slatename !== prevProps.data.slatename;
|
||||
|
||||
if (!updated) {
|
||||
return;
|
||||
@ -87,6 +88,30 @@ export default class SceneSlate extends React.Component {
|
||||
});
|
||||
}
|
||||
|
||||
_handleUpdate = async (e) => {
|
||||
let response = await this.props.onRehydrate();
|
||||
if (!response || response.error) {
|
||||
alert("TODO: error fetching authenticated viewer");
|
||||
return null;
|
||||
}
|
||||
|
||||
let viewer = response.data;
|
||||
|
||||
this.setState({
|
||||
following: !!viewer.subscriptions.filter((subscription) => {
|
||||
return subscription.target_slate_id === this.props.data.id;
|
||||
}).length,
|
||||
});
|
||||
};
|
||||
|
||||
_handleFollow = async () => {
|
||||
let response = await Actions.createSubscription({
|
||||
slateId: this.props.data.id,
|
||||
});
|
||||
console.log(response);
|
||||
// await this._handleUpdate();
|
||||
};
|
||||
|
||||
_handleChangeLayout = async (layout, layouts) => {
|
||||
this.setState({ layouts, saving: "SAVING" });
|
||||
await this._handleSave(null, null, layouts);
|
||||
@ -279,7 +304,7 @@ export default class SceneSlate extends React.Component {
|
||||
body = "A slate.",
|
||||
name,
|
||||
} = this.state;
|
||||
|
||||
console.log(this.props);
|
||||
return (
|
||||
<ScenePage style={{ padding: `88px 24px 128px 24px` }}>
|
||||
<ScenePageHeader
|
||||
@ -323,7 +348,15 @@ export default class SceneSlate extends React.Component {
|
||||
<SVG.Settings height="16px" />
|
||||
</CircleButtonGray>
|
||||
</React.Fragment>
|
||||
) : null
|
||||
) : (
|
||||
<div onClick={this._handleFollow}>
|
||||
{!!this.props.viewer.subscriptions.filter((subscription) => {
|
||||
return subscription.target_slate_id === this.props.data.id;
|
||||
}).length
|
||||
? "Unfollow"
|
||||
: "Follow"}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
>
|
||||
<ProcessedText text={body} />
|
||||
|
||||
@ -4,6 +4,7 @@ import * as System from "~/components/system";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import { TabGroup } from "~/components/core/TabGroup";
|
||||
|
||||
import ScenePage from "~/components/core/ScenePage";
|
||||
import ScenePageHeader from "~/components/core/ScenePageHeader";
|
||||
@ -17,40 +18,6 @@ const STYLES_NUMBER = css`
|
||||
font-weight: 400;
|
||||
`;
|
||||
|
||||
const STYLES_ACTIONS = css`
|
||||
z-index: ${Constants.zindex.navigation};
|
||||
bottom: 16px;
|
||||
right: 8px;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
const STYLES_ACTION_BUTTON = css`
|
||||
font-family: ${Constants.font.code};
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
user-select: none;
|
||||
height: 32px;
|
||||
padding: 0 16px 0 16px;
|
||||
border-radius: 32px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: ${Constants.zindex.modal};
|
||||
background: ${Constants.system.pitchBlack};
|
||||
transition: 200ms ease all;
|
||||
color: ${Constants.system.white};
|
||||
cursor: pointer;
|
||||
margin: auto;
|
||||
margin: 4px 16px 4px 16px;
|
||||
flex-shrink: 0;
|
||||
text-decoration: none;
|
||||
:hover {
|
||||
background-color: ${Constants.system.black};
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_TAB = css`
|
||||
padding: 8px 8px 8px 0px;
|
||||
margin-right: 24px;
|
||||
@ -64,16 +31,10 @@ const STYLES_TAB = css`
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_TAB_GROUP = css`
|
||||
${"" /* border-bottom: 1px solid ${Constants.system.gray}; */}
|
||||
margin: 36px 0px 24px 0px;
|
||||
padding: 0 0 0 2px;
|
||||
`;
|
||||
|
||||
// TODO(jim): Slates design.
|
||||
export default class SceneSlates extends React.Component {
|
||||
state = {
|
||||
tab: "my",
|
||||
tab: 0,
|
||||
};
|
||||
|
||||
_handleAdd = () => {
|
||||
@ -89,9 +50,7 @@ export default class SceneSlates extends React.Component {
|
||||
const slates = this.props.viewer.slates.map((each) => {
|
||||
return {
|
||||
...each,
|
||||
url: `https://slate.host/${this.props.viewer.username}/${
|
||||
each.slatename
|
||||
}`,
|
||||
url: `https://slate.host/${this.props.viewer.username}/${each.slatename}`,
|
||||
public: each.data.public,
|
||||
objects: <span css={STYLES_NUMBER}>{each.data.objects.length}</span>,
|
||||
};
|
||||
@ -107,7 +66,7 @@ export default class SceneSlates extends React.Component {
|
||||
<ScenePageHeader
|
||||
title="Slates"
|
||||
actions={
|
||||
this.state.tab === "my" ? (
|
||||
this.state.tab === 0 ? (
|
||||
<CircleButtonGray
|
||||
onMouseUp={this._handleAdd}
|
||||
onTouchEnd={this._handleAdd}
|
||||
@ -118,34 +77,14 @@ export default class SceneSlates extends React.Component {
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
<div css={STYLES_TAB_GROUP}>
|
||||
<div
|
||||
css={STYLES_TAB}
|
||||
style={{
|
||||
color:
|
||||
this.state.tab === "my"
|
||||
? Constants.system.pitchBlack
|
||||
: Constants.system.gray,
|
||||
}}
|
||||
onClick={() => this.setState({ tab: "my" })}
|
||||
>
|
||||
My Slates
|
||||
</div>
|
||||
<div
|
||||
css={STYLES_TAB}
|
||||
style={{
|
||||
color:
|
||||
this.state.tab === "following"
|
||||
? Constants.system.pitchBlack
|
||||
: Constants.system.gray,
|
||||
}}
|
||||
onClick={() => this.setState({ tab: "following" })}
|
||||
>
|
||||
Following
|
||||
</div>
|
||||
</div>
|
||||
{this.state.tab === "my"
|
||||
? this.props.data.children.map((slate) => (
|
||||
<TabGroup
|
||||
tabs={["My Slates", "Following"]}
|
||||
value={this.state.tab}
|
||||
onChange={(value) => this.setState({ tab: value })}
|
||||
/>
|
||||
{this.state.tab === 0 ? (
|
||||
this.props.data.children.length ? (
|
||||
this.props.data.children.map((slate) => (
|
||||
<div
|
||||
key={slate.id}
|
||||
onClick={() =>
|
||||
@ -159,30 +98,36 @@ export default class SceneSlates extends React.Component {
|
||||
<SlatePreviewBlock slate={slate} editing />
|
||||
</div>
|
||||
))
|
||||
: null}
|
||||
{this.state.tab === "following" ? (
|
||||
) : (
|
||||
<EmptyState style={{ marginTop: 88 }}>
|
||||
You have no slates yet! Create a new slate by clicking the plus
|
||||
button
|
||||
</EmptyState>
|
||||
)
|
||||
) : null}
|
||||
{this.state.tab === 1 ? (
|
||||
<EmptyState style={{ marginTop: 88 }}>
|
||||
This feature is coming soon.
|
||||
</EmptyState>
|
||||
) : null}
|
||||
{/* this.props.viewer.subscriptions
|
||||
.filter((each) => {
|
||||
return !!each.target_slate_id;
|
||||
})
|
||||
.map((relation) => (
|
||||
<div
|
||||
key={relation.slate.id}
|
||||
onClick={() =>
|
||||
this.props.onAction({
|
||||
type: "NAVIGATE",
|
||||
value: "V1_NAVIGATION_SLATE",
|
||||
data: relation.slate,
|
||||
})
|
||||
}
|
||||
>
|
||||
<SlatePreviewBlock slate={relation.slate} />
|
||||
</div>
|
||||
)) */}
|
||||
{this.props.viewer.subscriptions
|
||||
.filter((each) => {
|
||||
return !!each.target_slate_id;
|
||||
})
|
||||
.map((relation) => (
|
||||
<div
|
||||
key={relation.slate.id}
|
||||
onClick={() =>
|
||||
this.props.onAction({
|
||||
type: "NAVIGATE",
|
||||
value: "V1_NAVIGATION_SLATE",
|
||||
data: relation.slate,
|
||||
})
|
||||
}
|
||||
>
|
||||
<SlatePreviewBlock slate={relation.slate} />
|
||||
</div>
|
||||
))}
|
||||
</ScenePage>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user