Ver Fonte

Implement that nice Retry button

Alexander Zaytsev há 6 anos atrás
pai
commit
7a5fd4c74d

+ 1 - 0
packages/@uppy/core/src/_variables.scss

@@ -6,6 +6,7 @@ $font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Ari
 $white: #fff !default;
 $black: #000 !default;
 $red: #e32437 !default;
+$pomegranate: #ff4b23 !default;
 $orange: #f6a623 !default;
 $yellow: #ffd600 !default;
 $green: #1bb240 !default;

+ 9 - 4
packages/@uppy/status-bar/src/StatusBar.js

@@ -158,10 +158,15 @@ const UploadBtn = (props) => {
 }
 
 const RetryBtn = (props) => {
-  return <button type="button"
-    class="uppy-u-reset uppy-c-btn uppy-StatusBar-actionBtn uppy-StatusBar-actionBtn--retry"
-    aria-label={props.i18n('retryUpload')}
-    onclick={props.retryAll}>{props.i18n('retry')}</button>
+  return (
+    <button type="button"
+      class="uppy-u-reset uppy-c-btn uppy-StatusBar-actionBtn uppy-StatusBar-actionBtn--retry" aria-label={props.i18n('retryUpload')} onclick={props.retryAll}>
+      <svg aria-hidden="true" class="UppyIcon" width="8" height="10" viewBox="0 0 8 10">
+        <path d="M4 2.408a2.75 2.75 0 1 0 2.75 2.75.626.626 0 0 1 1.25.018v.023a4 4 0 1 1-4-4.041V.25a.25.25 0 0 1 .389-.208l2.299 1.533a.25.25 0 0 1 0 .416l-2.3 1.533A.25.25 0 0 1 4 3.316v-.908z" />
+      </svg>
+      {props.i18n('retry')}
+    </button>
+  )
 }
 
 const CancelBtn = (props) => {

+ 19 - 0
packages/@uppy/status-bar/src/style.scss

@@ -234,6 +234,25 @@
   //   padding: 2px 4px;
   // }
 
+  .uppy-StatusBar-actionBtn--retry {
+    height: 16px;
+    border-radius: 8px;
+    background-color: $pomegranate;
+    line-height: 16px;
+    color: #fff;
+    padding: 0 7px;
+
+    &:hover {
+      background-color: darken($pomegranate, 8%);
+    }
+
+    svg {
+      position: relative;
+      top: 1px;
+      margin-right: 3px;
+    }
+  }
+
   .uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload {
     font-size: 14px;
     width: 100%;