Merge pull request #920 from jgruica/master

Ship configitem type file - styling
replicatedhq · Apr 23, 2019 · c67047e · c67047e
2 parents 30ff147 + c20dc08
commit c67047e
Show file tree

Hide file tree

Showing 8 changed files with 150 additions and 65 deletions.
diff --git a/web/app/yarn.lock b/web/app/yarn.lock
@@ -26,6 +26,13 @@
     esutils "^2.0.2"
     js-tokens "^4.0.0"
 
+"@babel/runtime@^7.3.4":
+  version "7.4.3"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.3.tgz#79888e452034223ad9609187a0ad1fe0d2ad4bdc"
+  integrity sha512-9lsJwJLxDh/T3Q3SZszfWOTkk3pHbkmH+3KY+zwIDmsNlxsumuhS2TH3NIpktU4kNvfzy+k3eLT7aTJSPTo0OA==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
 "@babel/types@7.0.0-beta.51":
   version "7.0.0-beta.51"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.51.tgz#d802b7b543b5836c778aa691797abf00f3d97ea9"
@@ -8279,6 +8286,11 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
+regenerator-runtime@^0.13.2:
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz#32e59c9a6fb9b1a4aff09b4930ca2d4477343447"
+  integrity sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA==
+
 regenerator-transform@^0.10.0:
   version "0.10.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"

diff --git a/web/init/src/assets/images/main_spritesheet.svg b/web/init/src/assets/images/main_spritesheet.svg
diff --git a/web/init/src/components/config_render/ConfigFileInput.jsx b/web/init/src/components/config_render/ConfigFileInput.jsx
@@ -24,14 +24,15 @@ export default class ConfigFileInput extends React.Component {
         return this.props.multi_value.join(", ");
       }
     } else if (this.props.value) {
-      return this.props.value;
+      return this.props.value.slice(0,5) + "....";
     }
     return this.props.default;
   }
 
+
   render() {
     return (
-      <div className={`field field-type-file ${this.props.hidden ? "hidden" : ""}`}>
+      <div className={`field field-type-file u-marginTop--15 ${this.props.hidden ? "hidden" : ""}`}>
         {this.props.title !== "" ?
           <ConfigItemTitle
             title={this.props.title}
@@ -46,15 +47,16 @@ export default class ConfigFileInput extends React.Component {
               <FileInput
                 ref={(file) => this.file = file}
                 name={this.props.name}
+                title={this.props.title}
                 readOnly={this.props.readonly}
                 disabled={this.props.readonly}
                 multiple={this.props.multiple}
-                onChange={this.handleOnChange} />
+                onChange={this.handleOnChange}
+                getFilenamesText={this.getFilenamesText()}/>
             </span>
-            <small>{this.getFilenamesText()}</small>
           </div>
         </div>
       </div>
     );
   }
-}
+}
diff --git a/web/init/src/components/config_render/FileInput.jsx b/web/init/src/components/config_render/FileInput.jsx
@@ -9,20 +9,24 @@ export default class FileInput extends React.Component {
     super(props);
     this.state = {
       errText: "",
+      fileAdded: false,
+      fileName: "",
+      fileNames: []
     }
   }
 
   handleOnChange = (ev) => {
-    this.setState({errText: ""});
+    this.setState({ errText: "" });
 
     let files = [];
     let error;
 
     const done = after(ev.target.files.length, () => {
       // this.refs.file.getDOMNode().value = "";
       if (error) {
-        this.setState({errText: error});
+        this.setState({ errText: error });
       } else if (this.props.onChange) {
+        this.setState({ fileAdded: true })
         this.props.onChange(
           map(files, "value"),
           map(files, "data")
@@ -37,7 +41,12 @@ export default class FileInput extends React.Component {
         if (vals.length !== 2) {
           error = "Invalid file data";
         } else {
-          files.push({value: file.name, data: vals[1]});
+          files.push({ value: file.name, data: vals[1] });
+          if (this.props.multiple) {
+            this.setState({ fileNames: files.map(file => file.value) })
+          } else {
+            this.setState({ fileName: files[0].value })
+          }
         }
         done();
       };
@@ -46,32 +55,43 @@ export default class FileInput extends React.Component {
   }
 
   render() {
-
     let label;
-    if (this.props.label) {
-      label = this.props.label;
-    } else if (this.props.multiple) {
-      label = "Choose files";
-    } else {
-      label = "Choose file";
-    }
+    this.props.label ? label = this.props.label : this.props.multiple
+      ? label = "Upload files" : label = "Upload a file";
+
 
     return (
-      <span>
-        <span className={`${this.props.readonly ? "readonly" : ""} ${this.props.disabled ? "disabled" : ""}`}>
-          <p className="sub-header-color field-section-sub-header u-marginTop--small u-marginBottom--small">{label}</p>
-          <input
-            ref={(file) => this.file = file}
-            type="file"
-            name={this.props.name}
-            className="form-control"
-            onChange={this.handleOnChange}
-            readOnly={this.props.readOnly}
-            multiple={this.props.multiple}
-            disabled={this.props.disabled} />
-        </span>
+      <div>
+        <div className={`${this.props.readonly ? "readonly" : ""} ${this.props.disabled ? "disabled" : ""}`}>
+          <p className="sub-header-color field-section-sub-header u-marginTop--small u-marginBottom--small u-marginTop--15">{label}</p>
+          <div className="flex flex-row">
+            <div className={`${this.state.fileAdded ? "file-uploaded" : "custom-file-upload"}`}>
+              <input
+                ref={(file) => this.file = file}
+                type="file"
+                name={this.props.name}
+                className="inputfile"
+                id={`${this.props.name} selector`}
+                onChange={this.handleOnChange}
+                readOnly={this.props.readOnly}
+                multiple={true}
+                disabled={this.props.disabled}
+              />
+              <label htmlFor={`${this.props.name} selector`} className="u-position--relative">
+                <span className={`icon clickable ${this.state.fileAdded ? "u-smallCheckGreen" : "u-ovalIcon"} u-marginRight--normal u-top--3`}></span>
+                {this.state.fileAdded ? `${this.props.title} file selected` : `Browse files for ${this.props.title}`}
+              </label>
+            </div>
+            {this.state.fileAdded ?
+              <div className="u-color--tuna u-marginLeft--normal"> File uploaded:
+              <p className="Form-label-subtext"> {this.props.multiple ? this.state.fileNames.join(",") : this.state.fileName} </p>
+                <p className="Form-label-subtext"> {this.props.getFilenamesText} </p>
+              </div>
+              : null}
+          </div>
+        </div>
         <small className="text-danger"> {this.state.errText}</small>
-      </span>
+      </div>
     );
   }
-}
+}
diff --git a/web/init/src/scss/utilities/forms.scss b/web/init/src/scss/utilities/forms.scss
@@ -74,3 +74,26 @@
     color: #44BB66;
   }
 }
+
+input[type="file"] {
+  display: none;
+}
+
+.custom-file-upload {
+  border: 1px dashed #C4C7CA;
+  display: inline-block;
+  padding: 15px 17px;
+  cursor: pointer;
+  width: 249px;
+  border-radius: 4px;
+}
+
+.file-uploaded {
+  border: 1px solid #9B9B9B;
+  display: inline-block;
+  padding: 15px 17px;
+  cursor: pointer;
+  width: 249px;
+  border-radius: 4px;
+  color: #323232;
+}
diff --git a/web/init/src/scss/utilities/icons.scss b/web/init/src/scss/utilities/icons.scss
@@ -77,3 +77,15 @@
   width: 40px;
   height: 40px;
 }
+
+.icon.u-ovalIcon {
+  background-position: -48px 0;
+  width: 18px;
+  height: 18px;
+}
+
+.icon.u-smallCheckGreen {
+  background-position: -68px 0;
+  width: 18px;
+  height: 18px;
+}
diff --git a/web/init/src/scss/utilities/utilities.scss b/web/init/src/scss/utilities/utilities.scss
@@ -5,6 +5,7 @@
 .u-position--fixed { position: fixed; }
 .u-bottom--0 { bottom: 0 };
 .u-top--0 { top: 0 };
+.u-top--3 { top: 3px };
 .u-right--0 { right: 0 };
 .u-left--0 { left: 0 };
 .u-userSelect--none { user-select: none; }

diff --git a/web/yarn.lock b/web/yarn.lock
@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+