Added support for collapsible form fields (#4795)

CHANGELOG_DEV.md

@@ -34,4 +34,5 @@
 - Enh #4416: Added replay to sub comments
 - Enh #4571: humhub/libs/Html::containerLink() now adds a "data-guid" attribute
 - Enh #4787: Always enable Space Membership Web Notifications
+- Enh #4795: Added support for collapsible form fields
 - Enh #4796: Added option to disable PWA/ServiceWorker support

protected/humhub/modules/admin/models/forms/BasicSettingsForm.php

@@ -20,7 +20,6 @@ class BasicSettingsForm extends \yii\base\Model
     public $defaultLanguage;
     public $tour;
     public $timeZone;
-    public $defaultStreamSort;
     public $dashboardShowProfilePostForm;
     public $enableFriendshipModule;
     public $maintenanceMode;
@@ -43,8 +42,6 @@ class BasicSettingsForm extends \yii\base\Model
         $this->dashboardShowProfilePostForm = Yii::$app->getModule('dashboard')->settings->get('showProfilePostForm');
         $this->tour = Yii::$app->getModule('tour')->settings->get('enable');
         $this->enableFriendshipModule = Yii::$app->getModule('friendship')->settings->get('enable');
-
-        $this->defaultStreamSort = Yii::$app->getModule('stream')->settings->get('defaultSort');
     }
 
     /**
@@ -58,7 +55,6 @@ class BasicSettingsForm extends \yii\base\Model
             ['defaultLanguage', 'in', 'range' => array_keys(Yii::$app->i18n->getAllowedLanguages())],
             ['timeZone', 'in', 'range' => \DateTimeZone::listIdentifiers()],
             [['tour', 'dashboardShowProfilePostForm', 'enableFriendshipModule', 'maintenanceMode'], 'in', 'range' => [0, 1]],
-            [['defaultStreamSort'], 'in', 'range' => array_keys($this->getDefaultStreamSortOptions())],
             [['baseUrl'], function ($attribute, $params, $validator) {
                 if (substr($this->$attribute, 0, 7) !== 'http://' && substr($this->$attribute, 0, 8) !== 'https://') {
                     $this->addError($attribute, Yii::t('AdminModule.base', 'Base URL needs to begin with http:// or https://'));
@@ -96,6 +92,7 @@ class BasicSettingsForm extends \yii\base\Model
                     'dateTime' => Yii::$app->formatter->asTime(TimezoneHelper::getDatabaseConnectionTime())
                 ]
             ),
+            'baseUrl' => Yii::t('AdminModule.settings', 'E.g. http://example.com/humhub'),
             'maintenanceModeInfo' => Yii::t('AdminModule.settings', 'Add custom info text for maintenance mode. Displayed on the login page.'),
         ];
     }
@@ -116,23 +113,10 @@ class BasicSettingsForm extends \yii\base\Model
         Yii::$app->getModule('dashboard')->settings->set('showProfilePostForm', $this->dashboardShowProfilePostForm);
         Yii::$app->getModule('tour')->settings->set('enable', $this->tour);
         Yii::$app->getModule('friendship')->settings->set('enable', $this->enableFriendshipModule);
-        Yii::$app->getModule('stream')->settings->set('defaultSort', $this->defaultStreamSort);
 
         DynamicConfig::rewrite();
 
         return true;
     }
 
-    /**
-     * Returns available options for defaultStreamSort attribute
-     * @return array
-     */
-    public function getDefaultStreamSortOptions()
-    {
-        return [
-            Stream::SORT_CREATED_AT => Yii::t('AdminModule.settings', 'Sort by creation date'),
-            Stream::SORT_UPDATED_AT => Yii::t('AdminModule.settings', 'Sort by update date'),
-        ];
-    }
-
 }

protected/humhub/modules/admin/models/forms/DesignSettingsForm.php

@@ -10,6 +10,7 @@ namespace humhub\modules\admin\models\forms;
 
 use humhub\modules\file\Module;
 use humhub\modules\file\validators\ImageSquareValidator;
+use humhub\modules\stream\actions\Stream;
 use humhub\modules\web\pwa\widgets\SiteIcon;
 use Yii;
 use yii\base\Model;
@@ -35,6 +36,8 @@ class DesignSettingsForm extends Model
     public $dateInputDisplayFormat;
     public $horImageScrollOnMobile;
     public $useDefaultSwipeOnMobile;
+    public $defaultStreamSort;
+
 
     /**
      * @inheritdoc
@@ -52,6 +55,8 @@ class DesignSettingsForm extends Model
         $this->dateInputDisplayFormat = Yii::$app->getModule('admin')->settings->get('defaultDateInputFormat');
         $this->horImageScrollOnMobile = $settingsManager->get('horImageScrollOnMobile');
         $this->useDefaultSwipeOnMobile = $settingsManager->get('useDefaultSwipeOnMobile');
+        $this->defaultStreamSort = Yii::$app->getModule('stream')->settings->get('defaultSort');
+
     }
 
     /**
@@ -68,6 +73,7 @@ class DesignSettingsForm extends Model
             [['displayName', 'spaceOrder'], 'safe'],
             [['horImageScrollOnMobile', 'useDefaultSwipeOnMobile'], 'boolean'],
             ['logo', 'image', 'extensions' => 'png, jpg, jpeg',  'minWidth' => 100, 'minHeight' => 120],
+            [['defaultStreamSort'], 'in', 'range' => array_keys($this->getDefaultStreamSortOptions())],
             ['icon', 'image', 'extensions' => 'png, jpg, jpeg',  'minWidth' => 256, 'minHeight' => 256],
             ['icon', ImageSquareValidator::class],
             ['dateInputDisplayFormat', 'in', 'range' => ['', 'php:d/m/Y']],
@@ -147,6 +153,8 @@ class DesignSettingsForm extends Model
         $settingsManager->set('horImageScrollOnMobile', $this->horImageScrollOnMobile);
         $settingsManager->set('useDefaultSwipeOnMobile', $this->useDefaultSwipeOnMobile);
 
+        Yii::$app->getModule('stream')->settings->set('defaultSort', $this->defaultStreamSort);
+
         if ($this->logo) {
             LogoImage::set($this->logo);
         }
@@ -160,4 +168,16 @@ class DesignSettingsForm extends Model
         return true;
     }
 
+    /**
+     * Returns available options for defaultStreamSort attribute
+     * @return array
+     */
+    public function getDefaultStreamSortOptions()
+    {
+        return [
+            Stream::SORT_CREATED_AT => Yii::t('AdminModule.settings', 'Sort by creation date'),
+            Stream::SORT_UPDATED_AT => Yii::t('AdminModule.settings', 'Sort by update date'),
+        ];
+    }
+
 }

protected/humhub/modules/admin/views/setting/basic.php

@@ -3,8 +3,8 @@
 use humhub\libs\TimezoneHelper;
 use humhub\modules\admin\assets\AdminAsset;
 use humhub\modules\admin\models\forms\BasicSettingsForm;
-use yii\widgets\ActiveForm;
 use humhub\compat\CHtml;
+use humhub\modules\ui\form\widgets\ActiveForm;
 
 /* @var BasicSettingsForm $model */
 
@@ -34,32 +34,24 @@ AdminAsset::register($this);
     <?php $form = ActiveForm::begin(); ?>
 
     <?= $form->field($model, 'name'); ?>
-
     <?= $form->field($model, 'baseUrl'); ?>
-    <p class="help-block"><?= Yii::t('AdminModule.settings', 'E.g. http://example.com/humhub'); ?></p>
 
     <?php $allowedLanguages = Yii::$app->i18n->getAllowedLanguages(); ?>
     <?php if (count($allowedLanguages) > 1) : ?>
         <?= $languageDropDown = $form->field($model, 'defaultLanguage')->dropDownList($allowedLanguages, ['data-ui-select2' => '']); ?>
     <?php endif; ?>
-
     <?= $form->field($model, 'timeZone')->dropDownList(TimezoneHelper::generateList(true), ['data-ui-select2' => '', 'disabled' => Yii::$app->settings->isFixed('timeZone')]); ?>
-    <?= $form->field($model, 'defaultStreamSort')->dropDownList($model->getDefaultStreamSortOptions()); ?>
 
-    <strong><?= Yii::t('AdminModule.settings', 'Dashboard'); ?></strong>
+    <?= $form->beginCollapsibleFields(Yii::t('AdminModule.settings', 'Dashboard')); ?>
-    <br>
-    <br>
     <?= $form->field($model, 'tour')->checkbox(); ?>
     <?= $form->field($model, 'dashboardShowProfilePostForm')->checkbox(); ?>
+    <?= $form->endCollapsibleFields(); ?>
 
-    <strong><?= Yii::t('AdminModule.settings', 'Friendship'); ?></strong>
+    <?= $form->beginCollapsibleFields(Yii::t('AdminModule.settings', 'Friendship')); ?>
-    <br>
-    <br>
     <?= $form->field($model, 'enableFriendshipModule')->checkbox(); ?>
+    <?= $form->endCollapsibleFields(); ?>
 
-    <strong><?= Yii::t('AdminModule.settings', 'Maintenance mode'); ?></strong>
+    <?= $form->beginCollapsibleFields(Yii::t('AdminModule.settings', 'Maintenance mode'), !$model->maintenanceMode); ?>
-    <br>
-    <br>
     <?= $form->field($model, 'maintenanceMode')->checkbox([
         'data-action-click' => 'admin.changeMaintenanceMode',
         'data-action-confirm-header' => $adminSettingsJsConfig['text']['maintenanceMode.header'],
@@ -67,6 +59,7 @@ AdminAsset::register($this);
         'data-action-confirm-text' => $adminSettingsJsConfig['text']['maintenanceMode.button.' . ($model->maintenanceMode ? 'disable' : 'enable')],
     ]); ?>
     <?= $form->field($model, 'maintenanceModeInfo')->label(false)->textInput(['disabled' => !$model->maintenanceMode]); ?>
+    <?= $form->endCollapsibleFields(); ?>
 
     <hr>
 

protected/humhub/modules/admin/views/setting/design.php

@@ -45,6 +45,8 @@ $iconUrl = SiteIcon::getUrl(140);
 
     <?= $form->field($model, 'spaceOrder')->dropDownList(['0' => Yii::t('AdminModule.settings', 'Alphabetical'), '1' => Yii::t('AdminModule.settings', 'Last visit')]); ?>
 
+    <?= $form->field($model, 'defaultStreamSort')->dropDownList($model->getDefaultStreamSortOptions()); ?>
+
     <?= $form->field($model, 'dateInputDisplayFormat')->dropDownList([
         '' => Yii::t('AdminModule.settings', 'Auto format based on user language - Example: {example}', ['{example}' => Yii::$app->formatter->asDate(time(), 'short')]),
         'php:d/m/Y' => Yii::t('AdminModule.settings', 'Fixed format (dd/mm/yyyy) - Example: {example}', ['{example}' => Yii::$app->formatter->asDate(time(), 'php:d/m/Y')]),

protected/humhub/modules/ui/form/widgets/ActiveForm.php

@@ -9,6 +9,9 @@
 namespace humhub\modules\ui\form\widgets;
 
 
+use humhub\libs\Html;
+use humhub\modules\ui\icon\widgets\Icon;
+
 /**
  * ActiveForm
  *
@@ -42,4 +45,42 @@ class ActiveForm extends \yii\bootstrap\ActiveForm
         }
     }
 
+    /**
+     * Starts a section of collapsible form fields.
+     * Make sure that the `endCollapsibleFields` method is also called afterwards.
+     * It is not possible to nest these sections.
+     *
+     * @param $title string the title of the form field group
+     * @return string
+     * @since 1.8
+     */
+    public function beginCollapsibleFields($title, $isClosed = true)
+    {
+        $cssClass = ($isClosed) ? 'closed' : 'opened';
+
+        return
+            Html::beginTag('div', ['class' => 'form-collapsible-fields ' . $cssClass, 'data-ui-widget' => 'ui.form.elements.FormFieldsCollapsible', 'data-ui-init' => 1]) .
+            Html::tag('div',
+                Html::tag('div',
+                    Icon::get('plus', ['htmlOptions' => ['class' => 'iconOpen']]) .
+                    Icon::get('minus', ['htmlOptions' => ['class' => 'iconClose']]) . '  ',
+                    ['class' => 'pull-left']
+                ) .
+                Html::label($title, null, ['class' => 'control-label'])
+                , ['class' => 'form-collapsible-fields-label', 'data-action-click' => 'clickCollab', 'data-toggle' => 'tab']) .
+            Html::beginTag('fieldset');
+    }
+
+    /**
+     * Starts a section of collapsible form fields.
+     *
+     * @return string
+     * @since 1.8
+     */
+    public function endCollapsibleFields()
+    {
+        return Html::endTag('fieldset') .
+            Html::endTag('div');
+    }
+
 }

static/js/humhub/humhub.ui.form.elements.js

@@ -150,7 +150,46 @@ humhub.module('ui.form.elements', function (module, require, $) {
         evt.$trigger.parent().hide();
     };
 
+    var object = require('util').object;
+    var Widget = require('ui.widget').Widget;
 
+    var FormFieldsCollapsible = function (node, options) {
+        Widget.call(this, node, options);
+    };
+
+    object.inherits(FormFieldsCollapsible, Widget);
+
+    FormFieldsCollapsible.component = 'humhub-form-field-collapsible';
+    FormFieldsCollapsible.prototype.validate = function () {
+        return this.$.is('div');
+    };
+
+    FormFieldsCollapsible.prototype.clickCollab = function (evt) {
+        if (this.$.find('fieldset').is(":visible")) {
+            this.hide();
+        } else {
+            this.show();
+        }
+    };
+    FormFieldsCollapsible.prototype.init = function () {
+        if (this.$.find('.error, .has-error').length > 0) {
+            this.show();
+        }
+    };
+
+    FormFieldsCollapsible.prototype.hide = function () {
+        this.$.find('fieldset').attr("aria-hidden","true");
+        this.$.find('fieldset').attr("aria-expanded","false");
+        this.$.addClass('closed');
+        this.$.removeClass('opened');
+    };
+
+    FormFieldsCollapsible.prototype.show = function () {
+        this.$.find('fieldset').attr("aria-hidden","false");
+        this.$.find('fieldset').attr("aria-expanded","true");
+        this.$.addClass('opened');
+        this.$.removeClass('closed');
+    };
 
     module.export({
         init: init,
@@ -158,6 +197,7 @@ humhub.module('ui.form.elements', function (module, require, $) {
         initCheckbox: initCheckbox,
         initRadio: initRadio,
         toggleTimeZoneInput: toggleTimeZoneInput,
-        timeZoneSelected: timeZoneSelected
+        timeZoneSelected: timeZoneSelected,
+        FormFieldsCollapsible: FormFieldsCollapsible
     });
 });

static/less/form.less

@@ -312,3 +312,44 @@ a.label-warning:hover {
 .bootstrap-timepicker-widget .form-control {
     padding: 0;
 }
+
+.form-collapsible-fields {
+    margin-bottom: 12px;
+    border-left: 3px solid @primary;
+    background-color: #F4F4F4;
+}
+
+.form-collapsible-fields-label {
+    margin-bottom: 0px;
+    padding: 12px;
+}
+
+.form-collapsible-fields fieldset {
+    padding-top: 15px;
+    padding-left: 12px;
+    padding-right: 12px;
+}
+
+.form-collapsible-fields.opened {
+    fieldset {
+        display: block;
+    }
+
+    .iconClose {
+        display: inline;
+    }
+
+    .iconOpen {
+        display: none;
+    }
+}
+
+.form-collapsible-fields.closed {
+    fieldset, .iconClose {
+        display: none;
+    }
+    .iconOpen {
+        display: inline;
+    }
+}
+