feat(download-button): add to story

ubilabs · Mar 23, 2020 · 9c716d5 · 9c716d5
1 parent 769f708
commit 9c716d5
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 31 deletions.
diff --git a/src/scripts/components/download-button/download-button.styl b/src/scripts/components/download-button/download-button.styl
@@ -1,8 +1,8 @@
 @require '../../../variables.styl'
 
 .downloadButton
-  width: emCalc(22px)
-  height: emCalc(22px)
+  width: emCalc(20px)
+  height: emCalc(20px)
 
   button, svg
     width: 100%
@@ -16,13 +16,14 @@
 
 .circle
   color: red
-  transition: 0.2s all ease-out
   transform: rotate(-90deg)
   fill: none
   stroke-width: 4px
   stroke: $main
   stroke-dasharray: 100
-  stroke-dashoffset: 100
+
+  circle
+    transition: 0.5s all linear
 
 .delete
   .trash

diff --git a/src/scripts/components/download-button/download-button.tsx b/src/scripts/components/download-button/download-button.tsx
@@ -62,9 +62,20 @@ export const DownloadButton: FunctionComponent<Props> = ({url, id}) => {
         <svg
           className={styles.circle}
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 40 40"
-          style={{strokeDashoffset: 100 - progress}}>
-          <circle cx="20" cy="20" r="16" />
+          viewBox="0 0 40 40">
+          <circle
+            style={{strokeDashoffset: 0}}
+            stroke="rgba(255, 255, 255, 0.1)"
+            cx="20"
+            cy="20"
+            r="16"
+          />
+          <circle
+            style={{strokeDashoffset: 100 - progress}}
+            cx="20"
+            cy="20"
+            r="16"
+          />
         </svg>
       )}
     </div>

diff --git a/src/scripts/components/layer-list-item/layer-list-item.tsx b/src/scripts/components/layer-list-item/layer-list-item.tsx
@@ -38,29 +38,6 @@ const LayerListItem: FunctionComponent<Props> = ({
       )}
 
       <DownloadButton url={offlineUrl} id={layer.id} />
-      {/* {isElectron() && typeof progress === 'number' && (
-        <span>{Math.ceil(progress * 100)}</span>
-      )}
-
-      {isElectron() && !isDownloaded && (
-        <button
-          onClick={event => {
-            event.stopPropagation();
-            onDownload();
-          }}>
-          Download
-        </button>
-      )}
-
-      {isElectron() && isDownloaded && (
-        <button
-          onClick={event => {
-            event.stopPropagation();
-            deleteId(layer.id);
-          }}>
-          Delete
-        </button>
-      )} */}
     </div>
   );
 };

diff --git a/src/scripts/components/story-list-item/story-list-item.styl b/src/scripts/components/story-list-item/story-list-item.styl
@@ -28,6 +28,8 @@
   line-height: 30px
 
 .imageInfo
+  display: flex
+  flex-direction: column
   padding: 16px
   height: 40%
   background-color: $darkGrey1
@@ -56,3 +58,10 @@ a
 
   .description
     font-size: 1.5em
+
+.downloadButton
+  display: flex
+  flex-grow: 1
+  flex-direction: column
+  justify-content: flex-end
+  align-self: flex-end
diff --git a/src/scripts/components/story-list-item/story-list-item.tsx b/src/scripts/components/story-list-item/story-list-item.tsx
@@ -46,7 +46,9 @@ const StoryListItemContent: FunctionComponent<Props> = ({
       <div className={styles.imageInfo}>
         <p className={styles.title}>{story.title}</p>
         <p className={styles.description}>{story.description}</p>
-        <DownloadButton url={downloadUrl} id={downloadId} />
+        <div className={styles.downloadButton}>
+          <DownloadButton url={downloadUrl} id={downloadId} />
+        </div>
       </div>
     </div>
   );