mirror of
https://github.com/filecoin-project/slate.git
synced 2024-12-24 01:23:08 +03:00
API page keys visual edits
This commit is contained in:
Martina
parent
55d724771a
commit
5989b452d8
@ -583,6 +583,7 @@ class CarouselSidebar extends React.Component {
|
||||
value={this.state.name}
|
||||
name="name"
|
||||
onChange={this._handleChange}
|
||||
autoHighlight
|
||||
id={`sidebar-label-name`}
|
||||
style={{
|
||||
fontSize: Constants.typescale.lvl1,
|
||||
|
||||
@ -1,732 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as Strings from "~/common/strings";
|
||||
import * as Validations from "~/common/validations";
|
||||
import * as Actions from "~/common/actions";
|
||||
import * as System from "~/components/system";
|
||||
import * as UserBehaviors from "~/common/user-behaviors";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as Events from "~/common/custom-events";
|
||||
import * as Window from "~/common/window";
|
||||
import * as FileUtilities from "~/common/file-utilities";
|
||||
|
||||
import { css, withTheme } from "@emotion/react";
|
||||
import { LoaderSpinner } from "~/components/system/components/Loaders";
|
||||
import { SlatePicker } from "~/components/core/SlatePicker";
|
||||
import { Input } from "~/components/system/components/Input";
|
||||
import { Boundary } from "~/components/system/components/fragments/Boundary";
|
||||
import { Toggle } from "~/components/system/components/Toggle";
|
||||
import { Tag } from "~/components/system/components/Tag";
|
||||
|
||||
import isEqual from "lodash/isEqual";
|
||||
|
||||
const DEFAULT_BOOK =
|
||||
"https://slate.textile.io/ipfs/bafkreibk32sw7arspy5kw3p5gkuidfcwjbwqyjdktd5wkqqxahvkm2qlyi";
|
||||
const DEFAULT_DATA =
|
||||
"https://slate.textile.io/ipfs/bafkreid6bnjxz6fq2deuhehtxkcesjnjsa2itcdgyn754fddc7u72oks2m";
|
||||
const DEFAULT_DOCUMENT =
|
||||
"https://slate.textile.io/ipfs/bafkreiecdiepww52i5q3luvp4ki2n34o6z3qkjmbk7pfhx4q654a4wxeam";
|
||||
const DEFAULT_VIDEO =
|
||||
"https://slate.textile.io/ipfs/bafkreibesdtut4j5arclrxd2hmkfrv4js4cile7ajnndn3dcn5va6wzoaa";
|
||||
const DEFAULT_AUDIO =
|
||||
"https://slate.textile.io/ipfs/bafkreig2hijckpamesp4nawrhd6vlfvrtzt7yau5wad4mzpm3kie5omv4e";
|
||||
|
||||
const STYLES_NO_VISIBLE_SCROLL = css`
|
||||
overflow-y: scroll;
|
||||
scrollbar-width: none;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
display: none;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: ${Constants.system.foreground};
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: ${Constants.system.darkGray};
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SIDEBAR = css`
|
||||
width: 420px;
|
||||
padding: 48px 24px 0px 24px;
|
||||
flex-shrink: 0;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
background-color: rgba(20, 20, 20, 0.8);
|
||||
${STYLES_NO_VISIBLE_SCROLL}
|
||||
|
||||
@supports ((-webkit-backdrop-filter: blur(75px)) or (backdrop-filter: blur(75px))) {
|
||||
-webkit-backdrop-filter: blur(75px);
|
||||
backdrop-filter: blur(75px);
|
||||
background-color: rgba(150, 150, 150, 0.2);
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_DISMISS_BOX = css`
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
color: ${Constants.system.darkGray};
|
||||
cursor: pointer;
|
||||
|
||||
:hover {
|
||||
color: ${Constants.system.white};
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_META = css`
|
||||
text-align: start;
|
||||
padding: 14px 0px 8px 0px;
|
||||
overflow-wrap: break-word;
|
||||
`;
|
||||
|
||||
const STYLES_META_TITLE = css`
|
||||
font-family: ${Constants.font.semiBold};
|
||||
color: ${Constants.system.white};
|
||||
font-size: ${Constants.typescale.lvl2};
|
||||
text-decoration: none;
|
||||
|
||||
:hover {
|
||||
color: ${Constants.system.blue};
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_TAG = css`
|
||||
margin-right: 24px;
|
||||
padding: 0px 2px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid ${Constants.system.darkGray};
|
||||
`;
|
||||
|
||||
const STYLES_OPTIONS_SECTION = css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 16px 0 16px 0;
|
||||
`;
|
||||
|
||||
const STYLES_META_DETAILS = css`
|
||||
color: ${Constants.system.darkGray};
|
||||
text-transform: uppercase;
|
||||
margin: 24px 0px;
|
||||
font-family: ${Constants.font.medium};
|
||||
font-size: 0.9rem;
|
||||
`;
|
||||
|
||||
const STYLES_ACTIONS = css`
|
||||
color: ${Constants.system.white};
|
||||
border: 1px solid #3c3c3c;
|
||||
border-radius: 4px;
|
||||
background-color: transparent;
|
||||
margin-bottom: 48px;
|
||||
`;
|
||||
|
||||
const STYLES_ACTION = css`
|
||||
cursor: pointer;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #3c3c3c;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
:hover {
|
||||
color: ${Constants.system.brand};
|
||||
}
|
||||
|
||||
:last-child {
|
||||
border: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SECTION_HEADER = css`
|
||||
font-family: ${Constants.font.semiBold};
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 32px;
|
||||
`;
|
||||
|
||||
const STYLES_HIDDEN = css`
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
`;
|
||||
|
||||
const STYLES_IMAGE_BOX = css`
|
||||
max-width: 100%;
|
||||
max-height: 368px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: ${Constants.system.black};
|
||||
overflow: hidden;
|
||||
${"" /* box-shadow: 0 0 0 1px ${Constants.system.border} inset; */}
|
||||
border-radius: 4px;
|
||||
`;
|
||||
|
||||
const STYLES_FILE_HIDDEN = css`
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
position: fixed;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
`;
|
||||
|
||||
const STYLES_TEXT = css`
|
||||
color: ${Constants.system.darkGray};
|
||||
line-height: 1.5;
|
||||
`;
|
||||
|
||||
const STYLES_INPUT = {
|
||||
marginBottom: 16,
|
||||
backgroundColor: "transparent",
|
||||
boxShadow: "0 0 0 1px #3c3c3c inset",
|
||||
color: Constants.system.white,
|
||||
height: 48,
|
||||
};
|
||||
|
||||
const STYLES_AUTOSAVE = css`
|
||||
font-size: 12px;
|
||||
line-height: 1.225;
|
||||
display: flex;
|
||||
justify-content: baseline;
|
||||
color: ${Constants.system.yellow};
|
||||
opacity: 0;
|
||||
margin: 26px 24px;
|
||||
|
||||
@keyframes slate-animations-autosave {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(0);
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
transform: translateX(12px);
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
transform: translateX(12px);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
animation: slate-animations-autosave 4000ms ease;
|
||||
`;
|
||||
|
||||
const STYLES_SPINNER = css`
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
`;
|
||||
|
||||
export const FileTypeDefaultPreview = () => {
|
||||
if (props.type && props.type.startsWith("video/")) {
|
||||
return DEFAULT_VIDEO;
|
||||
}
|
||||
|
||||
if (props.type && props.type.startsWith("audio/")) {
|
||||
return DEFAULT_AUDIO;
|
||||
}
|
||||
|
||||
if (props.type && props.type.startsWith("application/epub")) {
|
||||
return DEFAULT_BOOK;
|
||||
}
|
||||
|
||||
if (props.type && props.type.startsWith("application/pdf")) {
|
||||
return DEFAULT_DOCUMENT;
|
||||
}
|
||||
|
||||
return DEFAULT_DATA;
|
||||
};
|
||||
|
||||
class CarouselSidebarData extends React.Component {
|
||||
_ref = null;
|
||||
|
||||
state = {
|
||||
name: Strings.isEmpty(this.props.data.name) ? "" : this.props.data.name,
|
||||
selected: {},
|
||||
isPublic: false,
|
||||
inPublicSlates: false,
|
||||
copyValue: "",
|
||||
loading: false,
|
||||
changingPreview: false,
|
||||
unsavedChanges: false,
|
||||
isEditing: false,
|
||||
isDownloading: false,
|
||||
subject: "",
|
||||
tags: this.props.data?.tags || [],
|
||||
suggestions: this.props.viewer?.tags || [],
|
||||
};
|
||||
|
||||
componentDidMount = () => {
|
||||
this.setState({ unsavedChanges: true });
|
||||
if (this.props.isOwner && !this.props.external) {
|
||||
this.debounceInstance = Window.debounce(() => this._handleSave(), 3000);
|
||||
let inPublicSlates = false;
|
||||
let selected = {};
|
||||
const id = this.props.data.id;
|
||||
for (let slate of this.props.slates) {
|
||||
if (slate.data.objects.some((o) => o.id === id)) {
|
||||
if (slate.data.public) {
|
||||
inPublicSlates = true;
|
||||
}
|
||||
selected[slate.id] = true;
|
||||
}
|
||||
}
|
||||
this.setState({ selected, inPublicSlates, isPublic: this.props.data.public });
|
||||
}
|
||||
|
||||
this.updateSuggestions();
|
||||
};
|
||||
|
||||
componentDidUpdate = (prevProps, prevState) => {
|
||||
if (!isEqual(prevState.tags, this.state.tags)) {
|
||||
this.updateSuggestions();
|
||||
}
|
||||
};
|
||||
|
||||
updateSuggestions = () => {
|
||||
let newSuggestions = new Set([...this.state.suggestions, ...this.state.tags]);
|
||||
this.setState({ suggestions: Array.from(newSuggestions) });
|
||||
};
|
||||
|
||||
_handleDarkMode = async (e) => {
|
||||
Events.dispatchCustomEvent({
|
||||
name: "set-slate-theme",
|
||||
detail: { darkmode: e.target.value },
|
||||
});
|
||||
};
|
||||
|
||||
_handleChange = (e) => {
|
||||
if (this.props.isOwner && !this.props.external) {
|
||||
this.debounceInstance();
|
||||
this.setState({
|
||||
[e.target.name]: e.target.value,
|
||||
unsavedChanges: true,
|
||||
subject: this._handleCapitalization(e.target.name),
|
||||
});
|
||||
|
||||
if (e.target.name === "Tags") {
|
||||
this.updateSuggestions();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
_handleCapitalization(str) {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1);
|
||||
}
|
||||
|
||||
_handleSave = async () => {
|
||||
let data = { name: this.state.name, tags: this.state.tags };
|
||||
this.props.onSave(data, this.props.index);
|
||||
await setTimeout(() => {
|
||||
this.setState({ unsavedChanges: false });
|
||||
}, 500);
|
||||
await setTimeout(() => {
|
||||
this.setState({ unsavedChanges: true });
|
||||
}, 4000);
|
||||
|
||||
this.props.onUpdateViewer({ tags: this.state.suggestions });
|
||||
};
|
||||
|
||||
_handleToggleAutoPlay = async (e) => {
|
||||
await this.props.onSave(
|
||||
{ settings: { ...this.props.data?.settings, autoPlay: e.target.value } },
|
||||
this.props.index
|
||||
);
|
||||
};
|
||||
|
||||
_handleUpload = async (e) => {
|
||||
e.persist();
|
||||
this.setState({ changingPreview: true });
|
||||
let previousCoverCid = this.props.data?.coverImage?.cid;
|
||||
if (!e || !e.target) {
|
||||
this.setState({ changingPreview: false });
|
||||
return;
|
||||
}
|
||||
let json = await UserBehaviors.uploadImage(e.target.files[0], this.props.resources, true);
|
||||
if (!json) {
|
||||
this.setState({ changingPreview: false });
|
||||
return;
|
||||
}
|
||||
|
||||
json.data.url = Strings.getCIDGatewayURL(json.data.cid);
|
||||
|
||||
let updateReponse = await Actions.updateFile({
|
||||
data: {
|
||||
id: this.props.data.id,
|
||||
coverImage: json.data,
|
||||
},
|
||||
});
|
||||
|
||||
if (previousCoverCid) {
|
||||
let libraryCids = this.props.viewer.library[0].children.map((obj) => obj.cid);
|
||||
if (!libraryCids.includes(this.props.data.coverImage.cid)) {
|
||||
await UserBehaviors.deleteFiles(
|
||||
this.props.data.coverImage.cid,
|
||||
this.props.data.coverImage.id,
|
||||
true
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Events.hasError(updateReponse);
|
||||
this.setState({ changingPreview: false });
|
||||
};
|
||||
|
||||
_handleDownload = () => {
|
||||
if (this.props.data.type === "application/unity") {
|
||||
this.setState({ isDownloading: true }, async () => {
|
||||
const response = await UserBehaviors.downloadZip(this.props.data);
|
||||
this.setState({ isDownloading: false });
|
||||
|
||||
Events.hasError(response);
|
||||
});
|
||||
} else {
|
||||
UserBehaviors.download(this.props.data);
|
||||
}
|
||||
};
|
||||
|
||||
_handleCreateSlate = async () => {
|
||||
this.props.onClose();
|
||||
this.props.onAction({
|
||||
type: "SIDEBAR",
|
||||
value: "SIDEBAR_CREATE_SLATE",
|
||||
data: { files: [this.props.data] },
|
||||
});
|
||||
};
|
||||
|
||||
_handleCopy = (copyValue, loading) => {
|
||||
this.setState({ copyValue, loading }, () => {
|
||||
this._ref.select();
|
||||
document.execCommand("copy");
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.setState({ loading: false });
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
_handleDelete = (cid) => {
|
||||
if (!this.props.isOwner) return;
|
||||
const message = `Are you sure you want to delete this? It will be deleted from your slates as well`;
|
||||
if (!window.confirm(message)) {
|
||||
return;
|
||||
}
|
||||
|
||||
let library = this.props.viewer.library;
|
||||
library[0].children = library[0].children.filter((obj) => obj.cid !== cid);
|
||||
this.props.onUpdateViewer({ library });
|
||||
|
||||
// NOTE(jim): Accepts ID as well if CID can't be found.
|
||||
// Since our IDS are unique.
|
||||
UserBehaviors.deleteFiles(cid, this.props.data.id);
|
||||
};
|
||||
|
||||
_handleAdd = async (slate) => {
|
||||
this.setState({
|
||||
selected: { ...this.state.selected, [slate.id]: !this.state.selected[slate.id] },
|
||||
});
|
||||
if (this.state.selected[slate.id]) {
|
||||
await UserBehaviors.removeFromSlate({ slate, ids: [this.props.data.id] });
|
||||
} else {
|
||||
await UserBehaviors.addToSlate({
|
||||
slate,
|
||||
files: [this.props.data],
|
||||
fromSlate: this.props.fromSlate,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
_handleEditFilename = async () => {
|
||||
this.setState({ isEditing: !this.state.isEditing }, () => {
|
||||
if (this.state.isEditing == false) {
|
||||
this._handleSave();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
_handleToggleVisibility = async (e) => {
|
||||
const isVisible = this.state.inPublicSlates || this.state.isPublic;
|
||||
let selected = this.state.selected;
|
||||
if (this.state.inPublicSlates) {
|
||||
const slateIds = Object.entries(this.state.selected)
|
||||
.filter((entry) => entry[1])
|
||||
.map((entry) => entry[0]);
|
||||
const publicSlateIds = [];
|
||||
const publicSlateNames = [];
|
||||
for (let slate of this.props.slates) {
|
||||
if (slate.data.public && slateIds.includes(slate.id)) {
|
||||
publicSlateNames.push(slate.data.name);
|
||||
publicSlateIds.push(slate.id);
|
||||
selected[slate.id] = false;
|
||||
}
|
||||
}
|
||||
const message = `Making this file private will remove it from the following public slates: ${publicSlateNames.join(
|
||||
", "
|
||||
)}. Do you wish to continue?`;
|
||||
if (!window.confirm(message)) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
let response = await Actions.toggleFilePrivacy({
|
||||
data: {
|
||||
id: this.props.data.id,
|
||||
public: !isVisible,
|
||||
},
|
||||
});
|
||||
if (isVisible) {
|
||||
this.setState({ inPublicSlates: false, isPublic: false, selected });
|
||||
} else {
|
||||
this.setState({ isPublic: true });
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const isVisible = this.state.inPublicSlates || this.state.isPublic;
|
||||
const { cid, file, name, coverImage, type, size, url, blurhash } = this.props.data;
|
||||
const elements = [];
|
||||
if (this.props.onClose) {
|
||||
elements.push(
|
||||
<div key="s-1" css={STYLES_DISMISS_BOX} onClick={this.props.onClose}>
|
||||
<SVG.Dismiss height="24px" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
elements.push(
|
||||
<div key="s-2" style={{ marginBottom: 80 }}>
|
||||
<div css={STYLES_META}>
|
||||
{this.state.isEditing && this.props.isOwner && !this.props.external ? (
|
||||
<Boundary enabled onOutsideRectEvent={this._handleEditFilename}>
|
||||
<Input
|
||||
full
|
||||
value={this.state.name}
|
||||
name="name"
|
||||
onChange={this._handleChange}
|
||||
id={`sidebar-label-name`}
|
||||
style={STYLES_INPUT}
|
||||
/>
|
||||
</Boundary>
|
||||
) : (
|
||||
<span
|
||||
css={STYLES_META_TITLE}
|
||||
style={{
|
||||
color: this.props.isOwner && !this.props.external ? "auto" : Constants.system.white,
|
||||
}}
|
||||
onClick={
|
||||
this.props.external || !this.props.isOwner ? () => {} : this._handleEditFilename
|
||||
}
|
||||
>
|
||||
{this.state.name}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<div style={{ display: `flex`, justifyContent: `baseline` }}>
|
||||
<div css={STYLES_META_DETAILS}>
|
||||
<span css={STYLES_TAG}>{type}</span> <span>{Strings.bytesToSize(size)}</span>
|
||||
</div>
|
||||
{this.state.unsavedChanges == false ? (
|
||||
<div css={STYLES_AUTOSAVE}>
|
||||
<SVG.Check height="14px" style={{ marginRight: 4 }} />
|
||||
{this.state.subject} saved
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<div css={STYLES_ACTIONS}>
|
||||
{/* {this.props.isOwner ? (
|
||||
<div css={STYLES_ACTION} onClick={() => this._handleCopy(cid, "cidCopying")}>
|
||||
<SVG.CopyAndPaste height="24px" />
|
||||
<span style={{ marginLeft: 16 }}>
|
||||
{this.state.loading === "cidCopying" ? "Copied!" : "Copy file CID"}
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
<div css={STYLES_ACTION} onClick={() => this._handleCopy(url, "gatewayUrlCopying")}>
|
||||
<SVG.Data height="24px" />
|
||||
<span style={{ marginLeft: 16 }}>
|
||||
{this.state.loading === "gatewayUrlCopying" ? "Copied!" : "Copy file URL"}
|
||||
</span>
|
||||
</div> */}
|
||||
{this.props.external ? null : (
|
||||
<div css={STYLES_ACTION} onClick={this._handleDownload}>
|
||||
{this.state.isDownloading ? (
|
||||
<>
|
||||
<LoaderSpinner css={STYLES_SPINNER} />
|
||||
<span style={{ marginLeft: 16 }}>Downloading</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<SVG.Download height="24px" />
|
||||
<span style={{ marginLeft: 16 }}>Download</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{this.props.isOwner ? (
|
||||
<div css={STYLES_ACTION} onClick={() => this._handleDelete(cid)}>
|
||||
<SVG.Trash height="24px" />
|
||||
<span style={{ marginLeft: 16 }}>Delete</span>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
{this.props.isOwner ? (
|
||||
<React.Fragment>
|
||||
<div css={STYLES_SECTION_HEADER} style={{ margin: "48px 0px 8px 0px" }}>
|
||||
Tags
|
||||
</div>
|
||||
<div css={STYLES_OPTIONS_SECTION}>
|
||||
<Tag
|
||||
type="dark"
|
||||
tags={this.state.tags}
|
||||
suggestions={this.state.suggestions}
|
||||
style={{ margin: "0 0 16px" }}
|
||||
inputStyles={{ padding: "16px" }}
|
||||
dropdownStyles={{ top: "50px" }}
|
||||
onChange={this._handleChange}
|
||||
/>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
) : null}
|
||||
{this.props.external ? null : (
|
||||
<React.Fragment>
|
||||
<div css={STYLES_SECTION_HEADER}>Connected Slates</div>
|
||||
<SlatePicker
|
||||
dark
|
||||
slates={this.props.slates}
|
||||
onCreateSlate={this._handleCreateSlate}
|
||||
selectedColor={Constants.system.white}
|
||||
files={[this.props.data]}
|
||||
selected={this.state.selected}
|
||||
onAdd={this._handleAdd}
|
||||
/>
|
||||
</React.Fragment>
|
||||
)}
|
||||
{type && Validations.isPreviewableImage(type) ? null : (
|
||||
<div>
|
||||
{coverImage && (
|
||||
<React.Fragment>
|
||||
<System.P css={STYLES_SECTION_HEADER} style={{ margin: "48px 0px 8px 0px" }}>
|
||||
Preview image
|
||||
</System.P>
|
||||
|
||||
<React.Fragment>
|
||||
<System.P css={STYLES_TEXT}>This is the preview image of your file.</System.P>
|
||||
<div css={STYLES_IMAGE_BOX} style={{ marginTop: 24 }}>
|
||||
<img
|
||||
src={coverImage?.url}
|
||||
alt=""
|
||||
style={{ maxWidth: "368px", maxHeight: "368px" }}
|
||||
/>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
</React.Fragment>
|
||||
)}
|
||||
{this.props.isOwner && (
|
||||
<React.Fragment>
|
||||
<System.P css={STYLES_SECTION_HEADER} style={{ margin: "48px 0px 8px 0px" }}>
|
||||
Preview image
|
||||
</System.P>
|
||||
<System.P css={STYLES_TEXT}>Add a cover image for your file.</System.P>
|
||||
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<input
|
||||
css={STYLES_FILE_HIDDEN}
|
||||
type="file"
|
||||
id="file"
|
||||
onChange={this._handleUpload}
|
||||
/>
|
||||
<System.ButtonPrimary
|
||||
full
|
||||
type="label"
|
||||
htmlFor="file"
|
||||
loading={this.state.changingPreview}
|
||||
>
|
||||
Upload image
|
||||
</System.ButtonPrimary>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{this.props.isOwner ? (
|
||||
<React.Fragment>
|
||||
<div css={STYLES_SECTION_HEADER} style={{ margin: "48px 0px 8px 0px" }}>
|
||||
Visibility
|
||||
</div>
|
||||
<div css={STYLES_OPTIONS_SECTION}>
|
||||
<div css={STYLES_TEXT}>{isVisible ? "Everyone" : "Link only"}</div>
|
||||
<Toggle dark active={isVisible} onChange={this._handleToggleVisibility} />
|
||||
</div>
|
||||
<div style={{ color: Constants.system.darkGray, marginTop: 8 }}>
|
||||
{isVisible
|
||||
? "This file is currently visible to everyone and searchable within Slate through public slates."
|
||||
: "This file is currently not visible to others unless they have the link."}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
) : null}
|
||||
{this.props.data.name.endsWith(".md") ? (
|
||||
<React.Fragment>
|
||||
<div css={STYLES_SECTION_HEADER} style={{ margin: "48px 0px 8px 0px" }}>
|
||||
Settings
|
||||
</div>
|
||||
<div css={STYLES_OPTIONS_SECTION}>
|
||||
<div css={STYLES_TEXT}>Dark mode</div>
|
||||
<Toggle dark active={this.props?.theme?.darkmode} onChange={this._handleDarkMode} />
|
||||
</div>
|
||||
</React.Fragment>
|
||||
) : null}
|
||||
{this.props.isOwner && type?.startsWith("video/") ? (
|
||||
<React.Fragment>
|
||||
<div css={STYLES_SECTION_HEADER} style={{ margin: "48px 0px 8px 0px" }}>
|
||||
Settings
|
||||
</div>
|
||||
<div css={STYLES_OPTIONS_SECTION}>
|
||||
<div css={STYLES_TEXT}>AutoPlay</div>
|
||||
<Toggle
|
||||
dark
|
||||
active={this.props?.data?.settings?.autoPlay}
|
||||
onChange={this._handleToggleAutoPlay}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ color: Constants.system.darkGray, marginTop: 8 }}>
|
||||
{this.props?.data?.settings?.autoPlay
|
||||
? "This video will be autoplayed when opened by others."
|
||||
: "This video will be paused when opened by others."}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
) : null}
|
||||
<input
|
||||
css={STYLES_HIDDEN}
|
||||
ref={(c) => {
|
||||
this._ref = c;
|
||||
}}
|
||||
readOnly
|
||||
value={this.state.copyValue}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (!elements.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div css={STYLES_SIDEBAR} style={{ display: this.props.display }}>
|
||||
{elements}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withTheme(CarouselSidebarData);
|
||||
@ -1,597 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as Strings from "~/common/strings";
|
||||
import * as Actions from "~/common/actions";
|
||||
import * as UserBehaviors from "~/common/user-behaviors";
|
||||
import * as Window from "~/common/window";
|
||||
import * as Events from "~/common/custom-events";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import { LoaderSpinner } from "~/components/system/components/Loaders";
|
||||
import { SlatePicker } from "~/components/core/SlatePicker";
|
||||
import { Input } from "~/components/system/components/Input";
|
||||
import { Textarea } from "~/components/system/components/Textarea";
|
||||
import { Tag } from "~/components/system/components/Tag";
|
||||
|
||||
import isEqual from "lodash/isEqual";
|
||||
import ProcessedText from "~/components/core/ProcessedText";
|
||||
|
||||
const STYLES_NO_VISIBLE_SCROLL = css`
|
||||
overflow-y: scroll;
|
||||
scrollbar-width: none;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: ${Constants.system.foreground};
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: ${Constants.system.darkGray};
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SIDEBAR = css`
|
||||
width: 420px;
|
||||
padding: 80px 24px 64px 24px;
|
||||
flex-shrink: 0;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
background-color: rgba(20, 20, 20, 0.8);
|
||||
${STYLES_NO_VISIBLE_SCROLL}
|
||||
|
||||
@supports (
|
||||
(-webkit-backdrop-filter: blur(75px)) or (backdrop-filter: blur(75px))
|
||||
) {
|
||||
-webkit-backdrop-filter: blur(75px);
|
||||
backdrop-filter: blur(75px);
|
||||
background-color: rgba(150, 150, 150, 0.2);
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SIDEBAR_SECTION = css`
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
`;
|
||||
|
||||
const STYLES_HEADING = css`
|
||||
font-family: ${Constants.font.semiBold};
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
overflow-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
margin-bottom: 32px;
|
||||
`;
|
||||
|
||||
const STYLES_BODY = css`
|
||||
font-size: 16px;
|
||||
line-height: 1.225;
|
||||
overflow-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
margin-bottom: 32px;
|
||||
`;
|
||||
|
||||
const STYLES_AUTOSAVE = css`
|
||||
font-size: 12px;
|
||||
line-height: 1.225;
|
||||
display: flex;
|
||||
justify-content: baseline;
|
||||
color: ${Constants.system.yellow};
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
|
||||
@keyframes slate-animations-autosave {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(12px);
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
animation: slate-animations-autosave 4000ms ease;
|
||||
`;
|
||||
|
||||
const STYLES_SIDEBAR_INPUT_LABEL = css`
|
||||
font-size: 16px;
|
||||
font-family: ${Constants.font.semiBold};
|
||||
color: ${Constants.system.darkGray};
|
||||
margin-bottom: 8px;
|
||||
`;
|
||||
|
||||
const STYLES_SECTION_HEADER = css`
|
||||
font-family: ${Constants.font.semiBold};
|
||||
font-size: 1.1rem;
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const STYLES_ACTIONS = css`
|
||||
color: ${Constants.system.white};
|
||||
width: 100%;
|
||||
border: 1px solid #3c3c3c;
|
||||
border-radius: 4px;
|
||||
background-color: transparent;
|
||||
margin-bottom: 48px;
|
||||
`;
|
||||
|
||||
const STYLES_ACTION = css`
|
||||
cursor: pointer;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #3c3c3c;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
:hover {
|
||||
color: ${Constants.system.brand};
|
||||
}
|
||||
|
||||
:last-child {
|
||||
border: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_HIDDEN = css`
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
`;
|
||||
|
||||
const STYLES_INPUT = {
|
||||
marginBottom: 16,
|
||||
backgroundColor: "transparent",
|
||||
boxShadow: "0 0 0 1px #3c3c3c inset",
|
||||
color: Constants.system.white,
|
||||
height: 48,
|
||||
};
|
||||
|
||||
const STYLES_DISMISS_BOX = css`
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 24px;
|
||||
color: ${Constants.system.darkGray};
|
||||
cursor: pointer;
|
||||
|
||||
:hover {
|
||||
color: ${Constants.system.white};
|
||||
}
|
||||
`;
|
||||
|
||||
export default class CarouselSidebarSlate extends React.Component {
|
||||
_ref = null;
|
||||
|
||||
state = {
|
||||
title: Strings.isEmpty(this.props.data.title) ? "" : this.props.data.title,
|
||||
body: Strings.isEmpty(this.props.data.body) ? "" : this.props.data.body,
|
||||
source: Strings.isEmpty(this.props.data.source) ? "" : this.props.data.source,
|
||||
author: Strings.isEmpty(this.props.data.author) ? "" : this.props.data.author,
|
||||
tags: this.props.data?.tags || [],
|
||||
suggestions: this.props.viewer?.tags || [],
|
||||
selected: {},
|
||||
isPublic: false,
|
||||
copyValue: "",
|
||||
showConnected: false,
|
||||
showFile: true,
|
||||
unsavedChanges: false,
|
||||
loading: false,
|
||||
subject: "",
|
||||
};
|
||||
|
||||
componentDidMount = () => {
|
||||
this.setState({ unsavedChanges: true });
|
||||
if (this.props.isOwner && !this.props.external) {
|
||||
this.debounceInstance = Window.debounce(() => this._handleSave(), 3000);
|
||||
let isPublic = false;
|
||||
let selected = {};
|
||||
const id = this.props.data.id;
|
||||
for (let slate of this.props.slates) {
|
||||
if (slate.data.objects.some((o) => o.id === id)) {
|
||||
if (slate.data.public) {
|
||||
isPublic = true;
|
||||
}
|
||||
selected[slate.id] = true;
|
||||
}
|
||||
}
|
||||
this.setState({ selected, isPublic });
|
||||
}
|
||||
|
||||
this.updateSuggestions();
|
||||
};
|
||||
|
||||
componentDidUpdate = (prevProps, prevState) => {
|
||||
if (!isEqual(prevState.tags, this.state.tags)) {
|
||||
this.updateSuggestions();
|
||||
}
|
||||
};
|
||||
|
||||
updateSuggestions = () => {
|
||||
let newSuggestions = new Set([...this.state.suggestions, ...this.state.tags]);
|
||||
this.setState({ suggestions: Array.from(newSuggestions) });
|
||||
};
|
||||
|
||||
_handleClose = () => {
|
||||
if (this.state.unsavedChanges) {
|
||||
this._handleSave();
|
||||
}
|
||||
this.props.onClose();
|
||||
};
|
||||
|
||||
_handleSave = () => {
|
||||
let data = {
|
||||
title: this.state.title,
|
||||
body: this.state.body,
|
||||
source: this.state.source,
|
||||
author: this.state.author,
|
||||
tags: this.state.tags,
|
||||
};
|
||||
this.props.onSave(data, this.props.index);
|
||||
this.setState({ unsavedChanges: false });
|
||||
|
||||
this.props.onUpdateViewer({ tags: this.state.suggestions });
|
||||
};
|
||||
|
||||
_handleCreateSlate = async () => {
|
||||
if (this.props.external) return;
|
||||
this.props.onClose();
|
||||
this.props.onAction({
|
||||
type: "SIDEBAR",
|
||||
value: "SIDEBAR_CREATE_SLATE",
|
||||
data: { files: [this.props.data], fromSlate: true },
|
||||
});
|
||||
};
|
||||
|
||||
_handleChange = (e) => {
|
||||
this.debounceInstance();
|
||||
this.setState({
|
||||
[e.target.name]: e.target.value,
|
||||
unsavedChanges: true,
|
||||
subject: e.target.name == "body" ? "Description" : this._handleCapitalization(e.target.name),
|
||||
});
|
||||
|
||||
if (e.target.name === "Tags") {
|
||||
this.updateSuggestions();
|
||||
}
|
||||
};
|
||||
|
||||
_handleCapitalization(str) {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1);
|
||||
}
|
||||
|
||||
_handleDownload = () => {
|
||||
UserBehaviors.download(this.props.data);
|
||||
};
|
||||
|
||||
_handleCopy = (copyValue, loading) => {
|
||||
this.setState({ copyValue, loading }, () => {
|
||||
this._ref.select();
|
||||
document.execCommand("copy");
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.setState({ loading: false });
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
_handleSaveCopy = async (data) => {
|
||||
this.setState({ loading: "savingCopy" });
|
||||
await UserBehaviors.addToDataFromSlate({ files: [data] });
|
||||
this.setState({ loading: false });
|
||||
};
|
||||
|
||||
_handleDelete = (cid) => {
|
||||
if (this.props.external || !this.props.isOwner) return;
|
||||
|
||||
if (
|
||||
!window.confirm(
|
||||
"Are you sure you want to delete this? It will be removed from all your slates too."
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
let slates = this.props.viewer.slates;
|
||||
let slateId = this.props.current.id;
|
||||
for (let slate of slates) {
|
||||
if (slate.id === slateId) {
|
||||
slate.data.objects = slate.data.objects.filter((obj) => obj.cid !== cid);
|
||||
this.props.onUpdateViewer({ slates });
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// NOTE(jim): Accepts ID as well if CID can't be found.
|
||||
// Since our IDS are unique.
|
||||
UserBehaviors.deleteFiles(cid, this.props.data.id);
|
||||
};
|
||||
|
||||
_toggleAccordion = (tab) => {
|
||||
this.setState({ [tab]: !this.state[tab] });
|
||||
};
|
||||
|
||||
_handleAdd = async (slate) => {
|
||||
this.setState({
|
||||
selected: { ...this.state.selected, [slate.id]: !this.state.selected[slate.id] },
|
||||
});
|
||||
if (this.state.selected[slate.id]) {
|
||||
await UserBehaviors.removeFromSlate({ slate, ids: [this.props.data.id] });
|
||||
} else {
|
||||
await UserBehaviors.addToSlate({
|
||||
slate,
|
||||
files: [this.props.data],
|
||||
fromSlate: this.props.fromSlate,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
let isUnityGame = false;
|
||||
if (this.props.data.type === "application/unity") {
|
||||
isUnityGame = true;
|
||||
}
|
||||
const elements = [];
|
||||
const { cid, url } = this.props.data;
|
||||
if (this.props.data) {
|
||||
if (this.props.isOwner && !isUnityGame) {
|
||||
elements.push(
|
||||
<React.Fragment key="sidebar-media-object-info">
|
||||
<Input
|
||||
full
|
||||
value={this.state.title}
|
||||
name="title"
|
||||
onChange={this._handleChange}
|
||||
id={`sidebar-label-title`}
|
||||
style={{
|
||||
fontSize: Constants.typescale.lvl1,
|
||||
...STYLES_INPUT,
|
||||
}}
|
||||
/>
|
||||
<Textarea
|
||||
name="body"
|
||||
placeholder="Add notes or a description..."
|
||||
value={this.state.body}
|
||||
onChange={this._handleChange}
|
||||
style={STYLES_INPUT}
|
||||
/>
|
||||
<Tag
|
||||
type="dark"
|
||||
tags={this.state.tags}
|
||||
suggestions={this.state.suggestions}
|
||||
style={{ margin: "0 0 16px" }}
|
||||
inputStyles={{ padding: "16px" }}
|
||||
dropdownStyles={{ top: "50px" }}
|
||||
onChange={this._handleChange}
|
||||
/>
|
||||
<Input
|
||||
full
|
||||
value={this.state.source}
|
||||
name="source"
|
||||
placeholder="Source"
|
||||
onChange={this._handleChange}
|
||||
id={`sidebar-label-source`}
|
||||
style={STYLES_INPUT}
|
||||
/>
|
||||
<Input
|
||||
full
|
||||
value={this.state.author}
|
||||
name="author"
|
||||
placeholder="Author"
|
||||
onChange={this._handleChange}
|
||||
id={`sidebar-label-author`}
|
||||
style={{ ...STYLES_INPUT, marginBottom: 12 }}
|
||||
/>
|
||||
{this.state.unsavedChanges == false && (
|
||||
<div css={STYLES_AUTOSAVE}>
|
||||
<SVG.Check height="14px" style={{ marginRight: 4 }} />
|
||||
{this.state.subject} saved
|
||||
</div>
|
||||
)}
|
||||
</React.Fragment>
|
||||
);
|
||||
} else {
|
||||
const hasTitle = !Strings.isEmpty(this.props.data.title || this.props.data.name);
|
||||
const hasBody = !Strings.isEmpty(this.props.data.body);
|
||||
const hasSource = !Strings.isEmpty(this.props.data.source);
|
||||
const hasAuthor = !Strings.isEmpty(this.props.data.author);
|
||||
|
||||
if (hasTitle) {
|
||||
elements.push(
|
||||
<div key="sidebar-media-info-title" css={STYLES_SIDEBAR_SECTION}>
|
||||
<div css={STYLES_HEADING}>
|
||||
<ProcessedText dark text={this.props.data.title || this.props.data.name} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (hasBody) {
|
||||
elements.push(
|
||||
<div key="sidebar-media-info-body" css={STYLES_SIDEBAR_SECTION}>
|
||||
<div css={STYLES_BODY}>
|
||||
<ProcessedText dark text={this.props.data.body} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (hasSource) {
|
||||
elements.push(
|
||||
<div key="sidebar-media-info-source" css={STYLES_SIDEBAR_SECTION}>
|
||||
<div css={STYLES_SIDEBAR_INPUT_LABEL} style={{ position: "relative" }}>
|
||||
Source:
|
||||
</div>
|
||||
<p css={STYLES_BODY} style={{ color: Constants.system.darkGray }}>
|
||||
<ProcessedText dark text={this.props.data.source} />
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (hasAuthor) {
|
||||
elements.push(
|
||||
<div key="sidebar-media-info-author" css={STYLES_SIDEBAR_SECTION}>
|
||||
<div css={STYLES_SIDEBAR_INPUT_LABEL} style={{ position: "relative" }}>
|
||||
Author:
|
||||
</div>
|
||||
<p css={STYLES_BODY} style={{ color: Constants.system.darkGray }}>
|
||||
<ProcessedText dark text={this.props.data.author} />
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!elements.length) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div css={STYLES_SIDEBAR} style={{ display: this.props.display }}>
|
||||
<div css={STYLES_DISMISS_BOX} onClick={this._handleClose}>
|
||||
<SVG.Dismiss height="24px" />
|
||||
</div>
|
||||
{elements}
|
||||
{this.props.external ? null : (
|
||||
<div style={{ marginTop: 32 }}>
|
||||
{this.props.activityView ? (
|
||||
<div css={STYLES_ACTIONS} style={{ marginTop: 24 }}>
|
||||
<div
|
||||
css={STYLES_ACTION}
|
||||
onClick={() =>
|
||||
this.props.onAction({
|
||||
type: "NAVIGATE",
|
||||
value: "NAV_SLATE",
|
||||
data: this.props.data.slate,
|
||||
})
|
||||
}
|
||||
>
|
||||
<SVG.Slate height="24px" />
|
||||
<span style={{ marginLeft: 16 }}>Go to slate</span>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
<div
|
||||
css={STYLES_SECTION_HEADER}
|
||||
style={{ cursor: "pointer", marginTop: 24 }}
|
||||
onClick={() => this._toggleAccordion("showConnected")}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
marginRight: 8,
|
||||
transform: this.state.showConnected ? "none" : "rotate(-90deg)",
|
||||
transition: "100ms ease transform",
|
||||
}}
|
||||
>
|
||||
<SVG.ChevronDown height="24px" display="block" />
|
||||
</span>
|
||||
<span>{this.props.isOwner ? "Connected slates" : "My slates"}</span>
|
||||
</div>
|
||||
{this.state.showConnected ? (
|
||||
<div style={{ width: "100%", margin: "24px 0 44px 0" }}>
|
||||
<SlatePicker
|
||||
slates={this.props.slates}
|
||||
onCreateSlate={this._handleCreateSlate}
|
||||
dark
|
||||
fromSlate
|
||||
files={[this.props.data]}
|
||||
selectedColor={Constants.system.white}
|
||||
selected={this.state.selected}
|
||||
onAdd={this._handleAdd}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
css={STYLES_SECTION_HEADER}
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => this._toggleAccordion("showFile")}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
marginRight: 8,
|
||||
transform: this.state.showFile ? "none" : "rotate(-90deg)",
|
||||
transition: "100ms ease transform",
|
||||
}}
|
||||
>
|
||||
<SVG.ChevronDown height="24px" display="block" />
|
||||
</span>
|
||||
<span>File</span>
|
||||
</div>
|
||||
{this.state.showFile ? (
|
||||
<div css={STYLES_ACTIONS} style={{ marginTop: 24 }}>
|
||||
{/* {this.props.isOwner ? (
|
||||
<div css={STYLES_ACTION} onClick={() => this._handleCopy(cid, "cidCopying")}>
|
||||
<SVG.CopyAndPaste height="24px" />
|
||||
<span style={{ marginLeft: 16 }}>
|
||||
{this.state.loading === "cidCopying" ? "Copied!" : "Copy file CID"}
|
||||
</span>
|
||||
</div>
|
||||
) : null} */}
|
||||
{/* <div css={STYLES_ACTION} onClick={() => this._handleCopy(url, "gatewayUrlCopying")}>
|
||||
<SVG.Data height="24px" />
|
||||
<span style={{ marginLeft: 16 }}>
|
||||
{this.state.loading === "gatewayUrlCopying" ? "Copied!" : "Copy file link"}
|
||||
</span>
|
||||
</div> */}
|
||||
{this.props.isOwner || this.props.external ? null : (
|
||||
<div css={STYLES_ACTION} onClick={() => this._handleSaveCopy(this.props.data)}>
|
||||
<SVG.Save height="24px" />
|
||||
<span style={{ marginLeft: 16 }}>
|
||||
{this.state.loading === "savingCopy" ? (
|
||||
<LoaderSpinner style={{ height: 16, width: 16 }} />
|
||||
) : (
|
||||
<span>Save copy</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{this.props.external ? null : (
|
||||
<div css={STYLES_ACTION} onClick={this._handleDownload}>
|
||||
<SVG.Download height="24px" />
|
||||
<span style={{ marginLeft: 16 }}>
|
||||
<span>Download</span>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{this.props.isOwner && !this.props.isRepost ? (
|
||||
<div css={STYLES_ACTION} onClick={() => this._handleDelete(cid)}>
|
||||
<SVG.Trash height="24px" />
|
||||
<span style={{ marginLeft: 16 }}>Delete</span>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
<input
|
||||
css={STYLES_HIDDEN}
|
||||
ref={(c) => {
|
||||
this._ref = c;
|
||||
}}
|
||||
readOnly
|
||||
value={this.state.copyValue}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -34,9 +34,11 @@ const STYLES_LETTER = (theme) => css`
|
||||
`;
|
||||
|
||||
const FontObjectPreview = React.memo(
|
||||
({ url, cid, fallback }) => {
|
||||
({ cid, fallback }) => {
|
||||
const { isFontLoading, error, fontName } = useFont({ cid }, [cid]);
|
||||
if (error || isFontLoading) {
|
||||
console.log(error);
|
||||
console.log(isFontLoading);
|
||||
return fallback;
|
||||
}
|
||||
return (
|
||||
@ -45,6 +47,6 @@ const FontObjectPreview = React.memo(
|
||||
</div>
|
||||
);
|
||||
},
|
||||
(prevProps, nextProps) => prevProps.cid === nextProps.cid && prevProps.url == nextProps.url
|
||||
(prevProps, nextProps) => prevProps.cid === nextProps.cid
|
||||
);
|
||||
export default withView(FontObjectPreview);
|
||||
|
||||
@ -209,8 +209,7 @@ export default class SlateMediaObjectPreview extends React.Component {
|
||||
}}
|
||||
>
|
||||
<FontObjectPreview
|
||||
url={this.props.url}
|
||||
cid={this.props.cid}
|
||||
cid={file.cid}
|
||||
fallback={
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
|
||||
<img
|
||||
@ -222,9 +221,9 @@ export default class SlateMediaObjectPreview extends React.Component {
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
{this.props.title && !this.props.iconOnly && !this.props.previewPanel ? (
|
||||
{name && !this.props.iconOnly && !this.props.previewPanel ? (
|
||||
<div style={{ position: "absolute", bottom: 16, left: 16, width: "inherit" }}>
|
||||
<div css={STYLES_TITLE}>{title}</div>
|
||||
<div css={STYLES_TITLE}>{name}</div>
|
||||
{extension ? (
|
||||
<div
|
||||
css={STYLES_TITLE}
|
||||
|
||||
@ -174,7 +174,13 @@ export class Input extends React.Component {
|
||||
type={this.props.type}
|
||||
placeholder={this.props.placeholder}
|
||||
onChange={this._handleChange}
|
||||
onFocus={this.props.onFocus}
|
||||
onFocus={
|
||||
this.props.autoHighlight
|
||||
? () => {
|
||||
this._input.select();
|
||||
}
|
||||
: this.props.onFocus
|
||||
}
|
||||
onBlur={this.props.onBlur}
|
||||
onKeyUp={this._handleKeyUp}
|
||||
autoComplete="off"
|
||||
|
||||
@ -42,7 +42,7 @@ const STYLES_IMAGE_BOX = css`
|
||||
|
||||
const STYLES_TEXT_AREA = css`
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
top: 16px;
|
||||
left: 0px;
|
||||
`;
|
||||
|
||||
@ -61,14 +61,12 @@ const STYLES_TITLE = css`
|
||||
const STYLES_SECONDARY = css`
|
||||
${STYLES_TITLE}
|
||||
font-size: ${Constants.typescale.lvlN1};
|
||||
margin-bottom: 16px;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const STYLES_SECONDARY_HOVERABLE = css`
|
||||
${STYLES_SECONDARY}
|
||||
padding: 8px 16px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
:hover {
|
||||
color: ${Constants.system.brand} !important;
|
||||
@ -78,15 +76,15 @@ const STYLES_SECONDARY_HOVERABLE = css`
|
||||
const STYLES_GRADIENT = css`
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
rgba(0, 0, 0, 0.3) 0%,
|
||||
rgba(0, 0, 0, 0.2) 26.56%,
|
||||
rgba(0, 0, 0, 0.3) 100%
|
||||
rgba(0, 0, 0, 0) 100%
|
||||
);
|
||||
backdrop-filter: blur(2px);
|
||||
width: 100%;
|
||||
height: 72px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
@ -120,23 +118,20 @@ class ActivitySquare extends React.Component {
|
||||
<div
|
||||
css={STYLES_IMAGE_BOX}
|
||||
style={{ width: size, height: size }}
|
||||
onMouseEnter={isImage ? () => this.setState({ showText: true }) : () => {}}
|
||||
onMouseLeave={isImage ? () => this.setState({ showText: false }) : () => {}}
|
||||
onMouseEnter={() => this.setState({ showText: true })}
|
||||
onMouseLeave={() => this.setState({ showText: false })}
|
||||
>
|
||||
<SlateMediaObjectPreview
|
||||
file={item.file}
|
||||
centeredImage
|
||||
iconOnly
|
||||
// iconOnly
|
||||
style={{ border: "none" }}
|
||||
cid={item.file.cid}
|
||||
imageStyle={{ border: "none" }}
|
||||
/>
|
||||
{isImage && (this.state.showText || this.props.isMobile) ? (
|
||||
<div css={STYLES_GRADIENT} />
|
||||
) : null}
|
||||
{this.state.showText || !isImage || this.props.isMobile ? (
|
||||
{this.state.showText || this.props.isMobile ? <div css={STYLES_GRADIENT} /> : null}
|
||||
{this.state.showText || this.props.isMobile ? (
|
||||
<div css={STYLES_TEXT_AREA} style={{ width: this.props.size }}>
|
||||
{isImage ? null : (
|
||||
{/* {isImage ? null : (
|
||||
<div
|
||||
css={STYLES_TITLE}
|
||||
style={{
|
||||
@ -145,10 +140,10 @@ class ActivitySquare extends React.Component {
|
||||
>
|
||||
{item.file.data.name || item.file.filename}
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
)} */}
|
||||
<span
|
||||
style={{
|
||||
color: isImage ? Constants.system.white : Constants.system.textGrayLight,
|
||||
color: Constants.system.white,
|
||||
}}
|
||||
css={this.props.onClick ? STYLES_SECONDARY_HOVERABLE : STYLES_SECONDARY}
|
||||
onClick={(e) => {
|
||||
@ -156,14 +151,12 @@ class ActivitySquare extends React.Component {
|
||||
this.props.onClick();
|
||||
}}
|
||||
>
|
||||
{isImage ? (
|
||||
<SVG.ArrowDownLeft
|
||||
height="10px"
|
||||
style={{ transform: "scaleX(-1)", marginRight: 4 }}
|
||||
/>
|
||||
) : null}
|
||||
<SVG.ArrowDownLeft
|
||||
height="10px"
|
||||
style={{ transform: "scaleX(-1)", marginRight: 4 }}
|
||||
/>
|
||||
{item.slate.data.name || item.slate.slatename}
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
@ -1,39 +1,45 @@
|
||||
import * as React from "react";
|
||||
import * as Actions from "~/common/actions";
|
||||
import * as Window from "~/common/window";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as System from "~/components/system";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as Events from "~/common/custom-events";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import { TabGroup, PrimaryTabGroup, SecondaryTabGroup } from "~/components/core/TabGroup";
|
||||
|
||||
import ScenePage from "~/components/core/ScenePage";
|
||||
import ScenePageHeader from "~/components/core/ScenePageHeader";
|
||||
import CodeBlock from "~/components/system/CodeBlock";
|
||||
import SquareButtonGray from "~/components/core/SquareButtonGray";
|
||||
|
||||
import APIDocsGet from "~/components/api/get";
|
||||
import APIDocsGetSlate from "~/components/api/get-slate.js";
|
||||
import APIDocsUpdateSlate from "~/components/api/update-slate.js";
|
||||
import APIDocsUploadToSlate from "~/components/api/upload.js";
|
||||
|
||||
const STYLES_KEY = css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
max-width: 416px;
|
||||
background-color: ${Constants.system.foreground};
|
||||
color: ${Constants.system.pitchBlack};
|
||||
border-radius: 4px;
|
||||
height: 40px;
|
||||
`;
|
||||
// const STYLES_KEY = css`
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: space-between;
|
||||
// width: 380px;
|
||||
// background-color: ${Constants.system.white};
|
||||
// color: ${Constants.system.pitchBlack};
|
||||
// border-radius: 4px;
|
||||
// height: 40px;
|
||||
// `;
|
||||
|
||||
const STYLES_KEY_LEFT = css`
|
||||
min-width: 10%;
|
||||
width: 100%;
|
||||
const STYLES_API_KEY = css`
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
cursor: copy;
|
||||
background-color: ${Constants.system.white};
|
||||
outline: none;
|
||||
border: none;
|
||||
width: 380px;
|
||||
font-family: ${Constants.font.code};
|
||||
padding: 0 16px;
|
||||
font-size: 11px;
|
||||
font-size: 14px;
|
||||
`;
|
||||
|
||||
const STYLES_KEY_CONTAINER = css`
|
||||
@ -44,169 +50,68 @@ const STYLES_KEY_CONTAINER = css`
|
||||
margin-bottom: 8px;
|
||||
`;
|
||||
|
||||
const STYLES_CIRCLE_BUTTON = css`
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 4px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
background: ${Constants.system.gray};
|
||||
color: ${Constants.system.black};
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
|
||||
cursor: pointer;
|
||||
transition: 200ms ease all;
|
||||
|
||||
:hover {
|
||||
background: ${Constants.system.brand};
|
||||
color: ${Constants.system.white};
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_LANGUAGE_CONTAINER = css`
|
||||
display: flex;
|
||||
width: 240px;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
justify-self: center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 48px;
|
||||
`;
|
||||
|
||||
const STYLES_LANGUAGE_TILE = css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
border-radius: 4px;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
user-select: pointer;
|
||||
border: 2px solid #1a1a1a;
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
||||
//NOTE(toast): overrides ScenePage from AppLayout
|
||||
const STYLES_PAGE = css`
|
||||
max-width: 960px;
|
||||
width: 100%;
|
||||
margin: 0 auto 0 auto;
|
||||
padding: 88px 24px 128px 0px;
|
||||
|
||||
@media (max-width: 568px) {
|
||||
padding: 88px 24px 128px 24px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SIDEBAR = css`
|
||||
padding: 160px 24px 128px 24px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 236px;
|
||||
background-color: ${Constants.system.foreground};
|
||||
overflow-y: scroll;
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: ${Constants.system.gray};
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: ${Constants.system.darkGray};
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: ${Constants.system.brand};
|
||||
}
|
||||
|
||||
@media (max-width: 568px) {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_LABEL = css`
|
||||
font-family: ${Constants.font.semiBold};
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
color: ${Constants.system.darkGray};
|
||||
letter-spacing: 0.6px;
|
||||
margin-top: 32px;
|
||||
`;
|
||||
|
||||
const STYLES_LINK = css`
|
||||
font-family: ${Constants.font.semiBold};
|
||||
color: ${Constants.system.pitchBlack};
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
|
||||
:hover {
|
||||
color: ${Constants.system.brand};
|
||||
cursor: pointer;
|
||||
}
|
||||
`;
|
||||
|
||||
class Key extends React.Component {
|
||||
state = { visible: false };
|
||||
_input;
|
||||
|
||||
_handleToggleVisible = () => {
|
||||
this.setState({ visible: !this.state.visible });
|
||||
};
|
||||
state = { visible: false, copying: false };
|
||||
|
||||
_handleDelete = async (id) => {
|
||||
await this.props.onDelete(id);
|
||||
};
|
||||
|
||||
_handleCopy = async () => {
|
||||
this._input.select();
|
||||
document.execCommand("copy");
|
||||
await this.setState({ copying: true });
|
||||
await Window.delay(1000);
|
||||
await this.setState({ copying: false });
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div css={STYLES_KEY_CONTAINER}>
|
||||
<div css={STYLES_KEY}>
|
||||
{this.state.visible ? (
|
||||
<div css={STYLES_KEY_LEFT}>{this.props.data.key}</div>
|
||||
) : (
|
||||
<div css={STYLES_KEY_LEFT}>XXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXXXX</div>
|
||||
)}
|
||||
</div>
|
||||
<span
|
||||
css={STYLES_CIRCLE_BUTTON}
|
||||
onClick={this._handleToggleVisible}
|
||||
style={{
|
||||
marginLeft: 8,
|
||||
<input
|
||||
ref={(c) => {
|
||||
this._input = c;
|
||||
}}
|
||||
>
|
||||
<SVG.Privacy height="16px" />
|
||||
</span>
|
||||
<span
|
||||
css={STYLES_CIRCLE_BUTTON}
|
||||
value={this.state.copying ? "Copied!" : this.props.data.key}
|
||||
readOnly
|
||||
type={this.state.visible || this.state.copying ? "text" : "password"}
|
||||
css={STYLES_API_KEY}
|
||||
onClick={this._handleCopy}
|
||||
onMouseEnter={() => this.setState({ visible: true })}
|
||||
onMouseLeave={() => this.setState({ visible: false })}
|
||||
/>
|
||||
<SquareButtonGray
|
||||
onClick={() => this._handleDelete(this.props.data.id)}
|
||||
style={{
|
||||
marginLeft: 8,
|
||||
}}
|
||||
>
|
||||
<SVG.Dismiss height="16px" />
|
||||
</span>
|
||||
<SVG.Trash height="16px" />
|
||||
</SquareButtonGray>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default class SceneSettingsDeveloper extends React.Component {
|
||||
_bucketCID;
|
||||
|
||||
state = {
|
||||
loading: false,
|
||||
language: "javascript",
|
||||
docs: "GET",
|
||||
copying: false,
|
||||
tab: 0,
|
||||
};
|
||||
|
||||
_handleCopy = async () => {
|
||||
this._bucketCID.select();
|
||||
document.execCommand("copy");
|
||||
await this.setState({ copying: true });
|
||||
await Window.delay(1000);
|
||||
await this.setState({ copying: false });
|
||||
};
|
||||
|
||||
_handleSave = async (e) => {
|
||||
@ -222,7 +127,11 @@ export default class SceneSettingsDeveloper extends React.Component {
|
||||
_handleDelete = async (id) => {
|
||||
this.setState({ loading: true });
|
||||
|
||||
if (!window.confirm("Are you sure you want to delete this key? This action is irreversible")) {
|
||||
if (
|
||||
!window.confirm(
|
||||
"Are you sure you want to revoke this API key? Any services using it will no longer be able to access your Slate account"
|
||||
)
|
||||
) {
|
||||
this.setState({ loading: false });
|
||||
return;
|
||||
}
|
||||
@ -255,7 +164,6 @@ export default class SceneSettingsDeveloper extends React.Component {
|
||||
},
|
||||
});
|
||||
const json = await response.json();
|
||||
console.log(json);
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -275,6 +183,9 @@ export default class SceneSettingsDeveloper extends React.Component {
|
||||
}
|
||||
|
||||
let userBucketCID = this.props.viewer?.userBucketCID;
|
||||
if (userBucketCID) {
|
||||
userBucketCID = userBucketCID.replace("/ipfs/", "");
|
||||
}
|
||||
|
||||
return (
|
||||
<ScenePage>
|
||||
@ -319,34 +230,55 @@ export default class SceneSettingsDeveloper extends React.Component {
|
||||
<span css={STYLES_LABEL}>guides</span>
|
||||
</div>
|
||||
*/}
|
||||
<ScenePageHeader title="Developer Documentation">
|
||||
You can use your API key to get slates and add images to slates. You can have a total of
|
||||
10 keys at any given time.
|
||||
<ScenePageHeader title="API Keys">
|
||||
You can use your API keys to access your account information outside of Slate and upload
|
||||
files to Slate. You can have a maximum of 10 keys at any given time.
|
||||
</ScenePageHeader>
|
||||
|
||||
{userBucketCID && (
|
||||
<System.DescriptionGroup
|
||||
style={{ maxWidth: 640, marginTop: 34 }}
|
||||
label="Bucket CID"
|
||||
description={`${userBucketCID}`}
|
||||
/>
|
||||
<div style={{ marginTop: 34, marginBottom: 24 }}>
|
||||
<System.DescriptionGroup
|
||||
style={{ maxWidth: 640 }}
|
||||
label="Bucket CID"
|
||||
description={
|
||||
"This is your bucket CID. Use this to access your Slate files on other platforms"
|
||||
}
|
||||
/>
|
||||
<input
|
||||
value={this.state.copying ? "Copied!" : userBucketCID}
|
||||
css={STYLES_API_KEY}
|
||||
style={{ textOverflow: "ellipsis" }}
|
||||
type="text"
|
||||
readOnly
|
||||
ref={(c) => {
|
||||
this._bucketCID = c;
|
||||
}}
|
||||
onClick={this._handleCopy}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<br />
|
||||
<System.DescriptionGroup style={{ maxWidth: 640, marginBottom: 34 }} label="API Keys" />
|
||||
|
||||
<System.DescriptionGroup style={{ maxWidth: 640, marginBottom: 24 }} label="API Keys" />
|
||||
{this.props.viewer.keys.map((k) => {
|
||||
return <Key key={k.id} data={k} onDelete={this._handleDelete} />;
|
||||
})}
|
||||
|
||||
<div style={{ marginTop: 24 }}>
|
||||
<System.ButtonPrimary onClick={this._handleSave} loading={this.state.loading}>
|
||||
Generate
|
||||
</System.ButtonPrimary>
|
||||
{APIKey === "YOUR-API-KEY-HERE" ? (
|
||||
{this.props.viewer.keys.length < 10 ? (
|
||||
<System.ButtonPrimary onClick={this._handleSave} loading={this.state.loading}>
|
||||
Generate
|
||||
</System.ButtonPrimary>
|
||||
) : (
|
||||
<System.ButtonDisabled>Generate</System.ButtonDisabled>
|
||||
)}
|
||||
{this.props.viewer.keys.length === 0 ? (
|
||||
<ScenePageHeader title="">
|
||||
Generate an API key to have it appear in the code examples
|
||||
</ScenePageHeader>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{/*
|
||||
<div css={STYLES_LANGUAGE_CONTAINER}>
|
||||
<div
|
||||
@ -371,31 +303,46 @@ export default class SceneSettingsDeveloper extends React.Component {
|
||||
<APIDocsUpdateSlate language={lang} APIKey={APIKey} slateId={slateId} />
|
||||
<APIDocsUploadToSlate language={lang} APIKey={APIKey} slateId={slateId} />
|
||||
*/}
|
||||
<React.Fragment>
|
||||
<APIDocsGet
|
||||
language={lang}
|
||||
APIKey={APIKey}
|
||||
onLanguageChange={this._handleChangeLanguage}
|
||||
/>
|
||||
<APIDocsGetSlate
|
||||
language={lang}
|
||||
APIKey={APIKey}
|
||||
slateId={slateId}
|
||||
onLanguageChange={this._handleChangeLanguage}
|
||||
/>
|
||||
<APIDocsUpdateSlate
|
||||
language={lang}
|
||||
APIKey={APIKey}
|
||||
slateId={slateId}
|
||||
onLanguageChange={this._handleChangeLanguage}
|
||||
/>
|
||||
<APIDocsUploadToSlate
|
||||
language={lang}
|
||||
APIKey={APIKey}
|
||||
slateId={slateId}
|
||||
onLanguageChange={this._handleChangeLanguage}
|
||||
/>
|
||||
</React.Fragment>
|
||||
<ScenePageHeader title="Developer Documentation" style={{ marginTop: 96 }}>
|
||||
Slate is currently on v2.0 of the API. While prior versions are still supported, we
|
||||
recommend using the most up to date version.
|
||||
</ScenePageHeader>
|
||||
|
||||
<SecondaryTabGroup
|
||||
tabs={["Version 2.0", "Version 1.0"]}
|
||||
value={this.state.tab}
|
||||
onChange={(tab) => this.setState({ tab })}
|
||||
/>
|
||||
|
||||
{this.state.tab === 0 ? (
|
||||
<></>
|
||||
) : (
|
||||
<React.Fragment>
|
||||
<APIDocsGet
|
||||
language={lang}
|
||||
APIKey={APIKey}
|
||||
onLanguageChange={this._handleChangeLanguage}
|
||||
/>
|
||||
<APIDocsGetSlate
|
||||
language={lang}
|
||||
APIKey={APIKey}
|
||||
slateId={slateId}
|
||||
onLanguageChange={this._handleChangeLanguage}
|
||||
/>
|
||||
<APIDocsUpdateSlate
|
||||
language={lang}
|
||||
APIKey={APIKey}
|
||||
slateId={slateId}
|
||||
onLanguageChange={this._handleChangeLanguage}
|
||||
/>
|
||||
<APIDocsUploadToSlate
|
||||
language={lang}
|
||||
APIKey={APIKey}
|
||||
slateId={slateId}
|
||||
onLanguageChange={this._handleChangeLanguage}
|
||||
/>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</ScenePage>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user