Commit ee6bc668 authored by Carsten  Rose's avatar Carsten Rose
Browse files

Fixes #6999 (Feature) Bootstrap/Form: define columns for desktop 'col-lg-10'

parent f5f4f58d
Pipeline #1094 passed with stage
in 1 minute and 51 seconds
......@@ -4132,7 +4132,7 @@ The forms will be rendered with Bootstrap CSS classes, based on the 12 column gr
Generally a 3 column layout for *label* columns on the left side, an *input* field column in the middle and a *note*
column on the right side will be rendered.
The used default column (=bootstrap grid) width is *3,6,3* for *label, input, note*.
The used default column (=bootstrap grid) width is *3,6,3* (col-md , col-lg) for *label, input, note*.
* The system wide default can be changed via `configuration`_ - the new settings are the default
settings for all forms.
......@@ -4145,7 +4145,8 @@ Custom field width
^^^^^^^^^^^^^^^^^^
Per *FormElement* set `BS Label Columns`, `BS Input Columns` or `BS Note Columns` to customize an individual width.
The sum of these three columns should always be 12.
If only a number is specified, it's used as `col-md-<number>`. Else the whole text string is used as CSS class, e.g.
`col-md-3 col-lg-2`.
Multiple Elements per row
^^^^^^^^^^^^^^^^^^^^^^^^^
......
......@@ -148,17 +148,17 @@ cssClassQfqFormPill =qfq-color-grey-1
cssClassQfqFormBody = qfq-color-grey-2
# cat=form-layout/layout; type=string; label=Number of Bootstrap 'col-md-??' to wrap the 'whole form':Default is '12'. Bootstrap 12 column represents 100%.
formBsColumns = 12
# cat=form-layout/layout; type=string; label=Bootstrap CSS column class(es) to wrap the 'whole form':Default is 'col-md-12 col-lg-10'.
formBsColumns = col-md-12 col-lg-10
# cat=form-layout/layout; type=string; label=Number of Bootstrap 'col-md-??' to wrap the 'label' column:Default is '3'.
formBsLabelColumns = 3
# cat=form-layout/layout; type=string; label=Bootstrap CSS column class(es) to wrap the 'label' column:Default is 'col-md-3 col-lg-3'.
formBsLabelColumns = col-md-3 col-lg-3
# cat=form-layout/layout; type=string; label=Number of Bootstrap 'col-md-??' to wrap the 'input' column:Default is '6'.
formBsInputColumns = 6
# cat=form-layout/layout; type=string; label=Bootstrap CSS column class(es) to wrap the 'input' column:Default is 'col-md-6 col-lg-6'.
formBsInputColumns = col-md-6 col-lg-6
# cat=form-layout/layout; type=string; label=Number of Bootstrap 'col-md-??' to wrap the 'note' column:Default is '3'.
formBsNoteColumns = 3
# cat=form-layout/layout; type=string; label=Bootstrap CSS column class(es) to wrap the 'note' column:Default is 'col-md-3 col-lg-3'.
formBsNoteColumns = col-md-3 col-lg-3
# cat=form-layout/layout; type=string; label=ExtraButtonInfo symbol 'inline':Default is '<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>'. The image appears inside of the formElement. If an `<img src="...">` tag is given, the PathFilename is relative to the Typo3 installation.
......
......@@ -1000,8 +1000,9 @@ abstract class AbstractBuildForm {
// Check show/hide: only FE with FE_MODE_SQL given, might change.
if (!empty($formElement[FE_MODE_SQL])) {
$class = 'col-md-' . $formElement[FE_BS_INPUT_COLUMNS] . ' ';
$class .= ($formElement[FE_MODE] == FE_MODE_HIDDEN) ? 'hidden' : '';
$class = is_numeric($formElement[FE_BS_INPUT_COLUMNS]) ? ('col-md-' . $formElement[FE_BS_INPUT_COLUMNS]) : $formElement[FE_BS_INPUT_COLUMNS];
// $class = 'col-md-' . $formElement[FE_BS_INPUT_COLUMNS] . ' ';
$class .= ($formElement[FE_MODE] == FE_MODE_HIDDEN) ? ' hidden' : '';
$json[API_ELEMENT_UPDATE][$key][API_ELEMENT_ATTRIBUTE]['class'] = $class;
$json[API_ELEMENT_UPDATE][$key][API_ELEMENT_ATTRIBUTE]['required'] = $formElement[FE_MODE] == 'required';
$json[API_ELEMENT_UPDATE][$key][API_ELEMENT_ATTRIBUTE]['hidden'] = $formElement[FE_MODE] == 'hidden';
......
......@@ -81,16 +81,25 @@ class BuildFormBootstrap extends AbstractBuildForm {
}
/**
* Fill the BS wrapper for Label/Input/Note.
* For legacy reasons, $label/$input/$note might be a number (0-12) or the bs column classes ('col-md-12 col-lg9')
*
* @param $label
* @param $input
* @param $note
*/
public function fillWrapLabelInputNote($label, $input, $note) {
$this->wrap[WRAP_SETUP_LABEL][WRAP_SETUP_START] = "<div class='col-md-$label qfq-label'>";
$label = is_numeric($label) ? ('col-md-' . $label) : $label;
$this->wrap[WRAP_SETUP_LABEL][WRAP_SETUP_START] = "<div class='$label qfq-label'>";
$this->wrap[WRAP_SETUP_LABEL][WRAP_SETUP_END] = "</div>";
$this->wrap[WRAP_SETUP_INPUT][WRAP_SETUP_START] = "<div class='col-md-$input'>";
$input = is_numeric($input) ? ('col-md-' . $input) : $input;
$this->wrap[WRAP_SETUP_INPUT][WRAP_SETUP_START] = "<div class='$input'>";
$this->wrap[WRAP_SETUP_INPUT][WRAP_SETUP_END] = "</div>";
$this->wrap[WRAP_SETUP_NOTE][WRAP_SETUP_START] = "<div class='col-md-$note qfq-note'>";
$note = is_numeric($note) ? ('col-md-' . $note) : $note;
$this->wrap[WRAP_SETUP_NOTE][WRAP_SETUP_START] = "<div class='$note qfq-note'>";
$this->wrap[WRAP_SETUP_NOTE][WRAP_SETUP_END] = "</div>";
}
......@@ -715,7 +724,7 @@ EOF;
}
// Label
if ($formElement[FE_BS_LABEL_COLUMNS] > 0) {
if ($formElement[FE_BS_LABEL_COLUMNS] != '0') {
$addClass = ($formElement[FE_MODE] == FE_MODE_REQUIRED) ? CSS_REQUIRED : '';
$htmlLabel = $this->buildLabel($htmlFormElementName, $formElement[FE_LABEL], $addClass);
}
......@@ -765,7 +774,7 @@ EOF;
private function customWrap(array $formElement, $htmlElement, $wrapName, $bsColumns, array $wrapArray, $htmlId = '', $class = '') {
// If $bsColumns==0: do not wrap with default.
if ($bsColumns == 0) {
if ($bsColumns == '0') {
$wrapArray[0] = '';
$wrapArray[1] = '';
}
......
......@@ -459,8 +459,10 @@ class QuickFormQuery {
case FORM_LOAD:
$formAction->elements($recordId, $this->feSpecAction, FE_TYPE_BEFORE_LOAD);
$data = $build->process($formMode);
$data = Support::wrapTag("<div class='" . 'col-md-' . $this->formSpec[F_BS_COLUMNS] . "'>", $data);
$data = Support::wrapTag("<div class='row'>", $data);
$tmpClass = is_numeric($this->formSpec[F_BS_COLUMNS]) ? ('col-md-' . $this->formSpec[F_BS_COLUMNS]) : $this->formSpec[F_BS_COLUMNS];
// $data = Support::wrapTag("<div class='" . 'col-md-' . $this->formSpec[F_BS_COLUMNS] . "'>", $data);
$data = Support::wrapTag('<div class="' . $tmpClass . '">', $data);
$data = Support::wrapTag('<div class="row">', $data);
$formAction->elements($recordId, $this->feSpecAction, FE_TYPE_AFTER_LOAD);
break;
......
......@@ -275,10 +275,10 @@ class Config {
SYSTEM_SQL_LOG => SYSTEM_SQL_LOG_FILE,
SYSTEM_SQL_LOG_MODE => 'modify',
SYSTEM_MAIL_LOG => SYSTEM_MAIL_LOG_FILE,
F_BS_COLUMNS => '12',
F_BS_LABEL_COLUMNS => '3',
F_BS_INPUT_COLUMNS => '6',
F_BS_NOTE_COLUMNS => '3',
F_BS_COLUMNS => 'col-md-12 col-lg-10',
F_BS_LABEL_COLUMNS => 'col-md-3 col-lg-3',
F_BS_INPUT_COLUMNS => 'col-md-6 col-lg-6',
F_BS_NOTE_COLUMNS => 'col-md-3 col-lg-3',
SYSTEM_CMD_WKHTMLTOPDF => '/opt/wkhtmltox/bin/wkhtmltopdf',
......@@ -338,9 +338,17 @@ class Config {
// $config[SYSTEM_DB_INDEX_DATA_DEPRECATED] = $config[SYSTEM_DB_INDEX_DATA];
// $config[SYSTEM_DB_INDEX_QFQ_DEPRECATED] = $config[SYSTEM_DB_INDEX_QFQ];
return array_merge($default, $config);
foreach ($default as $key => $value) {
if (!isset($config[$key]) || $config[$key] == '') {
$config[$key] = $value;
}
}
// return array_merge($default, $config);
return $config;
}
/**
* Rename Elements defined in config.qfq.ini to more appropriate in user interaction.
* E.g.: in config.qfq.ini everything is in upper case and word space is '_'. In Form.parameter it's lowercase and
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment