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

shows individual file status

Browse Source
This commit is contained in:
Martina 2020-09-10 14:53:26 -07:00
parent 438dbda7e3
commit 82240a494a
1 changed files with 34 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
components/sidebars/SidebarAddFileToBucket.js
View File

@ -43,42 +43,13 @@ const STYLES_FILE_STATUS = css`
align-items: center; align-items: center;
`; `;
const STYLES_FOCUS = css` const STYLES_BAR_CONTAINER = css`
font-size: ${Constants.typescale.lvl1}; background: ${Constants.system.white};
font-family: ${Constants.font.medium}; border-radius: 4px;
overflow-wrap: break-word; padding: 16px;
width: 100%;
strong {
font-family: ${Constants.font.semiBold};
font-weight: 400;
}
`;
const STYLES_SUBTEXT = css`
margin-top: 8px;
font-size: 12px;
`;
const STYLES_ITEM = css`
margin-top: 16px;
`;
const STYLES_IMAGE_PREVIEW = css`
display: block;
width: 100%;
margin-top: 48px; margin-top: 48px;
`; `;
const STYLES_STRONG = css`
display: block;
margin: 16px 0 4px 0;
font-weight: 400;
font-family: ${Constants.font.medium};
font-size: 0.8rem;
oveflow-wrap: break-word;
`;
const STYLES_PERFORMANCE = css` const STYLES_PERFORMANCE = css`
font-family: ${Constants.font.code}; font-family: ${Constants.font.code};
font-size: 12px; font-size: 12px;
@ -93,9 +64,6 @@ const STYLES_ICONS = css`
margin: 64px 0; margin: 64px 0;
`; `;
const reducerTotal = (total, curr) => total + curr.total;
const reducerLoaded = (total, curr) => total + curr.loaded;
export default class SidebarAddFileToBucket extends React.Component { export default class SidebarAddFileToBucket extends React.Component {
_handleUpload = async (e) => { _handleUpload = async (e) => {
e.persist(); e.persist();
@ -197,7 +165,6 @@ export default class SidebarAddFileToBucket extends React.Component {
id="file" id="file"
onChange={this._handleUpload} onChange={this._handleUpload}
/> />
<div css={STYLES_ICONS}> <div css={STYLES_ICONS}>
<SVG.Sound height="24px" style={{ margin: "0 16px" }} /> <SVG.Sound height="24px" style={{ margin: "0 16px" }} />
<SVG.Document height="24px" style={{ margin: "0 16px" }} /> <SVG.Document height="24px" style={{ margin: "0 16px" }} />
@ -205,7 +172,6 @@ export default class SidebarAddFileToBucket extends React.Component {
<SVG.Book height="24px" style={{ margin: "0 16px" }} /> <SVG.Book height="24px" style={{ margin: "0 16px" }} />
<SVG.Video height="24px" style={{ margin: "0 16px" }} /> <SVG.Video height="24px" style={{ margin: "0 16px" }} />
</div> </div>
<System.P style={{ marginTop: 24 }}> <System.P style={{ marginTop: 24 }}>
Click below or drop a file anywhere on the page to upload a file Click below or drop a file anywhere on the page to upload a file
{this.props.data && {this.props.data &&
@ -223,23 +189,19 @@ export default class SidebarAddFileToBucket extends React.Component {
)} )}
. .
</System.P> </System.P>
{/* //change this to allways allow uploads */} {/* //change this to allways allow uploads */}
{!this.props.fileLoading ? ( <System.ButtonPrimary
<System.ButtonPrimary full
full type="label"
type="label" htmlFor="file"
htmlFor="file" style={{ marginTop: 24 }}
style={{ marginTop: 24 }} >
> Add file
Add file </System.ButtonPrimary>
</System.ButtonPrimary>
) : null}
<br /> <br />
{this.props.fileLoading ? ( {this.props.fileLoading ? (
<React.Fragment> <div css={STYLES_BAR_CONTAINER}>
<strong css={STYLES_PERFORMANCE}> <strong css={STYLES_PERFORMANCE}>
{Strings.bytesToSize(loaded)} / {Strings.bytesToSize(total)} {Strings.bytesToSize(loaded)} / {Strings.bytesToSize(total)}
</strong> </strong>
@ -250,48 +212,29 @@ export default class SidebarAddFileToBucket extends React.Component {
bytes={loaded} bytes={loaded}
maximumBytes={total} maximumBytes={total}
/> />
</React.Fragment> </div>
) : null} ) : null}
{this.props.fileLoading ? ( <div style={{ marginTop: 24 }}>
Object.values(this.props.fileLoading).map((file) => ( {this.props.fileLoading
<div css={STYLES_FILE_LINE}> ? Object.values(this.props.fileLoading).map((file) => (
<div css={STYLES_FILE_NAME}>{file.name}</div> <div css={STYLES_FILE_LINE}>
<div css={STYLES_FILE_STATUS}> <div css={STYLES_FILE_NAME}>{file.name}</div>
{file.loaded === file.total ? ( <div css={STYLES_FILE_STATUS}>
<SVG.CheckBox height="24px" /> {file.loaded === file.total ? (
) : file.failed ? ( <SVG.CheckBox height="24px" />
<SVG.Dismiss height="24px" /> ) : file.failed ? (
) : ( <SVG.Dismiss height="24px" />
<div style={{ transform: "scale(0.8)" }}> ) : (
<System.LoaderSpinner /> <System.LoaderSpinner
style={{ width: "20px", height: "20px", margin: "2px" }}
/>
)}
{/* maybe send an alert if fails here */}
</div> </div>
)} </div>
{/* maybe send an alert if fails here */} ))
</div> : null}
</div> </div>
))
) : (
<React.Fragment>
<div css={STYLES_FILE_LINE}>
<div css={STYLES_FILE_NAME}>
tokyodriftmp3sfjalsjflkjfasfijaiojmoawejfaokjwfjkhdk
</div>
<span css={STYLES_FILE_STATUS}>
<System.LoaderSpinner
style={{ width: "20px", height: "20px", margin: "2px" }}
/>
</span>
</div>
<div css={STYLES_FILE_LINE}>
<div css={STYLES_FILE_NAME}>
tokyodriftmp3sfjalsjflkjfasfijaiojmoawejfaokjwfjkhdk
</div>
<div css={STYLES_FILE_STATUS}>
<SVG.CheckBox height="24px" />
</div>
</div>
</React.Fragment>
)}
</React.Fragment> </React.Fragment>
); );
} }