vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Fixed #1016 File Upload UI and minor slick grid styling

Browse source
This commit is contained in:
Anand Doshi 2015-02-17 19:51:18 +05:30
parent df4377bff7
commit 1884c98fba
7 changed files with 106 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frappe/public/css/bootstrap.css vendored
View file

@ -2537,7 +2537,7 @@ output {
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border: 1px solid #d1d8dd;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
@ -3779,8 +3779,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
line-height: 1;
color: #555;
text-align: center;
background-color: #eee;
border: 1px solid #ccc;
background-color: #f0f4f7;
border: 1px solid #d1d8dd;
border-radius: 4px;
}
.input-group-addon.input-sm {

18
frappe/public/css/desk.css
View file

@ -394,3 +394,21 @@ a.badge-hover:active .badge {
.footnote-area {
border-top: 1px solid #d1d8dd;
}
.file-upload .input-group-addon {
color: #8d99a6;
font-size: 12px;
}
.file-upload .file-upload-or {
font-size: 12px;
margin: 0px 7px;
}
.file-upload .uploaded-filename,
.file-upload .web-link-wrapper,
.file-upload .input-upload,
.file-upload .input-link {
display: inline-block;
vertical-align: middle;
}
.file-upload .uploaded-filename-display {
max-width: 194px;
}

7
frappe/public/css/slickgrid.css
View file

@ -25,10 +25,13 @@
width: 100%;
min-height: 20px;
}
.slick-cell {
.slick-cell,
.slick-headerrow-column {
font-size: 12px;
border-color: #d1d8dd !important;
border-color: transparent #d1d8dd #d1d8dd transparent !important;
border-style: solid;
color: inherit !important;
margin-top: -1px;
}
.slick-header-column,
.slick-header-columns {

30
frappe/public/js/frappe/ui/upload.html
View file

@ -1,13 +1,21 @@
<div class="file-upload">
<div class="checkbox" style="margin-top: 0px;">
<label class="text-muted">
<input type="checkbox" class="attach-as-link"> {%= __("Attach as a web link") %}</label>
</div>
<div class="input-upload">
<input style="margin: 7px 0px;" type="file" name="filedata" />
</div>
<div class="input-link hide">
<input class="form-control" style="max-width: 300px;" type="text" name="file_url" />
<p class="text-muted">{%= (opts.sample_url || "e.g. http://example.com/somefile.png") %}</p>
</div>
<div class="input-upload">
<input class="input-upload-file hidden" type="file" name="filedata" />
<button class="btn btn-default btn-sm btn-browse">{%= __("Browse") %}</button>
</div>
<div class="uploaded-filename hidden" style="width: calc(100% - 67px);"></div>
<div class="web-link-wrapper" style="width: calc(100% - 67px);">
<span class="text-muted file-upload-or">{%= __("or") %}</span>
<div class="input-link" style="width: calc(100% - 30px);">
<div class="input-group">
<div class="input-group-addon">
<span class="hidden-xs">{%= __("Web Link") %}</span>
<i class="icon-link visible-xs"></i>
</div>
<input class="form-control" type="text" name="file_url"
placeholder="{%= (opts.sample_url || "e.g. http://example.com/somefile.png") %}"/>
</div>
</div>
</div>
</div>
</div>

37
frappe/public/js/frappe/upload.js
View file

@ -6,14 +6,41 @@ frappe.upload = {
make: function(opts) {
if(!opts.args) opts.args = {};
var $upload = $(frappe.render_template("upload", {opts:opts})).appendTo(opts.parent);
var $file_input = $upload.find(".input-upload-file");
$upload.find(".attach-as-link").click(function() {
var as_link = $(this).prop("checked");
// bind pseudo browse button
$upload.find(".btn-browse").on("click",
function() { $file_input.click(); });
$upload.find(".input-link").toggleClass("hide", !as_link);
$upload.find(".input-upload").toggleClass("hide", as_link);
$file_input.on("change", function() {
if (this.files.length > 0) {
$upload.find(".web-link-wrapper").addClass("hidden");
var $uploaded_file_display = $(repl('<div class="btn-group" role="group">\
<button type="button" class="btn btn-default btn-sm \
text-ellipsis uploaded-filename-display">%(filename)s\
</button>\
<button type="button" class="btn btn-default btn-sm uploaded-file-remove">\
&times;</button>\
</div>', {filename: this.files[0].name}))
.appendTo($upload.find(".uploaded-filename").removeClass("hidden").empty());
$uploaded_file_display.find(".uploaded-filename-display").on("click", function() {
$file_input.click();
});
$uploaded_file_display.find(".uploaded-file-remove").on("click", function() {
$file_input.val("");
$file_input.trigger("change");
});
} else {
$upload.find(".uploaded-filename").addClass("hidden")
$upload.find(".web-link-wrapper").removeClass("hidden");
}
});
if(!opts.btn) {
opts.btn = $('<button class="btn btn-default btn-sm">' + __("Attach")
+ '</div>').appendTo($upload);
@ -33,7 +60,7 @@ frappe.upload = {
var fileobj = $upload.find(":file").get(0).files[0];
frappe.upload.upload_file(fileobj, opts.args, opts);
})
});
},
upload_file: function(fileobj, args, opts) {
if(!fileobj && !args.file_url) {

24
frappe/public/less/desk.less
View file

@ -454,3 +454,27 @@ a.badge-hover& {
.footnote-area {
border-top: 1px solid @border-color;
}
.file-upload {
.input-group-addon {
color: @text-muted;
font-size: 12px;
}
.file-upload-or {
font-size: 12px;
margin: 0px 7px;
}
.uploaded-filename,
.web-link-wrapper,
.input-upload,
.input-link {
display: inline-block;
vertical-align: middle;
}
.uploaded-filename-display {
max-width: 194px;
}
}

7
frappe/public/less/slickgrid.less
View file

@ -30,10 +30,13 @@
min-height: 20px;
}
.slick-cell {
.slick-cell,
.slick-headerrow-column {
font-size: 12px;
border-color: @border-color !important;
border-color: transparent @border-color @border-color transparent !important;
border-style: solid;
color: inherit !important;
margin-top: -1px;
}
.slick-header-column, .slick-header-columns {