From 4e379610a59b4fb4b12d12f8a06cb618f347c3bb Mon Sep 17 00:00:00 2001 From: Dave Cranwell Date: Fri, 18 Jul 2014 12:54:37 +0100 Subject: [PATCH] first style pass --- .../templates/wagtailstyleguide/base.html | 11 ++++-- .../vendor/jquery.ba-throttle-debounce.min.js | 9 +++++ .../scss/components/formatters.scss | 38 +++++++++++++++++++ .../wagtailadmin/scss/components/forms.scss | 31 ++++++++++++--- .../wagtailimages/js/image-url-generator.js | 31 +++++++-------- .../templates/wagtailimages/images/edit.html | 2 +- .../wagtailimages/images/url_generator.html | 35 ++++++++++------- 7 files changed, 116 insertions(+), 41 deletions(-) create mode 100644 wagtail/wagtailadmin/static/wagtailadmin/js/vendor/jquery.ba-throttle-debounce.min.js diff --git a/wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html b/wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html index 8506e9075..113874dd9 100644 --- a/wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html +++ b/wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html @@ -1,7 +1,5 @@ {% extends "wagtailadmin/base.html" %} -{% load wagtailadmin_tags %} -{% load compress i18n %} -{% load gravatar %} +{% load wagtailadmin_tags compress i18n static gravatar %} {% block extra_css %} {% compress css %} @@ -345,6 +343,13 @@
Primary tag
Secondary tag
+ +

Loading mask

+

Add the following div around any items you wish to display with a spinner overlay and fading out

+

Remove the "loading" class to disable the effect

+
+ +
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/js/vendor/jquery.ba-throttle-debounce.min.js b/wagtail/wagtailadmin/static/wagtailadmin/js/vendor/jquery.ba-throttle-debounce.min.js new file mode 100644 index 000000000..07205508e --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/js/vendor/jquery.ba-throttle-debounce.min.js @@ -0,0 +1,9 @@ +/* + * jQuery throttle / debounce - v1.1 - 3/7/2010 + * http://benalman.com/projects/jquery-throttle-debounce-plugin/ + * + * Copyright (c) 2010 "Cowboy" Ben Alman + * Dual licensed under the MIT and GPL licenses. + * http://benalman.com/about/license/ + */ +(function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this); \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss index b6f5ca03c..343096a5a 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss @@ -194,12 +194,50 @@ a.tag:hover{ } } +/* Loading mask: overlays a certain area with a loading spinner and a faded out cover to prevent interaction */ +.loading-mask{ + &.loading{ + position:relative; + + &:before, &:after{ + position:absolute; + display:block; + } + + &:before{ + content:""; + top:-5px;left:-5px;bottom:-5px;right:-5px; + z-index:1; + background-color:rgba(255,255,255,0.5); + } + &:after{ + font-size:30px; + width:30px; + line-height:30px; + left:50%; + top:50%; + margin:-15px 0 0 -15px; + font-family:wagtail; + animation: spin 0.5s infinite linear; + -webkit-animation: spin 0.5s infinite linear; + -moz-animation: spin 0.5s infinite linear; + content:"1"; + z-index:2; + color:$color-teal; + } + } +} + /* make a block-level element inline */ .inline{ display:inline; } +.inline-block{ + display:inline-block; +} + .unlist{ @include unlist(); } diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss index d71ff66da..f117c3fbf 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss @@ -72,6 +72,7 @@ input, textarea, select, .richtext, .tagit{ &:disabled, &[disabled], &:disabled:hover, &[disabled]:hover{ background-color:inherit; cursor:not-allowed; + color:$color-grey-4; } } @@ -532,6 +533,7 @@ li.focused > .help{ .field-row{ @include clearfix(); + /* negative margin the bottom so it doesn't add too much space */ margin-bottom:-1.2em; } @@ -819,14 +821,31 @@ input[type=submit], input[type=reset], input[type=button], .button, button{ @include row(); } + .field-content{ + @include column(10,0); + } + .field-col{ float:left; padding-left:0 !important; - } - .field-content{ - @include column(10); - padding-right:0; - padding-left:0; - } + /* anything less than 4 columns or greater than 6 is impractical */ + &.col4{ + label{ + @include column(2,0,4); + } + .field-content{ + @include column(2, $padding, 4); + } + } + &.col6{ + label{ + @include column(2,0,6); + } + .field-content{ + @include column(4, $padding, 6); + } + } + } + } \ No newline at end of file diff --git a/wagtail/wagtailimages/static/wagtailimages/js/image-url-generator.js b/wagtail/wagtailimages/static/wagtailimages/js/image-url-generator.js index efc6e2135..fe3902483 100644 --- a/wagtail/wagtailimages/static/wagtailimages/js/image-url-generator.js +++ b/wagtail/wagtailimages/static/wagtailimages/js/image-url-generator.js @@ -1,11 +1,14 @@ $(function() { + "use strict"; + $('.image-url-generator').each(function() { var $this = $(this); var $form = $this.find('form'); var $filterMethodField = $form.find('select#id_filter_method'); var $widthField = $form.find('input#id_width'); var $heightField = $form.find('input#id_height'); - var $result = $this.find('div.result'); + var $result = $this.find('#result-url'); + var $loadingMask = $this.find('.loading-mask') var $preview = $this.find('img.preview'); var generatorUrl = $this.data('generatorUrl'); @@ -13,6 +16,8 @@ $(function() { function formChangeHandler() { var filterSpec = $filterMethodField.val(); + $loadingMask.addClass('loading'); + if (filterSpec == 'original') { $widthField.prop('disabled', true); $heightField.prop('disabled', true); @@ -33,34 +38,24 @@ $(function() { // Fields with width and height $.getJSON(generatorUrl.replace('__filterspec__', filterSpec)) .done(function(data) { - $result.text(data['url']); + $result.val(data['url']); $preview.attr('src', data['url']); + $loadingMask.removeClass('loading'); }) .fail(function(data) { - $result.text(data.responseJSON['error']); + $result.val(data.responseJSON['error']); $preview.attr('src', ''); + $loadingMask.removeClass('loading'); }); } - $form.change(formChangeHandler); - $form.keyup(formChangeHandler); + $form.change($.debounce(500, formChangeHandler)); + $form.keyup($.debounce(500, formChangeHandler)); formChangeHandler(); // When the user clicks the URL, automatically select the whole thing (for easier copying) $result.click(function() { - if (document.selection) { - document.selection.empty(); - - var range = document.body.createTextRange(); - range.moveToElementText(this); - range.select(); - } else if (window.getSelection) { - window.getSelection().removeAllRanges(); - - var range = document.createRange(); - range.selectNodeContents(this); - window.getSelection().addRange(range); - } + $(this).select(); }); }); }); diff --git a/wagtail/wagtailimages/templates/wagtailimages/images/edit.html b/wagtail/wagtailimages/templates/wagtailimages/images/edit.html index a2c02b736..2bca12303 100644 --- a/wagtail/wagtailimages/templates/wagtailimages/images/edit.html +++ b/wagtail/wagtailimages/templates/wagtailimages/images/edit.html @@ -38,7 +38,7 @@ {% image image max-800x600 %} {% if url_generator_enabled %} - URL Generator + URL Generator {% endif %} diff --git a/wagtail/wagtailimages/templates/wagtailimages/images/url_generator.html b/wagtail/wagtailimages/templates/wagtailimages/images/url_generator.html index f0eca11e5..f9104b51c 100644 --- a/wagtail/wagtailimages/templates/wagtailimages/images/url_generator.html +++ b/wagtail/wagtailimages/templates/wagtailimages/images/url_generator.html @@ -5,27 +5,36 @@ {% block bodyclass %}menu-images{% endblock %} -{% block extra_js %} - {% compress js %} - - {% endcompress %} -{% endblock %} - {% block content %} {% trans "Generating URL" as title_str %} {% include "wagtailadmin/shared/header.html" with title=title_str subtitle=image.title icon="image" %}
- {% for field in form %} - {% include "wagtailadmin/shared/field_as_li.html" %} - {% endfor %} +
    + {% include "wagtailadmin/shared/field_as_li.html" with field=form.filter_method %} +
  • +
      + {% include "wagtailadmin/shared/field_as_li.html" with field=form.width li_classes="field-col col4" %} + {% include "wagtailadmin/shared/field_as_li.html" with field=form.height li_classes="field-col col4" %} +
    +
    • +
-

URL

-
+

URL

+ -

Preview

- Preview +

Preview

+
+ Preview +
{% endblock %} + +{% block extra_js %} + {% compress js %} + + + {% endcompress %} +{% endblock %} \ No newline at end of file