From 4a095160cd52564be012248563158aadbf0efe0a Mon Sep 17 00:00:00 2001
From: alekseybobkov <aleksey.bobkov@gmail.com>
Date: Wed, 21 May 2014 17:51:50 +1100
Subject: [PATCH] Added Preview mode for the multi-image file uploader, minor
 style improvements

---
 modules/backend/assets/css/october.css                 |  5 +++++
 modules/backend/assets/less/controls/forms.less        |  5 +++++
 modules/backend/formwidgets/FileUpload.php             |  2 ++
 .../formwidgets/fileupload/assets/css/fileupload.css   | 10 ++++++++++
 .../formwidgets/fileupload/assets/less/fileupload.less |  9 +++++++++
 .../formwidgets/fileupload/partials/_image_multi.htm   |  9 ++++++---
 .../formwidgets/richeditor/partials/_richeditor.htm    |  2 +-
 modules/backend/lang/en/lang.php                       |  1 +
 .../backend/widgets/form/partials/_field_textarea.htm  |  2 +-
 9 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css
index 9dcf27df5..af56bb9d5 100644
--- a/modules/backend/assets/css/october.css
+++ b/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;
diff --git a/modules/backend/assets/less/controls/forms.less b/modules/backend/assets/less/controls/forms.less
index 121ae4aa5..781d3f156 100644
--- a/modules/backend/assets/less/controls/forms.less
+++ b/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 {
diff --git a/modules/backend/formwidgets/FileUpload.php b/modules/backend/formwidgets/FileUpload.php
index 158b6fd18..ae087db89 100644
--- a/modules/backend/formwidgets/FileUpload.php
+++ b/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();
     }
 
diff --git a/modules/backend/formwidgets/fileupload/assets/css/fileupload.css b/modules/backend/formwidgets/fileupload/assets/css/fileupload.css
index c576d0a12..2b3b9cc8c 100644
--- a/modules/backend/formwidgets/fileupload/assets/css/fileupload.css
+++ b/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;
 }
diff --git a/modules/backend/formwidgets/fileupload/assets/less/fileupload.less b/modules/backend/formwidgets/fileupload/assets/less/fileupload.less
index 3d56cce32..8d2fd9b75 100644
--- a/modules/backend/formwidgets/fileupload/assets/less/fileupload.less
+++ b/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 {
diff --git a/modules/backend/formwidgets/fileupload/partials/_image_multi.htm b/modules/backend/formwidgets/fileupload/partials/_image_multi.htm
index 27ecc9898..c282f3edc 100644
--- a/modules/backend/formwidgets/fileupload/partials/_image_multi.htm
+++ b/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>
diff --git a/modules/backend/formwidgets/richeditor/partials/_richeditor.htm b/modules/backend/formwidgets/richeditor/partials/_richeditor.htm
index a35651c3f..7dd506109 100644
--- a/modules/backend/formwidgets/richeditor/partials/_richeditor.htm
+++ b/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>
diff --git a/modules/backend/lang/en/lang.php b/modules/backend/lang/en/lang.php
index fdb4447b0..34bd39c62 100644
--- a/modules/backend/lang/en/lang.php
+++ b/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'.",
diff --git a/modules/backend/widgets/form/partials/_field_textarea.htm b/modules/backend/widgets/form/partials/_field_textarea.htm
index 40cbf4815..c82999f8e 100644
--- a/modules/backend/widgets/form/partials/_field_textarea.htm
+++ b/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() ?>"