TheCoreDev/sterivein
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update uploader view

Browse Source 
Update image edit view
This commit is contained in:
mespeche
2013-09-23 12:30:34 +02:00
parent 7c563eda42
commit 1ea614be57
6 changed files with 247 additions and 495 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
templates/admin/default/assets/js/image-upload.js
View File

@@ -2,10 +2,14 @@ $(function($){
// Manage picture upload
var pictureUploadManager = {};
var imageDropzone = new Dropzone("#images-dropzone");
Dropzone.options.imageDropzone = {
uploadMultiple: false
};
Dropzone.autoDiscover = false;
var imageDropzone = new Dropzone("#images-dropzone", {
dictDefaultMessage : $('.btn-browse').html(),
uploadMultiple: false,
maxFilesize: 8
});
imageDropzone.on("success", function(file) {
$(".image-manager .dz-file-preview").remove();
imageDropzone.removeFile(file);
@@ -38,7 +42,9 @@ $(function($){
$('.image-manager .image-delete-btn').on('click', function (e) {
e.preventDefault();
var $this = $(this);
$this.parent().append('<div class="loading" ></div>');
var $parent = $this.parent();
$parent.find('a').remove();
$parent.append('<div class="loading" ></div>');
var $url = $this.attr("href");
var errorMessage = $this.attr("data-error-message");
$.ajax({
@@ -52,7 +58,8 @@ $(function($){
}
}
}).done(function(data) {
$this.parent().remove();
$parent.parents('tr').remove();
$(".image-manager .message").html(
data
);

160
templates/admin/default/assets/less/thelia/dropzone.less Normal file
View File

@@ -0,0 +1,160 @@
.dropzone{
cursor: pointer;
border: 4px dashed @gray-lighter;
padding: 70px;
margin: 20px 0;
&.dz-drag-hover{
border-color: @brand-primary;
}
.dz-message {
text-align: center;
span{
font-size: @font-size-large;
display: block;
color: @gray;
span{
display: block;
font-weight: bold;
margin: 10px 0;
font-size: @font-size-small;
}
button{
span{
display: inline-block;
font-size: @font-size-base;
margin: 0;
color: inherit;
}
}
}
}
.dz-error{
.alert();
.alert-danger();
margin: 10px 0;
}
.dz-preview,
.dropzone-previews .dz-preview {
background: rgba(255,255,255,0.8);
position: relative;
display: inline-block;
margin: 17px;
vertical-align: top;
border: 1px solid #acacac;
padding: 6px 6px 6px 6px;
}
.dz-preview.dz-file-preview [data-dz-thumbnail],
.dropzone-previews .dz-preview.dz-file-preview [data-dz-thumbnail] {
display: none;
}
.dz-preview .dz-details,
.dropzone-previews .dz-preview .dz-details {
width: 100px;
height: 100px;
position: relative;
background: #ebebeb;
padding: 5px;
margin-bottom: 22px;
}
.dz-preview .dz-details .dz-filename,
.dropzone-previews .dz-preview .dz-details .dz-filename {
overflow: hidden;
height: 100%;
}
.dz-preview .dz-details img,
.dropzone-previews .dz-preview .dz-details img {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
}
.dz-preview .dz-details .dz-size,
.dropzone-previews .dz-preview .dz-details .dz-size {
position: absolute;
bottom: -28px;
left: 3px;
height: 28px;
line-height: 28px;
}
.dz-preview.dz-error .dz-error-mark,
.dropzone-previews .dz-preview.dz-error .dz-error-mark {
display: block;
}
.dz-preview.dz-success .dz-success-mark,
.dropzone-previews .dz-preview.dz-success .dz-success-mark {
display: block;
}
.dz-preview:hover .dz-details img,
.dropzone-previews .dz-preview:hover .dz-details img {
display: none;
}
.dz-preview .dz-success-mark,
.dropzone-previews .dz-preview .dz-success-mark,
.dz-preview .dz-error-mark,
.dropzone-previews .dz-preview .dz-error-mark {
display: none;
position: absolute;
width: 40px;
height: 40px;
font-size: 30px;
text-align: center;
right: -10px;
top: -10px;
}
.dz-preview .dz-success-mark,
.dropzone-previews .dz-preview .dz-success-mark {
color: #8cc657;
}
.dz-preview .dz-error-mark,
.dropzone-previews .dz-preview .dz-error-mark {
color: #ee162d;
}
.dz-preview .dz-progress,
.dropzone-previews .dz-preview .dz-progress {
position: absolute;
top: 100px;
left: 6px;
right: 6px;
height: 6px;
background: #d7d7d7;
display: none;
}
.dz-preview .dz-progress .dz-upload,
.dropzone-previews .dz-preview .dz-progress .dz-upload {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 0%;
background-color: #8cc657;
}
.dz-preview.dz-processing .dz-progress,
.dropzone-previews .dz-preview.dz-processing .dz-progress {
display: block;
}
.dz-preview .dz-error-message,
.dropzone-previews .dz-preview .dz-error-message {
display: none;
position: absolute;
top: -5px;
left: -20px;
background: rgba(245,245,245,0.8);
padding: 8px 10px;
color: #800;
min-width: 140px;
max-width: 500px;
z-index: 500;
}
.dz-preview:hover.dz-error .dz-error-message,
.dropzone-previews .dz-preview:hover.dz-error .dz-error-message {
display: block;
}
}

1
templates/admin/default/assets/less/thelia/thelia.less
View File

@@ -14,6 +14,7 @@
@import "bootstrap-switch.less";
@import "bootstrap-select.less";
@import "jqplot.less";
@import "dropzone.less";
// -- Base styling ------------------------------------------------------------