Ticket #4847 - Studio: Layout changes. Stage 3.

install/sql/system.sql

@@ -397,12 +397,12 @@ INSERT INTO `sys_options`(`category_id`, `name`, `caption`, `value`, `type`, `ex
 
 (@iCategoryId, 'sys_form_lpc_enable', '_adm_stg_cpt_option_sys_form_lpc_enable', 'on', 'checkbox', '', '', '', '', 260),
 
-(@iCategoryId, 'sys_std_show_header_left', '_adm_stg_cpt_option_sys_std_show_header_left', 'on', 'checkbox', '', '', '', '', 270),
-(@iCategoryId, 'sys_std_show_header_left_search', '_adm_stg_cpt_option_sys_std_show_header_left_search', 'on', 'checkbox', '', '', '', '', 271),
+(@iCategoryId, 'sys_std_show_header_left', '_adm_stg_cpt_option_sys_std_show_header_left', '', 'checkbox', '', '', '', '', 270),
+(@iCategoryId, 'sys_std_show_header_left_search', '_adm_stg_cpt_option_sys_std_show_header_left_search', '', 'checkbox', '', '', '', '', 271),
 (@iCategoryId, 'sys_std_show_header_center', '_adm_stg_cpt_option_sys_std_show_header_center', 'on', 'checkbox', '', '', '', '', 275),
 (@iCategoryId, 'sys_std_show_header_right', '_adm_stg_cpt_option_sys_std_show_header_right', 'on', 'checkbox', '', '', '', '', 280),
-(@iCategoryId, 'sys_std_show_header_right_search', '_adm_stg_cpt_option_sys_std_show_header_right_search', '', 'checkbox', '', '', '', '', 281),
-(@iCategoryId, 'sys_std_show_header_right_site', '_adm_stg_cpt_option_sys_std_show_header_right_site', 'on', 'checkbox', '', '', '', '', 282),
+(@iCategoryId, 'sys_std_show_header_right_search', '_adm_stg_cpt_option_sys_std_show_header_right_search', 'on', 'checkbox', '', '', '', '', 281),
+(@iCategoryId, 'sys_std_show_header_right_site', '_adm_stg_cpt_option_sys_std_show_header_right_site', '', 'checkbox', '', '', '', '', 282),
 (@iCategoryId, 'sys_std_show_launcher_left', '_adm_stg_cpt_option_sys_std_show_launcher_left', '', 'checkbox', '', '', '', '', 285),
 
 (@iCategoryId, 'sys_embed_microlink_key', '_adm_stg_cpt_option_sys_embed_microlink_key', '', 'digit', '', '', '', '', 300);

studio/classes/BxDolStudioMenuTop.php

@@ -61,13 +61,12 @@ class BxDolStudioMenuTop extends BxDol implements iBxDolSingleton
             'menu_items' => []
         ];
 
-        if(false)
-            $this->aItems[BX_DOL_STUDIO_MT_CENTER]['menu_items']['launcher'] = [
-                'name' => 'launcher',
-                'icon' => 'wi-home.svg',
-                'link' => '{url_studio}',
-                'title' => '_adm_tmi_cpt_launcher'
-            ];
+        $this->aItems[BX_DOL_STUDIO_MT_CENTER]['menu_items']['launcher'] = [
+            'name' => 'launcher',
+            'icon' => 'wi-home.svg',
+            'link' => '{url_studio}',
+            'title' => '_adm_tmi_cpt_launcher'
+        ];
 
         //--- Get Featured
         $aMenuItems = array();

studio/js/page.js

@@ -36,6 +36,9 @@ BxDolStudioPage.prototype.togglePopup = function(sName, oLink) {
     var $this = this;
 
     var sId = '#bx-std-pcap-menu-popup-' + sName;
+    if(sName == 'actions' && $(sId).length == 0)
+        sId = '#bx-std-pmenu-popup-' + sName;
+
     if($(sId + ':visible').length > 0) {
         $(sId).dolPopupHide();
         return;

studio/template/css/menu_top.css

@@ -35,7 +35,12 @@ div.bx-std-menu-top.bx-std-menu-top-center {
     flex-grow: 1;
     height: 3.5rem;
 }
-div.bx-std-menu-top.bx-std-menu-top-center .bx-std-menu-top-center-cnt {
+div.bx-std-menu-top:nth-child(1).bx-std-menu-top-center {
+    position: relative;
+    display: -webkit-flex;
+    display: flex;
+}
+div.bx-std-menu-top:nth-child(2).bx-std-menu-top-center .bx-std-menu-top-center-cnt {
     position: absolute;
     left: 0;
     width: 100vw;
@@ -315,14 +320,16 @@ body > .bx-popup-wrapper.bx-std-mod-popup-settings-wrapper,
 #bx-std-pcap-menu-popup-help,
 #bx-std-pcap-menu-popup-assistant,
 #bx-std-pcap-menu-popup-actions,
-#bx-std-pcap-menu-popup-account {
+#bx-std-pcap-menu-popup-account,
+#bx-std-pmenu-popup-actions {
     overflow: visible;
 }
 .bx-std-mod-popup-settings-wrapper .bx-popup-gap,
 #bx-std-pcap-menu-popup-help .bx-popup-gap,
 #bx-std-pcap-menu-popup-assistant .bx-popup-gap,
 #bx-std-pcap-menu-popup-actions .bx-popup-gap,
-#bx-std-pcap-menu-popup-account .bx-popup-gap {
+#bx-std-pcap-menu-popup-account .bx-popup-gap,
+#bx-std-pmenu-popup-actions .bx-popup-gap {
     margin-left: 0;
     margin-right: 0;
 }
@@ -335,7 +342,8 @@ body > .bx-popup-wrapper.bx-std-mod-popup-settings-wrapper,
     border-width: 0; 
     background-color: #001529;
 }
-#bx-std-pcap-menu-popup-actions .bx-popup-content {
+#bx-std-pcap-menu-popup-actions .bx-popup-content,
+#bx-std-pmenu-popup-actions .bx-popup-content {
     padding: 1.0rem;
 }
 #bx-std-pcap-menu-popup-account .bx-popup-content {

studio/template/css/page_columns.css

@@ -23,6 +23,7 @@ div.bx-std-page-columns-cnt {
     */
 }
 
+/*--- Page Menu ---*/
 div.bx-std-page-column.bx-std-page-menu {
     position: relative;
     -webkit-flex: 0 0 20rem;
@@ -31,8 +32,8 @@ div.bx-std-page-column.bx-std-page-menu {
     width: 20rem;
     height: 100%;
 
-    border-right: 1px solid rgb(209, 213, 219);
-    background-color: rgb(229, 231, 235);
+    backdrop-filter: blur(40px);
+    box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.05);
 
     overflow-y: auto;
 }
@@ -45,7 +46,19 @@ div.bx-std-page-column.bx-std-page-menu div.bx-std-page-column-cnt {
     top: 0;
     padding-top: 5rem;
 }
-    
+div.bx-std-page-column.bx-std-page-menu .bx-std-pcm-actions {
+    justify-content: center;
+    -webkit-justify-content: center;
+
+    width: 2.5rem;
+    padding: 0;    
+}
+div.bx-std-page-column.bx-std-page-menu .bx-std-pcm-actions img {
+    width: 2.0rem;
+    height: 2.0rem;
+}
+ 
+/*--- Page Content ---*/
 div.bx-std-page-column.bx-std-page-content {
     position: relative;
     -webkit-flex-grow: 2;

studio/template/menu_top_toolbar.html

@@ -1,6 +1,6 @@
 <ul class="bx-menu-toolbar gap-x-4">
     <bx_if:show_search>
-        <li class="bx-menu-tab-search flex-auto">
+        <li class="bx-menu-tab-search<bx_if:show_active> bx-mt-active</bx_if:show_active> flex-auto">
             <div class="bg-gray-800 hover:bg-gray-700 text-gray-300 hover:text-white hover:ring-4 hover:ring-gray-800 hover:ring-offset-4 hover:ring-offset-black active:opacity-80 duration-300">
                 <a class="text-gray-300 hover:text-white" href="javascript:void(0)" onclick="javascript:$(this).parents('li:first').toggleClass('bx-mt-active')">
                     <svg class="flex-none ml-1.5" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">

studio/template/page_content_2_col.html

@@ -1,6 +1,6 @@
 <div class="bx-std-page-columns-cnt bx-std-pc-stretch">
-    <div class="bx-std-page-column bx-std-page-menu border-r">
-        <div class="bx-std-page-column-cnt bx-def-margin-sec-topbottom px-4" id="bx-std-pc-menu">__page_menu_code__</div>
+    <div class="bx-std-page-column bx-std-page-menu bg-white/90 border-r">
+        <div class="bx-std-page-column-cnt bx-def-margin-sec-topbottom px-4 space-y-4">__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 flex flex-col gap-6" id="bx-std-pc-content">__page_main_code__</div>

studio/template/page_menu.html

@@ -0,0 +1,13 @@
+<div class="bx-std-pcm-title text-2xl font-bold" id="bx-std-pc-title">
+    <div class="bx-std-pcm-title-cnt flex justify-between px-2">
+        <div>__title__</div>
+        <bx_if:show_actions>
+            <div>
+                <a class="bx-std-pcm-actions bx-btn" href="javascript:void(0)" onclick="__onclick__" title="<bx_text_attribute:_adm_txt_show_actions />">
+                    <img src="<bx_icon_url:mi-cog.svg />" />
+                </a>
+            </div>
+        </bx_if:show_actions>
+    </div>
+</div>
+<div class="bx-std-pcm-menu" id="bx-std-pc-menu">__menu__</div>

studio/template/scripts/BxBaseStudioMenuTop.php

@@ -55,7 +55,12 @@ class BxBaseStudioMenuTop extends BxDolStudioMenuTop
                     $sContent = $oTemplate->parseHtmlByContent($sContent, [
                         'bx_if:show_search' => [
                             'condition' => $this->sPageName == 'home' && getParam('sys_std_show_header_right_search') == 'on',
-                            'content' => []
+                            'content' => [
+                                'bx_if:show_active' => [
+                                    'condition' => true,
+                                    'content' => []
+                                ]
+                            ]
                         ]
                     ]);
                 }

studio/template/scripts/BxBaseStudioPage.php

@@ -99,6 +99,9 @@ class BxBaseStudioPage extends BxDolStudioPage
         return _t(!$this->bPageMultiple ? $this->aPage['caption'] : $this->aPage[$this->sPageSelected]['caption']);
     }
 
+    /*
+     * Left area in in page header. Contains 'home' button, page caption and search.
+     */
     public function getPageBreadcrumb()
     {
         $bPageHome = $this->aPage['name'] == 'home';
@@ -203,7 +206,7 @@ class BxBaseStudioPage extends BxDolStudioPage
             'content' => $sContent
         ));
     }
-    
+
     protected function getPageCaptionAssistant()
     {
         if(!$this->_bShowHeaderRightAssistant)

studio/template/scripts/BxBaseStudioWidget.php

@@ -10,14 +10,18 @@
 
 class BxBaseStudioWidget extends BxDolStudioWidget
 {
+    protected $bPageMenuTitle;
     protected $bPageMenuIconsInline;
+
     protected $aPageCodeNoWrap;
 
     public function __construct($mixedPageName)
     {
         parent::__construct($mixedPageName);
 
+        $this->bPageMenuTitle = true;
         $this->bPageMenuIconsInline = true;
+
         $this->aPageCodeNoWrap = [];
     }
 
@@ -47,17 +51,18 @@ class BxBaseStudioWidget extends BxDolStudioWidget
         $oTemplate = BxDolStudioTemplate::getInstance();
         $oFunctions = BxTemplStudioFunctions::getInstance();
 
+        $sActions = '';
         $bActions = false;
-        $sActions = $this->getPageCaptionActions();
-        if(($bActions = strlen($sActions)) > 0)
+        if(false && ($sActions = $this->getPageCaptionActions()) && ($bActions = strlen($sActions)) > 0)    //--- Hidden for now.
             $sActions = $oFunctions->transBox('bx-std-pcap-menu-popup-actions', $sActions, true);
 
+        $sHelp = '';
         $bHelp = false;
-        $sHelp = $this->getPageCaptionHelp();
-        if(($bHelp = strlen($sHelp)) > 0)
+        if(false && ($sHelp = $this->getPageCaptionHelp()) && ($bHelp = strlen($sHelp)) > 0)    //--- Hidden for now.
             $sHelp = $oFunctions->transBox('bx-std-pcap-menu-popup-help', $sHelp, true);
 
-        $oTemplate->addInjection('injection_header', 'text', $sActions . $sHelp);
+        if($bActions || $bHelp)
+            $oTemplate->addInjection('injection_header', 'text', $sActions . $sHelp);
 
         //--- Menu Right ---//
         $aItemsRight = [];
@@ -115,6 +120,30 @@ class BxBaseStudioWidget extends BxDolStudioWidget
         return $sResult;
     }
 
+    public function getPageMenu($aMenu = [], $aMarkers = [])
+    {
+        $sMenu = parent::getPageMenu($aMenu, $aMarkers);
+        if(!$sMenu || !$this->bPageMenuTitle)
+            return $sMenu;
+
+        $oTemplate = BxDolStudioTemplate::getInstance();
+
+        $bActions = false;
+        if(($sActions = $this->getPageCaptionActions()) && ($bActions = strlen($sActions)) > 0)
+            $oTemplate->addInjection('injection_header', 'text', BxTemplStudioFunctions::getInstance()->transBox('bx-std-pmenu-popup-actions', $sActions, true));
+
+        return $oTemplate->parseHtmlByName('page_menu.html', [
+            'title' => _t($this->aPage['caption']),
+            'bx_if:show_actions' => [
+                'condition' => $bActions,
+                'content' => [
+                    'onclick' => BX_DOL_STUDIO_PAGE_JS_OBJECT . ".togglePopup('actions', this)",
+                ]
+            ],
+            'menu' => $sMenu
+        ]);
+    }
+
     public function getPageCode($sPage = '', $bWrap = true)
     {
         $sResult = parent::getPageCode($sPage, $bWrap);