filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-24 06:45:59 +03:00
Code Issues Packages Projects Releases Wiki Activity

restored orginal data meter

Browse Source
This commit is contained in:
William Felker 2020-11-04 22:53:18 +08:00
parent b246a23565
commit 5e6d4e4686
1 changed files with 8 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
components/core/DataMeter.js
View File

@ -14,21 +14,12 @@ const STYLES_CONTAINER = css`
padding: 32px;
max-width: 100%;
width: 100%;
@media (max-width: ${Constants.sizes.mobile}px) {
padding: 24px;
}
`;
const STYLES_DATA = css`
width: 100%;
display: flex;
align-items: center;
border-radius: 3px;
overflow: hidden;
`;
const STYLES_DATA_METER_BASE = css`
width: 100%;
display: flex;
align-items: center;
@ -40,17 +31,13 @@ const STYLES_DATA_METER_BASE = css`
const STYLES_DATA_METER = css`
flex-shrink: 0;
position: absolute;
height: 16px;
top: 0px;
left: 0px;
border-radius: 3px 0px 0px 3px;
background-color: ${Constants.system.brand};
`;
const STYLES_ROW = css`
display: flex;
align-items: flex-end;
position: absolute;
justify-content: space-between;
font-family: ${Constants.font.code};
color: ${Constants.system.darkGray};
@ -71,8 +58,7 @@ const STYLES_STATS_ROW = css`
const STYLES_LEFT = css`
min-width: 10%;
width: 100%;
border-radius: 15px 50px 30px 5px;
width: 100% "";
`;
const STYLES_RIGHT = css`
@ -96,56 +82,26 @@ const STYLES_NOTE = css`
margin-bottom: 4px;
`;
const STYLES_DATA_METER_KEY_WRAPPER = css`
display: inline-block;
`;
const STYLES_DATA_METER_KEY_SQUARE = css`
display: inline-block;
border-radius: 3px;
background: #73ad21;
width: 12px;
height: 12px;
margin-right: 4px;
vertical-align: middle;
`;
const STYLES_DATA_METER_KEY_LABEL = css`
display: inline-block;
margin-right: 16px;
vertical-align: middle;
`;
export const DataMeterBar = (props) => {
const percentage = props.bytes / props.maximumBytes;
console.log(props.bytes);
return (
<React.Fragment>
<div css={STYLES_ROW}>
<div
css={STYLES_LEFT}
style={{
color: props.failed ? Constants.system.red : null,
}}
>
<div css={STYLES_LEFT} style={{ color: props.failed ? Constants.system.red : null }}>
{props.leftLabel}
</div>
<div css={STYLES_RIGHT}>{props.rightLabel}</div>
</div>
<div
css={STYLES_DATA}
style={{
marginTop: 8,
backgroundColor: props.failed ? props.dataMeterColor : null,
backgroundColor: props.failed ? Constants.system.red : null,
}}
>
{" "}
<div
css={STYLES_DATA_METER}
style={{
width: `${percentage * 100}%`,
backgroundColor: props.dataMeterColor,
zIndex: props.dataMeterLayer,
}}
></div>
<div css={STYLES_DATA_METER} style={{ width: `${percentage * 100}%` }} />
</div>
</React.Fragment>
);
@ -158,88 +114,10 @@ export const DataMeter = (props) => {
{Strings.bytesToSize(props.stats.bytes)} of {Strings.bytesToSize(props.stats.maximumBytes)}{" "}
used
</div>
<div style={{ position: "relative" }}>
<div css={STYLES_DATA_METER_BASE}></div>
<DataMeterBar
bytes={
props.stats.imageBytes +
props.stats.videoBytes +
props.stats.pdfBytes +
props.stats.audioBytes +
props.stats.epubBytes
}
maximumBytes={props.stats.maximumBytes}
dataMeterColor={`#C0D8EE`}
dataMeterLayer={`1`}
/>
<DataMeterBar
bytes={
props.stats.imageBytes +
props.stats.videoBytes +
props.stats.pdfBytes +
props.stats.audioBytes
}
maximumBytes={props.stats.maximumBytes}
dataMeterColor={`#C0DACD`}
dataMeterLayer={`2`}
/>
<DataMeterBar
bytes={props.stats.imageBytes + props.stats.videoBytes + props.stats.pdfBytes}
maximumBytes={props.stats.maximumBytes}
dataMeterColor={`#C0DACD`}
dataMeterLayer={`3`}
/>
<DataMeterBar
bytes={props.stats.imageBytes + props.stats.videoBytes}
maximumBytes={props.stats.maximumBytes}
dataMeterColor={`#C0DACD`}
dataMeterLayer={`4`}
/>
<DataMeterBar
bytes={props.stats.imageBytes}
maximumBytes={props.stats.maximumBytes}
dataMeterColor={`#C0DACD`}
dataMeterLayer={`5`}
/>
</div>
<div css={STYLES_NOTE}>
<div css={STYLES_DATA_METER_KEY_WRAPPER}>
<div css={STYLES_DATA_METER_KEY_SQUARE} style={{ background: `#C0D8EE` }}>
{" "}
</div>
<div css={STYLES_DATA_METER_KEY_LABEL}>Images</div>
</div>
<div css={STYLES_DATA_METER_KEY_WRAPPER}>
<div css={STYLES_DATA_METER_KEY_SQUARE} style={{ background: `#C0DACD` }}>
{" "}
</div>
<div css={STYLES_DATA_METER_KEY_LABEL}>Videos</div>
</div>
<div css={STYLES_DATA_METER_KEY_WRAPPER}>
<div css={STYLES_DATA_METER_KEY_SQUARE} style={{ background: "#FEEDC4" }}>
{" "}
</div>
<div css={STYLES_DATA_METER_KEY_LABEL}>Books</div>
</div>
<div css={STYLES_DATA_METER_KEY_WRAPPER}>
<div css={STYLES_DATA_METER_KEY_SQUARE} style={{ background: "#FAB413" }}>
{" "}
</div>
<div css={STYLES_DATA_METER_KEY_LABEL}>PDF</div>
</div>
<div css={STYLES_DATA_METER_KEY_WRAPPER}>
<div css={STYLES_DATA_METER_KEY_SQUARE} style={{ background: "#F1C4C4" }}>
{" "}
</div>
<div css={STYLES_DATA_METER_KEY_LABEL}>Audio</div>
</div>
</div>
<DataMeterBar bytes={props.stats.bytes} maximumBytes={props.stats.maximumBytes} />
<div css={STYLES_NOTE}>50GB coming soon with email verification</div>
</div>
);
console.log(props.stats.bytes);
};
export default DataMeter;