filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-27 10:52:41 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #183 from filecoin-project/@martinalong/misc-style-changes

Browse Source 
Misc style improvements
This commit is contained in:
CAKE 2020-08-25 21:42:27 -07:00 committed by GitHub
commit 0073b7cfe7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 127 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
common/constants.js
View File

@ -27,10 +27,10 @@ export const system = {
export const zindex = {
navigation: 1,
sidebar: 2,
sidebar: 4,
header: 3,
modal: 4,
tooltip: 5,
modal: 5,
tooltip: 6,
};
export const font = {
@ -63,4 +63,4 @@ export const theme = {
export const gateways = {
ipfs: "ipfs.slate.textile.io",
}
};

2
common/navigation-data.js
View File

@ -42,7 +42,7 @@ const constructSlatesTreeForNavigation = (slates) => {
return {
...s,
slateId: s.id,
name: s.slatename,
name: s.data.name || s.slatename,
pageTitle: `Viewing ${s.slatename}`,
decorator: "SLATE",
};

25
components/core/ApplicationLayout.js
View File

@ -4,6 +4,7 @@ import * as SVG from "~/components/system/svg";
import { css } from "@emotion/react";
import { GlobalTooltip } from "~/components/system/components/fragments/GlobalTooltip";
import { Boundary } from "~/components/system/components/fragments/Boundary";
const STYLES_SCROLL = css`
-webkit-overflow-scrolling: touch;
@ -104,10 +105,15 @@ const STYLES_NAVIGATION = css`
`;
const STYLES_SIDEBAR_WEB = css`
z-index: ${Constants.zindex.sidebar};
height: 100vh;
width: ${Constants.sizes.sidebar}px;
padding: 0;
flex-shrink: 0;
position: absolute;
background-color: ${Constants.system.foreground};
top: 0;
right: 0;
box-shadow: inset 1px 0 0 0 ${Constants.system.border};
${STYLES_SCROLL}
@media (max-width: ${Constants.sizes.mobile}px) {
@ -181,6 +187,7 @@ export default class ApplicationLayout extends React.Component {
ref={(c) => {
this._body = c;
}}
id="slate-client-body"
>
{this.props.children}
</div>
@ -189,14 +196,16 @@ export default class ApplicationLayout extends React.Component {
</div>
</div>
{this.props.sidebar ? (
<div
css={STYLES_SIDEBAR_WEB}
ref={(c) => {
this._sidebar = c;
}}
>
{sidebarElements}
</div>
<Boundary onOutsideRectEvent={this.props.onDismissSidebar} enabled>
<div
css={STYLES_SIDEBAR_WEB}
ref={(c) => {
this._sidebar = c;
}}
>
{sidebarElements}
</div>
</Boundary>
) : null}
</div>
);

6
components/core/ScenePageHeader.js
View File

@ -25,8 +25,8 @@ const STYLES_RIGHT = css`
const STYLES_HEADER = css`
box-sizing: border-box;
font-family: ${Constants.font.semiBold};
font-size: 20px;
font-family: ${Constants.font.text};
font-size: ${Constants.typescale.lvl4};
padding: 0;
margin-bottom: 8px;
display: block;
@ -38,7 +38,7 @@ const STYLES_HEADER = css`
const STYLES_DESCRIPTION = css`
box-sizing: border-box;
font-family: ${Constants.font.text};
font-size: 14px;
font-size: ${Constants.typescale.lvl1};
margin-bottom: 12px;
line-height: 1.5;
display: block;

61
components/sidebars/SidebarSingleSlateSettings.js
View File

@ -2,6 +2,7 @@ import * as React from "react";
import * as Actions from "~/common/actions";
import * as Constants from "~/common/constants";
import * as System from "~/components/system";
import * as Strings from "~/common/strings";
import { css } from "@emotion/react";
@ -33,6 +34,7 @@ export default class SidebarSingleSlateSettings extends React.Component {
public: this.props.data.data.public,
body: this.props.data.data.body,
layouts: this.props.data.data.layouts,
name: this.props.data.data.name,
loading: false,
};
@ -41,8 +43,8 @@ export default class SidebarSingleSlateSettings extends React.Component {
const response = await Actions.updateSlate({
id: this.props.data.slateId,
slatename: this.state.slatename,
data: {
name: this.state.name,
objects: this.props.data.data.objects,
layouts: this.props.data.data.layouts,
public: this.state.public,
@ -74,7 +76,11 @@ export default class SidebarSingleSlateSettings extends React.Component {
_handleDelete = async (e) => {
this.setState({ loading: true });
if (!window.confirm("Are you sure you want to delete this Slate? This action is irreversible.")) {
if (
!window.confirm(
"Are you sure you want to delete this Slate? This action is irreversible."
)
) {
return this.setState({ loading: false });
}
@ -102,33 +108,42 @@ export default class SidebarSingleSlateSettings extends React.Component {
render() {
const { slatename } = this.state;
const url = `/${this.props.viewer.username}/${slatename}`;
const slug = Strings.createSlug(this.state.name);
const url = `/${this.props.viewer.username}/${slug}`;
return (
<React.Fragment>
<System.P style={{ fontFamily: Constants.font.semiBold }}>Slate Settings</System.P>
<System.P style={{ marginTop: 24 }}>Update settings for {this.props.data.slatename}.</System.P>
<System.P style={{ fontFamily: Constants.font.semiBold }}>
Slate Settings
</System.P>
<System.P style={{ marginTop: 24 }}>
Update settings for {this.props.data.slatename}.
</System.P>
<System.Input
containerStyle={{ marginTop: 48 }}
style={{ marginTop: 24 }}
label="Slatename"
label="Slate name"
description={
<React.Fragment>
Changing the slatename will change your public slate URL. Your slate URL is:{" "}
Changing the slatename will change your public slate URL. Your
slate URL is:{" "}
<a href={url} target="_blank">
https://slate.host{url}
</a>
</React.Fragment>
}
name="slatename"
value={this.state.slatename}
placeholder="Slatename"
name="name"
value={this.state.name}
placeholder="Name"
onChange={this._handleChange}
onSubmit={this._handleSubmit}
/>
<System.DescriptionGroup label="Description" style={{ marginTop: 48 }} />
<System.DescriptionGroup
label="Description"
style={{ marginTop: 48 }}
/>
<System.Textarea
style={{ marginTop: 24 }}
label="Description"
@ -147,17 +162,29 @@ export default class SidebarSingleSlateSettings extends React.Component {
/>
</div>
<div css={STYLES_RIGHT}>
<System.Toggle name="public" onChange={this._handleChange} active={this.state.public} />
<System.Toggle
name="public"
onChange={this._handleChange}
active={this.state.public}
/>
</div>
</div>
<div style={{ marginTop: 32 }}>
<System.ButtonPrimary full onClick={this._handleSubmit} loading={this.state.loading}>
<System.ButtonPrimary
full
onClick={this._handleSubmit}
loading={this.state.loading}
>
Save changes
</System.ButtonPrimary>
{!this.state.loading ? (
<System.ButtonSecondary style={{ marginTop: 16 }} full onClick={this._handleCancel}>
<System.ButtonSecondary
style={{ marginTop: 16 }}
full
onClick={this._handleCancel}
>
Cancel
</System.ButtonSecondary>
) : null}
@ -173,7 +200,11 @@ export default class SidebarSingleSlateSettings extends React.Component {
{!this.state.loading ? (
<div style={{ marginTop: 32 }}>
<System.ButtonSecondary full onClick={this._handleDelete} loading={this.state.loading}>
<System.ButtonSecondary
full
onClick={this._handleDelete}
loading={this.state.loading}
>
Delete {this.props.data.slatename}
</System.ButtonSecondary>
</div>

2
pages/api/slates/create.js
View File

@ -46,7 +46,7 @@ export default async (req, res) => {
}
const slate = await Data.createSlate({
slatename,
slatename: Strings.createSlug(req.body.data.name),
data: {
public: true,
ownerId: id,

41
pages/api/slates/update.js
View File

@ -12,7 +12,9 @@ export default async (req, res) => {
const id = Utilities.getIdFromCookie(req);
if (!id) {
return res.status(500).json({ decorator: "SERVER_FIND_USER_UPDATE_SLATE", error: true });
return res
.status(500)
.json({ decorator: "SERVER_FIND_USER_UPDATE_SLATE", error: true });
}
const user = await Data.getUserById({
@ -36,32 +38,51 @@ export default async (req, res) => {
const response = await Data.getSlateById({ id: req.body.data.id });
if (!response) {
return res.status(404).json({ decorator: "SERVER_UPDATE_SLATE_NOT_FOUND", error: true });
return res
.status(404)
.json({ decorator: "SERVER_UPDATE_SLATE_NOT_FOUND", error: true });
}
if (response.error) {
return res.status(500).json({ decorator: "SERVER_UPDATE_SLATE_NOT_FOUND", error: true });
return res
.status(500)
.json({ decorator: "SERVER_UPDATE_SLATE_NOT_FOUND", error: true });
}
if (!req.body.data) {
return res.status(500).json({
decorator: "SERVER_UPDATE_SLATE_MUST_PROVIDE_DATA",
error: true,
});
}
if (!req.body.data.data.name) {
return res.status(500).json({
decorator: "SERVER_UPDATE_SLATE_MUST_PROVIDE_NAME",
error: true,
});
}
const slate = await Data.updateSlateById({
id: response.id,
slatename: Strings.createSlug(req.body.data.slatename),
slatename: Strings.createSlug(req.body.data.data.name),
updated_at: new Date(),
data: {
...response.data,
objects: req.body.data.data.objects,
layouts: req.body.data.data.layouts,
public: req.body.data.data.public,
body: req.body.data.data.body,
...req.body.data.data,
},
});
if (!slate) {
return res.status(404).json({ decorator: "SERVER_UPDATE_SLATE", error: true });
return res
.status(404)
.json({ decorator: "SERVER_UPDATE_SLATE", error: true });
}
if (slate.error) {
return res.status(500).json({ decorator: "SERVER_UPDATE_SLATE", error: true });
return res
.status(500)
.json({ decorator: "SERVER_UPDATE_SLATE", error: true });
}
return res.status(200).json({ decorator: "SERVER_UPDATE_SLATE", slate });

21
scenes/SceneHome.js
View File

@ -20,7 +20,7 @@ export default class SceneHome extends React.Component {
const slates = {
columns: [
{
key: "slatename",
key: "name",
name: "Slate Name",
width: "100%",
type: "SLATE_LINK",
@ -41,7 +41,10 @@ export default class SceneHome extends React.Component {
rows: 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
}`,
name: each.data.name,
public: each.data.public,
objects: <span css={STYLES_NUMBER}>{each.data.objects.length}</span>,
};
@ -49,7 +52,9 @@ export default class SceneHome extends React.Component {
};
// TODO(jim): Refactor later.
const slateButtons = [{ name: "Create slate", type: "SIDEBAR", value: "SIDEBAR_CREATE_SLATE" }];
const slateButtons = [
{ name: "Create slate", type: "SIDEBAR", value: "SIDEBAR_CREATE_SLATE" },
];
/*
// TODO(jim): Refactor later.
@ -87,9 +92,15 @@ export default class SceneHome extends React.Component {
return (
<ScenePage>
<ScenePageHeader title="Home [WIP]">This scene is currently a work in progress.</ScenePageHeader>
<ScenePageHeader title="Home [WIP]">
This scene is currently a work in progress.
</ScenePageHeader>
<Section title="Slates" buttons={slateButtons} onAction={this.props.onAction}>
<Section
title="Slates"
buttons={slateButtons}
onAction={this.props.onAction}
>
<System.Table
data={slates}
name="slate"

10
scenes/SceneSlate.js
View File

@ -22,6 +22,7 @@ const moveIndex = (set, fromIndex, toIndex) => {
export default class SceneSlate extends React.Component {
state = {
name: this.props.current.data.name,
slatename: this.props.current.slatename,
public: this.props.current.data.public,
objects: this.props.current.data.objects,
@ -63,6 +64,7 @@ export default class SceneSlate extends React.Component {
public: this.props.current.data.public,
objects: this.props.current.data.objects,
body: this.props.current.data.body,
name: this.props.current.data.name,
layouts: layouts,
loading: false,
});
@ -92,12 +94,12 @@ export default class SceneSlate extends React.Component {
const response = await Actions.updateSlate({
id: this.props.current.slateId,
slatename: this.state.slatename,
data: {
objects: objects ? objects : this.state.objects,
layouts: layouts ? layouts : this.state.layouts,
public: this.state.public,
body: this.state.body,
name: this.state.name,
},
});
@ -198,12 +200,12 @@ export default class SceneSlate extends React.Component {
const response = await Actions.updateSlate({
id: this.props.current.slateId,
slatename: this.state.slatename,
data: {
objects,
layouts,
public: this.state.public,
body: this.state.body,
name: this.state.name,
},
});
@ -256,13 +258,13 @@ export default class SceneSlate extends React.Component {
};
render() {
const { slatename, objects, body = "A slate." } = this.state;
const { slatename, objects, body = "A slate.", name } = this.state;
return (
<ScenePage style={{ padding: `88px 24px 128px 24px` }}>
<ScenePageHeader
style={{ padding: `0 24px 0 24px` }}
title={slatename}
title={name}
actions={
<React.Fragment>
<CircleButtonLight

3
scenes/SceneSlates.js
View File

@ -20,7 +20,7 @@ export default class SceneSlates extends React.Component {
const slates = {
columns: [
{
key: "slatename",
key: "name",
name: "Slate Name",
width: "100%",
type: "SLATE_LINK",
@ -41,6 +41,7 @@ export default class SceneSlates extends React.Component {
rows: this.props.viewer.slates.map((each) => {
return {
...each,
name: each.data.name,
url: `https://slate.host/${this.props.viewer.username}/${
each.slatename
}`,