Ticket #4674 - Studio: Settings.

modules/boonex/artificer/data/template/mod_text/css/main.css

@@ -50,7 +50,7 @@
 }
 .bx-base-unit-showcase-wrapper .bx-base-text-unit-showcase {
     margin: 0;
-    padding: 0.25rem;
+    padding: 0;
 }
 
 .bx-base-unit-showcase-wrapper.bx-sc-enabled .bx-base-text-unit-showcase {

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

@@ -53,7 +53,6 @@ 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;
 }
@@ -85,10 +84,10 @@ import url(../../../../../../../template/css/forms.css);
 
     text-decoration: none;
 
-    -moz-transform: rotate(90deg);
-    -webkit-transform: rotate(90deg);
-    -ms-transform: rotate(90deg);
-    -o-transform: rotate(90deg);
+    -moz-transform: rotate(180deg);
+    -webkit-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    -o-transform: rotate(180deg);
 
     -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;

plugins_public/tailwind/js/tailwind.config.js

@@ -18,8 +18,12 @@ module.exports = {
     './modules/boonex/**/data/template/**/*.html',
 
     './studio/template/*.html',
+    './studio/template/scripts/*.php',
+    './studio/template/scripts_templ/*.php',
 
     './template/*.html',
+    './template/scripts/*.php',
+    './template/scripts_templ/*.php'
   ],
   safelist: [
     'w-8', 'w-10', 'w-16', 'w-24', 'w-48', 'w-4/6', 

studio/template/css/common.less

@@ -6,10 +6,10 @@
  */
 
 /* body */
-a:not(.bx-btn) {
+a {
 	color: rgba(30, 140, 240, 1); 
 }
-a:not(.bx-btn):hover {
+a:hover {
 	color: rgba(10, 120, 220, 1); 
 }
 .sys-icon:not(.sys-colored),
@@ -30,6 +30,9 @@ a:hover > .sys-icon-a i {
 }
 
 /* design boxes */
+.bx-db-container {
+    box-shadow: none;
+}
 .bx-db-header {
     padding: 1.25rem 1.5rem;
 }

studio/template/css/page.css

@@ -31,6 +31,7 @@ div.bx-std-blocks-line .bx-std-block-wrp {
  * Block Styles
  */
 div.bx-std-block {
+    min-height: calc(100vh - 4rem);
     background-color: rgba(255, 255, 255, 1.0);
 }
 div.bx-std-block-caption {

studio/template/css/page_columns.css

@@ -1,3 +1,7 @@
+.bx-std-bg {
+    background-color: rgba(228, 228, 231, 1);
+}
+
 /*--- 2 columns ---*/
 .bx-std-pc-stretch {
     position: relative;
@@ -18,6 +22,8 @@ div.bx-std-page-columns-cnt {
     display: flex;
     -webkit-align-items: stretch;
     align-items: stretch;
+
+    height: calc(100vh - 4rem);
 }
 div.bx-std-page-column.bx-std-page-menu {
     position: relative;
@@ -25,9 +31,12 @@ div.bx-std-page-column.bx-std-page-menu {
     flex: 0 0 230px;
 
     width: 230px;
+    height: 100%;
 
     background-color: #ffffff;
     box-shadow: inset -1px 0px 0px rgba(240, 240, 240, 0.2);
+    
+    overflow-y: auto;
 }
 div.bx-std-page-column.bx-std-page-menu div.bx-std-page-column-cnt {
     position: -webkit-sticky;
@@ -40,7 +49,10 @@ div.bx-std-page-column.bx-std-page-content {
     -webkit-flex-grow: 2;
     flex-grow: 2;
 
+    height: 100%;
+
     overflow-x: hidden;
+    overflow-y: auto;
 }
 div.bx-std-page-column.bx-std-page-content div.bx-std-page-column-cnt {
     width: 100%;

studio/template/css/settings.css

@@ -1,26 +1,31 @@
 .bx-std-block .bx-std-block-content {
-    padding-left: 0;
-    padding-right: 0;
+    padding: 0;
 }
 
-#adm-settings-form {
+#adm-settings-form-categorized {
     position: relative;
-    padding-bottom: 4.5rem;
+    padding-bottom: 5.5rem;
 }
-#adm-settings-form .bx-form-advanced-wrapper {
-    height: calc(100vh - 14rem);
+#adm-settings-form-categorized .bx-form-advanced-wrapper {
+    height: calc(100vh - 9.5rem);
     overflow-y: auto;
 }
-#adm-settings-form .bx-form-advanced-wrapper .bx-form-section-wrapper {
+#adm-settings-form .bx-form-advanced-wrapper .bx-form-section-wrapper,
+#adm-settings-form-categorized .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 {
+#adm-settings-form-categorized .bx-form-advanced-wrapper .bx-form-section-wrapper:last-child {
     position: absolute;
     bottom: 0;
     width: 100%;
     
     margin: 0;
-    padding-top: 1.5rem;
+    padding: 1.5rem;
 
     border-top: 1px solid rgb(228, 228, 231, 1);
+}
+
+#adm-settings-form .bx-form-advanced-wrapper .bx-form-section-wrapper:first-child,
+#adm-settings-form-categorized .bx-form-advanced-wrapper .bx-form-section-wrapper:first-child {
+    padding-top: 1rem;
 }

studio/template/page_block.html

@@ -1,4 +1,4 @@
-<div class="bx-std-block rounded-2xl bx-def-margin-top">
+<div class="bx-std-block">
     __caption__
     __panel_top__
     <div class="bx-std-block-content bx-clearfix">__items__</div>

studio/template/page_content_2_col.html

@@ -1,8 +1,8 @@
 <div class="bx-std-page-columns-cnt bx-std-pc-stretch">
-    <div class="bx-std-page-column bx-std-page-menu">
+    <div class="bx-std-page-column bx-std-page-menu border-r">
         <div class="bx-std-page-column-cnt bx-def-margin-sec-topbottom" id="bx-std-pc-menu">__page_menu_code__</div>
     </div>
     <div class="bx-std-page-column bx-std-page-content bx-std-pc-stretch">
-        <div class="bx-std-page-column-cnt bx-def-padding-rightbottomleft bx-def-box-sizing" id="bx-std-pc-content">__page_main_code__</div>
+        <div class="bx-std-page-column-cnt" id="bx-std-pc-content">__page_main_code__</div>
     </div>
 </div>

studio/template/scripts/BxBaseStudioOptions.php

@@ -66,7 +66,7 @@ class BxBaseStudioOptions extends BxDolStudioOptions
         $bWrap = count($aCategories) > 1;
         $aForm = [
             'form_attrs' => [
-                'id' => 'adm-settings-form',
+                'id' => 'adm-settings-form' . ($bWrap ? '-categorized' : ''),
                 'name' => 'adm-settings-form',
                 'action' => bx_append_url_params($this->sBaseUrl, ['type' => $this->sType]),
                 'method' => 'post',

template/css/forms.css

@@ -40,7 +40,6 @@
     text-transform: uppercase;
 }
 
-.bx-form-section-header .bx-form-section-title a,
 .bx-form-section-header .bx-form-section-title .sys-icon {
     color: inherit;
 }
@@ -96,10 +95,10 @@
 
     text-decoration:none;
 
-    -moz-transform: rotate(90deg);
-    -webkit-transform: rotate(90deg);
-    -ms-transform: rotate(90deg);
-    -o-transform: rotate(90deg);
+    -moz-transform: rotate(180deg);
+    -webkit-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    -o-transform: rotate(180deg);
 
     -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;

template/form_field_section_title.html

@@ -0,0 +1,14 @@
+<bx_if:show_view>
+    <div class="bx-form-section-title">__caption__<bx_if:show_view_info><br /><span class="bx-def-font-grayed">__info__</span></bx_if:show_view_info></div>
+</bx_if:show_view>
+<bx_if:show_default>
+    <div class="bx-form-section-title group flex justify-between align-center flex-nowrap w-full">
+        <div class="flex-1">
+            <a class="block w-full text-inherit hover:text-gray-900 font-semibold" href="javascript:void(0);">__caption__</a>
+            <bx_if:show_default_info>
+                <span class="bx-def-font-grayed block w-full">__info__</span>
+            </bx_if:show_default_info>
+        </div>
+        <u class="bx-form-section-toggler"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path></svg></u>
+    </div>
+</bx_if:show_default>

template/scripts/BxBaseFormView.php

@@ -1105,10 +1105,38 @@ BLAH;
         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_process_output($aInput['caption'], BX_DATA_HTML) . (!empty($aInput['info']) ? '<br /><span class="bx-def-font-grayed">' . bx_process_output($aInput['info']) . '</span>' : '') . '</div>';
-        else
-            $sTitle = '<div class="bx-form-section-title flex justify-between align-center flex-nowrap w-full"><div class="flex-1"><a class="block w-full" href="javascript:void(0);">' . bx_process_output($aInput['caption'], BX_DATA_HTML) . '</a>' . (!empty($aInput['info']) ? '<span class="bx-def-font-grayed block w-full">' . bx_process_output($aInput['info']) . '</span>' : '') . '</div><u class="bx-form-section-toggler"><i class="sys-icon chevron-right"></i></u></div>';
+        $bViewMode = !empty($this->aParams['view_mode']);
+
+        $sCaption = bx_process_output($aInput['caption'], BX_DATA_HTML);
+        $sInfo = bx_process_output($aInput['info']);
+        $bInfo = !empty($sInfo);
+
+        $sTitle = $this->oTemplate->parseHtmlByName('form_field_section_title.html', [
+            'bx_if:show_view' => [
+                'condition' => $bViewMode,
+                'content' => [
+                    'caption' => $sCaption,
+                    'bx_if:show_view_info' => [
+                        'condition' => $bInfo,
+                        'content' => [
+                            'info' => $sInfo
+                        ]
+                    ]
+                ]
+            ],
+            'bx_if:show_default' => [
+                'condition' => !$bViewMode,
+                'content' => [
+                    'caption' => $sCaption,
+                    'bx_if:show_default_info' => [
+                        'condition' => $bInfo,
+                        'content' => [
+                            'info' => $sInfo
+                        ]
+                    ]
+                ]
+            ]
+        ]);
 
         if (isset($aInput['name'])) {
             if (!isset($aInput['tr_attrs']) || !is_array($aInput['tr_attrs']))
@@ -2279,7 +2307,7 @@ BLAH;
         if(!$aAttrs || !is_array($aAttrs))
             $aAttrs = [];
 
-        $sAttrs = bx_convert_array2attrs($aAttrs, "bx-form-section bx-form-section-" . ($sTitle ? "header" : "divider") . " px-4 py-2 border rounded-lg");
+        $sAttrs = bx_convert_array2attrs($aAttrs, "bx-form-section bx-form-section-" . ($sTitle ? "header" : "divider") . " p-4 border rounded-lg");
 
         $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";