mirror_php/humhub
1
0
Fork 0
mirror of https://github.com/humhub/humhub.git synced 2025-01-17 14:18:27 +01:00
Code Issues Projects Releases Wiki Activity

Remove "regular" style of checkbox and radio (#5821)

Browse Source 
* Remove "regular" style of checkbox and radio

* Update CHANGELOG-DEV.md (#5821)

* Fix checkbox style on oembed confirmation

* Fix test

* Fix test

* Fix checkbox style on widget "ContentVisibilitySelect"

Co-authored-by: Lucas Bartholemy <luke-@users.noreply.github.com>
This commit is contained in:
Yuriy Bakhtin 2022-11-10 17:28:55 +04:00 committed by GitHub
parent 19f1ee0b71
commit 7993120486
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 72 additions and 396 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG-DEV.md
View File

@ -3,6 +3,7 @@ HumHub Changelog
1.13.0 (Unreleased)
-------------------
- Enh #5821: Remove "regular" style of checkbox and radio
- Enh #5827: Wall menu tabs for create content forms
- Enh #5808: Add a menu to remove all members of a space
- Enh #5841: Possibility to show Members/Followers as list from Space about page

2
protected/humhub/config/assets-prod.php
View File

@ -2,7 +2,7 @@
/**
* This file is generated by the "yii asset" command.
* DO NOT MODIFY THIS FILE DIRECTLY.
* @version 2022-08-17 11:53:49
* @version 2022-08-01 12:36:33
*/
return [
'app' => [

2
protected/humhub/modules/comment/widgets/views/adminDeleteModal.php
View File

@ -20,8 +20,6 @@ use humhub\modules\ui\form\widgets\ActiveForm;
var $messageTextarea = $('#admindeletecommentform-message');
var $notifyCheckbox = $('#admindeletecommentform-notify');
humhub.modules.ui.form.elements.initCheckbox($notifyCheckbox);
$notifyCheckbox.on('change', function () {
if($notifyCheckbox.is(':checked'))
$messageTextarea.removeAttr('disabled');

2
protected/humhub/modules/content/widgets/views/adminDeleteModal.php
View File

@ -20,8 +20,6 @@ use humhub\modules\ui\form\widgets\ActiveForm;
var $messageTextarea = $('#admindeletecontentform-message');
var $notifyCheckbox = $('#admindeletecontentform-notify');
humhub.modules.ui.form.elements.initCheckbox($notifyCheckbox);
$notifyCheckbox.on('change', function () {
if($notifyCheckbox.is(':checked'))
$messageTextarea.removeAttr('disabled');

7
protected/humhub/modules/stream/tests/codeception/acceptance/StreamCest.php
View File

@ -352,6 +352,13 @@ class StreamCest
$I->waitForText($postTitle, null, '.s2_streamContent');
$I->amGoingTo('filter stream by date from today');
/*
$I->jsClick('.wall-stream-filter-toggle');
$I->waitForElementVisible($dateFromFilter);
$I->executeJS("$('" . $dateFromFilter . "').val('" . date('n/j/y') . "').change();");
$I->waitForText($postTitle, 30, '.s2_streamContent');
*/
$I->waitForElementVisible('.wall-stream-filter-head');
$I->click('Filter', '.wall-stream-filter-head');
$I->wait(1);

153
protected/humhub/modules/ui/form/widgets/ActiveField.php
View File

@ -8,8 +8,6 @@
namespace humhub\modules\ui\form\widgets;
use yii\helpers\BaseHtml;
/**
* A HumHub enhanced version of [[\yii\bootstrap\ActiveField]].
*
@ -26,16 +24,6 @@ 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
*/
@ -92,145 +80,4 @@ 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);
}
}

2
protected/humhub/modules/ui/form/widgets/ContentVisibilitySelect.php
View File

@ -88,7 +88,7 @@ class ContentVisibilitySelect extends InputWidget
$this->setDefaultValue();
return
'<div class="checkbox regular-checkbox-container">' .
'<div class="checkbox">' .
Html::activeCheckbox($this->model, $this->attribute, $this->options) .
'</div';
}

108
static/css/flatelements.css
View File

@ -94,111 +94,3 @@
.onoffswitch-clear {
clear: both;
}
/*
/* Checkboxes (Slider)
/* --------------------------------------------------
*/
.regular-checkbox-container {
padding-left: 0;
}
.regular-checkbox {
opacity: 0;
width: 0;
}
.regular-checkbox + .regular-checkbox-box, input[type=checkbox] {
-webkit-appearance: none;
background: none;
border: 2px solid #ccc;
padding: 7px;
border-radius: 3px;
display: inline-block;
position: relative;
float: left;
margin-right: 5px;
}
.regular-checkbox:focus + .regular-checkbox-box, input[type=checkbox]:focus {
border: 2px solid #494949;
outline: none;
}
.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, input[type=checkbox]:checked::after {
content: '\2714';
font-size: 14px;
position: absolute;
top: -3px;
left: 1px;
color: white;
-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;
}
/*
/* Checkboxes (Slider)
/* --------------------------------------------------
*/
.regular-radio-container {
padding-left: 0;
}
.regular-radio, input[type=radio].regular-radio {
display: none;
}
.regular-radio + .regular-radio-button, input[type=radio] {
-webkit-appearance: none;
background: none;
border: 2px solid #ccc;
padding: 7px;
border-radius: 50px;
display: inline-block;
position: relative;
margin-right: 5px;
float: left;
}
.regular-radio:checked + .regular-radio-button:after, input[type=radio]:checked::after {
content: ' ';
width: 8px;
height: 8px;
border-radius: 50px;
position: absolute;
top: 3px;
background: #428bca;
text-shadow: 0px;
left: 3px;
font-size: 32px;
}
.regular-radio:checked + .regular-radio-button, input[type=radio]:checked {
background: none;
color: #99a1a7;
border: 2px solid #ccc;
margin-right: 5px;
}
.chk_rdo .form-group {
margin-bottom: 0px;
}
.chk_rdo .form-group label {
margin-bottom: 0px;
}

91
static/js/humhub/humhub.ui.form.elements.js
View File

@ -2,17 +2,6 @@ humhub.module('ui.form.elements', function (module, require, $) {
var additions = require('ui.additions');
var init = function () {
additions.register('form_elements', ':checkbox, :radio', function ($match) {
$match.each(function () {
var $this = $(this);
if ($this.is(':checkbox')) {
module.initCheckbox($this);
} else if($this.is(':radio')) {
module.initRadio($this);
}
});
});
additions.register('password', '[type="password"]', function ($match) {
$match.each(function () {
@ -62,84 +51,6 @@ humhub.module('ui.form.elements', function (module, require, $) {
});
};
var initCheckbox = function ($input) {
if ($input.data('form_element') || $input.hasClass('regular-checkbox') || $input.hasClass('hidden')) {
return;
}
// Check if the standard bootstrap container <div> exists
if ($input.parent().parent().attr('class') === "checkbox") {
$input.parent().parent().addClass('regular-checkbox-container')
.append('<div class="regular-checkbox-clear"></div>');
}
_checkInputLabel($input);
// Create new checkbox
var $checkbox = $('<div class="regular-checkbox-box"></div>').attr('style', $input.attr('style'));
if ($input.is(':disabled')) {
$checkbox.addClass('disabled');
}
// add new checkbox element
$input.parent().append($checkbox);
// add new class to checkbox
$input.addClass('regular-checkbox').data('form_element', $checkbox);
};
var initRadio = function ($input) {
if ($input.data('form_element') || $input.hasClass('regular-radio')) {
return;
}
// Check if the standard bootstrap container <div> exists
if ($input.parent().parent().attr('class') === "radio") {
$input.parent().parent().addClass('regular-radio-container');
}
_checkInputLabel($input);
// Create new checkbox
var $radio = $('<div class="regular-radio-button"></div>');
if ($input.is(':disabled')) {
$radio.addClass('disabled');
}
// add new radio element
$input.parent().append($radio);
// add new class to checkbox
$input.addClass('regular-radio').data('form_element', $radio);
};
/**
* Checks the label style of $input.
* If the $input is not wrapped in a label we wrap it around a new label and use the old label text if given.
*
* @param {type} $input
* @returns {undefined}
*/
var _checkInputLabel = function ($input) {
if (!$input.parent().is('label')) {
var $parent = $input.parent();
var $newLabel = $('<label>');
// check for old label
var $oldLabel = $('label[for="' + $input.attr('id') + '"]');
if ($oldLabel.length) {
$newLabel.html($oldLabel.html());
$oldLabel.remove();
}
$parent.append($newLabel.append($input));
}
};
var toggleTimeZoneInput = function(evt) {
evt.$trigger.siblings('.timeZoneInputContainer:first').fadeToggle('fast');
};
@ -208,8 +119,6 @@ humhub.module('ui.form.elements', function (module, require, $) {
module.export({
init: init,
sortOrder: 100,
initCheckbox: initCheckbox,
initRadio: initRadio,
toggleTimeZoneInput: toggleTimeZoneInput,
timeZoneSelected: timeZoneSelected,
FormFieldsCollapsible: FormFieldsCollapsible

79
static/less/form.less
View File

@ -164,37 +164,72 @@ a.input-field-addon-sm {
}
// Flatelements
.regular-checkbox:focus + .regular-checkbox-box, input[type=checkbox]:focus {
border: 2px solid @text-color-highlight !important;
.radio input[type=radio],
.radio-inline input[type=radio],
.checkbox input[type=checkbox],
.checkbox-inline input[type=checkbox] {
position: relative;
margin-left: 0;
}
.regular-checkbox:checked + .regular-checkbox-box, input[type=checkbox]:checked {
input[type=checkbox], input[type=radio] {
-webkit-appearance: none;
position: relative;
display: inline-block;
width: auto;
height: auto;
min-height: auto;
padding: 7px;
margin: -4px 2px 0 0;
vertical-align: middle;
background: white;
border: 2px solid #ccc;
border-radius: 3px;
&:disabled {
background: @background3 !important;
border: 2px solid @background3 !important;
cursor: not-allowed;
}
}
input[type=checkbox] {
&:focus {
border: 2px solid @text-color-highlight !important;
outline: none;
}
&:checked {
border: 2px solid @info;
background: @info;
color: white;
&::after {
content: '\2714';
font-size: 14px;
position: absolute;
top: -3px;
left: 1px;
color: white;
}
}
}
.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, input[type=radio]:checked::after {
background: @info;
}
.regular-radio:checked + .regular-radio-button, input[type=radio]:checked {
background-color: transparent;
color: #99a1a7;
input[type=radio] {
border-radius: 50%;
&:checked {
border: 2px solid @background3;
margin-right: 5px;
color: #99a1a7;
&::after {
content: ' ';
width: 8px;
height: 8px;
border-radius: 50%;
position: absolute;
top: 3px;
background: @info;
text-shadow: none;
left: 3px;
font-size: 32px;
}
}
.regular-radio-button.disabled, input[type=radio]:disabled {
background: @background3 !important;
border: 2px solid @background3 !important;
cursor: not-allowed;
}
div.form-group {

11
static/less/oembed.less
View File

@ -38,17 +38,6 @@
> div:not(.clearfix) {
float: left;
}
.regular-checkbox-box {
top: 6px;
}
.regular-checkbox {
&:not(:checked) + .regular-checkbox-box {
background: #FFF;
}
&:checked + .regular-checkbox-box:after {
top: -8px;
}
}
}
#oembed-providers {