Added Preview mode for the multi-image file uploader, minor style improvements

modules/backend/assets/css/october.css

@@ -7391,6 +7391,11 @@ label {
 .form-group-preview .form-control {
   background-color: #f6f6f6;
   height: auto;
+  min-height: 38px;
+}
+.form-group-preview .custom-checkbox label,
+.form-group-preview .custom-radio label {
+  cursor: default;
 }
 .help-block {
   font-size: 12px;

modules/backend/assets/less/controls/forms.less

@@ -127,8 +127,13 @@ label {
     .form-control {
         background-color: @color-form-field-preview;
         height: auto;
+        min-height: 38px;
     }
 
+    .custom-checkbox,
+    .custom-radio {
+        label {cursor: default;}
+    }
 }
 
 .help-block {

modules/backend/formwidgets/FileUpload.php

@@ -28,6 +28,7 @@ class FileUpload extends FormWidgetBase
 
     public $imageWidth;
     public $imageHeight;
+    public $previewNoFilesMessage;
 
     /**
      * {@inheritDoc}
@@ -36,6 +37,7 @@ class FileUpload extends FormWidgetBase
     {
         $this->imageHeight = $this->getConfig('imageHeight', 100);
         $this->imageWidth = $this->getConfig('imageWidth', 100);
+        $this->previewNoFilesMessage = $this->getConfig('previewNoFilesMessage', 'backend::lang.form.preview_no_files_message');
         $this->checkUploadPostback();
     }
 

modules/backend/formwidgets/fileupload/assets/css/fileupload.css

@@ -227,6 +227,16 @@
 .field-fileupload.is-sortable li.dragged .uploader-toolbar {
   display: none;
 }
+.field-fileupload .no-data {
+  background: #f6f6f6;
+  border: 1px solid #e0e0e0;
+  color: #555555;
+  font-size: 13px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 10px;
+}
 .form-sidebar .field-fileupload .image-multi {
   margin-right: -5px;
 }

modules/backend/formwidgets/fileupload/assets/less/fileupload.less

@@ -241,6 +241,15 @@
             }
         }
     }
+
+    .no-data {
+        background: #f6f6f6;
+        border: 1px solid #e0e0e0;
+        color: #555555;
+        font-size: 13px;
+        .box-sizing(border-box);
+        padding: 10px;
+    }
 }
 
 .form-sidebar {

modules/backend/formwidgets/fileupload/partials/_image_multi.htm

@@ -10,10 +10,9 @@
     data-item-template="<?= $this->getId('template') ?>">
 
     <div class="image-multi">
-
         <ul>
             <!-- Add New Image -->
-            <li class="attachment-item attachment-uploader" style="width: <?= $imageWidth.'px' ?>; height: <?= $imageHeight.'px' ?>">
+            <li class="attachment-item attachment-uploader <?php if ($this->previewMode): ?>hidden<?php endif ?>" style="width: <?= $imageWidth.'px' ?>; height: <?= $imageHeight.'px' ?>">
                 <a href="javascript:;" class="uploader-link no-attachment">
                     <table><tr><td class="oc-<?= $emptyIcon ?>"></td></tr></table>
                 </a>
@@ -24,7 +23,9 @@
                 <div class="uploader-loading"></div>
             </li>
         </ul>
-
+        <?php if ($this->previewMode && !count($fileList)): ?>
+            <div class="no-data" style="height: <?= $imageHeight.'px' ?>"><?= e(trans($this->previewNoFilesMessage)) ?></div>
+        <?php endif ?>
     </div>
 
     <!-- Upload form -->
@@ -55,6 +56,7 @@
                     {{#description}}
                         <p><abbr title="{{description}}">{{description}}</abbr></p>
                     {{/description}}
+                    <?php if (!$this->previewMode): ?>
                     <a
                         href="javascript:;"
                         class="uploader-remove oc-icon-times"
@@ -73,6 +75,7 @@
                             class="uploader-file-link oc-icon-paper-clip"
                             target="_blank"></a>
                     </div>
+                    <?php endif ?>
                 </div>
                 <div class="uploader-loading"></div>
             </div>

modules/backend/formwidgets/richeditor/partials/_richeditor.htm

@@ -4,7 +4,7 @@
     <div
         id="<?= $this->getId() ?>"
         class="field-richeditor size-<?= $size ?> <?= $stretch?'layout-item stretch':'' ?>"
-        data-iframe-css="<?= URL::to('/modules/backend/widgets/formricheditor/assets/css/iframe.css') ?>"
+        data-iframe-css="<?= URL::to('/modules/backend/formwidgets/richeditor/assets/css/iframe.css') ?>"
         data-control="richeditor">
         <textarea name="<?= $name ?>" id="<?= $this->getId('textarea') ?>"><?= e($value) ?></textarea>
     </div>

modules/backend/lang/en/lang.php

@@ -114,6 +114,7 @@ return [
         'or' => 'or',
         'confirm_tab_close' => 'Do you really want to close the tab? Unsaved changes will be lost.',
         'behavior_not_ready' => 'Form behavior has not been initialized, check that you have called initForm() in your controller.',
+        'preview_no_files_message' => 'Files are not uploaded'
     ],
     'relation' => [
         'missing_definition' => "Relation behavior does not contain a definition for ':field'.",

modules/backend/widgets/form/partials/_field_textarea.htm

@@ -1,6 +1,6 @@
 <!-- Textarea -->
 <?php if ($this->previewMode): ?>
-    <div class="form-control"><?= e($field->value) ?></div>
+    <div class="form-control"><?= nl2br(e($field->value)) ?></div>
 <?php else: ?>
     <textarea
         name="<?= $field->getName() ?>"