filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-23 09:01:56 +03:00
Code Issues Packages Projects Releases Wiki Activity

updated upload design

Browse Source
This commit is contained in:
Martina 2020-09-16 12:16:38 -07:00
parent cef9ffbe79
commit f855a4074e
2 changed files with 57 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
common/svg.js
View File

@ -58,6 +58,26 @@ export const Users = (props) => {
); );
}; };
export const Alert = (props) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
height={props.height}
style={props.style}
>
<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" />
<path d="M12 8V12" />
<path d="M12 16H12.01" />
</svg>
);
};
// export const Layers = (props) => { // export const Layers = (props) => {
// return ( // return (
// <svg // <svg
@ -929,6 +949,25 @@ export const CheckBox = (props) => {
); );
}; };
export const Help = (props) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
{...props}
>
<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" />
<path d="M9.08997 8.99996C9.32507 8.33163 9.78912 7.76807 10.3999 7.40909C11.0107 7.05012 11.7289 6.9189 12.4271 7.03867C13.1254 7.15844 13.7588 7.52148 14.215 8.06349C14.6713 8.60549 14.921 9.29148 14.92 9.99996C14.92 12 11.92 13 11.92 13" />
<path d="M12 17H12.01" />
</svg>
);
};
export const CopyAndPaste = (props) => { export const CopyAndPaste = (props) => {
return ( return (
<svg <svg
@ -940,13 +979,8 @@ export const CopyAndPaste = (props) => {
strokeLinejoin="round" strokeLinejoin="round"
{...props} {...props}
> >
<path d="m9.5 21.5h-8-.00000004c-.552285-.00000002-1-.447715-1-1v-16 .00000015c-.00000008-.552285.447715-1 1-1h2" /> <path d="M20 9H11C9.89543 9 9 9.89543 9 11V20C9 21.1046 9.89543 22 11 22H20C21.1046 22 22 21.1046 22 20V11C22 9.89543 21.1046 9 20 9Z" />
<path d="m13.5 3.5h2-.00000004c.552285-.00000002 1 .447715 1 1v3.5" /> <path d="M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5" />
<path d="m9.56066.93834c.585786.585786.585786 1.53553 0 2.12132-.585786.585786-1.53553.585786-2.12132 0-.585786-.585786-.585786-1.53553 0-2.12132.585786-.585786 1.53553-.585786 2.12132 0" />
<path d="m9.915 2.5h2.585-.00000004c.552285-.00000002 1 .447715 1 1v1c0 .552285-.447715 1-1 1h-8-.00000004c-.552285-.00000002-1-.447715-1-1v-1 .00000015c-.00000008-.552285.447715-1 1-1h2.585" />
<path d="m22.5 22.5c0 .552285-.447715 1-1 1h-9-.00000004c-.552285-.00000002-1-.447715-1-1v-11.5.00000015c-.00000008-.552285.447715-1 1-1h7.086.00000001c.265195.00005664.519507.105451.707.293l1.914 1.914-.00000002-.00000002c.187549.187493.292943.441805.293.707z" />
<path d="m14.5 14.5h5" />
<path d="m14.5 17.5h5" />
</svg> </svg>
); );
}; };

27
components/sidebars/SidebarAddFileToBucket.js
View File

@ -24,7 +24,9 @@ const STYLES_FILE_LINE = css`
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
padding: 8px; padding: 12px 16px;
background-color: ${Constants.system.white};
margin-bottom: 1px;
`; `;
const STYLES_FILE_NAME = css` const STYLES_FILE_NAME = css`
@ -34,11 +36,12 @@ const STYLES_FILE_NAME = css`
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
font-size: 0.9rem; font-size: 0.9rem;
font-family: ${Constants.font.medium};
`; `;
const STYLES_FILE_STATUS = css` const STYLES_FILE_STATUS = css`
flex-shrink: 0; flex-shrink: 0;
margin-left: 16px; margin-right: 16px;
display: flex; display: flex;
align-items: center; align-items: center;
`; `;
@ -227,31 +230,33 @@ export default class SidebarAddFileToBucket extends React.Component {
<strong css={STYLES_PERFORMANCE}> <strong css={STYLES_PERFORMANCE}>
{Strings.bytesToSize(loaded)} / {Strings.bytesToSize(total)} {Strings.bytesToSize(loaded)} / {Strings.bytesToSize(total)}
</strong> </strong>
<DataMeterBar <DataMeterBar bytes={loaded} maximumBytes={total} />
failed={false}
leftLabel={"uploaded"}
rightLabel={"total"}
bytes={loaded}
maximumBytes={total}
/>
</div> </div>
) : null} ) : null}
<div style={{ marginTop: 24 }}> <div style={{ marginTop: 24 }}>
{this.props.fileLoading {this.props.fileLoading
? Object.values(this.props.fileLoading).map((file) => ( ? Object.values(this.props.fileLoading).map((file) => (
<div css={STYLES_FILE_LINE} key={file.name}> <div css={STYLES_FILE_LINE} key={file.name}>
<div css={STYLES_FILE_NAME}>{file.name}</div>
<div css={STYLES_FILE_STATUS}> <div css={STYLES_FILE_STATUS}>
{file.loaded === file.total ? ( {file.loaded === file.total ? (
<SVG.CheckBox height="24px" /> <SVG.CheckBox height="24px" />
) : file.failed ? ( ) : file.failed ? (
<SVG.Dismiss height="24px" /> <SVG.Alert
height="24px"
style={{ color: Constants.system.red }}
/>
) : ( ) : (
<System.LoaderSpinner <System.LoaderSpinner
style={{ width: "20px", height: "20px", margin: "2px" }} style={{ width: "20px", height: "20px", margin: "2px" }}
/> />
)} )}
</div> </div>
<div
css={STYLES_FILE_NAME}
style={file.failed ? { color: Constants.system.red } : null}
>
{file.name}
</div>
</div> </div>
)) ))
: null} : null}