Skip to content
This repository was archived by the owner on Mar 24, 2023. It is now read-only.

Commit c67047e

Browse files
jgruicajgruica
authored
Merge pull request #920 from jgruica/master
Ship configitem type file - styling
2 parents 30ff147 + c20dc08 commit c67047e

File tree

8 files changed

+150
-65
lines changed

8 files changed

+150
-65
lines changed

‎web/app/yarn.lock

+12
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,13 @@
2626
esutils "^2.0.2"
2727
js-tokens "^4.0.0"
2828

29+
"@babel/runtime@^7.3.4":
30+
version "7.4.3"
31+
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.3.tgz#79888e452034223ad9609187a0ad1fe0d2ad4bdc"
32+
integrity sha512-9lsJwJLxDh/T3Q3SZszfWOTkk3pHbkmH+3KY+zwIDmsNlxsumuhS2TH3NIpktU4kNvfzy+k3eLT7aTJSPTo0OA==
33+
dependencies:
34+
regenerator-runtime "^0.13.2"
35+
2936
"@babel/[email protected]":
3037
version "7.0.0-beta.51"
3138
resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.51.tgz#d802b7b543b5836c778aa691797abf00f3d97ea9"
@@ -8279,6 +8286,11 @@ regenerator-runtime@^0.11.0:
82798286
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
82808287
integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
82818288

8289+
regenerator-runtime@^0.13.2:
8290+
version "0.13.2"
8291+
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz#32e59c9a6fb9b1a4aff09b4930ca2d4477343447"
8292+
integrity sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA==
8293+
82828294
regenerator-transform@^0.10.0:
82838295
version "0.10.1"
82848296
resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"

‎web/init/src/assets/images/main_spritesheet.svg

+45-34
Loading

‎web/init/src/components/config_render/ConfigFileInput.jsx

+7-5
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,15 @@ export default class ConfigFileInput extends React.Component {
2424
return this.props.multi_value.join(", ");
2525
}
2626
} else if (this.props.value) {
27-
return this.props.value;
27+
return this.props.value.slice(0,5) + "....";
2828
}
2929
return this.props.default;
3030
}
3131

32+
3233
render() {
3334
return (
34-
<div className={`field field-type-file ${this.props.hidden ? "hidden" : ""}`}>
35+
<div className={`field field-type-file u-marginTop--15 ${this.props.hidden ? "hidden" : ""}`}>
3536
{this.props.title !== "" ?
3637
<ConfigItemTitle
3738
title={this.props.title}
@@ -46,15 +47,16 @@ export default class ConfigFileInput extends React.Component {
4647
<FileInput
4748
ref={(file) => this.file = file}
4849
name={this.props.name}
50+
title={this.props.title}
4951
readOnly={this.props.readonly}
5052
disabled={this.props.readonly}
5153
multiple={this.props.multiple}
52-
onChange={this.handleOnChange} />
54+
onChange={this.handleOnChange}
55+
getFilenamesText={this.getFilenamesText()}/>
5356
</span>
54-
<small>{this.getFilenamesText()}</small>
5557
</div>
5658
</div>
5759
</div>
5860
);
5961
}
60-
}
62+
}

‎web/init/src/components/config_render/FileInput.jsx

+46-26
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,24 @@ export default class FileInput extends React.Component {
99
super(props);
1010
this.state = {
1111
errText: "",
12+
fileAdded: false,
13+
fileName: "",
14+
fileNames: []
1215
}
1316
}
1417

1518
handleOnChange = (ev) => {
16-
this.setState({errText: ""});
19+
this.setState({ errText: "" });
1720

1821
let files = [];
1922
let error;
2023

2124
const done = after(ev.target.files.length, () => {
2225
// this.refs.file.getDOMNode().value = "";
2326
if (error) {
24-
this.setState({errText: error});
27+
this.setState({ errText: error });
2528
} else if (this.props.onChange) {
29+
this.setState({ fileAdded: true })
2630
this.props.onChange(
2731
map(files, "value"),
2832
map(files, "data")
@@ -37,7 +41,12 @@ export default class FileInput extends React.Component {
3741
if (vals.length !== 2) {
3842
error = "Invalid file data";
3943
} else {
40-
files.push({value: file.name, data: vals[1]});
44+
files.push({ value: file.name, data: vals[1] });
45+
if (this.props.multiple) {
46+
this.setState({ fileNames: files.map(file => file.value) })
47+
} else {
48+
this.setState({ fileName: files[0].value })
49+
}
4150
}
4251
done();
4352
};
@@ -46,32 +55,43 @@ export default class FileInput extends React.Component {
4655
}
4756

4857
render() {
49-
5058
let label;
51-
if (this.props.label) {
52-
label = this.props.label;
53-
} else if (this.props.multiple) {
54-
label = "Choose files";
55-
} else {
56-
label = "Choose file";
57-
}
59+
this.props.label ? label = this.props.label : this.props.multiple
60+
? label = "Upload files" : label = "Upload a file";
61+
5862

5963
return (
60-
<span>
61-
<span className={`${this.props.readonly ? "readonly" : ""} ${this.props.disabled ? "disabled" : ""}`}>
62-
<p className="sub-header-color field-section-sub-header u-marginTop--small u-marginBottom--small">{label}</p>
63-
<input
64-
ref={(file) => this.file = file}
65-
type="file"
66-
name={this.props.name}
67-
className="form-control"
68-
onChange={this.handleOnChange}
69-
readOnly={this.props.readOnly}
70-
multiple={this.props.multiple}
71-
disabled={this.props.disabled} />
72-
</span>
64+
<div>
65+
<div className={`${this.props.readonly ? "readonly" : ""} ${this.props.disabled ? "disabled" : ""}`}>
66+
<p className="sub-header-color field-section-sub-header u-marginTop--small u-marginBottom--small u-marginTop--15">{label}</p>
67+
<div className="flex flex-row">
68+
<div className={`${this.state.fileAdded ? "file-uploaded" : "custom-file-upload"}`}>
69+
<input
70+
ref={(file) => this.file = file}
71+
type="file"
72+
name={this.props.name}
73+
className="inputfile"
74+
id={`${this.props.name} selector`}
75+
onChange={this.handleOnChange}
76+
readOnly={this.props.readOnly}
77+
multiple={true}
78+
disabled={this.props.disabled}
79+
/>
80+
<label htmlFor={`${this.props.name} selector`} className="u-position--relative">
81+
<span className={`icon clickable ${this.state.fileAdded ? "u-smallCheckGreen" : "u-ovalIcon"} u-marginRight--normal u-top--3`}></span>
82+
{this.state.fileAdded ? `${this.props.title} file selected` : `Browse files for ${this.props.title}`}
83+
</label>
84+
</div>
85+
{this.state.fileAdded ?
86+
<div className="u-color--tuna u-marginLeft--normal"> File uploaded:
87+
<p className="Form-label-subtext"> {this.props.multiple ? this.state.fileNames.join(",") : this.state.fileName} </p>
88+
<p className="Form-label-subtext"> {this.props.getFilenamesText} </p>
89+
</div>
90+
: null}
91+
</div>
92+
</div>
7393
<small className="text-danger"> {this.state.errText}</small>
74-
</span>
94+
</div>
7595
);
7696
}
77-
}
97+
}

‎web/init/src/scss/utilities/forms.scss

+23
Original file line numberDiff line numberDiff line change
@@ -74,3 +74,26 @@
7474
color: #44BB66;
7575
}
7676
}
77+
78+
input[type="file"] {
79+
display: none;
80+
}
81+
82+
.custom-file-upload {
83+
border: 1px dashed #C4C7CA;
84+
display: inline-block;
85+
padding: 15px 17px;
86+
cursor: pointer;
87+
width: 249px;
88+
border-radius: 4px;
89+
}
90+
91+
.file-uploaded {
92+
border: 1px solid #9B9B9B;
93+
display: inline-block;
94+
padding: 15px 17px;
95+
cursor: pointer;
96+
width: 249px;
97+
border-radius: 4px;
98+
color: #323232;
99+
}

‎web/init/src/scss/utilities/icons.scss

+12
Original file line numberDiff line numberDiff line change
@@ -77,3 +77,15 @@
7777
width: 40px;
7878
height: 40px;
7979
}
80+
81+
.icon.u-ovalIcon {
82+
background-position: -48px 0;
83+
width: 18px;
84+
height: 18px;
85+
}
86+
87+
.icon.u-smallCheckGreen {
88+
background-position: -68px 0;
89+
width: 18px;
90+
height: 18px;
91+
}

‎web/init/src/scss/utilities/utilities.scss

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
.u-position--fixed { position: fixed; }
66
.u-bottom--0 { bottom: 0 };
77
.u-top--0 { top: 0 };
8+
.u-top--3 { top: 3px };
89
.u-right--0 { right: 0 };
910
.u-left--0 { left: 0 };
1011
.u-userSelect--none { user-select: none; }

‎web/yarn.lock

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2+
# yarn lockfile v1
3+
4+

0 commit comments

Comments
 (0)