LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

retrieve file

This commit is contained in:
Robby Klein 2020-02-13 14:07:42 -08:00 committed by Karol Wypchlo
parent 3e604657b8
commit bb67bdcfcc
7 changed files with 269 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/sia-skynet/src/components/Button/Button.js
View File

@ -1,28 +1,41 @@
import React from 'react'
import classNames from 'classnames'
import React from "react";
import classNames from "classnames";
import './Button.scss'
import "./Button.scss";
export default function Button({ href, type, children, full, className, ...rest }) {
const classes = classNames('button', { full }, className)
export default function Button({
href,
type,
children,
full,
className,
iconLeft,
iconRight,
...rest
}) {
const classes = classNames(
"button",
{ iconLeft, iconRight, full },
className
);
if (href) {
return (
<a href={href} className={classes} {...rest}>
{children}
</a>
)
);
} else if (type) {
return (
<button type={type} className={classes} {...rest}>
{children}
</button>
)
);
} else {
return (
<button type="button" className={classes} {...rest}>
{children}
</button>
)
);
}
}

16
packages/sia-skynet/src/components/Button/Button.scss
View File

@ -1,4 +1,4 @@
@import '../../variables.scss';
@import "../../variables.scss";
.button {
display: inline-block;
@ -19,4 +19,18 @@
background-color: $greenHover;
transform: translateY(-2px);
}
svg {
display: inline-block;
vertical-align: middle;
margin-top: -2px;
}
&.iconLeft svg {
margin-right: 12px;
}
&.iconRight svg {
margin-left: 12px;
}
}

76
packages/sia-skynet/src/components/HomeUpload/HomeUpload.js
View File

@ -4,7 +4,7 @@ import Dropzone from "react-dropzone";
import Reveal from "react-reveal/Reveal";
import { Button, UploadFile } from "../";
import { Deco3, Deco4, Deco5 } from "../../svg";
import { Deco3, Deco4, Deco5, Folder, DownArrow } from "../../svg";
import "./HomeUpload.scss";
export default class HomeUpload extends Component {
@ -62,33 +62,57 @@ export default class HomeUpload extends Component {
return (
<Reveal effect="active">
<div className="home-upload">
<div className="home-upload-box fadeInUp delay4">
<Dropzone onDrop={acceptedFiles => this.handleDrop(acceptedFiles)}>
{({ getRootProps, getInputProps, isDragActive }) => (
<>
<div
className={classNames("home-upload-dashed", {
"drop-active": isDragActive
})}
{...getRootProps()}
>
<span className="home-upload-text">
Drag &amp; drop your file(s) here to pin
</span>
<Button>Browse</Button>
</div>
<input {...getInputProps()} className="offscreen" />
</>
)}
</Dropzone>
<div className="home-upload-white fadeInUp delay4">
<div className="home-upload-split">
<div className="home-upload-box ">
<Dropzone
onDrop={acceptedFiles => this.handleDrop(acceptedFiles)}
>
{({ getRootProps, getInputProps, isDragActive }) => (
<>
<div
className={classNames("home-upload-dropzone", {
"drop-active": isDragActive
})}
{...getRootProps()}
>
<span className="home-upload-text">
<h3>Pin a File</h3>
Drag &amp; drop your file(s) here to pin
</span>
<Button iconLeft>
<Folder />
Browse
</Button>
</div>
<input {...getInputProps()} className="offscreen" />
</>
)}
</Dropzone>
{this.state.files.length > 0 && (
<div className="home-uploaded-files">
{this.state.files.map((file, i) => {
return <UploadFile key={i} {...file} />;
})}
{this.state.files.length > 0 && (
<div className="home-uploaded-files">
{this.state.files.map((file, i) => {
return <UploadFile key={i} {...file} />;
})}
</div>
)}
</div>
)}
<div className="home-upload-retrieve">
<div className="home-upload-text">
<h3>Have a File ID?</h3>
<p>Enter the ID to retrieve the file</p>
<form className="home-upload-retrieve-form">
<input type="text" placeholder="sia://" />
<button type="submit">
<DownArrow />
</button>
</form>
</div>
</div>
</div>
</div>
<p className="bottom-text fadeInUp delay5">

123
packages/sia-skynet/src/components/HomeUpload/HomeUpload.scss
View File

@ -16,26 +16,47 @@
}
}
.home-upload-box {
.home-upload-white {
transition: 0.2s background-color, 0.2s border, 0.2s color;
background: $white;
border-radius: 12px;
box-shadow: 0 8px 24px 0 rgba(90, 94, 91, 0.15),
0 2px 4px 0 rgba(0, 0, 0, 0.05);
padding: 16px;
opacity: 0;
transform: translateY(40px);
transition: 0.7s opacity, 0.7s transform;
}
.home-upload-dashed {
.home-upload-split {
border: 1px dashed #c5cec7;
border-radius: 4px;
padding: 0 20px;
height: 210px;
padding: 20px;
@media (min-width: $largebp) {
display: flex;
}
}
.home-upload-box {
padding-bottom: 20px;
@media (min-width: $largebp) {
width: 50%;
padding-bottom: 0;
padding-right: 20px;
}
}
.home-upload-dropzone {
border-radius: 4px;
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
outline: none;
transition: 0.2s background-color, 0.2s border, 0.2s color;
&:hover {
background-color: rgba(0, 0, 0, 0.03);
@ -51,6 +72,10 @@
background-color: $green;
border: 1px solid $green;
h3 {
color: $white;
}
.button {
display: none;
}
@ -65,14 +90,25 @@
color: $gray;
display: block;
transition: 0.2s color;
font-size: 13px;
@media (min-width: $largebp) {
font-size: 18px;
font-size: 14px;
}
.drop-active & {
color: $white;
}
h3 {
font-size: 16px;
margin-bottom: 5px;
color: $darkGray;
@media (min-width: $largebp) {
font-size: 18px;
}
}
}
.deco-3 {
@ -110,3 +146,78 @@
border-top: 1px solid rgba(197, 206, 199, 0.4);
}
}
.home-upload-retrieve {
align-items: center;
text-align: center;
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
border-top: 1px dashed #c5cec7;
height: 200px;
padding: 40px 20px;
@media (min-width: $largebp) {
width: 50%;
padding: 20px 40px;
border-top: 0;
border-left: 1px dashed #c5cec7;
}
.home-upload-text {
width: 100%;
}
}
.home-upload-retrieve-form {
width: 100%;
margin-top: 3px;
position: relative;
margin-top: 30px;
input {
border: 1px solid #cbd3cd;
border-radius: 4px;
line-height: 46px;
transition: 0.2s border-color;
padding: 0 64px 0 16px;
font-size: 13px;
@media (min-width: $largebp) {
font-size: 14px;
}
}
input:hover,
input:hover + button {
border-color: rgb(143, 143, 143);
}
input:focus,
input:focus + button {
border-color: $green;
}
button {
border-left: 1px solid #cbd3cd;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
width: 46px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
right: 0;
color: #cbd3cd;
transition: 0.2s background-color, 0.2s border-color, 0.2s color;
&:hover {
background: $green;
color: $white;
border-color: $green;
}
}
}

17
packages/sia-skynet/src/svg/DownArrow.js Normal file
View File

@ -0,0 +1,17 @@
import React from "react";
export default function DownArrow(props) {
return (
<svg width={12} height={13} viewBox="0 0 12 13" {...props}>
<path
d="M6 1v11M1 7l5 5 5-5"
stroke="currentColor"
strokeWidth={2}
fill="none"
fillRule="evenodd"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}

15
packages/sia-skynet/src/svg/Folder.js Normal file
View File

@ -0,0 +1,15 @@
import React from "react";
export default function Folder(props) {
return (
<svg width={14} height={12} viewBox="0 0 14 12" {...props}>
<path
d="M2 1h3.586a1 1 0 01.707.293l1.414 1.414A1 1 0 008.414 3H12a1 1 0 011 1v6a1 1 0 01-1 1H2a1 1 0 01-1-1V2a1 1 0 011-1z"
stroke="currentColor"
strokeWidth={2}
fill="none"
fillRule="evenodd"
/>
</svg>
);
}

64
packages/sia-skynet/src/svg/index.js
View File

@ -1,32 +1,34 @@
import Logo from './Logo'
import Download from './Download'
import DoubleRight from './DoubleRight'
import Github from './Github'
import Twitter from './Twitter'
import Discord from './Discord'
import Arrow from './Arrow'
import Cylinder from './Cylinder'
import SmallOrb from './SmallOrb'
import Pyramid from './Pyramid'
import LogoSolid from './LogoSolid'
import File from './File'
import FileCheck from './FileCheck'
import FileError from './FileError'
import Loading from './Loading'
import Skynet from './Skynet'
import Copy from './Copy'
import FooterOrb from './FooterOrb'
import FooterCube from './FooterCube'
import Built from './Built'
import Logo from "./Logo";
import Download from "./Download";
import DoubleRight from "./DoubleRight";
import Github from "./Github";
import Twitter from "./Twitter";
import Discord from "./Discord";
import Arrow from "./Arrow";
import Cylinder from "./Cylinder";
import SmallOrb from "./SmallOrb";
import Pyramid from "./Pyramid";
import LogoSolid from "./LogoSolid";
import File from "./File";
import FileCheck from "./FileCheck";
import FileError from "./FileError";
import Loading from "./Loading";
import Skynet from "./Skynet";
import Copy from "./Copy";
import FooterOrb from "./FooterOrb";
import FooterCube from "./FooterCube";
import Built from "./Built";
import DownArrow from "./DownArrow";
import Folder from "./Folder";
import Deco1 from './Deco1'
import Deco2 from './Deco2'
import Deco3 from './Deco3'
import Deco4 from './Deco4'
import Deco5 from './Deco5'
import Deco6 from './Deco6'
import Deco7 from './Deco7'
import Deco8 from './Deco8'
import Deco1 from "./Deco1";
import Deco2 from "./Deco2";
import Deco3 from "./Deco3";
import Deco4 from "./Deco4";
import Deco5 from "./Deco5";
import Deco6 from "./Deco6";
import Deco7 from "./Deco7";
import Deco8 from "./Deco8";
export {
Logo,
@ -49,6 +51,8 @@ export {
FooterOrb,
FooterCube,
Built,
DownArrow,
Folder,
Deco1,
Deco2,
Deco3,
@ -56,5 +60,5 @@ export {
Deco5,
Deco6,
Deco7,
Deco8,
}
Deco8
};