[4087] Revamp the image editing page as far as possible

wagtail/admin/static_src/wagtailadmin/scss/_utilities.scss

@@ -0,0 +1 @@
+@import 'wagtailadmin/scss/utilities/text';

wagtail/admin/static_src/wagtailadmin/scss/components/_forms.scss

@@ -1165,18 +1165,16 @@ select {
     @include transition(background-color 0.2s ease);
 }
 
-input[type=submit],
-input[type=reset],
-input[type=button],
-.button,
-button {
-    // @include transition(background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease);
-}
-
 .help {
     @include transition(opacity 0.2s ease);
 }
 
+.label-uppercase {
+    .field > label {
+        text-transform: uppercase;
+    }
+}
+
 @include media-breakpoint-up(sm) {
     label {
         @include column(2);

wagtail/admin/static_src/wagtailadmin/scss/core.scss

@@ -19,6 +19,8 @@
 @import 'wagtailadmin/scss/components/tooltips';
 @import 'wagtailadmin/scss/components/logo';
 
+@import 'wagtailadmin/scss/utilities';
+
 @import 'wagtailadmin/scss/fonts';
 
 @import '../../../../../client/scss/styles';

wagtail/admin/static_src/wagtailadmin/scss/utilities/_text.scss

@@ -0,0 +1,7 @@
+.u-text-transform-uppercase {
+    text-transform: uppercase;
+}
+
+.u-text-weight-normal {
+    font-weight: normal;
+}

wagtail/images/static_src/wagtailimages/scss/focal-point-chooser.scss

@@ -3,6 +3,7 @@
 
 .focal-point-chooser {
     position: relative;
+    margin-bottom: 20px;
 
     .current-focal-point-indicator {
         @include transition(opacity 0.2s ease);

wagtail/images/templates/wagtailimages/images/edit.html

@@ -33,29 +33,28 @@
 
     <form action="{% url 'wagtailimages:edit' image.id %}" method="POST" enctype="multipart/form-data" novalidate>
         {% csrf_token %}
-
         <div class="row row-flush nice-padding">
-
-            <div class="col5">
+            <div class="col6">
                 <ul class="fields">
                     {% for field in form %}
-
                         {% if field.name == 'file' %}
-                            {% include "wagtailimages/images/_file_field_as_li.html" %}
+                            {% include "wagtailimages/images/_file_field_as_li.html" with li_classes="label-above label-uppercase" %}
                         {% elif field.is_hidden %}
                             {{ field }}
                         {% else %}
-                            {% include "wagtailadmin/shared/field_as_li.html" %}
+                            {% include "wagtailadmin/shared/field_as_li.html" with li_classes="label-above label-uppercase" %}
                         {% endif %}
-
                     {% endfor %}
                 </ul>
+                <div class="u-hidden@xs">
+                    <input type="submit" value="{% trans 'Save' %}" class="button" />
+                    {% if user_can_delete %}
+                        <a href="{% url 'wagtailimages:delete' image.id %}" class="button button-secondary no">{% trans "Delete image" %}</a>
+                    {% endif %}
+                </div>
             </div>
 
-            <div class="col5 divider-after">
-                <h2 class="label">{% trans "Focal point (optional)" %}</h2>
-                <p>{% 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 %}</p>
-
+            <div class="col6">
                 {% image image max-800x600 as rendition %}
 
                 <div class="focal-point-chooser"
@@ -66,47 +65,50 @@ <h2 class="label">{% trans "Focal point (optional)" %}</h2>
                     data-focal-point-height="{{ image.focal_point_height }}">
 
                     <img {{ rendition.attrs }} data-original-width="{{ image.width|unlocalize }}" data-original-height="{{ image.height|unlocalize }}" class="show-transparency">
-
                     <div class="current-focal-point-indicator{% if not image.has_focal_point %} hidden{% endif %}"></div>
-
                 </div>
-                <br />
-                <button class="button button-secondary no remove-focal-point" type="button">{% trans "Remove focal area" %}</button>
-            </div>
 
-            <div class="col2 ">
                 {% if url_generator_enabled %}
                     <a href="{% url 'wagtailimages:url_generator' image.id %}" class="button bicolor icon icon-link">{% trans "URL Generator" %}</a>
                     <hr />
                 {% endif %}
 
-                {% image image original as original_image %}
-
-                <dl>
-                    <dt>{% trans "Max dimensions" %}</dt>
-                    <dd>{{ original_image.width }}x{{ original_image.height }}</dd>
-                    <dt>{% trans "Filesize" %}</dt>
-                    <dd>{% if filesize %}{{ filesize|filesizeformat }}{% else %}{% trans "File not found" %}{% endif %}</dd>
-
-                    {% usage_count_enabled as uc_enabled %}
-                    {% if uc_enabled %}
-                        <dt>{% trans "Usage" %}</dt>
-                        <dd>
-                            <a href="{{ image.usage_url }}">{% blocktrans count usage_count=image.get_usage.count %}Used {{ usage_count }} time{% plural %}Used {{ usage_count }} times{% endblocktrans %}</a>
-                        </dd>
-                    {% endif %}
-                </dl>
+                <div class="row">
+                    <div class="col8 divider-after">
+                        <h2 class="label u-text-transform-uppercase">{% trans "Focal point" %} <span class="u-text-weight-normal">{% trans "(optional)" %}</span></h2>
+                        <p>{% trans "To define this image's most important region, drag a box over the image above." %} {% if image.focal_point %}({% trans "Current focal point shown" %}){% endif %}</p>
+
+                        <button class="button button-secondary no remove-focal-point" type="button">{% trans "Remove focal area" %}</button>
+                    </div>
+                    <div class="col4">
+                        {% image image original as original_image %}
+
+                        <dl>
+                            <dt>{% trans "Max dimensions" %}</dt>
+                            <dd>{{ original_image.width }}x{{ original_image.height }}</dd>
+                            <dt>{% trans "Filesize" %}</dt>
+                            <dd>{% if filesize %}{{ filesize|filesizeformat }}{% else %}{% trans "File not found" %}{% endif %}</dd>
+
+                            {% usage_count_enabled as uc_enabled %}
+                            {% if uc_enabled %}
+                                <dt>{% trans "Usage" %}</dt>
+                                <dd>
+                                    <a href="{{ image.usage_url }}">{% blocktrans count usage_count=image.get_usage.count %}Used {{ usage_count }} time{% plural %}Used {{ usage_count }} times{% endblocktrans %}</a>
+                                </dd>
+                            {% endif %}
+                        </dl>
+                    </div>
+                </div>
             </div>
         </div>
 
-        <div class="row row-flush nice-padding">
+        <div class="row row-flush nice-padding u-hidden@sm">
             <div class="col5">
                 <input type="submit" value="{% trans 'Save' %}" class="button" />
                 {% if user_can_delete %}
                     <a href="{% url 'wagtailimages:delete' image.id %}" class="button button-secondary no">{% trans "Delete image" %}</a>
                 {% endif %}
             </div>
         </div>
-
     </form>
 {% endblock %}