From 11223876267f092e3e9d08f469f2422f84922b1b Mon Sep 17 00:00:00 2001 From: Dave Cranwell Date: Fri, 4 Jul 2014 17:07:35 +0100 Subject: [PATCH] ongoing styling of multi-upload --- .../scss/components/formatters.scss | 11 +++- .../wagtailadmin/scss/components/forms.scss | 1 + .../scss/components/progressbar.scss | 17 ++++++ .../static/wagtailimages/js/add-multiple.js | 25 +++++--- .../wagtailimages/scss/add-multiple.scss | 57 ++++++++++++++++--- .../templates/wagtailimages/multiple/add.html | 39 ++++++++----- .../wagtailimages/multiple/edit_form.html | 9 +-- 7 files changed, 120 insertions(+), 39 deletions(-) diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss index 97e915f36e..8a71bc9e92 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss @@ -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; -} \ No newline at end of file +} + +.status-msg{ + &.success{ + color:$color-green; + } + &.failure{ + color:$color-red; + } +} diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss index 140990a00e..339b2ae647 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss @@ -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; diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/progressbar.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/progressbar.scss index 1b95b9120d..258c6e28e2 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/progressbar.scss +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/progressbar.scss @@ -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; } } \ No newline at end of file diff --git a/wagtail/wagtailimages/static/wagtailimages/js/add-multiple.js b/wagtail/wagtailimages/static/wagtailimages/js/add-multiple.js index 085007b5f8..8f22684006 100644 --- a/wagtail/wagtailimages/static/wagtailimages/js/add-multiple.js +++ b/wagtail/wagtailimages/static/wagtailimages/js/add-multiple.js @@ -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'); }, }); }); \ No newline at end of file diff --git a/wagtail/wagtailimages/static/wagtailimages/scss/add-multiple.scss b/wagtail/wagtailimages/static/wagtailimages/scss/add-multiple.scss index a305c9006d..2123f4d209 100644 --- a/wagtail/wagtailimages/static/wagtailimages/scss/add-multiple.scss +++ b/wagtail/wagtailimages/static/wagtailimages/scss/add-multiple.scss @@ -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; + } } } \ No newline at end of file diff --git a/wagtail/wagtailimages/templates/wagtailimages/multiple/add.html b/wagtail/wagtailimages/templates/wagtailimages/multiple/add.html index 5efc07d0c8..5fd81b29b5 100644 --- a/wagtail/wagtailimages/templates/wagtailimages/multiple/add.html +++ b/wagtail/wagtailimages/templates/wagtailimages/multiple/add.html @@ -14,24 +14,27 @@ {% include "wagtailadmin/shared/header.html" with title=add_str icon="image" %}
-
- - {% csrf_token %} -
+
+

Drag and drop images into this area to upload

+ +
+ + + {% csrf_token %} +
+
-
+
0%
-
-

Drag and drop images into this area to upload

-
    -
    + +
    + {% endblock %} diff --git a/wagtail/wagtailimages/templates/wagtailimages/multiple/edit_form.html b/wagtail/wagtailimages/templates/wagtailimages/multiple/edit_form.html index e5539e4e99..87a72949ad 100644 --- a/wagtail/wagtailimages/templates/wagtailimages/multiple/edit_form.html +++ b/wagtail/wagtailimages/templates/wagtailimages/multiple/edit_form.html @@ -1,7 +1,7 @@ -{% load i18n image_tags %} +{% load i18n %}
    -