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

misc style and bug fixes

Browse Source
This commit is contained in:
Martina 2020-09-27 13:11:04 -07:00
parent 193f824429
commit fa86bd6b66
13 changed files with 107 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
common/constants.js
View File

@ -7,9 +7,10 @@ export const sizes = {
mobile: 768, mobile: 768,
navigation: 288, navigation: 288,
sidebar: 416, sidebar: 416,
mobileSidebar: 60,
header: 72, header: 72,
tablet: 960, tablet: 960,
desktop: 1440, desktop: 1024,
}; };
export const system = { export const system = {

2
common/navigation-data.js
View File

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

38
components/core/DataView.js
View File

@ -116,10 +116,19 @@ const STYLES_ACTION_BAR = css`
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
box-shadow: 0 0 0 1px ${Constants.system.lightBorder} inset, box-shadow: 0 0 0 1px ${Constants.system.lightBorder} inset,
0 0 40px 0 ${Constants.system.shadow}; 0 0 4px 2px ${Constants.system.shadow};
border-radius: 4px; border-radius: 4px;
padding: 12px 32px; padding: 12px 32px;
background-color: rgba(248, 248, 248, 0.75); box-sizing: border-box;
background-color: ${Constants.system.foreground};
position: fixed;
bottom: 12px;
width: calc(100vw - ${Constants.sizes.sidebar}px + 32px);
max-width: ${Constants.sizes.desktop}px;
@media (max-width: ${Constants.sizes.mobile}px) {
width: calc(100vw - ${Constants.sizes.mobileSidebar}px - 64px);
}
`; `;
const STYLES_RIGHT = css` const STYLES_RIGHT = css`
@ -137,6 +146,10 @@ const STYLES_LEFT = css`
const STYLES_FILES_SELECTED = css` const STYLES_FILES_SELECTED = css`
font-family: ${Constants.font.semiBold}; font-family: ${Constants.font.semiBold};
@media (max-width: ${Constants.sizes.mobile}px) {
display: none;
}
`; `;
const STYLES_ICON_ELEMENT = css` const STYLES_ICON_ELEMENT = css`
@ -883,20 +896,19 @@ export default class DataView extends React.Component {
return { return {
...each, ...each,
checkbox: ( checkbox: (
<div <CheckBox
name={this.state.startIndex + index}
value={!!this.state.checked[this.state.startIndex + index]}
onChange={this._handleCheckBox}
boxStyle={{ height: 16, width: 16 }}
style={{ style={{
position: "relative",
right: 3,
margin: "12px 0", margin: "12px 0",
opacity: numChecked > 0 || this.state.hover === index ? 1 : 0, opacity:
numChecked > 0 || this.state.hover === index ? "100%" : "0%",
}} }}
> />
<CheckBox
name={this.state.startIndex + index}
value={!!this.state.checked[this.state.startIndex + index]}
onChange={this._handleCheckBox}
boxStyle={{ height: 16, width: 16 }}
style={{ position: "relative", right: 3 }}
/>
</div>
), ),
name: ( name: (
<div <div

3
components/core/Profile.js
View File

@ -1,5 +1,6 @@
import * as React from "react"; import * as React from "react";
import * as Constants from "~/common/constants"; import * as Constants from "~/common/constants";
import * as Strings from "~/common/strings";
import { css } from "@emotion/react"; import { css } from "@emotion/react";
import { ProcessedText } from "~/components/system/components/Typography"; import { ProcessedText } from "~/components/system/components/Typography";
@ -58,7 +59,7 @@ export default class Profile extends React.Component {
style={{ backgroundImage: `url('${data.data.photo}')` }} style={{ backgroundImage: `url('${data.data.photo}')` }}
/> />
<br /> <br />
<div css={STYLES_NAME}>{data.data.name || data.username}</div> <div css={STYLES_NAME}>{Strings.getPresentationName(data)}</div>
<br /> <br />
{data.data.body ? ( {data.data.body ? (
<React.Fragment> <React.Fragment>

2
components/core/ScenePage.js
View File

@ -15,7 +15,7 @@ const STYLES_SCENE = css`
`; `;
const STYLES_CONTENT = css` const STYLES_CONTENT = css`
max-width: 1024px; max-width: ${Constants.sizes.desktop}px;
margin: 0 auto; margin: 0 auto;
`; `;

2
components/core/SlateMediaObjectPreview.js
View File

@ -17,7 +17,7 @@ const STYLES_IMAGE = css`
const STYLES_ENTITY = css` const STYLES_ENTITY = css`
height: 100%; height: 100%;
width: 100%; width: 100%;
border: 1px solid ${Constants.system.border}; border: 1px solid ${Constants.system.lightBorder};
font-size: 24px; font-size: 24px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

5
components/core/SlatePicker.js
View File

@ -28,7 +28,7 @@ const STYLES_SLATE_LINE = css`
color: ${Constants.system.darkGray}; color: ${Constants.system.darkGray};
:hover { :hover {
color: ${Constants.system.black} !important; color: ${Constants.system.grayBlack};
} }
`; `;
@ -58,6 +58,7 @@ export class SlatePicker extends React.Component {
<div css={STYLES_SLATE_LIST} style={this.props.style}> <div css={STYLES_SLATE_LIST} style={this.props.style}>
{this.props.slates.map((slate) => ( {this.props.slates.map((slate) => (
<div <div
key={slate.id}
css={STYLES_SLATE_LINE} css={STYLES_SLATE_LINE}
onClick={() => this.props.onAdd(slate)} onClick={() => this.props.onAdd(slate)}
> >
@ -95,7 +96,7 @@ export class SlatePicker extends React.Component {
: "inherit", : "inherit",
}} }}
> >
{slate.data.name || slate.slatename} {Strings.getPresentationSlateName(slate)}
</div> </div>
</div> </div>
))} ))}

10
components/core/SlatePreviewBlock.js
View File

@ -49,7 +49,7 @@ const STYLES_ITEM_BOX = css`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: 0px 0px 0px 1px rgba(229, 229, 229, 0.5) inset; box-shadow: 0px 0px 0px 1px ${Constants.system.lightBorder} inset;
cursor: pointer; cursor: pointer;
@media (max-width: ${Constants.sizes.mobile}px) { @media (max-width: ${Constants.sizes.mobile}px) {
@ -87,7 +87,7 @@ const STYLES_ITEM_BOX_SMALL = css`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: 0px 0px 0px 1px rgba(229, 229, 229, 0.5) inset; box-shadow: 0px 0px 0px 1px ${Constants.system.lightBorder} inset;
`; `;
const STYLES_EMPTY_BOX_SMALL = css` const STYLES_EMPTY_BOX_SMALL = css`
@ -159,7 +159,7 @@ const STYLES_BLOCK = css`
font-size: 12px; font-size: 12px;
text-align: left; text-align: left;
margin: 24px auto 48px auto; margin: 24px auto 48px auto;
max-width: 1024px; max-width: ${Constants.sizes.desktop}px;
cursor: pointer; cursor: pointer;
`; `;
@ -346,8 +346,8 @@ export default class SlatePreviewBlock extends React.Component {
<div <div
css={STYLES_TAG} css={STYLES_TAG}
style={{ style={{
color: "rgba(0,0,0,0.25)", color: Constants.system.darkGray,
borderColor: "rgba(0,0,0,0.25)", borderColor: Constants.system.darkGray,
}} }}
> >
Private Private

2
components/core/viewers/GlobalViewerCID.js
View File

@ -61,7 +61,7 @@ const STYLES_BOX = css`
padding: 0; padding: 0;
:hover { :hover {
background-color: ${Constants.system.black}; background-color: ${Constants.system.gray};
} }
`; `;

52
components/core/viewers/GlobalViewerCIDSidebarSlates.js
View File

@ -5,7 +5,10 @@ import * as Constants from "~/common/constants";
import * as Actions from "~/common/actions"; import * as Actions from "~/common/actions";
import { css } from "@emotion/react"; import { css } from "@emotion/react";
import { LoaderSpinner } from "~/components/system/components/Loaders"; import {
LoaderSpinner,
LoaderCircles,
} from "~/components/system/components/Loaders";
import { SlatePicker } from "~/components/core/SlatePicker"; import { SlatePicker } from "~/components/core/SlatePicker";
import { dispatchCustomEvent } from "~/common/custom-events"; import { dispatchCustomEvent } from "~/common/custom-events";
@ -58,7 +61,7 @@ const STYLES_META_DETAILS = css`
`; `;
const STYLES_ACTIONS = css` const STYLES_ACTIONS = css`
color: ${Constants.system.darkGray}; color: ${Constants.system.grayBlack};
border: 1px solid ${Constants.system.gray}; border: 1px solid ${Constants.system.gray};
border-radius: 4px; border-radius: 4px;
background-color: ${Constants.system.white}; background-color: ${Constants.system.white};
@ -148,24 +151,28 @@ export default class GlobalViewerCIDSidebarSlates extends React.Component {
} }
}; };
_handleCopy = (copyValue) => { _handleCopy = (copyValue, loading) => {
this.setState({ copyValue }, () => { this.setState({ copyValue, loading }, () => {
this._ref.select(); this._ref.select();
document.execCommand("copy"); document.execCommand("copy");
}); });
setTimeout(() => {
this.setState({ loading: false });
}, 10000);
}; };
_handleDelete = async (cid) => { _handleDelete = async (cid) => {
this.setState({ loading: "deleting" });
if ( if (
!window.confirm( !window.confirm(
"Are you sure you want to delete this? It will be removed from your Slates too." "Are you sure you want to delete this? It will be removed from your Slates too."
) )
) { ) {
this.setState({ loading: false });
return; return;
} }
const response = await Actions.deleteBucketItem({ cid }); const response = await Actions.deleteBucketItem({ cid });
console.log(response);
if (!response) { if (!response) {
dispatchCustomEvent({ dispatchCustomEvent({
name: "create-alert", name: "create-alert",
@ -176,6 +183,7 @@ export default class GlobalViewerCIDSidebarSlates extends React.Component {
}, },
}, },
}); });
this.setState({ loading: false });
return; return;
} }
if (response.error) { if (response.error) {
@ -183,13 +191,11 @@ export default class GlobalViewerCIDSidebarSlates extends React.Component {
name: "create-alert", name: "create-alert",
detail: { alert: { decorator: response.decorator } }, detail: { alert: { decorator: response.decorator } },
}); });
this.setState({ loading: false });
return; return;
} }
this.props.onClose();
await this.props.onRehydrate(); await this.props.onRehydrate();
this.setState({ loading: false });
dispatchCustomEvent({ dispatchCustomEvent({
name: "remote-update-carousel", name: "remote-update-carousel",
detail: {}, detail: {},
@ -215,13 +221,25 @@ export default class GlobalViewerCIDSidebarSlates extends React.Component {
</div> </div>
</div> </div>
<div css={STYLES_ACTIONS}> <div css={STYLES_ACTIONS}>
<div css={STYLES_ACTION} onClick={() => this._handleCopy(cid)}> <div
css={STYLES_ACTION}
onClick={() => this._handleCopy(cid, "cidCopying")}
>
<SVG.CopyAndPaste height="24px" /> <SVG.CopyAndPaste height="24px" />
<span style={{ marginLeft: 16 }}>Copy file CID</span> <span style={{ marginLeft: 16 }}>
{this.state.loading === "cidCopying"
? "Copied!"
: "Copy file CID"}
</span>
</div> </div>
<div css={STYLES_ACTION} onClick={() => this._handleCopy(url)}> <div
css={STYLES_ACTION}
onClick={() => this._handleCopy(url, "urlCopying")}
>
<SVG.DeepLink height="24px" /> <SVG.DeepLink height="24px" />
<span style={{ marginLeft: 16 }}>Copy link</span> <span style={{ marginLeft: 16 }}>
{this.state.loading === "urlCopying" ? "Copied!" : "Copy link"}
</span>
</div> </div>
{/* <div css={STYLES_ACTION} onClick={this.props.onDownload}> {/* <div css={STYLES_ACTION} onClick={this.props.onDownload}>
<SVG.Download height="24px" /> <SVG.Download height="24px" />
@ -229,7 +247,13 @@ export default class GlobalViewerCIDSidebarSlates extends React.Component {
</div> */} </div> */}
<div css={STYLES_ACTION} onClick={() => this._handleDelete(cid)}> <div css={STYLES_ACTION} onClick={() => this._handleDelete(cid)}>
<SVG.Trash height="24px" /> <SVG.Trash height="24px" />
<span style={{ marginLeft: 16 }}>Delete</span> {this.state.loading === "deleting" ? (
<LoaderSpinner
style={{ height: 20, width: 20, marginLeft: 16 }}
/>
) : (
<span style={{ marginLeft: 16 }}>Delete</span>
)}
</div> </div>
</div> </div>
<div css={STYLES_SECTION_HEADER}>Connected Slates</div> <div css={STYLES_SECTION_HEADER}>Connected Slates</div>

2
components/sidebars/SidebarAddFileToBucket.js
View File

@ -125,7 +125,7 @@ export default class SidebarAddFileToBucket extends React.Component {
{" "} {" "}
to{" "} to{" "}
<strong> <strong>
{this.props.current.data.name || this.props.current.slatename} {Strings.getPresentationSlateName(this.props.current)}
</strong> </strong>
</span> </span>
) : ( ) : (

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

@ -172,6 +172,7 @@ export class GlobalCarousel extends React.Component {
}; };
_handleNext = () => { _handleNext = () => {
if (!this.state.slides) return;
const index = (this.state.index + 1) % this.state.slides.length; const index = (this.state.index + 1) % this.state.slides.length;
this.setState({ index, loading: false, saving: false }); this.setState({ index, loading: false, saving: false });
@ -186,6 +187,7 @@ export class GlobalCarousel extends React.Component {
}; };
_handlePrevious = () => { _handlePrevious = () => {
if (!this.state.slides) return;
const index = const index =
(this.state.index + this.state.slides.length - 1) % (this.state.index + this.state.slides.length - 1) %
this.state.slides.length; this.state.slides.length;

38
scenes/SceneLogs.js
View File

@ -21,7 +21,8 @@ const TAB_GROUP = [
color: Constants.system.white, color: Constants.system.white,
position: "relative", position: "relative",
marginLeft: 8, marginLeft: 8,
}}> }}
>
14 14
</Pill> </Pill>
</React.Fragment> </React.Fragment>
@ -38,7 +39,8 @@ const TAB_GROUP = [
color: Constants.system.white, color: Constants.system.white,
position: "relative", position: "relative",
marginLeft: 8, marginLeft: 8,
}}> }}
>
14 14
</Pill> </Pill>
</React.Fragment> </React.Fragment>
@ -55,7 +57,8 @@ const TAB_GROUP = [
color: Constants.system.white, color: Constants.system.white,
position: "relative", position: "relative",
marginLeft: 8, marginLeft: 8,
}}> }}
>
56 56
</Pill> </Pill>
</React.Fragment> </React.Fragment>
@ -72,7 +75,8 @@ const TAB_GROUP = [
color: Constants.system.white, color: Constants.system.white,
position: "relative", position: "relative",
marginLeft: 8, marginLeft: 8,
}}> }}
>
56 56
</Pill> </Pill>
</React.Fragment> </React.Fragment>
@ -81,7 +85,7 @@ const TAB_GROUP = [
]; ];
const STYLES_SCENE = css` const STYLES_SCENE = css`
max-width: 1024px; max-width: ${Constants.sizes.desktop}px;
width: 100%; width: 100%;
padding: 24px 0 128px 0; padding: 24px 0 128px 0;
`; `;
@ -129,7 +133,8 @@ export default class SceneLogs extends React.Component {
color: Constants.system.white, color: Constants.system.white,
position: "relative", position: "relative",
marginLeft: 8, marginLeft: 8,
}}> }}
>
14 14
</Pill> </Pill>
</React.Fragment> </React.Fragment>
@ -145,7 +150,8 @@ export default class SceneLogs extends React.Component {
type: "DOWNLOAD", type: "DOWNLOAD",
value: "CSV_LOGS_ALL", value: "CSV_LOGS_ALL",
}, },
]}> ]}
>
<div css={STYLES_LOGS}> <div css={STYLES_LOGS}>
message in mempool has too high of a nonce (5000 > 4686) <br /> message in mempool has too high of a nonce (5000 > 4686) <br />
message in mempool has too high of a nonce (5000 > 4686) <br /> message in mempool has too high of a nonce (5000 > 4686) <br />
@ -220,7 +226,8 @@ export default class SceneLogs extends React.Component {
color: Constants.system.white, color: Constants.system.white,
position: "relative", position: "relative",
marginLeft: 8, marginLeft: 8,
}}> }}
>
14 14
</Pill> </Pill>
</React.Fragment> </React.Fragment>
@ -236,7 +243,8 @@ export default class SceneLogs extends React.Component {
type: "DOWNLOAD", type: "DOWNLOAD",
value: "CSV_LOGS_NODE", value: "CSV_LOGS_NODE",
}, },
]}> ]}
>
<div css={STYLES_LOGS}> <div css={STYLES_LOGS}>
message in mempool has too high of a nonce (5000 > 4686) <br /> message in mempool has too high of a nonce (5000 > 4686) <br />
message in mempool has too high of a nonce (5000 > 4686) <br /> message in mempool has too high of a nonce (5000 > 4686) <br />
@ -311,7 +319,8 @@ export default class SceneLogs extends React.Component {
color: Constants.system.white, color: Constants.system.white,
position: "relative", position: "relative",
marginLeft: 8, marginLeft: 8,
}}> }}
>
56 56
</Pill> </Pill>
</React.Fragment> </React.Fragment>
@ -327,7 +336,8 @@ export default class SceneLogs extends React.Component {
type: "DOWNLOAD", type: "DOWNLOAD",
value: "CSV_LOGS_SEALING", value: "CSV_LOGS_SEALING",
}, },
]}> ]}
>
<div css={STYLES_LOGS}> <div css={STYLES_LOGS}>
message in mempool has too high of a nonce (5000 > 4686) <br /> message in mempool has too high of a nonce (5000 > 4686) <br />
message in mempool has too high of a nonce (5000 > 4686) <br /> message in mempool has too high of a nonce (5000 > 4686) <br />
@ -402,7 +412,8 @@ export default class SceneLogs extends React.Component {
color: Constants.system.white, color: Constants.system.white,
position: "relative", position: "relative",
marginLeft: 8, marginLeft: 8,
}}> }}
>
56 56
</Pill> </Pill>
</React.Fragment> </React.Fragment>
@ -418,7 +429,8 @@ export default class SceneLogs extends React.Component {
type: "DOWNLOAD", type: "DOWNLOAD",
value: "CSV_LOGS_MINING", value: "CSV_LOGS_MINING",
}, },
]}> ]}
>
<div css={STYLES_LOGS}> <div css={STYLES_LOGS}>
message in mempool has too high of a nonce (5000 > 4686) <br /> message in mempool has too high of a nonce (5000 > 4686) <br />
message in mempool has too high of a nonce (5000 > 4686) <br /> message in mempool has too high of a nonce (5000 > 4686) <br />