From 9bc81f7e8c45d319417a7799643b6454890c5dc8 Mon Sep 17 00:00:00 2001
From: Samuel Galson <samgalson@gmail.com>
Date: Wed, 31 Jan 2018 10:42:53 +0000
Subject: [PATCH] feat(ui): convert UploadingFile to a styled component
---
packages/ui/src/atoms/UploadingFile.js | 136 +++++++++++++++---
.../ui/src/atoms/UploadingFile.local.scss | 113 ---------------
2 files changed, 119 insertions(+), 130 deletions(-)
delete mode 100644 packages/ui/src/atoms/UploadingFile.local.scss
diff --git a/packages/ui/src/atoms/UploadingFile.js b/packages/ui/src/atoms/UploadingFile.js
index b5f6b6ad6..8274a3c67 100644
--- a/packages/ui/src/atoms/UploadingFile.js
+++ b/packages/ui/src/atoms/UploadingFile.js
@@ -1,27 +1,129 @@
import React from 'react'
-import classes from './UploadingFile.local.scss'
+import styled from 'styled-components'
// TODO: cancel button
+const Root = styled.div`
+ align-items: center;
+ display: inline-flex;
+ flex-direction: column;
+ margin-bottom: 2em;
+ margin-right: 3em;
+ position: relative;
+ width: 20ch;
+`
+
+const ErrorWrapper = styled.div`
+ background: var(--color-danger);
+ border: 2px solid white;
+ color: white;
+ font-size: 0.8em;
+ letter-spacing: 0.01em;
+ opacity: 1;
+ padding: 0.3em 0.5em;
+ position: absolute;
+ top: 25%;
+ z-index: 4;
+`
+
+const Icon = styled.div`
+ background: #ddd;
+ height: 100px;
+ margin: 5px;
+ opacity: 0.5;
+ position: relative;
+ width: 70px;
+`
+
+const Progress = styled.div`
+ background-image:
+ linear-gradient(
+ var(--color-primary-light) 50%,
+ var(--color-primary) 75%,
+ to top
+ );
+ bottom: 0;
+ content: '';
+ display: block;
+ left: 0;
+ opacity: 1;
+ position: absolute;
+ right: 0;
+ transform-origin: 0 0;
+
+ &::after {
+ /* we can use a data attribute for the numbering below */
+ bottom: 2px;
+ color: white;
+ content: '${props => props.percent}%';
+ display: block;
+ position: absolute;
+ right: 2px;
+ }
+`
+
+const Filename = styled.div`
+ color: gray;
+ font-size: 90%;
+ font-style: italic;
+ margin: 5px;
+ max-width: 20ch;
+`
+const Extension = styled.div`
+ background: #888;
+ color: white;
+ font-size: 12px;
+ left: 20px;
+ padding: 2px;
+ position: absolute;
+ right: 0;
+ text-align: center;
+ text-transform: uppercase;
+ top: 20px;
+`
const extension = ({ name }) => name.replace(/^.+\./, '')
const UploadingFile = ({ file, error, progress }) => (
- <div className={classes.root}>
- {!!error && <div className={classes.error}>{error}</div>}
-
- <div className={classes.icon}>
- {!!progress && (
- <div
- className={classes.progress}
- style={{ top: `${progress * 100}%` }}
- />
- )}
-
- <div className={classes.extension}>{extension(file)}</div>
- </div>
-
- <div className={classes.name}>{file.name}</div>
- </div>
+ <Root>
+ {!!error && <ErrorWrapper>{error}</ErrorWrapper>}
+ <Icon>
+ {!!progress && <Progress percent={progress * 100} />}
+ <Extension>{extension(file)}</Extension>
+ </Icon>
+ <Filename>{file.name}</Filename>
+ </Root>
)
export default UploadingFile
+
+// clock experiment, on hold.
+// const Progress = styled.div`
+// opacity: 1;
+// background: var(--color-primary);
+// position: absolute;
+// bottom: 10%;
+// right: 10%;
+// content: '';
+// width: 3px;
+// height: 1em;
+// display: block;
+// // margin-left: 30%;
+// transform-origin: 0 0;
+// animation: rotate 1s infinite ease-in-out ;
+// background-image:
+// &:after {
+// content: "uploading";
+// display: block;
+// position: absolute;
+// width: 1em;
+// height: 1em;
+// }
+//
+// @keyframes rotate {
+// 0% {
+// transform: rotate(0)
+// }
+// 100% {
+// transform: rotate(360deg);
+// }
+// `
diff --git a/packages/ui/src/atoms/UploadingFile.local.scss b/packages/ui/src/atoms/UploadingFile.local.scss
deleted file mode 100644
index 895148f99..000000000
--- a/packages/ui/src/atoms/UploadingFile.local.scss
+++ /dev/null
@@ -1,113 +0,0 @@
-.root {
- align-items: center;
- display: inline-flex;
- flex-direction: column;
- margin-bottom: 2em;
- margin-right: 3em;
- position: relative;
- width: 20ch;
-}
-
-.icon {
- background: #ddd;
- height: 100px;
- margin: 5px;
- opacity: 0.5;
- position: relative;
- width: 70px;
-}
-
-.progress {
- background-image:
- linear-gradient(
- var(--color-primary-light) 50%,
- var(--color-primary) 75%,
- to top
- );
- bottom: 0;
- content: '';
- display: block;
- left: 0;
- opacity: 1;
- position: absolute;
- right: 0;
- transform-origin: 0 0;
-
- &::after {
- /* we can use a data attribute for the numbering below */
- bottom: 2px;
- color: white;
- content: "00%";
- display: block;
- position: absolute;
- right: 2px;
- }
-}
-
-.error {
- background: var(--color-danger);
- border: 2px solid white;
- color: white;
- font-size: 0.8em;
- letter-spacing: 0.01em;
- opacity: 1;
- padding: 0.3em 0.5em;
- position: absolute;
- top: 25%;
- z-index: 4;
-}
-
-.extension {
- background: #888;
- color: white;
- font-size: 12px;
- left: 20px;
- padding: 2px;
- position: absolute;
- right: 0;
- text-align: center;
- text-transform: uppercase;
- top: 20px;
-}
-
-.name {
- color: gray;
- font-size: 90%;
- font-style: italic;
- margin: 5px;
- max-width: 20ch;
-}
-
-// clock experiment, on hold.
-//.progress {
-// opacity: 1;
-// background: var(--color-primary);
-// position: absolute;
-// bottom: 10%;
-// right: 10%;
-// content: '';
-// width: 3px;
-// height: 1em;
-// display: block;
-// // margin-left: 30%;
-// transform-origin: 0 0;
-// animation: rotate 1s infinite ease-in-out ;
-// background-image:
-// &:after {
-// content:Â "uploading";
-// display: block;
-// position: absolute;
-// width: 1em;
-// height: 1em;
-// }
-//}
-//
-//
-//@keyframes rotate {
-// 0% {
-// transform: rotate(0)
-// }
-// 100% {
-// transform: rotate(360deg);
-// }
-//}
--
GitLab