Improve checkbox and radio styles on load page (#5815)

* Improve checkbox and radio styles on load page

* Change methods visibility

* Improve checkbox and radio styles on load page (for not ActiveField)

Co-authored-by: Lucas Bartholemy <luke-@users.noreply.github.com>

CHANGELOG_DEV.md

@@ -2,6 +2,7 @@
 -----------------------------
 - Enh #5788: Limit picker results for country filter on "People" page
 - Fix #5779: Fix user settings updating on disabled visibility "Guest"
+- Enh #5809: Improve checkbox and radio styles on load page
 - Fix #5807: SMTP Mail component not loading with empty `Port` config value 
 
 1.12.0-beta.1 (June 27, 2022)

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

@@ -8,6 +8,7 @@
 
 namespace humhub\modules\ui\form\widgets;
 
+use yii\helpers\BaseHtml;
 
 /**
  * A HumHub enhanced version of [[\yii\bootstrap\ActiveField]].
@@ -25,6 +26,16 @@ class ActiveField extends \yii\bootstrap\ActiveField
      */
     public $preventRendering = false;
 
+    /**
+     * @inheritdoc
+     */
+    public $checkboxTemplate = "<div class=\"checkbox regular-checkbox-container\">\n{beginLabel}\n{input}\n{labelTitle}\n{endLabel}\n{error}\n{hint}\n</div>";
+
+    /**
+     * @inheritdoc
+     */
+    public $radioTemplate = "<div class=\"radio regular-radio-container\">\n{beginLabel}\n{input}\n{labelTitle}\n{endLabel}\n{error}\n{hint}\n</div>";
+
     /**
      * @inheritdoc
      */
@@ -81,4 +92,145 @@ class ActiveField extends \yii\bootstrap\ActiveField
 
         return parent::end();
     }
+
+    /**
+     * @inheritdoc
+     */
+    public function checkbox($options = [], $enclosedByLabel = true)
+    {
+        return parent::checkbox($this->applyRegularSingleStyle($options, [
+            'inputClass' => 'regular-checkbox',
+            'boxClass' => 'regular-checkbox-box',
+            'template' => $this->checkboxTemplate,
+        ]), $enclosedByLabel);
+    }
+
+    /**
+     * @inheritdoc
+     */
+    public function checkboxList($items, $options = [])
+    {
+        return parent::checkboxList($items, $options)->applyRegularListStyle([
+            'type' => 'checkbox',
+            'containerFindClass' => 'checkbox',
+            'containerAdditionalClass' => 'regular-checkbox-container',
+            'inputClass' => 'regular-checkbox',
+            'boxClass' => 'regular-checkbox-box',
+        ]);
+    }
+
+    /**
+     * @inheritdoc
+     */
+    public function radio($options = [], $enclosedByLabel = true)
+    {
+        return parent::radio($this->applyRegularSingleStyle($options, [
+            'inputClass' => 'regular-radio',
+            'boxClass' => 'regular-radio-button',
+            'template' => $this->radioTemplate,
+        ]), $enclosedByLabel);
+    }
+
+    /**
+     * @inheritdoc
+     */
+    public function radioList($items, $options = [])
+    {
+        return parent::radioList($items, $options)->applyRegularListStyle([
+            'type' => 'radio',
+            'containerFindClass' => 'radio',
+            'containerAdditionalClass' => 'regular-radio-container',
+            'inputClass' => 'regular-radio',
+            'boxClass' => 'regular-radio-button',
+        ]);
+    }
+
+    /**
+     * Apply style "regular" for single of checkbox or radio input
+     *
+     * @param array $options
+     * @param array $regularOptions
+     * @return array
+     */
+    private function applyRegularSingleStyle(array $options, array $regularOptions): array
+    {
+        $options['class'] = isset($options['class']) ? $options['class'] . $regularOptions['inputClass'] : $regularOptions['inputClass'];
+
+        if (!isset($options['template']) && isset($regularOptions['template'])) {
+            $endLabel = '{endLabel}';
+            $options['template'] = str_replace($endLabel, $this->getRegularBox(array_merge($options, $regularOptions)) . $endLabel, $regularOptions['template']);
+        }
+
+        return $options;
+    }
+
+    /**
+     * Apply style "regular" for list of checkbox or radio inputs
+     *
+     * @param array $options
+     * @return $this
+     */
+    private function applyRegularListStyle(array $options): self
+    {
+        if (!isset($this->parts['{input}'])) {
+            return $this;
+        }
+
+        $regexp = '~(<div class="' . $options['containerFindClass'] . '")(.*?>[\r\n]*<label.*?>[\r\n]*<input type="' . $options['type'] . '")(.+?)(/?>.+?)(</label>[\r\n]*</div>)~im';
+
+        $this->parts['{input}'] = preg_replace_callback($regexp, function ($html) use($options) {
+            $regularOptions = [];
+
+            $inputAttrs = $html[3];
+            if (preg_match_all('/([a-z\-_]+)(="(.*?)")?/i', $inputAttrs, $m)) {
+                $attrs = array_combine($m[1], $m[3]);
+                foreach ($attrs as $attr => $value) {
+                    if ($value === '') {
+                        $attrs[$attr] = true;
+                    }
+                }
+                $attrs['class'] = (isset($attrs['class']) ? $attrs['class'] . ' ' : '') . $options['inputClass'];
+                $inputAttrs = BaseHtml::renderTagAttributes($attrs);
+
+                if (isset($options['boxClass'])) {
+                    $regularOptions['boxClass'] = $options['boxClass'];
+                }
+                if (isset($attrs['disabled'])) {
+                    $regularOptions['disabled'] = true;
+                }
+                if (isset($attrs['style'])) {
+                    $regularOptions['style'] = $attrs['style'];
+                }
+            }
+
+            return '<div class="' . $options['containerFindClass'] . ' ' . $options['containerAdditionalClass'] . '"'
+                . $html[2] // <label><input type=...
+                . $inputAttrs
+                . $html[4] // ...> Label text
+                . $this->getRegularBox($regularOptions)
+                . $html[5]; // </label></div>
+        }, $this->parts['{input}']);
+
+        return $this;
+    }
+
+    /**
+     * HTML code to checkbox/radio for style "regular"
+     *
+     * @param array $options
+     * @return string
+     */
+    private function getRegularBox(array $options = []): string
+    {
+        $checkboxOptions = [];
+        $checkboxOptions['class'] = $options['boxClass'] ?? 'regular-checkbox-box';
+        if (!empty($options['disabled'])) {
+            $checkboxOptions['class'] .= ' disabled';
+        }
+        if (isset($options['style'])) {
+            $checkboxOptions['style'] = $options['style'];
+        }
+
+        return BaseHtml::tag('div', '', $checkboxOptions);
+    }
 }

static/css/flatelements.css

@@ -110,8 +110,9 @@
     width: 0;
 }
 
-.regular-checkbox + .regular-checkbox-box {
+.regular-checkbox + .regular-checkbox-box, input[type=checkbox] {
-    background-color: none;
+    -webkit-appearance: none;
+    background: none;
     border: 2px solid #ccc;
     padding: 7px;
     border-radius: 3px;
@@ -121,17 +122,18 @@
     margin-right: 5px;
 }
 
-.regular-checkbox:focus + .regular-checkbox-box {
+.regular-checkbox:focus + .regular-checkbox-box, input[type=checkbox]:focus {
     border: 2px solid #494949;
+    outline: none;
 }
 
-.regular-checkbox:checked + .regular-checkbox-box {
+.regular-checkbox:checked + .regular-checkbox-box, input[type=checkbox]:checked {
     border: 2px solid #428bca;
     background: #428bca;
     color: white;
 }
 
-.regular-checkbox:checked + .regular-checkbox-box:after {
+.regular-checkbox:checked + .regular-checkbox-box:after, input[type=checkbox]:checked::after {
     content: '\2714';
     font-size: 14px;
     position: absolute;
@@ -141,6 +143,10 @@
     -webkit-transition: margin 0.2s ease-in 0s;
 }
 
+input[type=checkbox].regular-checkbox, input[type=checkbox].regular-checkbox:focus {
+    position: absolute;
+}
+
 .regular-checkbox-clear {
     clear: both;
 }
@@ -153,13 +159,13 @@
     padding-left: 0;
 }
 
-.regular-radio {
+.regular-radio, input[type=radio].regular-radio {
     display: none;
 }
 
-.regular-radio + .regular-radio-button {
+.regular-radio + .regular-radio-button, input[type=radio] {
     -webkit-appearance: none;
-    background-color: none;
+    background: none;
     border: 2px solid #ccc;
     padding: 7px;
     border-radius: 50px;
@@ -169,7 +175,7 @@
     float: left;
 }
 
-.regular-radio:checked + .regular-radio-button:after {
+.regular-radio:checked + .regular-radio-button:after, input[type=radio]:checked::after {
     content: ' ';
     width: 8px;
     height: 8px;
@@ -182,8 +188,8 @@
     font-size: 32px;
 }
 
-.regular-radio:checked + .regular-radio-button {
+.regular-radio:checked + .regular-radio-button, input[type=radio]:checked {
-    background-color: none;
+    background: none;
     color: #99a1a7;
     border: 2px solid #ccc;
     margin-right: 5px;

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

@@ -64,7 +64,7 @@ humhub.module('ui.form.elements', function (module, require, $) {
 
     var initCheckbox = function ($input) {
 
-        if ($input.data('form_element') || $input.hasClass('hidden')) {
+        if ($input.data('form_element') || $input.hasClass('regular-checkbox') || $input.hasClass('hidden')) {
             return;
         }
 
@@ -91,7 +91,7 @@ humhub.module('ui.form.elements', function (module, require, $) {
     };
 
     var initRadio = function ($input) {
-        if ($input.data('form_element')) {
+        if ($input.data('form_element') || $input.hasClass('regular-radio')) {
             return;
         }
 

static/less/form.less

@@ -164,34 +164,34 @@ a.input-field-addon-sm {
 }
 
 // Flatelements
-.regular-checkbox:focus + .regular-checkbox-box {
+.regular-checkbox:focus + .regular-checkbox-box, input[type=checkbox]:focus {
     border: 2px solid @text-color-highlight !important;
 }
 
-.regular-checkbox:checked + .regular-checkbox-box {
+.regular-checkbox:checked + .regular-checkbox-box, input[type=checkbox]:checked {
     border: 2px solid @info;
     background: @info;
     color: white;
 }
 
-.regular-checkbox-box.disabled {
+.regular-checkbox-box.disabled, input[type=checkbox]:disabled {
     background: @background3 !important;
     border: 2px solid @background3 !important;
     cursor: not-allowed;
 }
 
-.regular-radio:checked + .regular-radio-button:after {
+.regular-radio:checked + .regular-radio-button:after, input[type=radio]:checked::after {
     background: @info;
 }
 
-.regular-radio:checked + .regular-radio-button {
+.regular-radio:checked + .regular-radio-button, input[type=radio]:checked {
     background-color: transparent;
     color: #99a1a7;
     border: 2px solid @background3;
     margin-right: 5px;
 }
 
-.regular-radio-button.disabled {
+.regular-radio-button.disabled, input[type=radio]:disabled {
     background: @background3 !important;
     border: 2px solid @background3 !important;
     cursor: not-allowed;