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

Merge pull request #6 from NebulousLabs/robbys2 

Creates the retrieve file box up top
This commit is contained in:
Karol Wypchło 2020-02-13 18:34:38 -05:00 committed by GitHub
parent 3e604657b8 0fbdd8fd01
commit c3c39a5969
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 289 additions and 73 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;
}
}

44
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 {
@ -58,24 +58,42 @@ export default class HomeUpload extends Component {
});
};
handleSkylink = (event) => {
event.preventDefault();
const skylink = event.target.skylink.value.replace('sia://', '');
if(skylink.length === 46) {
window.open(`/${event.target.skylink.value}`, '_blank');
}
}
render() {
return (
<Reveal effect="active">
<div className="home-upload">
<div className="home-upload-box fadeInUp delay4">
<Dropzone onDrop={acceptedFiles => this.handleDrop(acceptedFiles)}>
<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-dashed", {
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>Browse</Button>
<Button iconLeft>
<Folder />
Browse
</Button>
</div>
<input {...getInputProps()} className="offscreen" />
</>
@ -91,6 +109,22 @@ export default class HomeUpload extends Component {
)}
</div>
<div className="home-upload-retrieve">
<div className="home-upload-text">
<h3>Have a Skylink?</h3>
<p>Enter the ID to retrieve the file</p>
<form className="home-upload-retrieve-form" onSubmit={this.handleSkylink}>
<input name="skylink" type="text" placeholder="sia://" />
<button type="submit">
<DownArrow />
</button>
</form>
</div>
</div>
</div>
</div>
<p className="bottom-text fadeInUp delay5">
Once a file has been uploaded, a 46 byte link called a 'Skylink' is
generated. That link can then be shared with anyone to fetch the

133
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,13 +72,21 @@
background-color: $green;
border: 1px solid $green;
h3 {
color: $white;
}
.button {
display: none;
}
}
.button {
margin-top: 15px;
margin-top: 20px;
@media (min-width: $largebp) {
margin-top: 30px;
}
}
}
@ -65,14 +94,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 +150,82 @@
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: 20px;
@media (min-width: $largebp) {
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;
}
}
}

2
packages/sia-skynet/src/components/Mailing/Mailing.js
View File

@ -1,4 +1,4 @@
import React, { Component } from 'react'
import React from 'react'
import MailchimpSubscribe from 'react-mailchimp-subscribe'
import classNames from 'classnames'

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
};