Improve comment buttons style (#5562)

* Improve comment buttons style

* Improve post buttons style on edit mode

* Fix hidden comment form on reply with errors

* FileHandler buttons for comment

* FileHandler buttons for post edit form

* Fix tests

protected/humhub/modules/comment/controllers/CommentController.php

@@ -15,7 +15,7 @@ use humhub\modules\comment\models\forms\CommentForm;
 use humhub\modules\comment\Module;
 use humhub\modules\comment\widgets\Form;
 use humhub\modules\content\components\ContentActiveRecord;
-use humhub\modules\content\models\Content;
+use humhub\modules\file\handler\FileHandlerCollection;
 use Yii;
 use yii\data\Pagination;
 use yii\web\HttpException;
@@ -134,7 +134,8 @@ class CommentController extends Controller
 
             return $this->renderAjaxContent(Form::widget([
                 'object' => $this->target,
-                'model' => $form->comment
+                'model' => $form->comment,
+                'isHidden' => false,
             ]));
         });
     }
@@ -171,7 +172,8 @@ class CommentController extends Controller
             'comment' => $comment,
             'objectModel' => $comment->object_model,
             'objectId' => $comment->object_id,
-            'submitUrl' => $submitUrl
+            'submitUrl' => $submitUrl,
+            'fileHandlers' => FileHandlerCollection::getByType([FileHandlerCollection::TYPE_IMPORT, FileHandlerCollection::TYPE_CREATE]),
         ]);
     }
 

protected/humhub/modules/comment/views/comment/edit.php

@@ -1,5 +1,7 @@
 <?php
 
+use humhub\modules\file\handler\BaseFileHandler;
+use humhub\modules\file\widgets\FileHandlerButtonDropdown;
 use humhub\modules\file\widgets\FilePreview;
 use humhub\modules\file\widgets\UploadButton;
 use humhub\modules\ui\form\widgets\ActiveForm;
@@ -12,6 +14,7 @@ use humhub\modules\content\widgets\richtext\RichTextField;
 /* @var $objectId integer */
 /* @var $comment \humhub\modules\comment\models\Comment */
 /* @var $submitUrl string */
+/* @var $fileHandlers BaseFileHandler[] */
 
 /** @var \humhub\modules\content\Module $contentModule */
 $contentModule = Yii::$app->getModule('content');
@@ -35,19 +38,28 @@ $contentModule = Yii::$app->getModule('content');
             ]
         ])->label(false) ?>
 
-        <div class="comment-buttons">
-            <?= UploadButton::widget([
+        <div class="comment-buttons"><?php
+            $uploadButton = UploadButton::widget([
                 'id' => 'comment_upload_' . $comment->id,
                 'model' => $comment,
                 'tooltip' => Yii::t('ContentModule.base', 'Attach Files'),
                 'dropZone' => '#comment_' . $comment->id,
                 'preview' => '#comment_upload_preview_' . $comment->id,
                 'progress' => '#comment_upload_progress_' . $comment->id,
-                'max' => $contentModule->maxAttachedFiles
-            ]); ?>
-
-            <?= Button::defaultType(Yii::t('base', 'Save'))->cssClass('btn-comment-submit')->action('editSubmit', $submitUrl)->submit()->sm() ?>
-        </div>
+                'max' => $contentModule->maxAttachedFiles,
+                'cssButtonClass' => 'btn-sm btn-info',
+            ]);
+            echo FileHandlerButtonDropdown::widget([
+                'primaryButton' => $uploadButton,
+                'handlers' => $fileHandlers,
+                'cssButtonClass' => 'btn-info btn-sm',
+                'pullRight' => true,
+            ]);
+            echo Button::info()
+                ->icon('send')
+                ->cssClass('btn-comment-submit')->sm()
+                ->action('editSubmit', $submitUrl)->submit();
+        ?></div>
     </div>
 
     <div id="comment_upload_progress_<?= $comment->id ?>" style="display:none; margin:10px 0;"></div>

protected/humhub/modules/comment/widgets/Form.php

@@ -12,6 +12,7 @@ use humhub\components\Widget;
 use humhub\modules\comment\Module;
 use humhub\modules\comment\models\Comment as CommentModel;
 use humhub\modules\content\components\ContentActiveRecord;
+use humhub\modules\file\handler\FileHandlerCollection;
 use Yii;
 use yii\helpers\Url;
 
@@ -40,6 +41,24 @@ class Form extends Widget
      */
     public $mentioningUrl = '/search/mentioning/content';
 
+    /**
+     * @var bool
+     */
+    public $isHidden;
+
+    /**
+     * @inheritdoc
+     */
+    public function init()
+    {
+        parent::init();
+
+        if ($this->isHidden === null) {
+            // Hide the comment form for sub comments until the button is clicked
+            $this->isHidden = ($this->object instanceof Comment);
+        }
+    }
+
     /**
      * Executes the widget.
      */
@@ -67,6 +86,8 @@ class Form extends Widget
             'model' => $this->model,
             'isNestedComment' => ($this->object instanceof CommentModel),
             'mentioningUrl' => Url::to([$this->mentioningUrl, 'id' => $this->object->content->id]),
+            'isHidden' => $this->isHidden,
+            'fileHandlers' => FileHandlerCollection::getByType([FileHandlerCollection::TYPE_IMPORT, FileHandlerCollection::TYPE_CREATE]),
         ]);
     }
 

protected/humhub/modules/comment/widgets/views/form.php

@@ -1,6 +1,8 @@
 <?php
 
 use humhub\modules\content\Module;
+use humhub\modules\file\handler\BaseFileHandler;
+use humhub\modules\file\widgets\FileHandlerButtonDropdown;
 use humhub\modules\ui\form\widgets\ActiveForm;
 use humhub\modules\ui\view\components\View;
 use humhub\widgets\Button;
@@ -19,6 +21,8 @@ use humhub\modules\comment\models\Comment;
 /* @var $isNestedComment boolean */
 /* @var $contentModule Module */
 /* @var $mentioningUrl string */
+/* @var $isHidden bool */
+/* @var $fileHandlers BaseFileHandler[] */
 
 $contentModule = Yii::$app->getModule('content');
 $submitUrl = Url::to(['/comment/comment/post']);
@@ -26,9 +30,6 @@ $submitUrl = Url::to(['/comment/comment/post']);
 $placeholder = ($isNestedComment)
     ? Yii::t('CommentModule.base', 'Write a new reply...')
     : Yii::t('CommentModule.base', 'Write a new comment...');
-
-// Hide the comment form for sub comments until the button is clicked
-$isHidden = ($objectModel === Comment::class);
 ?>
 
 <div id="comment_create_form_<?= $id ?>" class="comment_create" data-ui-widget="comment.Form"
@@ -57,21 +58,28 @@ $isHidden = ($objectModel === Comment::class);
             ]
         ])->label(false) ?>
 
-        <div class="comment-buttons">
-            <?= UploadButton::widget([
+        <div class="comment-buttons"><?php
+            $uploadButton = UploadButton::widget([
                 'id' => 'comment_create_upload_' . $id,
                 'tooltip' => Yii::t('ContentModule.base', 'Attach Files'),
                 'options' => ['class' => 'main_comment_upload'],
                 'progress' => '#comment_create_upload_progress_' . $id,
                 'preview' => '#comment_create_upload_preview_' . $id,
                 'dropZone' => '#comment_create_form_' . $id,
-                'max' => $contentModule->maxAttachedFiles
-            ]); ?>
-
-            <?= Button::defaultType(Yii::t('CommentModule.base', 'Send'))
-                ->cssClass('btn-comment-submit')
-                ->action('submit', $submitUrl)->submit()->sm() ?>
-        </div>
+                'max' => $contentModule->maxAttachedFiles,
+                'cssButtonClass' => 'btn-sm btn-info',
+            ]);
+            echo FileHandlerButtonDropdown::widget([
+                'primaryButton' => $uploadButton,
+                'handlers' => $fileHandlers,
+                'cssButtonClass' => 'btn-info btn-sm',
+                'pullRight' => true,
+            ]);
+            echo Button::info()
+                ->icon('send')
+                ->cssClass('btn-comment-submit')->sm()
+                ->action('submit', $submitUrl)->submit();
+        ?></div>
     </div>
 
     <div id="comment_create_upload_progress_<?= $id ?>" style="display:none;margin:10px 0px;"></div>

protected/humhub/modules/content/widgets/WallCreateContentForm.php

@@ -9,7 +9,6 @@
 namespace humhub\modules\content\widgets;
 
 use humhub\modules\content\permissions\CreatePublicContent;
-use humhub\modules\stream\actions\Stream;
 use humhub\modules\stream\actions\StreamEntryResponse;
 use humhub\modules\topic\models\Topic;
 use Yii;
@@ -88,9 +87,6 @@ class WallCreateContentForm extends Widget
             $canSwitchVisibility = false;
         }
 
-        $fileHandlerImport = FileHandlerCollection::getByType(FileHandlerCollection::TYPE_IMPORT);
-        $fileHandlerCreate = FileHandlerCollection::getByType(FileHandlerCollection::TYPE_CREATE);
-
         return $this->render('@humhub/modules/content/widgets/views/wallCreateContentForm', [
                     'form' => $this->renderForm(),
                     'contentContainer' => $this->contentContainer,
@@ -98,7 +94,7 @@ class WallCreateContentForm extends Widget
                     'submitButtonText' => $this->submitButtonText,
                     'defaultVisibility' => $defaultVisibility,
                     'canSwitchVisibility' => $canSwitchVisibility,
-                    'fileHandlers' => array_merge($fileHandlerCreate, $fileHandlerImport),
+                    'fileHandlers' => FileHandlerCollection::getByType([FileHandlerCollection::TYPE_IMPORT, FileHandlerCollection::TYPE_CREATE]),
         ]);
     }
 

protected/humhub/modules/post/controllers/PostController.php

@@ -13,10 +13,13 @@ use humhub\modules\content\widgets\stream\StreamEntryWidget;
 use humhub\modules\content\widgets\stream\WallStreamEntryOptions;
 use humhub\modules\content\widgets\WallCreateContentForm;
 use humhub\modules\content\components\ContentContainerController;
+use humhub\modules\file\handler\FileHandlerCollection;
+use humhub\modules\post\models\forms\PostEditForm;
 use humhub\modules\post\models\Post;
 use humhub\modules\post\permissions\CreatePost;
 use Yii;
 use yii\web\HttpException;
+use yii\web\NotFoundHttpException;
 
 /**
  * @since 0.5
@@ -70,24 +73,31 @@ class PostController extends ContentContainerController
 
     public function actionEdit($id)
     {
-        $model = Post::findOne(['id' => $id]);
+        $post = Post::findOne(['id' => $id]);
+        if (!$post) {
+            throw new NotFoundHttpException();
+        }
 
-        if (!$model->content->canEdit()) {
+        $model = new PostEditForm(['post' => $post]);
+
+        if (!$post->content->canEdit()) {
             $this->forbidden();
         }
 
         if ($model->load(Yii::$app->request->post())) {
             // Reload record to get populated updated_at field
-            if ($model->validate() && $model->save()) {
-                $model = Post::findOne(['id' => $id]);
-                return $this->renderAjaxContent(StreamEntryWidget::renderStreamEntry($model));
+            if ($model->save()) {
+                $post = Post::findOne(['id' => $id]);
+                return $this->renderAjaxContent(StreamEntryWidget::renderStreamEntry($post));
             } else {
                 Yii::$app->response->statusCode = 400;
             }
         }
 
         return $this->renderAjax('edit', [
-            'post' => $model,
+            'model' => $model,
+            'fileHandlers' => FileHandlerCollection::getByType([FileHandlerCollection::TYPE_IMPORT, FileHandlerCollection::TYPE_CREATE]),
+            'submitUrl' => $post->content->container->createUrl('/post/post/edit', ['id' => $post->id]),
         ]);
     }
 

protected/humhub/modules/post/models/forms/PostEditForm.php

@@ -0,0 +1,100 @@
+<?php
+/**
+ * @link https://www.humhub.org/
+ * @copyright Copyright (c) 2022 HumHub GmbH & Co. KG
+ * @license https://www.humhub.com/licences
+ */
+
+namespace humhub\modules\post\models\forms;
+
+use humhub\modules\post\models\Post;
+use Yii;
+use yii\web\ServerErrorHttpException;
+
+/**
+ * PostEditForm
+ * @package humhub\modules\post\models\forms
+ *
+ * @since 1.11
+ */
+class PostEditForm extends yii\base\Model
+{
+    /**
+     * The list of files attached to a Post
+     * @var array
+     */
+    public $fileList;
+
+    /**
+     * @var Post The edited Post
+     */
+    public $post;
+
+    /**
+     * @inheritdoc
+     */
+    public function rules()
+    {
+        return [
+            [['fileList'], 'safe'],
+        ];
+    }
+
+    /**
+     * @inheritdoc
+     */
+    public function load($data, $formName = null)
+    {
+        return parent::load($data, $formName) | $this->post->load($data);
+    }
+
+    /**
+     * @inheritdoc
+     */
+    public function validate($attributeNames = null, $clearErrors = true)
+    {
+        if (!$this->post->validate() || !parent::validate($attributeNames, $clearErrors)) {
+            $this->post->addError('message', Yii::t('PostModule.base', 'Post could not be saved!'));
+        }
+
+        if (!empty($this->post->message)) {
+            return true;
+        }
+
+        // Allow empty message only With attachments
+        if (!empty($this->fileList) || (!$this->post->isNewRecord && $this->post->fileManager->find()->count())) {
+            return true;
+        }
+
+        $this->post->addError('message', Yii::t('PostModule.base', 'The post must not be empty!'));
+    }
+
+    /**
+     * Saves the form
+     *
+     * @return boolean
+     * @throws ServerErrorHttpException
+     */
+    public function save()
+    {
+        if (!$this->validate()) {
+            return false;
+        }
+
+        if ($this->post->save()) {
+            $this->post->fileManager->attach($this->fileList);
+            return true;
+        }
+
+        $this->post->addError('message', Yii::t('PostModule.base', 'Post could not be saved!'));
+        return false;
+    }
+
+    /**
+     * @inheritdoc
+     */
+    public function formName()
+    {
+        return '';
+    }
+}

protected/humhub/modules/post/views/post/edit.php

@@ -1,54 +1,62 @@
 <?php
 
+use humhub\modules\file\handler\BaseFileHandler;
+use humhub\modules\file\widgets\FileHandlerButtonDropdown;
 use humhub\modules\file\widgets\FilePreview;
 use humhub\modules\file\widgets\UploadButton;
 use humhub\modules\file\widgets\UploadProgress;
+use humhub\modules\post\models\forms\PostEditForm;
 use humhub\widgets\Button;
 use humhub\modules\content\widgets\richtext\RichTextField;
 use yii\bootstrap\ActiveForm;
 
-/* @var  $post \humhub\modules\post\models\Post */
-/* @var  $from string */
-/* @var  $submitUrl string */
-
-$submitUrl = $post->content->container->createUrl('/post/post/edit', ['id' => $post->id]);
+/* @var $model PostEditForm */
+/* @var $submitUrl string */
+/* @var $fileHandlers BaseFileHandler[] */
 ?>
-
-<div class="content content_edit" id="post_edit_<?= $post->id; ?>">
-    <?php $form = ActiveForm::begin(['id' => 'post-edit-form_' . $post->id]); ?>
+<div class="content content_edit" id="post_edit_<?= $model->post->id; ?>">
+    <?php $form = ActiveForm::begin(['id' => 'post-edit-form_' . $model->post->id]); ?>
 
         <div class="post-richtext-input-group">
-            <?= $form->field($post, 'message')->widget(RichTextField::class, [
-                'id' => 'post_input_'. $post->id,
+            <?= $form->field($model->post, 'message')->widget(RichTextField::class, [
+                'id' => 'post_input_'. $model->post->id,
                 'layout' => RichTextField::LAYOUT_INLINE,
                 'focus' => true,
                 'pluginOptions' => ['maxHeight' => '300px'],
                 'placeholder' => Yii::t('PostModule.base', 'Edit your post...')
             ])->label(false) ?>
 
-            <div class="comment-buttons">
-
-                <?= UploadButton::widget([
-                    'id' => 'post_upload_' . $post->id,
+            <div class="comment-buttons"><?php
+                $uploadButton = UploadButton::widget([
+                    'id' => 'post_upload_' . $model->post->id,
                     'tooltip' => Yii::t('ContentModule.base', 'Attach Files'),
-                    'model' => $post,
-                    'dropZone' => '#post_edit_' . $post->id . ':parent',
-                    'preview' => '#post_upload_preview_' . $post->id,
-                    'progress' => '#post_upload_progress_' . $post->id,
-                    'max' => Yii::$app->getModule('content')->maxAttachedFiles
-                ]) ?>
-
-                <?= Button::defaultType(Yii::t('base', 'Save'))->action('editSubmit', $submitUrl)->submit()->cssClass(' btn-comment-submit')->sm() ?>
-
-            </div>
+                    'model' => $model,
+                    'dropZone' => '#post_edit_' . $model->post->id . ':parent',
+                    'preview' => '#post_upload_preview_' . $model->post->id,
+                    'progress' => '#post_upload_progress_' . $model->post->id,
+                    'max' => Yii::$app->getModule('content')->maxAttachedFiles,
+                    'cssButtonClass' => 'btn-sm btn-info',
+                ]);
+                echo FileHandlerButtonDropdown::widget([
+                    'primaryButton' => $uploadButton,
+                    'handlers' => $fileHandlers,
+                    'cssButtonClass' => 'btn-info btn-sm',
+                    'pullRight' => true,
+                ]);
+                echo Button::info()
+                    ->icon('send')
+                    ->action('editSubmit', $submitUrl)
+                    ->cssClass(' btn-comment-submit')->sm()
+                    ->submit();
+            ?></div>
         </div>
 
-        <?= UploadProgress::widget(['id' => 'post_upload_progress_'.$post->id])?>
+        <?= UploadProgress::widget(['id' => 'post_upload_progress_'.$model->post->id]) ?>
 
         <?= FilePreview::widget([
-            'id' => 'post_upload_preview_' . $post->id,
+            'id' => 'post_upload_preview_' . $model->post->id,
             'options' => ['style' => 'margin-top:10px'],
-            'model' => $post,
+            'model' => $model->post,
             'edit' => true
         ]) ?>
 

protected/humhub/modules/stream/tests/codeception/acceptance/StreamCest.php

@@ -187,7 +187,7 @@ class StreamCest
 
         $I->waitForElementVisible($newEntrySelector . ' .content_edit', 20);
         $I->fillField($newEntrySelector . ' [contenteditable]', 'This is my edited post!');
-        $I->click('Save', $newEntrySelector);
+        $I->click('button[data-action-click=editSubmit]', $newEntrySelector);
 
         $I->wait(1);
         $I->seeElement($newEntrySelector);
@@ -267,7 +267,7 @@ class StreamCest
         $I->wait(1);
         $I->waitForElementVisible($postSelector . ' .comment-container', null);
         $I->fillField($postSelector . ' .comment_create .humhub-ui-richtext', 'My Comment');
-        $I->click('Send', $postSelector . ' .comment_create');
+        $I->click('[data-action-click=submit]', $postSelector . ' .comment_create');
         $I->waitForText('My Comment', null, $postSelector . ' .comment');
 
 
@@ -315,7 +315,7 @@ class StreamCest
         $I->click('Comment', $post4Selector);
         $I->wait(1);
         $I->fillField($post4Selector . ' [contenteditable]', 'My Comment!');
-        $I->click('Send', $post4Selector . ' .comment-buttons');
+        $I->click('[data-action-click=submit]', $post4Selector . ' .comment-buttons');
 
         $I->scrollTop();
 

static/less/comment.less

@@ -95,56 +95,47 @@
 // fileupload button
 .comment_create,
 .content_edit {
-    position: relative;
-
+    .comment-create-input-group, .post-richtext-input-group {
+        display: flex;
+        align-items: flex-end;
+        .field-comment-message, .field-post-message {
+            flex-grow: 1;
+            flex-basis: min-content;
+        }
+        .form-group, .help-block {
+            margin:0;
+        }
+    }
     .comment-buttons {
-        position: absolute;
-        bottom: 2px;
-        right: 5px;
-        z-index: 300;
-
-        button {
-            background-color: @link !important;
-            color: @text-color-contrast !important;
+        white-space: nowrap;
+        padding-bottom: 6px;
+        .btn:not(.dropdown-toggle) {
+            margin-left: 6px;
+        }
+        .btn.fileinput-button, .fileinput-button + .dropdown-toggle {
+            background-color: fade(@link, 60%);
+        }
+        .btn.dropdown-toggle {
+            margin-left: 0;
         }
     }
-
     .has-error + .comment-buttons {
-        bottom: 19px !important;
+        padding-bottom: 22px;
     }
-
-    .btn-comment-submit {
-        margin-top: 3px;
-    }
-
-    .fileinput-button {
-        float: left;
-        padding: 6px 10px;
-        background: transparent !important;
-
-        i {
-            color: @text-color-soft2;
-        }
-
-        i:hover {
-            color: @link;
-        }
-    }
-
-    .fileinput-button:hover i {
-        color: @link;
-    }
-
     .fileinput-button:active {
         box-shadow: none !important;
     }
-}
-
-.post-richtext-input-group {
-    position: relative;
-
-    .comment-buttons {
-        bottom: 7px !important;
+    @media (max-width: 414px) {
+        .comment-create-input-group, .post-richtext-input-group {
+            flex-direction: column;
+            .field-comment-message, .field-post-message {
+                width: 100%;
+            }
+        }
+        .comment-buttons {
+            padding-bottom: 0 !important;
+            padding-top: 6px;
+        }
     }
 }
 
@@ -172,20 +163,6 @@
     .text-break();
 }
 
-.comment-create-input-group, .post-richtext-input-group {
-    position: relative;
-
-    .ProsemirrorEditor {
-        .ProseMirror {
-            padding-right: 72px;
-        }
-    }
-
-    .form-group, .help-block {
-        margin:0;
-    }
-}
-
 .comment-create-input-group.scrollActive {
     .comment-buttons {
         right: 22px;