diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
index 534e4ec8d4..7cbe1f9eed 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
@@ -24,12 +24,14 @@ legend{
@include visuallyhidden();
}
-label{
+label, .label{
+ text-transform:none;
font-weight:bold;
color:$color-grey-1;
font-size:1.1em;
display:block;
padding:0 0 0.8em 0;
+ margin:0;
line-height:1.3em;
.checkbox &,
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/typography.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/typography.scss
index 059392aaf8..360a0dc127 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/typography.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/typography.scss
@@ -29,6 +29,10 @@ h2{
text-transform:none;
}
}
+p{
+ margin-top:0;
+}
+
a{
outline:none;
color:$color-link;
diff --git a/wagtail/wagtailimages/static/wagtailimages/js/focal-point-chooser.js b/wagtail/wagtailimages/static/wagtailimages/js/focal-point-chooser.js
index b67adda99d..c68986d116 100644
--- a/wagtail/wagtailimages/static/wagtailimages/js/focal-point-chooser.js
+++ b/wagtail/wagtailimages/static/wagtailimages/js/focal-point-chooser.js
@@ -1,48 +1,75 @@
-$(function() {
- var $chooser = $('div.focal-point-chooser');
- var $indicator = $('.current-focal-point-indicator', $chooser);
- var $image = $('img', $chooser);
- var $focalPointXField = $('input.focal_point_x');
- var $focalPointYField = $('input.focal_point_y');
- var $focalPointWidthField = $('input.focal_point_width');
- var $focalPointHeightField = $('input.focal_point_height');
+var jcropapi;
- var originalWidth = $image.data('originalWidth');
- var originalHeight = $image.data('originalHeight');
-
- var focalPointXOriginal = $chooser.data('focalPointX');
- var focalPointYOriginal = $chooser.data('focalPointY');
- var focalPointWidthOriginal = $chooser.data('focalPointWidth');
- var focalPointHeightOriginal = $chooser.data('focalPointHeight');
-
- $image.Jcrop({
- trueSize: [originalWidth, originalHeight],
+function setupJcrop(image, original, focalPointOriginal, fields){
+ image.Jcrop({
+ trueSize: [original.width, original.height],
onSelect: function(box) {
var x = Math.floor((box.x + box.x2) / 2);
var y = Math.floor((box.y + box.y2) / 2);
var w = Math.floor(box.w);
var h = Math.floor(box.h);
- $focalPointXField.val(x);
- $focalPointYField.val(y);
- $focalPointWidthField.val(w);
- $focalPointHeightField.val(h);
+ fields.x.val(x);
+ fields.y.val(y);
+ fields.width.val(w);
+ fields.height.val(h);
},
onRelease: function() {
- $focalPointXField.val(focalPointXOriginal);
- $focalPointYField.val(focalPointYOriginal);
- $focalPointWidthField.val(focalPointWidthOriginal);
- $focalPointHeightField.val(focalPointHeightOriginal);
+ fields.x.val(focalPointOriginal.x);
+ fields.y.val(focalPointOriginal.y);
+ fields.width.val(focalPointOriginal.width);
+ fields.height.val(focalPointOriginal.height);
},
+ }, function(){
+ jcropapi = this
});
+}
- var left = focalPointXOriginal - focalPointWidthOriginal / 2
- var top = focalPointYOriginal - focalPointHeightOriginal / 2
- var width = focalPointWidthOriginal;
- var height = focalPointHeightOriginal;
+$(function() {
+ var $chooser = $('div.focal-point-chooser');
+ var $indicator = $('.current-focal-point-indicator', $chooser);
+ var $image = $('img', $chooser);
- $indicator.css('left', (left * 100 / originalWidth) + '%');
- $indicator.css('top', (top * 100 / originalHeight) + '%');
- $indicator.css('width', (width * 100 / originalWidth) + '%');
- $indicator.css('height', (height * 100 / originalHeight) + '%');
+ var original = {
+ width: $image.data('originalWidth'),
+ height: $image.data('originalHeight')
+ }
+
+ var focalPointOriginal = {
+ x: $chooser.data('focalPointX'),
+ y: $chooser.data('focalPointY'),
+ width: $chooser.data('focalPointWidth'),
+ height: $chooser.data('focalPointHeight')
+ }
+
+ var fields = {
+ x: $('input.focal_point_x'),
+ y: $('input.focal_point_y'),
+ width: $('input.focal_point_width'),
+ height: $('input.focal_point_height')
+ }
+
+ var left = focalPointOriginal.x - focalPointOriginal.width / 2
+ var top = focalPointOriginal.y - focalPointOriginal.height / 2
+ var width = focalPointOriginal.width;
+ var height = focalPointOriginal.height;
+
+ $indicator.css('left', (left * 100 / original.width) + '%');
+ $indicator.css('top', (top * 100 / original.height) + '%');
+ $indicator.css('width', (width * 100 / original.width) + '%');
+ $indicator.css('height', (height * 100 / original.height) + '%');
+
+ var params = [$image, original, focalPointOriginal, fields];
+
+ setupJcrop.apply(this, params)
+
+ $(window).resize($.debounce(300, function(){
+ // jcrop doesn't support responsive images so to cater for resizing the browser
+ // we have to destroy() it, which doesn't properly do it,
+ // so destory it some more, then re-apply it
+ jcropapi.destroy();
+ $image.removeAttr('style');
+ $('.jcrop-holder').remove();
+ setupJcrop.apply(this, params)
+ }));
});
diff --git a/wagtail/wagtailimages/static/wagtailimages/scss/focal-point-chooser.scss b/wagtail/wagtailimages/static/wagtailimages/scss/focal-point-chooser.scss
index 8f4a4105aa..f26177a999 100644
--- a/wagtail/wagtailimages/static/wagtailimages/scss/focal-point-chooser.scss
+++ b/wagtail/wagtailimages/static/wagtailimages/scss/focal-point-chooser.scss
@@ -1,13 +1,22 @@
-div.focal-point-chooser {
+@import "../../wagtailadmin/static/wagtailadmin/scss/variables.scss";
+@import "../../wagtailadmin/static/wagtailadmin/scss/mixins.scss";
+
+.focal-point-chooser {
position: relative;
-}
-div.current-focal-point-indicator {
- position: absolute;
- border: 1px solid #FFF;
- opacity: 0.5;
+ .current-focal-point-indicator {
+ @include transition(opacity 0.2s ease);
+ @include box-shadow(1px 1px 10px 0px rgba(0,0,0,1));
+ position: absolute;
+ border: 1px solid $color-teal;
+ opacity: 0.5;
- .hidden {
- display: none;
+ .hidden {
+ display: none;
+ }
+ }
+
+ &:hover .current-focal-point-indicator{
+ opacity:0;
}
}
\ No newline at end of file
diff --git a/wagtail/wagtailimages/templates/wagtailimages/images/edit.html b/wagtail/wagtailimages/templates/wagtailimages/images/edit.html
index dd96ddd8d2..20a00511dd 100644
--- a/wagtail/wagtailimages/templates/wagtailimages/images/edit.html
+++ b/wagtail/wagtailimages/templates/wagtailimages/images/edit.html
@@ -17,6 +17,7 @@
{% include "wagtailadmin/shared/tag_field_js.html" %}
+
{% endblock %}
@@ -47,6 +48,8 @@
+
{% trans "Focal point (optional)" %}
+
{% trans "To define this image's most important region, drag a box over the image below." %} {% if image.focal_point %}({% trans "Current focal point shown" %}){% endif %}