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 ...@@ -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* 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. 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 * The system wide default can be changed via `configuration`_ - the new settings are the default
settings for all forms. settings for all forms.
...@@ -4145,7 +4145,8 @@ Custom field width ...@@ -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. 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 Multiple Elements per row
^^^^^^^^^^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^^^^
......
...@@ -148,17 +148,17 @@ cssClassQfqFormPill =qfq-color-grey-1 ...@@ -148,17 +148,17 @@ cssClassQfqFormPill =qfq-color-grey-1
cssClassQfqFormBody = qfq-color-grey-2 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%. # 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 = 12 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'. # 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 = 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'. # 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 = 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'. # 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 = 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. # 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 { ...@@ -1000,8 +1000,9 @@ abstract class AbstractBuildForm {
// Check show/hide: only FE with FE_MODE_SQL given, might change. // Check show/hide: only FE with FE_MODE_SQL given, might change.
if (!empty($formElement[FE_MODE_SQL])) { if (!empty($formElement[FE_MODE_SQL])) {
$class = 'col-md-' . $formElement[FE_BS_INPUT_COLUMNS] . ' '; $class = is_numeric($formElement[FE_BS_INPUT_COLUMNS]) ? ('col-md-' . $formElement[FE_BS_INPUT_COLUMNS]) : $formElement[FE_BS_INPUT_COLUMNS];
$class .= ($formElement[FE_MODE] == FE_MODE_HIDDEN) ? 'hidden' : ''; // $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]['class'] = $class;
$json[API_ELEMENT_UPDATE][$key][API_ELEMENT_ATTRIBUTE]['required'] = $formElement[FE_MODE] == 'required'; $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'; $json[API_ELEMENT_UPDATE][$key][API_ELEMENT_ATTRIBUTE]['hidden'] = $formElement[FE_MODE] == 'hidden';
......
...@@ -81,16 +81,25 @@ class BuildFormBootstrap extends AbstractBuildForm { ...@@ -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 $label
* @param $input * @param $input
* @param $note * @param $note
*/ */
public function fillWrapLabelInputNote($label, $input, $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_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_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>"; $this->wrap[WRAP_SETUP_NOTE][WRAP_SETUP_END] = "</div>";
} }
...@@ -715,7 +724,7 @@ EOF; ...@@ -715,7 +724,7 @@ EOF;
} }
// Label // Label
if ($formElement[FE_BS_LABEL_COLUMNS] > 0) { if ($formElement[FE_BS_LABEL_COLUMNS] != '0') {
$addClass = ($formElement[FE_MODE] == FE_MODE_REQUIRED) ? CSS_REQUIRED : ''; $addClass = ($formElement[FE_MODE] == FE_MODE_REQUIRED) ? CSS_REQUIRED : '';
$htmlLabel = $this->buildLabel($htmlFormElementName, $formElement[FE_LABEL], $addClass); $htmlLabel = $this->buildLabel($htmlFormElementName, $formElement[FE_LABEL], $addClass);
} }
...@@ -765,7 +774,7 @@ EOF; ...@@ -765,7 +774,7 @@ EOF;
private function customWrap(array $formElement, $htmlElement, $wrapName, $bsColumns, array $wrapArray, $htmlId = '', $class = '') { private function customWrap(array $formElement, $htmlElement, $wrapName, $bsColumns, array $wrapArray, $htmlId = '', $class = '') {
// If $bsColumns==0: do not wrap with default. // If $bsColumns==0: do not wrap with default.
if ($bsColumns == 0) { if ($bsColumns == '0') {
$wrapArray[0] = ''; $wrapArray[0] = '';
$wrapArray[1] = ''; $wrapArray[1] = '';
} }
......
...@@ -459,8 +459,10 @@ class QuickFormQuery { ...@@ -459,8 +459,10 @@ class QuickFormQuery {
case FORM_LOAD: case FORM_LOAD:
$formAction->elements($recordId, $this->feSpecAction, FE_TYPE_BEFORE_LOAD); $formAction->elements($recordId, $this->feSpecAction, FE_TYPE_BEFORE_LOAD);
$data = $build->process($formMode); $data = $build->process($formMode);
$data = Support::wrapTag("<div class='" . 'col-md-' . $this->formSpec[F_BS_COLUMNS] . "'>", $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='row'>", $data); // $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); $formAction->elements($recordId, $this->feSpecAction, FE_TYPE_AFTER_LOAD);
break; break;
......
...@@ -275,10 +275,10 @@ class Config { ...@@ -275,10 +275,10 @@ class Config {
SYSTEM_SQL_LOG => SYSTEM_SQL_LOG_FILE, SYSTEM_SQL_LOG => SYSTEM_SQL_LOG_FILE,
SYSTEM_SQL_LOG_MODE => 'modify', SYSTEM_SQL_LOG_MODE => 'modify',
SYSTEM_MAIL_LOG => SYSTEM_MAIL_LOG_FILE, SYSTEM_MAIL_LOG => SYSTEM_MAIL_LOG_FILE,
F_BS_COLUMNS => '12', F_BS_COLUMNS => 'col-md-12 col-lg-10',
F_BS_LABEL_COLUMNS => '3', F_BS_LABEL_COLUMNS => 'col-md-3 col-lg-3',
F_BS_INPUT_COLUMNS => '6', F_BS_INPUT_COLUMNS => 'col-md-6 col-lg-6',
F_BS_NOTE_COLUMNS => '3', F_BS_NOTE_COLUMNS => 'col-md-3 col-lg-3',
SYSTEM_CMD_WKHTMLTOPDF => '/opt/wkhtmltox/bin/wkhtmltopdf', SYSTEM_CMD_WKHTMLTOPDF => '/opt/wkhtmltox/bin/wkhtmltopdf',
...@@ -338,9 +338,17 @@ class Config { ...@@ -338,9 +338,17 @@ class Config {
// $config[SYSTEM_DB_INDEX_DATA_DEPRECATED] = $config[SYSTEM_DB_INDEX_DATA]; // $config[SYSTEM_DB_INDEX_DATA_DEPRECATED] = $config[SYSTEM_DB_INDEX_DATA];
// $config[SYSTEM_DB_INDEX_QFQ_DEPRECATED] = $config[SYSTEM_DB_INDEX_QFQ]; // $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. * 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 * 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