mirror
/
wagtail
kopia lustrzana https://github.com/wagtail/wagtail
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

ongoing styling of multi-upload

pull/428/head
Dave Cranwell 2014-07-04 17:07:35 +01:00
rodzic 3dc1b51a0e
commit 1122387626
7 zmienionych plików z 120 dodań i 39 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

11
wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss
Wyświetl plik

@ -186,4 +186,13 @@ a.tag:hover{
/* utility class to allow things to be scrollable if their contents can't wrap more nicely */
.overflow{
overflow:auto;
}
}
.status-msg{
&.success{
color:$color-green;
}
&.failure{
color:$color-red;
}
}

1
wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
Wyświetl plik

@ -728,6 +728,7 @@ ul.tagit li.tagit-choice-editable{
border:2px dashed $color-grey-4;
padding:$mobile-nice-padding;
background-color:$color-grey-5;
margin-bottom:1em;
.drop-zone-help{
border:0;

17
wagtail/wagtailadmin/static/wagtailadmin/scss/components/progressbar.scss
Wyświetl plik

@ -1,11 +1,28 @@
.progress{
@include border-radius(1.2em);
@include transition(opacity 0.3s ease);
background-color:$color-teal-dark;
border:1px solid $color-teal;
opacity:0;
&.active{
opacity:1;
}
&.done{
opacity:0;
}
.bar{
@include border-radius(1.5em);
@include transition(width 0.3s ease);
overflow:hidden;
box-sizing:border-box;
text-align:right;
line-height:1.2em;
color:white;
font-size:0.85em;
background-color:$color-teal;
height:1.2em;
padding-right:1em;
}
}

25
wagtail/wagtailimages/static/wagtailimages/js/add-multiple.js
Wyświetl plik

@ -29,11 +29,14 @@ $(function(){
$('#upload-list').append(li);
data.context = li;
data.process(function () {
return $this.fileupload('process', data);
}).always(function () {
data.context.removeClass('processing');
data.context.find('.left').each(function(index, elm){
$(elm).append(data.files[index].name);
});
data.context.find('.preview .thumb').each(function (index, elm) {
$(elm).addClass('hasthumb')
$(elm).append(data.files[index].preview);
@ -68,21 +71,27 @@ $(function(){
$(this).find('.progress').attr('aria-valuenow', progress).find('.bar').css(
'width',
progress + '%'
);
).html(progress + '%');
});
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#overall-progress').attr('aria-valuenow', progress).find('.bar').css(
$('#overall-progress').removeClass('done').addClass('active').attr('aria-valuenow', progress).find('.bar').css(
'width',
progress + '%'
);
).html(progress + '%');
console.log(progress);
if (progress >= 100){
$('#overall-progress').removeClass('active').addClass('done');
}
},
done: function (e, data) {
var itemElement = $(data.context);
$('.right', itemElement).append(data.result).addClass('done');
itemElement.addClass('upload-success')
$('.right', itemElement).append(data.result);
$('form', itemElement).each(function(){
var jform = $(this);
@ -99,19 +108,17 @@ $(function(){
});
});
//jform.find('#id_'+ im_li.attr('id') +'-tags').tagit(window.tagit_opts);
});
},
fail: function(e, data){
var itemElement = $(data.context);
itemElement.addClass('failed');
itemElement.addClass('upload-failure');
},
always: function(e, data){
var itemElement = $(data.context);
itemElement.removeClass('uploading');
itemElement.removeClass('upload-uploading');
},
});
});

57
wagtail/wagtailimages/static/wagtailimages/scss/add-multiple.scss
Wyświetl plik

@ -2,11 +2,36 @@
@import "../../wagtailadmin/static/wagtailadmin/scss/mixins.scss";
@import "../../wagtailadmin/static/wagtailadmin/scss/grid.scss";
.drop-zone-help{
background-color:transparent;
.replace-file-input{
position:relative;
input[type=file]{
opacity:0;
position:absolute;
top:0;
left:0;
&:hover{
cursor:pointer;
}
}
&:hover{
cursor:pointer;
button{
background-color:$color-teal-darker;
}
}
}
.upload-list{
> li{
padding:1em;
}
.left{
text-align:center;
}
.preview{
width:150px;
@ -14,10 +39,12 @@
display:block;
position:relative;
text-align:center;
padding:1em;
max-width:100%;
margin:auto;
}
.progress, .thumb, .thumb:before, canvas, img{
position:absolute;
max-width:100%;
}
.progress{
z-index:4;
@ -26,11 +53,11 @@
right:20%;
width:60%;
@include box-shadow(0 0 5px 2px rgba(255, 255, 255, 0.4));
border:1px solid white;
}
.thumb{
top:0;right:0;bottom:0;left:0;
z-index:1;
width:100%;
}
.thumb:before, canvas, img{
@ -53,19 +80,31 @@
}
.hasthumb{
.thumb:before{
&:before{
display:none;
}
}
.status-msg{
display:none;
}
.uploading{
.upload-uploading{
}
.done{
border-color:$color-green;
.upload-success{
.progress{
opacity:0;
}
.status-msg.success{
display:block;
}
}
.failed{
.upload-failure{
border-color:$color-red;
.status-msg.failure{
display:block;
}
}
}

39
wagtail/wagtailimages/templates/wagtailimages/multiple/add.html
Wyświetl plik

@ -14,24 +14,27 @@
{% include "wagtailadmin/shared/header.html" with title=add_str icon="image" %}
<div class="nice-padding">
<form action="{% url 'wagtailimages_add_multiple' %}" method="POST" enctype="multipart/form-data">
<input id="fileupload" type="file" name="files[]" data-url="{% url 'wagtailimages_add_multiple' %}" multiple>
{% csrf_token %}
</form>
<div class="drop-zone">
<p>Drag and drop images into this area to upload</p>
<form class="replace-file-input" action="{% url 'wagtailimages_add_multiple' %}" method="POST" enctype="multipart/form-data">
<button class="bicolor icon icon-plus">Or choose from your computer</button>
<input id="fileupload" type="file" name="files[]" data-url="{% url 'wagtailimages_add_multiple' %}" multiple>
{% csrf_token %}
</form>
</div>
<div id="overall-progress" class="progress progress-secondary">
<div class="bar" style="width: 0%;"></div>
<div class="bar" style="width: 0%;">0%</div>
</div>
<div class="drop-zone">
<p >Drag and drop images into this area to upload</p>
<ul id="upload-list" class="upload-list multiple"></ul>
</div>
<ul id="upload-list" class="upload-list multiple"></ul>
</div>
<script id="upload-list-item" type="text/template">
<li>
<div class="left">
<li class="row">
<div class="left col3">
<div class="preview">
<div class="thumb icon icon-image"></div>
<div class="progress">
@ -39,13 +42,17 @@
</div>
</div>
</div>
<div class="right"></div>
<div class="right col9">
<p class="status-msg success">Upload successful. Please enter more information about this image</p>
<p class="status-msg failure">Sorry, upload failed.</p>
</div>
</li>
</script>
<!--
<ul class="upload-list multiple" id="upload-list-item" type="text/template">
<li class="uploading">
<div class="left">
<div class="left col3">
<div class="preview">
<div class="thumb icon icon-image">
<img src="http://instasrc.com/150x150/nature" />
@ -55,7 +62,10 @@
</div>
</div>
</div>
<div class="right"></div>
<div class="right col9">
<p class="status-msg success">Upload successful. Please enter more information about this image</p>
<p class="status-msg failure">Sorry, upload failed.</p>
</div>
</li>
<li class="failed hasthumb">
<div class="left">
@ -84,6 +94,7 @@
<div class="right"></div>
</li>
</ul>
-->
{% endblock %}

9
wagtail/wagtailimages/templates/wagtailimages/multiple/edit_form.html
Wyświetl plik

@ -1,7 +1,7 @@
{% load i18n image_tags %}
{% load i18n %}
<form action="{% url 'wagtailimages_edit_multiple' image.id %}" method="POST" enctype="multipart/form-data">
<ul class="fields col7">
<ul class="fields">
{% csrf_token %}
{% for field in form %}
{% include "wagtailadmin/shared/field_as_li.html" %}
@ -11,7 +11,4 @@
<a href="{% url 'wagtailimages_delete_multiple' image.id %}" class="button button-secondary no">{% trans "Delete" %}</a>
</li>
</ul>
</form>
<div class="col5">
{% image image max-200x200 %}
</div>
</form>