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

FormEditor: 1) design update - new default background color: grey. 2) per form...

FormEditor: 1) design update - new default background color: grey. 2) per form configureable background colors, 3) Optional right align of all form element labels.
BuildFormBootstrap.php: added new class name 'qfq-label' to form labels - needed to assign 'qfq-form-right' class. Changed wrapping of formelements from 'col-md-8' (wrong) to 'col-md-12'.
QuickFormQuery.php: Set default for new F_CLASS_PILL & F_CLASS_BODY.
formEditor.sql: New default background color for formElements is blue.
qfq-bs.css.less: add classes qfq-form-pill, qfq-form-body, form-group (center), qfq-color-*, qfq-form-right
parent 4bc7fbdc
......@@ -72,7 +72,7 @@ class BuildFormBootstrap extends AbstractBuildForm {
* @param $note
*/
public function fillWrapLabelInputNote($label, $input, $note) {
$this->wrap[WRAP_SETUP_LABEL][WRAP_SETUP_START] = "<div class='col-md-$label'>";
$this->wrap[WRAP_SETUP_LABEL][WRAP_SETUP_START] = "<div class='col-md-$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'>";
$this->wrap[WRAP_SETUP_INPUT][WRAP_SETUP_END] = "</div>";
......@@ -113,7 +113,9 @@ class BuildFormBootstrap extends AbstractBuildForm {
$html .= $this->getFormTag();
$html .= '<div class="tab-content">';
//TODO: Problem fuer Forms ohne Pils
$html .= '<div class="tab-content ' . $this->formSpec[F_CLASS_BODY] . '">';
// $html .= '<div class="col-md-12 ' . $this->formSpec[F_CLASS_BODY] . '">';
return $html;
}
......@@ -267,12 +269,12 @@ class BuildFormBootstrap extends AbstractBuildForm {
// Pill Dropdown necessary?
if ($ii > $maxVisiblePill) {
$htmlDropdown = Support::wrapTag('<ul class="dropdown-menu">', $pillDropdown, true);
$htmlDropdown = Support::wrapTag('<ul class="dropdown-menu qfq-form-pill ' . $this->formSpec[F_CLASS_PILL] . '">', $pillDropdown, true);
$htmlDropdown = '<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">more <span class="caret"></span></a>' . $htmlDropdown;
$htmlDropdown = Support::wrapTag('<li role="presentation" class="dropdown">', $htmlDropdown, false);
}
$htmlDropdown = Support::wrapTag('<ul id="' . $this->getTabId() . '" class="nav nav-pills" role="tablist">', $pillButton . $htmlDropdown);
$htmlDropdown = Support::wrapTag('<ul id="' . $this->getTabId() . '" class="nav nav-pills qfq-form-pill ' . $this->formSpec[F_CLASS_PILL] . '" role="tablist">', $pillButton . $htmlDropdown);
$htmlDropdown = Support::wrapTag('<div class="col-md-12">', $htmlDropdown);
return $htmlDropdown;
......@@ -422,7 +424,7 @@ EOF;
public function buildRowPill(array $formElement, $elementHtml) {
$html = '';
$html .= $this->wrapItem(WRAP_SETUP_INPUT, $elementHtml);
$html .= Support::wrapTag('<div class="col-md-12 qfq-form-body ' . $this->formSpec[F_CLASS_BODY] . '">', $elementHtml);
$active = $this->isFirstPill ? ' active' : '';
......
......@@ -442,6 +442,9 @@ const F_REQUIRED_PARAMETER = 'requiredParameter';
const F_SUBMIT_BUTTON_TEXT = 'submitButtonText';
const F_CLASS_PILL = 'classPill';
const F_CLASS_BODY = 'classBody';
// FORM_ELEMENT_STATI
const FE_MODE_SHOW = 'show';
const FE_MODE_READONLY = 'readonly';
......
......@@ -349,11 +349,14 @@ class QuickFormQuery {
# Set defaults:
Support::setIfNotSet($this->formSpec, 'class', '');
Support::setIfNotSet($this->formSpec, F_BS_LABEL_COLUMNS, 3, '');
Support::setIfNotSet($this->formSpec, F_BS_INPUT_COLUMNS, 8, '');
Support::setIfNotSet($this->formSpec, F_BS_NOTE_COLUMNS, 1, '');
Support::setIfNotSet($this->formSpec, F_BS_INPUT_COLUMNS, 6, '');
Support::setIfNotSet($this->formSpec, F_BS_NOTE_COLUMNS, 3, '');
Support::setIfNotSet($this->formSpec, F_SUBMIT_BUTTON_TEXT, '');
Support::setIfNotSet($this->formSpec, F_CLASS_PILL, 'qfq-color-grey-1');
Support::setIfNotSet($this->formSpec, F_CLASS_BODY, 'qfq-color-grey-2');
// Clear
$this->store->setVar(SYSTEM_FORM_ELEMENT, '', STORE_SYSTEM);
......
......@@ -184,7 +184,7 @@ VALUES
('formElement',
'Form Element Editor. Form : {{SELECT f.id, " / ", f.name FROM FormElement AS fe, Form AS f WHERE fe.id = {{r:S0}} AND fe.formId=f.id }}',
'Please secure the form',
'FormElement', 'always', 'always', 'bootstrap', '', 'maxVisiblePill=5', 'formId');
'FormElement', 'always', 'always', 'bootstrap', '', 'maxVisiblePill=5\nclassBody=qfq-color-blue-1', 'formId');
# FormEditor: FormElements for 'formElement'
INSERT INTO FormElement (id, formId, name, label, mode, type, checkType, class, ord, size, maxLength, note, clientJs, value,
......
......@@ -72,3 +72,46 @@ i.@{spinner_class} {
width: auto;
}
.qfq-form-pill {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.qfq-form-body {
padding-top: 5px;
padding-bottom: 5px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
/* adjust BS padding of input elements: center */
.form-group {
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 0;
}
.qfq-color-white {
background-color: #ffffff;
}
.qfq-color-grey-1 {
background-color: #dedede;
}
.qfq-color-grey-2 {
background-color: #ededed;
}
.qfq-color-blue-1 {
background-color: #d2dded;
}
.qfq-color-blue-2 {
background-color: #e2eeff;
}
.qfq-form-right .qfq-label {
text-align: right;
padding-right: 0;
}
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