Studio: Settings.

inc/js/jquery.webForms.js

@@ -116,7 +116,6 @@
 
             };
 
-            $('<u class="bx-form-section-toggler"><i class="sys-icon chevron-right"></i></u>').prependTo($('.bx-form-section-title', eFormSection));
             $('.bx-form-section-title:first', eFormSection).click(fCallback);
         });
 

modules/boonex/artificer/data/template/system/css/forms.css

@@ -7,8 +7,8 @@ import url(../../../../../../../template/css/forms.css);
 }
 
 .bx-form-advanced-wrapper .bx-form-section-divider:first-child {
-    border-top:none; 
-    padding-top:0; 
+    border: none; 
+    padding: 0; 
 }
 
 .bx-form-advanced-wrapper .bx-form-section-divider:first-child .bx-form-section-content {
@@ -39,8 +39,6 @@ import url(../../../../../../../template/css/forms.css);
 
 .bx-form-section {
     margin: 0;
-    padding: 0;
-    border: none;
 }
 
 .bx-form-section-header .bx-form-section-title {
@@ -55,13 +53,17 @@ import url(../../../../../../../template/css/forms.css);
     text-transform: uppercase;
 }
 
+.bx-form-section-header .bx-form-section-title a,
+.bx-form-section-header .bx-form-section-title .sys-icon {
+    color: inherit !important;
+}
+
 .bx-form-section-header .bx-form-section-title u {
     cursor: pointer;
 }
 
-.bx-form-section-header .bx-form-section-title span {
+.bx-form-section-header .bx-form-section-title .bx-form-section-info {
     width: 100%;
-    padding-left: 1.25rem;
 
     white-space: nowrap;
     text-transform: none;

studio/template/css/settings.css

@@ -0,0 +1,26 @@
+.bx-std-block .bx-std-block-content {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+#adm-settings-form {
+    position: relative;
+    padding-bottom: 4.5rem;
+}
+#adm-settings-form .bx-form-advanced-wrapper {
+    height: calc(100vh - 12rem);
+    overflow-y: auto;
+}
+#adm-settings-form .bx-form-advanced-wrapper .bx-form-section-wrapper {
+    padding: 0 1.5rem;
+}
+#adm-settings-form .bx-form-advanced-wrapper .bx-form-section-wrapper:last-child {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    
+    margin: 0;
+    padding-top: 1.5rem;
+
+    border-top: 1px solid rgb(228, 228, 231, 1);
+}

studio/template/scripts/BxBaseStudioSettings.php

@@ -17,7 +17,7 @@ class BxBaseStudioSettings extends BxDolStudioSettings
 
     public function getPageCss()
     {
-        return array_merge(parent::getPageCss(), $this->oOptions->getCss());
+        return array_merge(parent::getPageCss(), $this->oOptions->getCss(), ['settings.css']);
     }
 
     public function getPageJs()

template/css/forms.css

@@ -4,8 +4,8 @@
 }
 
 .bx-form-advanced-wrapper .bx-form-section-divider:first-child {
-    border-top:none; 
-    padding-top:0; 
+    border:none; 
+    padding:0; 
 }
 
 .bx-form-advanced-wrapper .bx-form-section-divider:first-child .bx-form-section-content {
@@ -24,13 +24,8 @@
     position:relative;
 }
 
-.bx-form-section {
-    padding:0px;
-}
-
 .bx-form-section {
     margin:0;
-    border: none;
 }
 
 .bx-form-section-header .bx-form-section-title {
@@ -45,13 +40,17 @@
     text-transform: uppercase;
 }
 
+.bx-form-section-header .bx-form-section-title a,
+.bx-form-section-header .bx-form-section-title .sys-icon {
+    color: inherit;
+}
+
 .bx-form-section-header .bx-form-section-title u {
     cursor: pointer;
 }
 
-.bx-form-section-header .bx-form-section-title span {
+.bx-form-section-header .bx-form-section-title .bx-form-section-info {
     width: 100%;
-    padding-left: 1.25rem;
 
     white-space: nowrap;
     text-transform: none;

template/scripts/BxBaseFormView.php

@@ -1085,51 +1085,38 @@ BLAH;
         $aAttrs = empty($aInput['attrs']) ? '' : $aInput['attrs'];
 
         // if there is no caption - show divider only
-
-        if (empty($aInput['caption'])) {
-            $sCode = $this->{$this->_sSectionClose}();
-            $sCode .= $this->{$this->_sSectionOpen}($aAttrs);
-            return $sCode;
-        }
+        if (empty($aInput['caption']))
+            return $this->{$this->_sSectionOpen}($aAttrs);
 
         // if section is collapsed by default, add necessary code
-
         $sClassAddCollapsable = 'bx-form-collapsable';
         if (isset($aInput['collapsed']) and $aInput['collapsed'])
             $sClassAddCollapsable .= ' bx-form-collapsed bx-form-section-hidden';
 
         // display section with caption
-
-        $sCode = $this->{$this->_sSectionClose}();
-
         if (empty($aAttrs))
             $aAttrs = array('class' => 'bx-form-collapsable ' . $sClassAddCollapsable);
         else
             $aAttrs['class'] .= ' bx-form-collapsable ' . $sClassAddCollapsable;
 
         if (isset($this->aParams['view_mode']) && $this->aParams['view_mode'])
-            $sTitle = '<div class="bx-form-section-title bx-def-font-grayed bx-def-font-large">' . bx_process_output($aInput['caption'], BX_DATA_HTML) . (!empty($aInput['info']) ? '<br /><span>' . bx_process_output($aInput['info']) . '</span>' : '') . '</div>';
+            $sTitle = '<div class="bx-form-section-title">' . bx_process_output($aInput['caption'], BX_DATA_HTML) . (!empty($aInput['info']) ? '<br /><span>' . bx_process_output($aInput['info']) . '</span>' : '') . '</div>';
         else
-            $sTitle = '<div class="bx-form-section-title bx-def-font-grayed bx-def-font-large"><a href="javascript:void(0);">' . bx_process_output($aInput['caption'], BX_DATA_HTML) . '</a>' . (!empty($aInput['info']) ? '<br /><span>' . bx_process_output($aInput['info']) . '</span>' : '') . '</div>';
+            $sTitle = '<div class="bx-form-section-title"><div class="flex justify-between align-center w-full"><a class="flex-1" href="javascript:void(0);">' . bx_process_output($aInput['caption'], BX_DATA_HTML) . '</a><u class="bx-form-section-toggler"><i class="sys-icon chevron-right"></i></u></div>' . (!empty($aInput['info']) ? '<div class="bx-form-section-info bx-def-font-grayed">' . bx_process_output($aInput['info']) . '</div>' : '') . '</div>';
 
         if (isset($aInput['name'])) {
             if (!isset($aInput['tr_attrs']) || !is_array($aInput['tr_attrs']))
                 $aInput['tr_attrs'] = [];
+
             $aInput['tr_attrs']['id'] = "bx-form-section-" . $aInput['name'];
         }
 
-        $sCode .= $this->{$this->_sSectionOpen}($aAttrs, $sTitle, !empty($aInput['tr_attrs']) ? $aInput['tr_attrs'] : []);
-
-        return $sCode;
+        return $this->{$this->_sSectionOpen}($aAttrs, $sTitle, !empty($aInput['tr_attrs']) ? $aInput['tr_attrs'] : []);
     }
 
     function genBlockEnd()
     {
-        $aNextTbodyAdd = false; // need to have some default
-        $sCode = '';
-        $sCode .= $this->{$this->_sSectionClose}();
-        $sCode .= $this->{$this->_sSectionOpen}($aNextTbodyAdd);
-        return $sCode;
+        return $this->{$this->_sSectionClose}();
     }
 
     /**
@@ -2275,43 +2262,30 @@ BLAH;
         }
     }
 
-    function getOpenSection($aAttrs = array(), $sTitle = '', $aWrapperAttrs = [])
+    function getOpenSection($aAttrs = [], $sTitle = '', $aWrapperAttrs = [])
     {
-        if (!$this->_isSectionOpened) {
-
-            if (!$aAttrs || !is_array($aAttrs))
-                $aAttrs = array();
-
-            if ($sTitle)
-                $sClassesAdd = "bx-form-section-header";
-            else
-                $sClassesAdd = "bx-form-section-divider";
+        $sClose = '';
+        if($this->_isSectionOpened)
+            $sClose = $this->{$this->_sSectionClose}();
 
-            $sAttrs = bx_convert_array2attrs($aAttrs, "bx-form-section bx-def-padding-sec-top bx-def-border-top " . $sClassesAdd);
-
-            $sWrapperAttrs = bx_convert_array2attrs($aWrapperAttrs, "bx-form-section-wrapper bx-def-margin-top");
-
-            $this->_isSectionOpened = true;
-
-            return "<!-- form header content begins -->\n <div $sWrapperAttrs> <div $sAttrs> $sTitle <div class=\"bx-form-section-content bx-def-padding-top bx-def-padding-bottom" . ($sTitle ? ' bx-def-padding-left bx-def-padding-right' : '') . "\">\n";
+        $sWrapperAttrs = bx_convert_array2attrs($aWrapperAttrs, "bx-form-section-wrapper my-4");
+            
+        if(!$aAttrs || !is_array($aAttrs))
+            $aAttrs = [];
 
-        } else {
+        $sAttrs = bx_convert_array2attrs($aAttrs, "bx-form-section bx-form-section-" . ($sTitle ? "header" : "divider") . " px-4 py-2 border rounded-lg");
 
-            return '';
-        }
+        $this->_isSectionOpened = true;
+        return $sClose . "<!-- form header content begins -->\n <div $sWrapperAttrs> <div $sAttrs> $sTitle <div class=\"bx-form-section-content py-4" . ($sTitle ? ' px-4' : '') . "\">\n";
     }
 
     function getCloseSection()
     {
-        if ($this->_isSectionOpened) {
-
-            $this->_isSectionOpened = false;
-            return "</div> </div> </div> \n<!-- form header content ends -->\n";
-
-        } else {
-
+        if(!$this->_isSectionOpened)
             return '';
-        }
+
+        $this->_isSectionOpened = false;
+        return "</div> </div> </div> \n<!-- form header content ends -->\n";
     }
 
     function getOpenSectionViewMode($aAttrs = array(), $sTitle = '', $aWrapperAttrs = [])