tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-09-27 20:06:52 +02:00
Code Issues Projects Releases Wiki Activity

FIX UploadField validation error and styles

Browse Source 
UploadField now return the validator's error message instead of 403. Plus nicer layout for error messages.
This commit is contained in:
colymba 2013-08-20 18:51:32 +03:00
parent 98c01a34f6
commit 02bceca9b4
4 changed files with 58 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
css/UploadField.css
View File

@ -23,6 +23,13 @@ Used in side panels and action tabs
.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-error-text { color: red; font-weight: bold; width: 150px; }
.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-warning-text { color: #b7a403; }
.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-success-text { color: #1f9433; }
.ss-uploadfield .ss-uploadfield-item.ui-state-error .ss-uploadfield-item-preview { width: auto; height: auto; margin-right: 15px; }
.ss-uploadfield .ss-uploadfield-item.ui-state-error .ss-uploadfield-item-info { margin-left: 0; }
.ss-uploadfield .ss-uploadfield-item.ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name { float: left; width: 70%; height: auto; }
.ss-uploadfield .ss-uploadfield-item.ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name .name { float: left; width: 100%; margin-bottom: 5px; }
.ss-uploadfield .ss-uploadfield-item.ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name .ss-uploadfield-item-status { float: left; width: 100%; padding: 0; text-align: left; }
.ss-uploadfield .ss-uploadfield-item.ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-actions { float: right; width: 5%; min-height: 0; margin: 0; }
.ss-uploadfield .ss-uploadfield-item.ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-actions .ss-uploadfield-item-cancel { position: relative; top: auto; }
.ss-uploadfield .ss-ui-button { display: block; float: left; margin: 0 10px 6px 0; }
.ss-uploadfield .ss-ui-button.ss-uploadfield-fromcomputer { position: relative; overflow: hidden; }
.ss-uploadfield .ss-uploadfield-files { margin: 0; padding: 0; overflow: auto; position: relative; }

1
forms/UploadField.php
View File

@ -1235,7 +1235,6 @@ class UploadField extends FileField {
// Format response with json
$response = new SS_HTTPResponse(Convert::raw2json(array($return)));
$response->addHeader('Content-Type', 'text/plain');
if(!empty($return['error'])) $response->setStatusCode(403);
return $response;
}

8
javascript/UploadField_downloadtemplate.js
View File

@ -1,9 +1,11 @@
window.tmpl.cache['ss-uploadfield-downloadtemplate'] = tmpl(
'{% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %}' +
'<li class="ss-uploadfield-item template-download{% if (file.error) { %} ui-state-error{% } %}" data-fileid="{%=file.id%}">' +
'<div class="ss-uploadfield-item-preview preview"><span>' +
'<img src="{%=file.thumbnail_url%}" alt="" />' +
'</span></div>' +
'{% if (file.thumbnail_url) { %}' +
'<div class="ss-uploadfield-item-preview preview"><span>' +
'<img src="{%=file.thumbnail_url%}" alt="" />' +
'</span></div>' +
'{% } %}' +
'<div class="ss-uploadfield-item-info">' +
'{% if (!file.error) { %}' +
'<input type="hidden" name="{%=file.fieldname%}[Files][]" value="{%=file.id%}" />' +

46
scss/UploadField.scss
View File

@ -85,6 +85,52 @@
}
}
}
//Upload/Validation error
&.ui-state-error
{
.ss-uploadfield-item-preview {
width: auto;
height: auto;
margin-right: 15px;
}
.ss-uploadfield-item-info {
margin-left: 0;
.ss-uploadfield-item-name {
float: left;
width: 70%;
height: auto;
.name
{
float: left;
width: 100%;
margin-bottom: 5px;
}
.ss-uploadfield-item-status {
float: left;
width: 100%;
padding: 0;
text-align: left;
}
}
.ss-uploadfield-item-actions {
float: right;
width: 5%;
min-height: 0;
margin: 0;
.ss-uploadfield-item-cancel {
position: relative;
top: auto;
}
}
}
}
}
.ss-ui-button {
display: block;