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

data: moves meter to data scene

Browse Source
This commit is contained in:
@wwwjim 2020-08-07 17:22:45 -07:00
parent e775670b10
commit 4980a4506c
3 changed files with 31 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/core/ApplicationNavigation.js
View File

@ -9,7 +9,6 @@ import { Tooltip } from "react-tippy";
import ApplicationControlMenu from "~/components/core/ApplicationControlMenu";
import Pill from "~/components/core/Pill";
import DataMeter from "~/components/core/DataMeter";
const IconMap = {
HOME: <SVG.Home height="20px" />,
@ -349,8 +348,6 @@ export default class ApplicationNavigation extends React.Component {
</NodeReference>
);
})}
<br />
<DataMeter stats={this.props.viewer.stats} />
</nav>
);
}

61
components/core/DataMeter.js
View File

@ -11,11 +11,9 @@ const MAX_IN_BYTES = 10737418240;
const STYLES_CONTAINER = css`
border-radius: 4px;
border: 1px solid ${Constants.system.border};
padding: 16px;
`;
const STYLES_GUTTER = css`
padding: 16px 16px 16px 16px;
padding: 24px;
max-width: 768px;
width: 100%;
`;
const STYLES_DATA = css`
@ -92,41 +90,32 @@ export default (props) => {
const percentage = props.stats.bytes / props.stats.maximumBytes;
return (
<div css={STYLES_GUTTER}>
<div css={STYLES_CONTAINER}>
<System.P style={{ fontSize: 12 }}>
<strong css={STYLES_TITLE}>Usage</strong>
Slate users get 1GB of IPFS storage from Textile for free{" "}
<strong
css={STYLES_HREF}
onClick={() => alert("TODO: SUBSCRIPTION OPTIONS")}
>
(upgrade)
</strong>
. In the future you can extend this with your own plugins using our
SDK.
<br />
<br />
</System.P>
<div css={STYLES_CONTAINER} style={props.style}>
<System.P style={{ fontSize: 12 }}>
<strong css={STYLES_TITLE}>Usage</strong>
Slate users get 1GB of IPFS storage from Textile. In the future you can
extend this with your own plugins using our SDK.
<br />
<br />
</System.P>
<div css={STYLES_STATS_ROW}>
<div css={STYLES_LEFT}>{Strings.bytesToSize(props.stats.bytes)}</div>
<div css={STYLES_RIGHT}>
{Strings.bytesToSize(props.stats.maximumBytes)}
</div>
<div css={STYLES_STATS_ROW}>
<div css={STYLES_LEFT}>{Strings.bytesToSize(props.stats.bytes)}</div>
<div css={STYLES_RIGHT}>
{Strings.bytesToSize(props.stats.maximumBytes)}
</div>
</div>
<div css={STYLES_ROW}>
<div css={STYLES_LEFT}>Used</div>
<div css={STYLES_RIGHT}>Total</div>
</div>
<div css={STYLES_ROW}>
<div css={STYLES_LEFT}>Used</div>
<div css={STYLES_RIGHT}>Total</div>
</div>
<div css={STYLES_DATA} style={{ marginTop: 4 }}>
<div
css={STYLES_DATA_METER}
style={{ width: `${percentage * 100}%` }}
/>
</div>
<div css={STYLES_DATA} style={{ marginTop: 4 }}>
<div
css={STYLES_DATA_METER}
style={{ width: `${percentage * 100}%` }}
/>
</div>
</div>
);

6
scenes/SceneFilesFolder.js
View File

@ -7,6 +7,7 @@ import { css } from "@emotion/react";
import Section from "~/components/core/Section";
import ScenePage from "~/components/core/ScenePage";
import DataMeter from "~/components/core/DataMeter";
const POLLING_INTERVAL = 10000;
@ -115,6 +116,11 @@ export default class SceneFilesFolder extends React.Component {
description="At the moment there are some bugs with deals on our Devnet but our team is working through them."
/>
<DataMeter
stats={this.props.viewer.stats}
style={{ margin: "48px 0 24px 0" }}
/>
<System.H1 style={{ marginTop: 48 }}>
{this.props.current.name}
</System.H1>