feat(upload): improve upload css

- add readonly class - add highlight class for drag adn drop - hide long filename overflow with ellipsis
cft-group · Jul 22, 2020 · 1c18cd0 · 1c18cd0
1 parent ddfa5e2
commit 1c18cd0
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 3 deletions.
diff --git a/src/packages/core/src/upload/upload-readonly.html b/src/packages/core/src/upload/upload-readonly.html
@@ -0,0 +1,46 @@
+<div class="_e_upload _e_upload_readonly">
+  <div class="_e_upload__label">ID Scans or Pictures</div>
+  <label class="_e_upload__input">
+    <input class="_e_upload__control" type="file">
+    <div class="_e_upload__action">Choose files or drop them here</div>
+    <div class="_e_upload__hint">PNG or JPG images, maximum 3 Mb per image</div>
+  </label>
+  <div class="_e_upload__error">You have to upload minimum 5 files.</div>
+  <section class="_e_upload-file">
+    <div class="_e_upload-file__box">
+      <span class="_e_upload-file__name">file_with_a_really_long_name_that_does_not_fit</span>
+      <span class="_e_upload-file__extension">.png</span>
+      <span class="_e_upload-file__size">414 Kb</span>
+      <div class="_e_upload-file__remove">
+        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M17.3 6.70999C17.1131 6.52273 16.8595 6.4175 16.595 6.4175C16.3305 6.4175 16.0768 6.52273 15.89 6.70999L12 10.59L8.10997 6.69999C7.92314 6.51273 7.66949 6.4075 7.40497 6.4075C7.14045 6.4075 6.8868 6.51273 6.69997 6.69999C6.30997 7.08999 6.30997 7.71999 6.69997 8.10999L10.59 12L6.69997 15.89C6.30997 16.28 6.30997 16.91 6.69997 17.3C7.08997 17.69 7.71997 17.69 8.10997 17.3L12 13.41L15.89 17.3C16.28 17.69 16.91 17.69 17.3 17.3C17.69 16.91 17.69 16.28 17.3 15.89L13.41 12L17.3 8.10999C17.68 7.72999 17.68 7.08999 17.3 6.70999Z" />
+        </svg>        
+      </div>
+    </div>
+  </section>
+  <section class="_e_upload-file _e_upload-file_error">
+    <div class="_e_upload-file__box">
+      <span class="_e_upload-file__name">file</span>
+      <span class="_e_upload-file__extension">.png</span>
+      <span class="_e_upload-file__size">6.2 Mb</span>
+      <div class="_e_upload-file__remove">
+        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M17.3 6.70999C17.1131 6.52273 16.8595 6.4175 16.595 6.4175C16.3305 6.4175 16.0768 6.52273 15.89 6.70999L12 10.59L8.10997 6.69999C7.92314 6.51273 7.66949 6.4075 7.40497 6.4075C7.14045 6.4075 6.8868 6.51273 6.69997 6.69999C6.30997 7.08999 6.30997 7.71999 6.69997 8.10999L10.59 12L6.69997 15.89C6.30997 16.28 6.30997 16.91 6.69997 17.3C7.08997 17.69 7.71997 17.69 8.10997 17.3L12 13.41L15.89 17.3C16.28 17.69 16.91 17.69 17.3 17.3C17.69 16.91 17.69 16.28 17.3 15.89L13.41 12L17.3 8.10999C17.68 7.72999 17.68 7.08999 17.3 6.70999Z" />
+        </svg>        
+      </div>
+    </div>
+    <div class="_e_upload-file__error">Maximum upload file size is 5 Mb.</div>
+  </section>
+  <section class="_e_upload-file">
+    <div class="_e_upload-file__box">
+      <span class="_e_upload-file__name">file</span>
+      <span class="_e_upload-file__extension">.png</span>
+      <span class="_e_upload-file__size">414 Kb</span>
+      <div class="_e_upload-file__remove">
+        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M17.3 6.70999C17.1131 6.52273 16.8595 6.4175 16.595 6.4175C16.3305 6.4175 16.0768 6.52273 15.89 6.70999L12 10.59L8.10997 6.69999C7.92314 6.51273 7.66949 6.4075 7.40497 6.4075C7.14045 6.4075 6.8868 6.51273 6.69997 6.69999C6.30997 7.08999 6.30997 7.71999 6.69997 8.10999L10.59 12L6.69997 15.89C6.30997 16.28 6.30997 16.91 6.69997 17.3C7.08997 17.69 7.71997 17.69 8.10997 17.3L12 13.41L15.89 17.3C16.28 17.69 16.91 17.69 17.3 17.3C17.69 16.91 17.69 16.28 17.3 15.89L13.41 12L17.3 8.10999C17.68 7.72999 17.68 7.08999 17.3 6.70999Z" />
+        </svg>        
+      </div>
+    </div>
+  </section>
+</div>
diff --git a/src/packages/core/src/upload/upload.css b/src/packages/core/src/upload/upload.css
@@ -2,12 +2,43 @@
   width: var(--C8);
 }
 
+._e_upload_readonly {
+  & ._e_upload__input {
+    display: none;
+  }
+
+  & ._e_upload__error {
+    display: none;
+  }
+
+  & ._e_upload-file__remove {
+    display: none;
+  }
+
+  & ._e_upload-file__error {
+    display: none;
+  }
+
+  & ._e_upload-file_error {
+    & ._e_upload-file__box {
+      box-shadow: none;
+    }
+  }
+}
+
 ._e_upload_error {
   & ._e_upload__input {
     border-color: var(--R500);
   }
 }
 
+._e_upload_highlighted {
+  & ._e_upload__input {
+    border-color: var(--B400);
+    background-color: var(--B50);
+  }
+}
+
 ._e_upload__label {
   margin-bottom: var(--S12);
   font: var(--Body1);
@@ -77,6 +108,15 @@
 }
 
 ._e_upload-file__name {
+  max-width: var(--C4);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font: var(--Body1);
+  color: var(--N800);
+}
+
+._e_upload-file__extension {
   font: var(--Body1);
   color: var(--N800);
 }

diff --git a/src/packages/core/src/upload/upload.html b/src/packages/core/src/upload/upload.html
@@ -8,7 +8,8 @@
   <div class="_e_upload__error">You have to upload minimum 5 files.</div>
   <section class="_e_upload-file">
     <div class="_e_upload-file__box">
-      <span class="_e_upload-file__name">file.png</span>
+      <span class="_e_upload-file__name">file_with_a_really_long_name_that_does_not_fit</span>
+      <span class="_e_upload-file__extension">.png</span>
       <span class="_e_upload-file__size">414 Kb</span>
       <div class="_e_upload-file__remove">
         <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
@@ -19,7 +20,8 @@
   </section>
   <section class="_e_upload-file _e_upload-file_error">
     <div class="_e_upload-file__box">
-      <span class="_e_upload-file__name">file.png</span>
+      <span class="_e_upload-file__name">file</span>
+      <span class="_e_upload-file__extension">.png</span>
       <span class="_e_upload-file__size">6.2 Mb</span>
       <div class="_e_upload-file__remove">
         <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
@@ -31,7 +33,8 @@
   </section>
   <section class="_e_upload-file">
     <div class="_e_upload-file__box">
-      <span class="_e_upload-file__name">file.png</span>
+      <span class="_e_upload-file__name">file</span>
+      <span class="_e_upload-file__extension">.png</span>
       <span class="_e_upload-file__size">414 Kb</span>
       <div class="_e_upload-file__remove">
         <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

diff --git a/src/packages/core/src/upload/upload.stories.mdx b/src/packages/core/src/upload/upload.stories.mdx
@@ -2,6 +2,7 @@ import { Meta, Preview, Story } from '@storybook/addon-docs/blocks';
 import pretty from 'pretty';
 
 import upload from './upload.html';
+import uploadReadonly from './upload-readonly.html';
 
 <Meta title='Core/Upload' />
 
@@ -12,3 +13,9 @@ import upload from './upload.html';
     { () => upload }
   </Story>
 </Preview>
+
+<Preview>
+  <Story name="readonly" height="240px" parameters={{ docs: { source: { code: pretty(uploadReadonly) } } }}>
+    { () => uploadReadonly }
+  </Story>
+</Preview>