feat: update DocumentEditDialog and DocumentAlignment (#389)

Author: roadiz-ci

templates/base.html.twig

@@ -91,6 +91,7 @@
                 'leafletMapTileUrl': '{{ leaflet_map_tile_url }}',
                 'defaultMapLocation': {{ maps_default_location|raw }},
                 'messages': {
+                    'close':                  '{{ 'close'|trans|trim|escape }}',
                     'login':                  '{{ 'login'|trans|trim|escape }}',
                     'sessionExpireTitle':     '{{ 'session.expire.title'|trans|trim|escape }}',
                     'sessionExpireContent':   '{{ 'session.expire.content'|trans|trim|escape }}',

templates/documents/adjust.html.twig

@@ -14,7 +14,13 @@
 
         <article class="content content-document-edit">
             {% if document and document.image %}
-                <blanchette-editor-container data-vuejs src-url="{{ document|url({ 'noProcess': true }) }}" filename="{{ document.filename }}">
+                <blanchette-editor-container
+                    data-vuejs
+                    src-url="{{ document|url({ 'noProcess': true }) }}"
+                    filename="{{ document.filename }}"
+                    width="{{ document.imageWidth }}"
+                    height="{{ document.imageHeight }}"
+                >
                     <div class="hidden">
                         {{ form(file_form) }}
                     </div>

templates/forms.html.twig

@@ -365,6 +365,7 @@
 {%- block document_alignment_widget -%}
     {% include '@RoadizRozier/widgets/documentAlignment.html.twig' with {
         widget_attributes: block('widget_attributes'),
+        widget_class: 'rz-form-field__body',
         id: 'document-edit',
         form: form
     } %}

templates/widgets/documentAlignment.html.twig

@@ -9,7 +9,10 @@
 {% set imageWidth = _self.getWidgetAttribute(widget_attributes, 'image-width') %}
 {% set imageHeight = _self.getWidgetAttribute(widget_attributes, 'image-height') %}
 
-<document-alignment-widget class="document-alignment-widget" input-base-name="{{ form.vars.full_name }}">
+<document-alignment-widget
+    class="document-alignment-widget {% if widget_class %}{{ widget_class }}{% endif %}"
+    input-base-name="{{ form.vars.full_name }}"
+>
     <div class="document-alignment-widget__image-wrapper">
         <div class="document-alignment-widget__image-overlay"></div>
         <div class="document-alignment-widget__area">
@@ -30,11 +33,17 @@
         />
     </div>
     <label class="document-alignment-widget__override">
-        <input type="checkbox" class="rz-boolean-checkbox" data-on-text="I" data-off-text="O" />
+        <input type="checkbox" class="rz-switch" data-on-text="I" data-off-text="O" />
         <span>{{ 'document.imageAlignment.override'|trans }}</span>
     </label>
-    <button type="button" class="uk-button uk-button-small document-alignment-widget__reset">
-        <i class="uk-icon-rz-reset"></i>
-        {{ 'document.imageAlignment.reset'|trans }}
-    </button>
+
+    {% import '@RoadizRozier/macros/rz_button.html.twig' as rz_button %}
+    {{ rz_button.root({
+        class: 'document-alignment-widget__reset',
+        icon: 'rz-icon-ri--refresh-line',
+        label: 'document.imageAlignment.reset'|trans,
+        attributes: {
+            type: 'button'
+        }
+    }) }}
 </document-alignment-widget>