filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-23 22:12:19 +03:00
Code Issues Packages Projects Releases Wiki Activity

slates: PDF support enabled

Browse Source
This commit is contained in:
jimmylee 2020-08-01 23:41:18 -07:00
parent 5d4f58eddc
commit 8cb690c451
9 changed files with 91 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/core/MediaObject.js
View File

@ -49,21 +49,20 @@ export default class MediaObject extends React.Component {
render() {
const name = `${this.props.data.name}`;
const url = this.props.data.url ? this.props.data.url : `https://hub.textile.io${this.props.data.ipfs}`;
const type = this.props.data.type ? this.props.data.type : "LEGACY_NO_TYPE";
let mediaElement = <div css={STYLES_FAILURE}>No Preview</div>;
if (this.props.data.type.startsWith("application/pdf")) {
mediaElement = <object css={STYLES_OBJECT} data={url} type={this.props.data.type} />;
if (type.startsWith("application/pdf")) {
return <object css={STYLES_OBJECT} data={url} type={type} />;
}
if (this.props.data.type.startsWith("image/")) {
mediaElement = (
if (type.startsWith("image/") || this.props.useImageFallback) {
return (
<div css={STYLES_ASSET}>
<img css={STYLES_IMAGE} src={url} />
</div>
);
}
return mediaElement;
return <div css={STYLES_FAILURE}>No Preview</div>;
}
}

36
components/core/Slate.js
View File

@ -26,17 +26,35 @@ const STYLES_IMAGE = css`
display: block;
max-width: 100%;
max-height: 100%;
cursor: pointer;
`;
const STYLES_PDF = css`
height: 100%;
width: 100%;
border: 1px solid ${Constants.system.border};
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
`;
class Item extends React.Component {
render() {
if (this.props.type && this.props.type.startsWith("application/pdf")) {
return (
<span css={STYLES_ITEM}>
<div css={STYLES_PDF} onClick={this.props.onClick}>
PDF
</div>
</span>
);
}
return (
<span css={STYLES_ITEM}>
<img
css={STYLES_IMAGE}
src={this.props.url}
onClick={this.props.onClick}
/>
<img css={STYLES_IMAGE} src={this.props.url} onClick={this.props.onClick} />
</span>
);
}
@ -47,13 +65,7 @@ export default class Slate extends React.Component {
return (
<div css={STYLES_SLATE}>
{this.props.items.map((each, index) => {
return (
<Item
key={each.id}
onClick={() => this.props.onSelect(index)}
url={each.url}
/>
);
return <Item key={each.id} type={each.type} onClick={() => this.props.onSelect(index)} url={each.url} />;
})}
</div>
);

6
components/sidebars/SidebarAddFileToBucket.js
View File

@ -67,12 +67,12 @@ export default class SidebarAddFileToBucket extends React.Component {
render() {
return (
<React.Fragment>
<System.P style={{ fontFamily: Constants.font.semiBold }}>Upload a file to Slate</System.P>
<System.P style={{ fontFamily: Constants.font.semiBold }}>Upload data</System.P>
<input css={STYLES_FILE_HIDDEN} type="file" id="file" onChange={this._handleUpload} />
{this.props.data && this.props.data.decorator === "SLATE" ? (
<System.P style={{ marginTop: 24 }}>
This will add an image to your Slate named <strong>{this.props.data.slatename}</strong>.
This will add data to your Slate named <strong>{this.props.data.slatename}</strong>.
</System.P>
) : null}
@ -81,7 +81,7 @@ export default class SidebarAddFileToBucket extends React.Component {
htmlFor="file"
style={{ marginTop: 24 }}
loading={this.props.fileLoading}>
Add file
Add data
</System.ButtonPrimaryFull>
{!this.props.fileLoading ? (

72
components/system/components/GlobalCarousel.js
View File

@ -21,30 +21,23 @@ const STYLES_BACKGROUND = css`
z-index: ${Constants.zindex.modal};
`;
const STYLES_CLOSE_ICON = css`
height: 24px;
const STYLES_BOX = css`
height: 32px;
width: 32px;
border-radius: 32px;
position: absolute;
top: 16px;
right: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: ${Constants.zindex.modal};
background: ${Constants.system.pitchBlack};
color: ${Constants.system.white};
cursor: pointer;
`;
margin: auto;
const STYLES_PREVIOUS_ICON = css`
height: 24px;
position: absolute;
top: 50%;
left: 16px;
transform: translateY(-50%);
cursor: pointer;
`;
const STYLES_NEXT_ICON = css`
height: 24px;
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
cursor: pointer;
:hover {
background-color: ${Constants.system.black};
}
`;
export class GlobalCarousel extends React.Component {
@ -64,19 +57,10 @@ export class GlobalCarousel extends React.Component {
componentWillUnmount = () => {
window.removeEventListener("keydown", this._handleKeyDown);
window.removeEventListener(
"slate-global-create-carousel",
this._handleCreate
);
window.removeEventListener(
"slate-global-delete-carousel",
this._handleDelete
);
window.removeEventListener("slate-global-create-carousel", this._handleCreate);
window.removeEventListener("slate-global-delete-carousel", this._handleDelete);
window.removeEventListener("slate-global-open-carousel", this._handleOpen);
window.removeEventListener(
"slate-global-close-carousel",
this._handleClose
);
window.removeEventListener("slate-global-close-carousel", this._handleClose);
};
_handleKeyDown = (e) => {
@ -95,8 +79,7 @@ export class GlobalCarousel extends React.Component {
}
};
_handleOpen = (e) =>
this.setState({ visible: true, index: e.detail.index || 0 });
_handleOpen = (e) => this.setState({ visible: true, index: e.detail.index || 0 });
_handleClose = () => this.setState({ visible: false, index: 0 });
@ -116,9 +99,7 @@ export class GlobalCarousel extends React.Component {
};
_handlePrevious = () => {
const index =
(this.state.index + this.state.slides.length - 1) %
this.state.slides.length;
const index = (this.state.index + this.state.slides.length - 1) % this.state.slides.length;
this.setState({ index });
};
@ -130,14 +111,17 @@ export class GlobalCarousel extends React.Component {
return (
<div css={STYLES_BACKGROUND} style={this.props.style}>
<SVG.Dismiss css={STYLES_CLOSE_ICON} onClick={this._handleClose} />
<span css={STYLES_BOX} onClick={this._handleClose} style={{ top: 8, right: 16 }}>
<SVG.Dismiss height="20px" />
</span>
<SVG.ChevronLeft
css={STYLES_PREVIOUS_ICON}
onClick={this._handlePrevious}
/>
<span css={STYLES_BOX} onClick={this._handlePrevious} style={{ top: 0, left: 16, bottom: 0 }}>
<SVG.ChevronLeft height="20px" />
</span>
<SVG.ChevronRight css={STYLES_NEXT_ICON} onClick={this._handleNext} />
<span css={STYLES_BOX} onClick={this._handleNext} style={{ top: 0, right: 16, bottom: 0 }}>
<SVG.ChevronRight height="20px" />
</span>
{this.state.slides[this.state.index]}
</div>

4
pages/slate.js
View File

@ -7,6 +7,8 @@ import { css } from "@emotion/react";
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
import Slate from "~/components/core/Slate";
import MediaObject from "~/components/core/MediaObject";
const STYLES_ROOT = css`
padding: 128px 88px 256px 88px;
max-width: 1328px;
@ -35,7 +37,7 @@ export default class SlatePage extends React.Component {
name: "slate-global-create-carousel",
detail: {
slides: this.props.slate.data.objects.map((each) => {
return <img key={each.id} src={each.url} style={{ maxHeight: "80%", maxWidth: "80%", display: "block" }} />;
return <MediaObject useImageFallback data={each} />;
}),
},
});

4
scenes/SceneFilesFolder.js
View File

@ -62,14 +62,14 @@ export default class SceneFilesFolder extends React.Component {
const data = {
columns: [
{ key: "name", name: "File", type: "FILE_LINK", width: "100%" },
{ key: "type", name: "Type" },
{ key: "name", name: "File", type: "FILE_LINK", width: "328px" },
{
key: "size",
name: "Size",
width: "116px",
type: "FILE_SIZE",
},
{ key: "type", name: "Type", type: "TEXT_TAG", width: "136px" },
{
key: "networks",
name: "Networks",

12
scenes/SceneHome.js
View File

@ -83,14 +83,14 @@ export default class SceneHome extends React.Component {
// TODO(jim): Refactor later.
const data = {
columns: [
{ key: "name", name: "Data", type: "FILE_LINK", width: "100%" },
{ key: "type", name: "Type" },
{ key: "name", name: "Data", type: "FILE_LINK", width: "328px" },
{
key: "size",
name: "Size",
width: "140px",
type: "FILE_SIZE",
},
{ key: "type", name: "Type", type: "TEXT_TAG", width: "136px" },
{
key: "date",
name: "Date uploaded",
@ -101,7 +101,7 @@ export default class SceneHome extends React.Component {
key: "networks",
name: "Network",
type: "NETWORK_TYPE",
width: "188px",
width: "100%",
tooltip: "This data is publicly available to share on the internet!",
},
],
@ -148,7 +148,11 @@ export default class SceneHome extends React.Component {
return (
<ScenePage>
<System.H1>Home</System.H1>
<System.DescriptionGroup
label="Will the Home page look like this in the final product?"
description="No! Consider this page just a functionality test. Home will have Filecoin network analytics and updates from the people you engage with."
/>
<System.H1 style={{ marginTop: 48 }}>Home</System.H1>
{this.props.viewer.addresses[0] ? (
<Section title="Wallet addresses" buttons={walletButtons} onAction={this.props.onAction}>
<System.Table

16
scenes/SceneSlate.js
View File

@ -14,9 +14,9 @@ export default class SceneSlate extends React.Component {
const slates = {
columns: [
{ key: "name", name: "Data", type: "FILE_LINK", width: "288px" },
{ key: "type", name: "Data type" },
{ key: "url", name: "Asset URL", width: "100%" },
{ key: "name", name: "Data", type: "FILE_LINK", width: "328px" },
{ key: "url", name: "Data URL", width: "100%" },
{ key: "type", name: "Data type", type: "TEXT_TAG", width: "136px" },
],
rows: images,
};
@ -34,7 +34,7 @@ export default class SceneSlate extends React.Component {
value: url,
},
{
name: "Add image",
name: "Upload data",
type: "SIDEBAR",
value: "SIDEBAR_ADD_FILE_TO_BUCKET",
data: this.props.current,
@ -43,10 +43,14 @@ export default class SceneSlate extends React.Component {
return (
<ScenePage>
<System.H1>
<System.DescriptionGroup
label="Will the Slate page look like this in the final product?"
description="No! Consider this page just a functionality test. Slates will be collaborative mood boards and will have a much more intuitive experience than this."
/>
<System.H1 style={{ marginTop: 48 }}>
https://slate.host/@{this.props.viewer.username}/{slatename}
</System.H1>
<Section title="Images" buttons={slateButtons} onAction={this.props.onAction}>
<Section title="Slate elements" buttons={slateButtons} onAction={this.props.onAction}>
<System.Table
data={slates}
name={`/@${this.props.viewer.username}/${slatename}`}

16
scenes/SceneSlates.js
View File

@ -37,18 +37,16 @@ export default class SceneSlates 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" }];
return (
<ScenePage>
<System.H1>Slates</System.H1>
<Section
title="Slates"
buttons={slateButtons}
onAction={this.props.onAction}
>
<System.DescriptionGroup
label="Will the Slates page look like this in the final product?"
description="No! Consider this page just a functionality test. Slates will be collaborative mood boards and will have a much more intuitive experience than this."
/>
<System.H1 style={{ marginTop: 48 }}>Slates</System.H1>
<Section title="Slates" buttons={slateButtons} onAction={this.props.onAction}>
<System.Table
data={slates}
name="slate"