From f458fb77043b7db9a4abff00b125495c9d10f6d7 Mon Sep 17 00:00:00 2001 From: Sam Georges Date: Wed, 12 Nov 2014 07:33:58 +1100 Subject: [PATCH] Overhaul Form layouts, adds FormTabs.php class for managing tab properties --- modules/backend/assets/css/october.css | 31 ++- modules/backend/assets/js/october.popover.js | 4 +- .../assets/less/controls/breadcrumb.less | 4 +- .../assets/less/controls/fancylayout.less | 6 +- .../backend/assets/less/controls/forms.less | 3 +- .../backend/assets/less/controls/lists.less | 2 +- modules/backend/assets/less/controls/tab.less | 35 +++- .../backend/assets/less/layout/layout.less | 12 +- modules/backend/behaviors/FormController.php | 2 +- modules/backend/classes/FormField.php | 1 - modules/backend/classes/FormTabs.php | 176 ++++++++++++++++++ .../controllers/editorpreferences/index.htm | 54 +++--- modules/backend/controllers/groups/create.htm | 8 +- modules/backend/controllers/groups/update.htm | 8 +- modules/backend/controllers/users/create.htm | 56 +++--- .../backend/controllers/users/myaccount.htm | 51 ++--- modules/backend/controllers/users/update.htm | 72 +++---- modules/backend/layouts/auth.htm | 8 +- modules/backend/layouts/default.htm | 23 ++- modules/backend/layouts/form-with-sidebar.htm | 24 ++- .../backend/models/brandsettings/custom.less | 12 ++ modules/backend/models/group/fields.yaml | 7 +- modules/backend/widgets/Form.php | 89 +++++---- .../backend/widgets/form/partials/_form.htm | 12 +- .../widgets/form/partials/_form_tabs.htm | 19 +- .../form/partials/_section-container.htm | 6 +- .../widgets/form/partials/_section.htm | 31 +++ .../form/partials/_section_outside-fields.htm | 9 - .../form/partials/_section_primary-tabs.htm | 11 -- .../form/partials/_section_secondary-tabs.htm | 11 -- .../system/controllers/maillayouts/create.htm | 8 +- .../system/controllers/maillayouts/update.htm | 24 ++- .../controllers/mailtemplates/create.htm | 8 +- .../controllers/mailtemplates/update.htm | 24 ++- .../system/controllers/settings/update.htm | 8 +- modules/system/lang/en/lang.php | 5 +- modules/system/models/MailSettings.php | 8 +- 37 files changed, 586 insertions(+), 286 deletions(-) create mode 100644 modules/backend/classes/FormTabs.php create mode 100644 modules/backend/widgets/form/partials/_section.htm delete mode 100644 modules/backend/widgets/form/partials/_section_outside-fields.htm delete mode 100644 modules/backend/widgets/form/partials/_section_primary-tabs.htm delete mode 100644 modules/backend/widgets/form/partials/_section_secondary-tabs.htm diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css index 607e72633..c3824a6fe 100644 --- a/modules/backend/assets/css/october.css +++ b/modules/backend/assets/css/october.css @@ -8978,7 +8978,9 @@ label { margin-top: -5px; } .form-group.no-padding.span-left, -.form-group.no-padding.span-right { +.form-group.field-slim.span-left, +.form-group.no-padding.span-right, +.form-group.field-slim.span-right { width: 50%; } .form-group.input-sidebar-control { @@ -10013,10 +10015,10 @@ table.table.data tr.list-tree-level-25 td.list-cell-index-1 { .report-widget .table-container table.table.data tbody tr:nth-child(even) th { background-color: transparent; } -#layout-flash-messages + .list-header { +.list-header:first-of-type { margin-top: -20px; } -#layout-flash-messages + .list-header > .control-toolbar { +.list-header:first-of-type > .control-toolbar { padding-top: 20px; } @media only screen and (max-width: 960px) { @@ -11780,6 +11782,12 @@ body.dropdown-open .dropdown-overlay { .control-tabs > div.tab-content > div.tab-pane.active.layout-cell { display: table-cell; } +.control-tabs > div.tab-content > div.tab-pane.pane-compact { + padding: 0; +} +.control-tabs > div.tab-content > div.tab-pane.pane-padded { + padding: 20px 20px 0 20px; +} .control-tabs[data-closable] > ul.nav-tabs > li, .control-tabs[data-closable] > div > ul.nav-tabs > li, .control-tabs[data-closable] > div > div > ul.nav-tabs > li { @@ -11788,8 +11796,8 @@ body.dropdown-open .dropdown-overlay { .control-tabs[data-closable] > ul.nav-tabs > li a, .control-tabs[data-closable] > div > ul.nav-tabs > li a, .control-tabs[data-closable] > div > div > ul.nav-tabs > li a { - padding-left: 20px!important; - padding-right: 0!important; + padding-left: 20px !important; + padding-right: 0 !important; } .control-tabs[data-closable] > ul.nav-tabs > li span.tab-close, .control-tabs[data-closable] > div > ul.nav-tabs > li span.tab-close, @@ -11980,6 +11988,12 @@ body.dropdown-open .dropdown-overlay { background-position: -61px 0; z-index: 107; } +.control-tabs.primary.tabs-offset > ul.nav-tabs, +.control-tabs.primary.tabs-offset > div > ul.nav-tabs, +.control-tabs.primary.tabs-offset > div > div > ul.nav-tabs { + margin-left: 0; + margin-right: 0; +} .control-tabs.secondary > ul.nav-tabs > li, .control-tabs.secondary > div > ul.nav-tabs > li, .control-tabs.secondary > div > div > ul.nav-tabs > li { @@ -12623,7 +12637,8 @@ ul.status-list li span.status.info { .control-breadcrumb + .padded-container { margin-top: -20px; } -.control-breadcrumb.no-bottom-margin { +.control-breadcrumb.no-bottom-margin, +.control-breadcrumb.breadcrumb-flush { margin-bottom: 0; } body.slim-container .control-breadcrumb { @@ -13344,8 +13359,8 @@ div.popover-overlay { .fancy-layout.control-tabs.primary > .tab-content > .tab-pane { padding: 15px 15px 0 15px; } -.fancy-layout .control-tabs.primary > .tab-content > .tab-pane.full-size, -.fancy-layout.control-tabs.primary > .tab-content > .tab-pane.full-size { +.fancy-layout .control-tabs.primary > .tab-content > .tab-pane.pane-compact, +.fancy-layout.control-tabs.primary > .tab-content > .tab-pane.pane-compact { padding: 0; } .fancy-layout .control-tabs.primary > .tab-content > .tab-pane .form-control, diff --git a/modules/backend/assets/js/october.popover.js b/modules/backend/assets/js/october.popover.js index 3a7399607..f6f91fcd4 100644 --- a/modules/backend/assets/js/october.popover.js +++ b/modules/backend/assets/js/october.popover.js @@ -62,7 +62,7 @@ return this.$container.removeClass('in') - this.$overlay.removeClass('in') + if (this.$overlay) this.$overlay.removeClass('in') $.support.transition && this.$container.hasClass('fade') ? this.$container @@ -148,7 +148,7 @@ * Display the popover */ this.$container.addClass('in') - this.$overlay.addClass('in') + if (this.$overlay) this.$overlay.addClass('in') $(document.body).addClass('popover-open') var showEvent = jQuery.Event('show.oc.popover', { relatedTarget: this.$container.get(0) }) diff --git a/modules/backend/assets/less/controls/breadcrumb.less b/modules/backend/assets/less/controls/breadcrumb.less index 17b078f58..2b15e0030 100644 --- a/modules/backend/assets/less/controls/breadcrumb.less +++ b/modules/backend/assets/less/controls/breadcrumb.less @@ -44,7 +44,9 @@ margin-top: -20px; } - &.no-bottom-margin { + // Breadcrumb to sit flush to the element below + &.no-bottom-margin, // @deprecated remove if year >= 2015 + &.breadcrumb-flush { margin-bottom: 0; } } diff --git a/modules/backend/assets/less/controls/fancylayout.less b/modules/backend/assets/less/controls/fancylayout.less index e8fc91eb0..da89c3291 100644 --- a/modules/backend/assets/less/controls/fancylayout.less +++ b/modules/backend/assets/less/controls/fancylayout.less @@ -293,12 +293,12 @@ > div > ul.nav-tabs { background: @color-fancy-form-tabless-fields-bg; - + > li { a { color: white; } - + &.active a { color: #2b3e50; } @@ -384,7 +384,7 @@ > .tab-content > .tab-pane { padding: 15px 15px 0 15px; - &.full-size { + &.pane-compact { padding: 0; } diff --git a/modules/backend/assets/less/controls/forms.less b/modules/backend/assets/less/controls/forms.less index 74ffd403a..8d60b19f5 100644 --- a/modules/backend/assets/less/controls/forms.less +++ b/modules/backend/assets/less/controls/forms.less @@ -140,7 +140,8 @@ label { margin-top: -5px; } - &.no-padding { + &.no-padding, // @deprecated remove if year >= 2015 + &.field-slim { &.span-left, &.span-right { width: 50%; } diff --git a/modules/backend/assets/less/controls/lists.less b/modules/backend/assets/less/controls/lists.less index 20f61199c..eb69c768e 100644 --- a/modules/backend/assets/less/controls/lists.less +++ b/modules/backend/assets/less/controls/lists.less @@ -404,7 +404,7 @@ table.table.data { } } -#layout-flash-messages + .list-header { +.list-header:first-of-type { margin-top: -20px; > .control-toolbar { padding-top: 20px; diff --git a/modules/backend/assets/less/controls/tab.less b/modules/backend/assets/less/controls/tab.less index b3a85e520..92fc7c61c 100644 --- a/modules/backend/assets/less/controls/tab.less +++ b/modules/backend/assets/less/controls/tab.less @@ -101,6 +101,13 @@ display: table-cell; } } + + &.pane-compact { + padding: 0; + } + &.pane-padded { + padding: 20px 20px 0 20px; + } } } @@ -110,8 +117,8 @@ margin-right: 5px; a { - padding-left: 20px!important; - padding-right: 0!important; + padding-left: 20px !important; + padding-right: 0 !important; } span.tab-close { @@ -123,7 +130,7 @@ left: -5px; text-align: right; font-size: 12px; - color: @color-tab-inactive-text!important; + color: @color-tab-inactive-text !important; cursor: pointer; i { display: inline-block; @@ -167,7 +174,7 @@ } &.active { - a {border-bottom: @color-tab-active-border 4px solid;} + a { border-bottom: @color-tab-active-border 4px solid; } } } } @@ -262,18 +269,18 @@ background-color: @color-body-bg; } - &.active a{ + &.active a { z-index: 107; > span.title { z-index: 105; border-top-color: #d6d6d6; - + &:before { background-position: left 0; z-index: 107; } - + &:after { background-position: -61px 0; z-index: 107; @@ -285,6 +292,14 @@ > div.tab-content { } + + // Tabs to sit in by the standard offset (0px) + &.tabs-offset { + > ul.nav-tabs, > div > ul.nav-tabs, > div > div > ul.nav-tabs { + margin-left: 0; + margin-right: 0; + } + } } &.secondary { @@ -397,7 +412,9 @@ &.hide-tabs { .control-tabs { - ul.nav-tabs {display: none;} + ul.nav-tabs { + display: none; + } > div.tab-content > div.tab-pane { padding-top: 0; @@ -411,4 +428,4 @@ background: transparent; } } -} \ No newline at end of file +} diff --git a/modules/backend/assets/less/layout/layout.less b/modules/backend/assets/less/layout/layout.less index 4e7102586..a2fe5abaf 100644 --- a/modules/backend/assets/less/layout/layout.less +++ b/modules/backend/assets/less/layout/layout.less @@ -47,12 +47,14 @@ body { vertical-align: top; height: 100%; - &.width-100 {width: 100px;} - &.width-120 {width: 120px;} - &.width-200 {width: 200px;} - &.width-300 {width: 300px;} + &.width-100 { width: 100px; } + &.width-120 { width: 120px; } + &.width-200 { width: 200px; } + &.width-300 { width: 300px; } - &.layout-container, .layout-container, &.padded-container, .padded-container {padding: 20px 20px 0 20px;} + &.layout-container, .layout-container, &.padded-container, .padded-container { + padding: 20px 20px 0 20px; + } .layout-relative { position: relative; diff --git a/modules/backend/behaviors/FormController.php b/modules/backend/behaviors/FormController.php index ad7631c66..506b0b068 100644 --- a/modules/backend/behaviors/FormController.php +++ b/modules/backend/behaviors/FormController.php @@ -432,7 +432,7 @@ class FormController extends ControllerBehavior * Helper for custom layouts. Renders Secondary Tabs. * @return string The tab HTML markup. */ - public function formRenderSecondaryTabs($suppressTabs = false) + public function formRenderSecondaryTabs() { return $this->formRender(['section' => 'secondary']); } diff --git a/modules/backend/classes/FormField.php b/modules/backend/classes/FormField.php index e472b659a..9d24646f6 100644 --- a/modules/backend/classes/FormField.php +++ b/modules/backend/classes/FormField.php @@ -275,7 +275,6 @@ class FormField if (isset($config['path'])) { $this->path = $config['path']; } - if (array_key_exists('required', $config)) { $this->required = $config['required']; } diff --git a/modules/backend/classes/FormTabs.php b/modules/backend/classes/FormTabs.php new file mode 100644 index 000000000..1972959fb --- /dev/null +++ b/modules/backend/classes/FormTabs.php @@ -0,0 +1,176 @@ +section = strtolower($section) ?: $this->section; + $this->config = $this->evalConfig($config); + + if ($this->section == self::SECTION_OUTSIDE) { + $this->suppressTabs = true; + } + } + + /** + * Process options and apply them to this object. + * @param array $config + * @return array + */ + protected function evalConfig($config) + { + if (array_key_exists('stretch', $config)) { + $this->stretch = $config['stretch']; + } + + if (array_key_exists('suppressTabs', $config)) { + $this->suppressTabs = $config['suppressTabs']; + } + + if (array_key_exists('cssClass', $config)) { + $this->cssClass = $config['cssClass']; + } + } + + /** + * Add a field to the collection of tabs. + * @param string $name + * @param FormField $field + * @param string $tab + */ + public function addField($name, FormField $field, $tab = null) + { + if (!$tab) { + $tab = Lang::get('backend::lang.form.undefined_tab'); + } + + $this->fields[$tab][$name] = $field; + } + + /** + * Returns an array of the registered fields, without tabs. + * @return array + */ + public function getFields() + { + $tablessFields = []; + + foreach ($this->getTabs() as $tab) { + $tablessFields += $tab; + } + + return $tablessFields; + } + + public function hasFields() + { + return count($this->fields) > 0; + } + + /** + * Returns an array of the registered fields. + * @return array + */ + public function getTabs() + { + return $this->fields; + } + + /** + * Get an iterator for the items. + * @return ArrayIterator + */ + public function getIterator() + { + return new ArrayIterator($this->suppressTabs + ? $this->getFields() + : $this->getTabs() + ); + } + + /** + * ArrayAccess implementation + */ + public function offsetSet($offset, $value) + { + $this->fields[$offset] = $value; + } + + /** + * ArrayAccess implementation + */ + public function offsetExists($offset) + { + return isset($this->fields[$offset]); + } + + /** + * ArrayAccess implementation + */ + public function offsetUnset($offset) + { + unset($this->fields[$offset]); + } + + /** + * ArrayAccess implementation + */ + public function offsetGet($offset) + { + return isset($this->fields[$offset]) ? $this->fields[$offset] : null; + } + +} \ No newline at end of file diff --git a/modules/backend/controllers/editorpreferences/index.htm b/modules/backend/controllers/editorpreferences/index.htm index 948d944ef..7777036c4 100644 --- a/modules/backend/controllers/editorpreferences/index.htm +++ b/modules/backend/controllers/editorpreferences/index.htm @@ -1,38 +1,40 @@ fatalError): ?> - 'layout-item stretch layout-column']) ?> + 'layout']) ?> -
-
-
- formRender() ?> +
+
+
+
+ formRender() ?> +
-
-
+
+ +
+ +
-
-
-
-
+
- - - - +
+ formRenderOutsideFields() ?> + formRenderPrimaryTabs() ?>
-
+
+
+ + + + + +
+
+ +
diff --git a/modules/backend/controllers/users/myaccount.htm b/modules/backend/controllers/users/myaccount.htm index fe9641d1d..81ddf2eb6 100644 --- a/modules/backend/controllers/users/myaccount.htm +++ b/modules/backend/controllers/users/myaccount.htm @@ -1,31 +1,36 @@ fatalError): ?> +
- formRenderOutsideFields() ?> - formRenderPrimaryTabs() ?> - -
-
- - +
+ formRenderOutsideFields() ?> + formRenderPrimaryTabs() ?>
+ +
+
+ + +
+
+
diff --git a/modules/backend/controllers/users/update.htm b/modules/backend/controllers/users/update.htm index 54bb51a6f..88ef81feb 100644 --- a/modules/backend/controllers/users/update.htm +++ b/modules/backend/controllers/users/update.htm @@ -8,43 +8,47 @@ fatalError): ?> +
- formRenderOutsideFields() ?> - formRenderPrimaryTabs() ?> - -
-
- - - - - - +
+ formRenderOutsideFields() ?> + formRenderPrimaryTabs() ?>
-
+
+
+ + + + + + +
+
+ +
diff --git a/modules/backend/layouts/auth.htm b/modules/backend/layouts/auth.htm index 57040a8bb..7e4d378bc 100644 --- a/modules/backend/layouts/auth.htm +++ b/modules/backend/layouts/auth.htm @@ -34,15 +34,17 @@
-
makeLayoutPartial('flash_messages') ?>
-
-
+
+ + +
makeLayoutPartial('flash_messages') ?>
+ diff --git a/modules/backend/layouts/default.htm b/modules/backend/layouts/default.htm index 59a95ea17..74f80e205 100644 --- a/modules/backend/layouts/default.htm +++ b/modules/backend/layouts/default.htm @@ -28,17 +28,20 @@
- -
makeLayoutPartial('flash_messages') ?>
- - -
- +
+ + +
+ +
+ + +
+
- +
-
@@ -47,5 +50,9 @@
+ + +
makeLayoutPartial('flash_messages') ?>
+ \ No newline at end of file diff --git a/modules/backend/layouts/form-with-sidebar.htm b/modules/backend/layouts/form-with-sidebar.htm index fea3dc914..9ab9de0e3 100644 --- a/modules/backend/layouts/form-with-sidebar.htm +++ b/modules/backend/layouts/form-with-sidebar.htm @@ -1,15 +1,21 @@
- - -
- -
- -
- +
+ + +
+ +
+ + +
+
+ +
+
+
@@ -22,4 +28,4 @@
-
\ No newline at end of file +
diff --git a/modules/backend/models/brandsettings/custom.less b/modules/backend/models/brandsettings/custom.less index 533461224..202044736 100644 --- a/modules/backend/models/brandsettings/custom.less +++ b/modules/backend/models/brandsettings/custom.less @@ -125,6 +125,18 @@ div.control-componentlist { } } +.fancy-layout { + .control-tabs, &.control-tabs { + &.primary { + > div > ul.nav-tabs { + &.component-area { + background: @color-component-list-bg; + } + } + } + } +} + // // File List // diff --git a/modules/backend/models/group/fields.yaml b/modules/backend/models/group/fields.yaml index 30a3c96dc..de473b78f 100644 --- a/modules/backend/models/group/fields.yaml +++ b/modules/backend/models/group/fields.yaml @@ -3,5 +3,8 @@ # =================================== fields: - name: - label: backend::lang.user.group.name_field + name: + label: backend::lang.user.group.name_field + +tabs: + stretch: true diff --git a/modules/backend/widgets/Form.php b/modules/backend/widgets/Form.php index ac97d410b..842e8b43c 100644 --- a/modules/backend/widgets/Form.php +++ b/modules/backend/widgets/Form.php @@ -6,6 +6,7 @@ use Lang; use Form as FormHelper; use Input; use Event; +use Backend\Classes\FormTabs; use Backend\Classes\FormField; use Backend\Classes\WidgetBase; use Backend\Classes\WidgetManager; @@ -54,19 +55,19 @@ class Form extends WidgetBase protected $formWidgets = []; /** - * @var array Collection of fields not contained in a tab. + * @var Backend\Classes\FormTabs Collection of fields not contained in a tab. */ - protected $outsideFields = []; + protected $outsideTabs; /** - * @var array Collection of fields inside the primary tabs. + * @var Backend\Classes\FormTabs Collection of fields inside the primary tabs. */ - protected $primaryTabs = []; + protected $primaryTabs; /** - * @var array Collection of fields inside the secondary tabs. + * @var Backend\Classes\FormTabs Collection of fields inside the secondary tabs. */ - protected $secondaryTabs = []; + protected $secondaryTabs; /** * @var string If the field element names should be contained in an array. @@ -133,9 +134,9 @@ class Form extends WidgetBase * - preview: Render this form as an uneditable preview. Default: false * - useContainer: Wrap the result in a container, used by AJAX. Default: true * - section: Which form section to render. Default: null - * - outside: Renders the Outside Fields area. - * - primary: Renders the Primary Tabs area. - * - secondary: Renders the Secondary Tabs area. + * - outside: Renders the Outside Fields section. + * - primary: Renders the Primary Tabs section. + * - secondary: Renders the Secondary Tabs section. * - null: Renders all sections */ public function render($options = []) @@ -160,19 +161,17 @@ class Form extends WidgetBase switch (strtolower($section)) { case 'outside': - $sectionPartial = 'section_outside-fields'; + $extraVars['tabs'] = $this->outsideTabs; break; case 'primary': - $sectionPartial = 'section_primary-tabs'; + $extraVars['tabs'] = $this->primaryTabs; break; case 'secondary': - $sectionPartial = 'section_secondary-tabs'; - break; - default: + $extraVars['tabs'] = $this->secondaryTabs; break; } - $targetPartial = $sectionPartial; + $targetPartial = 'section'; $extraVars['renderSection'] = $section; } @@ -247,7 +246,7 @@ class Form extends WidgetBase { $this->defineFormFields(); $this->vars['sessionKey'] = $this->getSessionKey(); - $this->vars['outsideFields'] = $this->outsideFields; + $this->vars['outsideTabs'] = $this->outsideTabs; $this->vars['primaryTabs'] = $this->primaryTabs; $this->vars['secondaryTabs'] = $this->secondaryTabs; } @@ -355,6 +354,7 @@ class Form extends WidgetBase $this->config->fields = []; } + $this->outsideTabs = new FormTabs(FormTabs::SECTION_OUTSIDE, $this->config); $this->addFields($this->config->fields); /* @@ -364,7 +364,8 @@ class Form extends WidgetBase $this->config->tabs['fields'] = []; } - $this->addFields($this->config->tabs['fields'], 'primary'); + $this->primaryTabs = new FormTabs(FormTabs::SECTION_PRIMARY, $this->config->tabs); + $this->addFields($this->config->tabs['fields'], FormTabs::SECTION_PRIMARY); /* * Secondary Tabs + Fields @@ -373,7 +374,8 @@ class Form extends WidgetBase $this->config->secondaryTabs['fields'] = []; } - $this->addFields($this->config->secondaryTabs['fields'], 'secondary'); + $this->secondaryTabs = new FormTabs(FormTabs::SECTION_SECONDARY, $this->config->secondaryTabs); + $this->addFields($this->config->secondaryTabs['fields'], FormTabs::SECTION_SECONDARY); /* * Extensibility @@ -384,16 +386,37 @@ class Form extends WidgetBase /* * Convert automatic spanned fields */ - $this->processAutoSpan($this->outsideFields); - - foreach ($this->primaryTabs as $fields) { + foreach ($this->outsideTabs->getTabs() as $fields) { $this->processAutoSpan($fields); } - foreach ($this->secondaryTabs as $fields) { + foreach ($this->primaryTabs->getTabs() as $fields) { $this->processAutoSpan($fields); } + foreach ($this->secondaryTabs->getTabs() as $fields) { + $this->processAutoSpan($fields); + } + + /* + * At least one tab section should stretch + */ + if ( + $this->secondaryTabs->stretch === null + && $this->primaryTabs->stretch === null + && $this->outsideTabs->stretch === null + ) { + if ($this->secondaryTabs->hasFields()) { + $this->secondaryTabs->stretch = true; + } + elseif ($this->primaryTabs->hasFields()) { + $this->primaryTabs->stretch = true; + } + else { + $this->outsideTabs->stretch = true; + } + } + /* * Bind all form widgets to controller */ @@ -437,18 +460,8 @@ class Form extends WidgetBase { foreach ($fields as $name => $config) { - $defaultTab = Lang::get('backend::lang.form.undefined_tab'); - if (!is_array($config)) { - $tab = $defaultTab; - } - elseif (!isset($config['tab'])) { - $tab = $config['tab'] = $defaultTab; - } - else { - $tab = $config['tab']; - } - $fieldObj = $this->makeFormField($name, $config); + $fieldTab = is_array($config) ? array_get($config, 'tab') : null; /* * Check that the form field matches the active context @@ -463,14 +476,14 @@ class Form extends WidgetBase $this->fields[$name] = $fieldObj; switch (strtolower($addToArea)) { - case 'primary': - $this->primaryTabs[$tab][$name] = $fieldObj; + case FormTabs::SECTION_PRIMARY: + $this->primaryTabs->addField($name, $fieldObj, $fieldTab); break; - case 'secondary': - $this->secondaryTabs[$tab][$name] = $fieldObj; + case FormTabs::SECTION_SECONDARY: + $this->secondaryTabs->addField($name, $fieldObj, $fieldTab); break; default: - $this->outsideFields[$name] = $fieldObj; + $this->outsideTabs->addField($name, $fieldObj, $fieldTab); break; } } diff --git a/modules/backend/widgets/form/partials/_form.htm b/modules/backend/widgets/form/partials/_form.htm index 655711f23..cd6ed9659 100644 --- a/modules/backend/widgets/form/partials/_form.htm +++ b/modules/backend/widgets/form/partials/_form.htm @@ -1,12 +1,12 @@ - - makePartial('section_outside-fields') ?> +hasFields()): ?> + makePartial('section', ['tabs' => $outsideTabs]) ?> - - makePartial('section_primary-tabs') ?> +hasFields()): ?> + makePartial('section', ['tabs' => $primaryTabs]) ?> - - makePartial('section_secondary-tabs') ?> +hasFields()): ?> + makePartial('section', ['tabs' => $secondaryTabs]) ?> \ No newline at end of file diff --git a/modules/backend/widgets/form/partials/_form_tabs.htm b/modules/backend/widgets/form/partials/_form_tabs.htm index b08fe3eca..9895cf4c9 100644 --- a/modules/backend/widgets/form/partials/_form_tabs.htm +++ b/modules/backend/widgets/form/partials/_form_tabs.htm @@ -1,8 +1,17 @@ section; + + $navCss = ''; + $contentCss = ''; + $paneCss = ''; + + if ($tabs->stretch) { + $navCss = 'layout-row min-size'; + $contentCss = 'layout-row'; + $paneCss = 'layout-cell'; + } ?> -
+
    $fields): ?>
    • @@ -10,10 +19,10 @@
-
+
$fields): ?>
makePartial('form_fields', ['fields' => $fields]) ?>
diff --git a/modules/backend/widgets/form/partials/_section-container.htm b/modules/backend/widgets/form/partials/_section-container.htm index 8bbde73cf..40ee61f0b 100644 --- a/modules/backend/widgets/form/partials/_section-container.htm +++ b/modules/backend/widgets/form/partials/_section-container.htm @@ -6,15 +6,15 @@ id="getId($renderSection.'Container') ?>"> - makePartial('section_outside-fields') ?> + makePartial('section', ['tabs' => $outsideTabs]) ?> - makePartial('section_primary-tabs') ?> + makePartial('section', ['tabs' => $primaryTabs]) ?> - makePartial('section_secondary-tabs') ?> + makePartial('section', ['tabs' => $secondaryTabs]) ?>
\ No newline at end of file diff --git a/modules/backend/widgets/form/partials/_section.htm b/modules/backend/widgets/form/partials/_section.htm new file mode 100644 index 000000000..2ee37a426 --- /dev/null +++ b/modules/backend/widgets/form/partials/_section.htm @@ -0,0 +1,31 @@ +section; + + $containerCss = 'layout-row min-size'; + + if ($tabs->stretch) { + $containerCss = 'layout-row'; + } +?> + +
+ suppressTabs): ?> + +
+ makePartial('form_fields', ['fields' => $tabs]) ?> +
+ + + +
+ makePartial('form_tabs', ['tabs' => $tabs]) ?> +
+ + +
diff --git a/modules/backend/widgets/form/partials/_section_outside-fields.htm b/modules/backend/widgets/form/partials/_section_outside-fields.htm deleted file mode 100644 index 63a6eaf5d..000000000 --- a/modules/backend/widgets/form/partials/_section_outside-fields.htm +++ /dev/null @@ -1,9 +0,0 @@ - - -
-
- makePartial('form_fields', ['fields' => $outsideFields]) ?> -
-
\ No newline at end of file diff --git a/modules/backend/widgets/form/partials/_section_primary-tabs.htm b/modules/backend/widgets/form/partials/_section_primary-tabs.htm deleted file mode 100644 index cb91c7521..000000000 --- a/modules/backend/widgets/form/partials/_section_primary-tabs.htm +++ /dev/null @@ -1,11 +0,0 @@ - - -
-
- makePartial('form_tabs', ['tabs' => $primaryTabs, 'type' => 'primary', 'suppressTabs' => (isset($suppressTabs) ? $suppressTabs : false)]) ?> -
-
\ No newline at end of file diff --git a/modules/backend/widgets/form/partials/_section_secondary-tabs.htm b/modules/backend/widgets/form/partials/_section_secondary-tabs.htm deleted file mode 100644 index cce326832..000000000 --- a/modules/backend/widgets/form/partials/_section_secondary-tabs.htm +++ /dev/null @@ -1,11 +0,0 @@ - - -
-
- makePartial('form_tabs', ['tabs' => $secondaryTabs, 'type' => 'secondary']) ?> -
-
diff --git a/modules/system/controllers/maillayouts/create.htm b/modules/system/controllers/maillayouts/create.htm index f8e64df4b..922902b03 100644 --- a/modules/system/controllers/maillayouts/create.htm +++ b/modules/system/controllers/maillayouts/create.htm @@ -7,11 +7,13 @@ fatalError): ?> - 'layout-item stretch layout-column']) ?> + 'layout']) ?> - formRender() ?> +
+ formRender() ?> +
-
+