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

Commit 6df7328

Browse files
author
vikasrohit
authored
Merge pull request #828 from appirio-tech/feature/file-picker-fix
AS#145923029536741, Filestack: restyle interface
2 parents 711fd7a + 2e471c8 commit 6df7328

File tree

4 files changed

+131
-63
lines changed

4 files changed

+131
-63
lines changed

‎app/directives/tc-fp-file-input/tc-fp-file-input.jade

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,7 @@
77
span.tc-label__asterisk.lowercase(ng-if="mandatory") #[span *]mandatory
88
input.tc-file-field__input(
99
type="filepicker-dragdrop",
10+
data-fp-button-text="Pick A File",
11+
data-fp-drag-text=" ",
1012
on-success="onFileSeleted(event.fpfile)"
1113
)

‎app/submissions/submit-design-files/submit-design-files.jade

Lines changed: 65 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -26,68 +26,71 @@
2626
a(ng-href="https://help.{{DOMAIN}}/hc/en-us/articles/219122667-Formatting-Your-Submission-for-Design-Challenges") Learn more about formatting your submission file
2727

2828
.form-block__fields
29-
.fieldset
30-
tc-fp-file-input(
31-
label-text="Submission",
32-
field-id="SUBMISSION_ZIP",
33-
file-type="zip",
34-
button-text="Add File",
35-
services="COMPUTER,GOOGLE_DRIVE,BOX,DROPBOX",
36-
show-file-type="true",
37-
placeholder="Attach all visible files as a single .zip file",
38-
mandatory="true",
39-
ng-model="vm.submissionForm.submissionZip",
40-
set-file-reference="vm.setFileReference(file, fieldId)"
41-
)
42-
43-
.tc-error-messages(
44-
ng-show="submissionForm['SUBMISSION_ZIP'].$touched && submissionForm['SUBMISSION_ZIP'].$invalid",
45-
ng-messages="submissionForm['SUBMISSION_ZIP'].$error"
46-
)
47-
p(ng-message="filesize") File size may not exceed 500MB.
48-
49-
p(ng-message="required") This is not the correct file format. Please select a .zip file.
50-
51-
tc-fp-file-input.tc-file-field(
52-
label-text="Source",
53-
field-id="SOURCE_ZIP",
54-
file-type="zip",
55-
button-text="Add File",
56-
services="COMPUTER,GOOGLE_DRIVE,BOX,DROPBOX",
57-
show-file-type="true",
58-
placeholder="Attach all visible files as a single .zip file",
59-
mandatory="true",
60-
set-file-reference="vm.setFileReference(file, fieldId)",
61-
ng-model="vm.submissionForm.sourceZip"
62-
)
63-
64-
.tc-error-messages(
65-
ng-show="submissionForm['SOURCE_ZIP'].$touched && submissionForm['SOURCE_ZIP'].$invalid",
66-
ng-messages="submissionForm['SOURCE_ZIP'].$error"
67-
)
68-
p(ng-message="filesize") File size may not exceed 500MB.
69-
70-
p(ng-message="required") This is not the correct file format. Please select a .zip file.
71-
72-
tc-fp-file-input.tc-file-field(
73-
label-text="Preview Image",
74-
field-id="DESIGN_COVER",
75-
file-type=".jpg,.jpeg,.png",
76-
button-text="Add File",
77-
services="COMPUTER,GOOGLE_DRIVE,BOX,DROPBOX",
78-
placeholder="Image file as .jpg or .png",
79-
mandatory="true",
80-
set-file-reference="vm.setFileReference(file, fieldId)",
81-
ng-model="vm.submissionForm.designCover"
82-
)
83-
84-
.tc-error-messages(
85-
ng-show="submissionForm['DESIGN_COVER'].$touched && submissionForm['DESIGN_COVER'].$invalid",
86-
ng-messages="submissionForm['DESIGN_COVER'].$error"
87-
)
88-
p(ng-message="filesize") File size may not exceed 500MB.
89-
90-
p(ng-message="required") This is not the correct file format. Please select a .jpg or .png file.
29+
.fieldset.files
30+
.upload
31+
.file-picker
32+
tc-fp-file-input(
33+
label-text="Submission",
34+
field-id="SUBMISSION_ZIP",
35+
file-type="zip",
36+
button-text="Add File",
37+
services="COMPUTER,GOOGLE_DRIVE,BOX,DROPBOX",
38+
show-file-type="true",
39+
placeholder="Attach all visible files as a single .zip file",
40+
mandatory="true",
41+
ng-model="vm.submissionForm.submissionZip",
42+
set-file-reference="vm.setFileReference(file, fieldId)"
43+
)
44+
45+
.tc-error-messages(
46+
ng-show="submissionForm['SUBMISSION_ZIP'].$touched && submissionForm['SUBMISSION_ZIP'].$invalid",
47+
ng-messages="submissionForm['SUBMISSION_ZIP'].$error"
48+
)
49+
p(ng-message="filesize") File size may not exceed 500MB.
50+
51+
p(ng-message="required") This is not the correct file format. Please select a .zip file.
52+
53+
.file-picker
54+
tc-fp-file-input.tc-file-field(
55+
label-text="Source",
56+
field-id="SOURCE_ZIP",
57+
file-type="zip",
58+
button-text="Add File",
59+
services="COMPUTER,GOOGLE_DRIVE,BOX,DROPBOX",
60+
show-file-type="true",
61+
placeholder="Attach all visible files as a single .zip file",
62+
mandatory="true",
63+
set-file-reference="vm.setFileReference(file, fieldId)",
64+
ng-model="vm.submissionForm.sourceZip"
65+
)
66+
67+
.tc-error-messages(
68+
ng-show="submissionForm['SOURCE_ZIP'].$touched && submissionForm['SOURCE_ZIP'].$invalid",
69+
ng-messages="submissionForm['SOURCE_ZIP'].$error"
70+
)
71+
p(ng-message="filesize") File size may not exceed 500MB.
72+
73+
p(ng-message="required") This is not the correct file format. Please select a .zip file.
74+
.file-picker
75+
tc-fp-file-input.tc-file-field(
76+
label-text="Preview Image",
77+
field-id="DESIGN_COVER",
78+
file-type=".jpg,.jpeg,.png",
79+
button-text="Add File",
80+
services="COMPUTER,GOOGLE_DRIVE,BOX,DROPBOX",
81+
placeholder="Image file as .jpg or .png",
82+
mandatory="true",
83+
set-file-reference="vm.setFileReference(file, fieldId)",
84+
ng-model="vm.submissionForm.designCover"
85+
)
86+
87+
.tc-error-messages(
88+
ng-show="submissionForm['DESIGN_COVER'].$touched && submissionForm['DESIGN_COVER'].$invalid",
89+
ng-messages="submissionForm['DESIGN_COVER'].$error"
90+
)
91+
p(ng-message="filesize") File size may not exceed 500MB.
92+
93+
p(ng-message="required") This is not the correct file format. Please select a .jpg or .png file.
9194

9295
tc-input.fieldset__input.submitterRank(
9396
label-text="Rank #",

‎assets/css/directives/tc-fp-file-input.directive.scss

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,60 @@
11
@import 'topcoder/tc-includes';
22

33
tc-fp-file-input {
4+
5+
.tc-file-field__label {
6+
width: 240px;
7+
}
8+
9+
.tc-file-field__inputs {
10+
width: 240px;
11+
div {
12+
width: 240px;
13+
}
14+
}
15+
16+
.tc-file-field__input {
17+
height: 190px;
18+
width: 240px;
19+
}
20+
21+
.tc-file-field__input::after {
22+
content: 'or';
23+
font-size: 12px;
24+
line-height: 15px;
25+
color: $tc-gray-30;
26+
bottom: 85px;
27+
position: absolute;
28+
left: 50%;
29+
transform: translateX(-50%)
30+
}
31+
432
.tc-btn {
533
margin-bottom: 5px;
34+
position: absolute;
35+
left: 50%;
36+
transform: translateX(-50%);
37+
bottom: 20px;
38+
z-index: 1;
639
}
740

841
.tc-fp-file-drag-drop {
942
width: calc(100% - 4px);
43+
position: absolute;
44+
left: 0;
45+
top: 0;
46+
height: 190px;
47+
width: 240px;
48+
}
49+
50+
.tc-fp-file-drag-drop::after {
51+
content: 'Drag and drop your .zip file here';
52+
color: $tc-gray-50;
53+
top: 25px;
54+
position: absolute;
55+
width: 198px;
56+
text-align: center;
57+
left: 50%;
58+
transform: translateX(-50%)
1059
}
1160
}

‎assets/css/submissions/submit-file.scss

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,8 @@
5252
max-width: 500px;
5353
}
5454

55-
tc-file-input {
55+
tc-file-input,
56+
tc-fp-file-input {
5657
.tc-file-field__label, .tc-file-field__inputs {
5758
margin: 0 auto;
5859
@media screen and (min-width: 1000px) {
@@ -69,6 +70,19 @@ tc-file-input {
6970
}
7071
}
7172

73+
.files {
74+
width: 100%;
75+
}
76+
77+
.upload {
78+
display: flex;
79+
flex-wrap: wrap;
80+
justify-content: space-around;
81+
82+
@media screen and (min-width: 1000px) {
83+
justify-content: space-between;
84+
}
85+
}
7286

7387
.submitterRank {
7488
width: 100px;

0 commit comments

Comments
 (0)