feat(upload-form): make form looks better - EUBFR-54 (#35)

* feat(upload-form): make form looks better * feat(upload-form): make form nicer * feat(upload-form): make form pretty
ec-europa · Oct 18, 2017 · c6c964e · c6c964e
1 parent 056a667
commit c6c964e
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 44 deletions.
diff --git a/demo/budg/dashboard/public/index.html b/demo/budg/dashboard/public/index.html
@@ -19,6 +19,7 @@
 work correctly both with client-side routing and a non-root public URL.
 Learn how to configure a non-root public URL by running `npm run build`.
 -->
+<link rel="stylesheet" href="https://ec-europa.github.io/europa-component-library/framework/styles/europa.css">
 <title>EUBFR App</title>
 </head>
   <body>

diff --git a/demo/budg/dashboard/src/App.css b/demo/budg/dashboard/src/App.css
@@ -1,12 +1,34 @@
-.App {
-  margin-top: 2em;
-  margin-left: auto;
-  margin-right: auto;
-  width: 500px;
+.dashboard {
+  display: flex;
+  flex-direction: column; }
+  @media (min-width: 992px) {
+    .dashboard {
+      flex-direction: row; } }
+
+.dashboard__item {
+  flex-basis: 0;
+  flex-grow: 1;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+.dashboard__item:first-child {
+  padding-left: 0;
+}
+.dashboard__item:last-child {
+  padding-right: 0;
+}
+
+.ecl-message--clean {
+  display: none;
+}
+
+.ecl-file-upload__label {
+  text-align: center;
+  width: 100%;
 }
 
-.app-status {
-  margin-bottom: 2em;
+.ecl-table td {
+  word-wrap: break-word;
 }
 
 .progress {

diff --git a/demo/budg/dashboard/src/App.js b/demo/budg/dashboard/src/App.js
@@ -5,12 +5,18 @@ import FilesList from './components/FilesList';
 import './App.css';
 
 const App = () => (
-  <div className="App">
-    <h1>BUDG dashboard</h1>
-    <h2>Upload a new file</h2>
-    <FormUpload />
-    <h2>Existing files</h2>
-    <FilesList />
+  <div className="ecl-container">
+    <h1 className="ecl-heading ecl-heading--h1">BUDG dashboard</h1>
+    <div className="dashboard">
+      <div className="dashboard__item">
+        <h2 className="ecl-heading ecl-heading--h2">Upload a new file</h2>
+        <FormUpload />
+      </div>
+      <div className="dashboard__item">
+        <h2 className="ecl-heading ecl-heading--h2">Existing files</h2>
+        <FilesList />
+      </div>
+    </div>
   </div>
 );
 

diff --git a/demo/budg/dashboard/src/components/FilesList.js b/demo/budg/dashboard/src/components/FilesList.js
@@ -86,16 +86,26 @@ class FilesList extends Component {
     if (files.length === 0) {
       return (
         <div>
-          <button onClick={this.loadFiles}>Refresh</button>
-          <p>No file found</p>
+          <button
+            className="ecl-button ecl-button--default"
+            onClick={this.loadFiles}
+          >
+            Refresh
+          </button>
+          <p className="ecl-paragraph">No file found</p>
         </div>
       );
     }
 
     return (
-      <div>
-        <button onClick={this.loadFiles}>Refresh</button>
-        <table>
+      <div className="files-list">
+        <button
+          className="ecl-button ecl-button--default"
+          onClick={this.loadFiles}
+        >
+          Refresh
+        </button>
+        <table className="ecl-table">
           <thead>
             <tr>
               <th>Original name</th>
@@ -112,15 +122,23 @@ class FilesList extends Component {
                 <td>{Math.floor(file.content_length / 1024)} kB</td>
                 <td>
                   {links[file.computed_key] ? (
-                    <a href={links[file.computed_key]}>Download</a>
+                    <a className="ecl-link" href={links[file.computed_key]}>
+                      Download
+                    </a>
                   ) : (
-                    <button onClick={this.generateLink(file.computed_key)}>
+                    <button
+                      className="ecl-button ecl-button--secondary"
+                      onClick={this.generateLink(file.computed_key)}
+                    >
                       Get download link
                     </button>
                   )}
                 </td>
                 <td>
-                  <button onClick={this.deleteFile(file.computed_key)}>
+                  <button
+                    className="ecl-button ecl-button--secondary"
+                    onClick={this.deleteFile(file.computed_key)}
+                  >
                     Delete
                   </button>
                 </td>

diff --git a/demo/budg/dashboard/src/components/FormUpload.js b/demo/budg/dashboard/src/components/FormUpload.js
@@ -11,7 +11,8 @@ class FormUpload extends Component {
     super(props);
 
     this.state = {
-      message: ``,
+      messageTitle: ``,
+      messageBody: ``,
       progress: 'clean',
     };
 
@@ -41,29 +42,32 @@ class FormUpload extends Component {
 
   onUploadProgress(percent, status) {
     this.setState({
-      message: `${status}: ${percent}`,
-      progress: 'progress',
+      messageTitle: 'Upload in progress',
+      messageBody: `${status}: ${percent}%`,
+      progress: 'info',
     });
   }
 
   onUploadError(status) {
     this.setState({
-      message: status,
+      messageTitle: 'Error',
+      messageBody: status,
       progress: 'error',
     });
   }
 
   onUploadFinish() {
     this.setState({
-      message: `Done!`,
+      messageTitle: `Done!`,
+      messageBody: `The file has been uploaded`,
       progress: 'success',
     });
   }
 
   render() {
     return (
-      <div className="App">
-        <p>
+      <div className="form-upload">
+        <p className="ecl-paragraph">
           <strong>WARNING!</strong>
           <br />
           You are about to send data to a platform hosted outside the European
@@ -74,7 +78,7 @@ class FormUpload extends Component {
           Please make sure you have checked the content of the file(s) you are
           about to send and that you have all authorization to proceed.
         </p>
-        <p>
+        <p className="ecl-paragraph">
           <strong>ATTENTION!</strong>
           <br />
           Vous êtes sur le point de transmettre des informations sur une
@@ -86,17 +90,41 @@ class FormUpload extends Component {
           que vous voulez transmettre et que vous avez l{"'"}autorisation de le
           faire.
         </p>
-        <div className={`${`app-status `}${this.state.progress}`}>
-          {this.state.message}
+
+        <div className="ecl-file-upload ecl-u-mb-s">
+          <label className="ecl-file-upload__label" htmlFor="dashboard-upload">
+            <span
+              className="ecl-button ecl-button--call ecl-button--block"
+              role="button"
+              aria-controls="dashboard-upload"
+              tabIndex="0"
+            >
+              Upload a file
+            </span>
+          </label>
+          <Uploader
+            style={{ display: 'none' }}
+            id="dashboard-upload"
+            getSignedUrl={this.getSignedUrl}
+            onProgress={this.onUploadProgress}
+            onError={this.onUploadError}
+            onFinish={this.onUploadFinish}
+            signingUrlHeaders={{}}
+            contentDisposition="auto"
+          />
+        </div>
+
+        <div
+          className={`${`ecl-u-mb-s ecl-message  ecl-message--`}${this.state
+            .progress}`}
+          role="alert"
+        >
+          <span className="ecl-u-sr-only">${this.state.progress} message</span>
+          <div className="ecl-message__title">{this.state.messageTitle}</div>
+          <div className="ecl-message__body ecl-u-pl-none">
+            {this.state.messageBody}
+          </div>
         </div>
-        <Uploader
-          getSignedUrl={this.getSignedUrl}
-          onProgress={this.onUploadProgress}
-          onError={this.onUploadError}
-          onFinish={this.onUploadFinish}
-          signingUrlHeaders={{}}
-          contentDisposition="auto"
-        />
       </div>
     );
   }

diff --git a/demo/budg/dashboard/src/index.css b/demo/budg/dashboard/src/index.css
@@ -1,5 +1 @@
-body {
-  margin: 0;
-  padding: 0;
-  font-family: sans-serif;
-}
+