Ticket #4674 - Studio: Layout changes.

modules/boonex/developer/template/css/main.css

@@ -7,7 +7,8 @@ body.bx-dev-page-body-columns div.bx-std-page-menu {
     background-color: #4c6678;
     box-shadow: inset -1px 0px 0px rgba(240, 240, 240, 0.2);
 }
-div.bx-std-page-menu div.bx-std-page-column-cnt {
+body.bx-dev-page-body-single div.bx-std-page-menu div.bx-std-page-column-cnt,
+body.bx-dev-page-body-columns div.bx-std-page-menu div.bx-std-page-column-cnt {
     padding-left: 0;
     padding-right: 0;
 }
@@ -95,9 +96,9 @@ div.bx-dev-page-columns-cnt {
 
 div.bx-dev-page-column.bx-dev-page-menu {
     position: relative;
-    -webkit-flex: 0 0 230px;
-    flex: 0 0 230px;
-    width: 230px;
+    -webkit-flex: 0 0 20rem;
+    flex: 0 0 20rem;
+    width: 20rem;
     background-color: #ffffff;
     
     overflow-y: auto;

modules/boonex/developer/template/page_content.html

@@ -1,6 +1,6 @@
 <div class="bx-dev-page-columns-cnt">
     <div class="bx-dev-page-column bx-dev-page-menu border-r">
-        <div class="bx-dev-page-column-cnt bx-def-margin-sec-topbottom" id="bx-dev-pc-menu">__page_menu_code__</div>
+        <div class="bx-dev-page-column-cnt p-4" id="bx-dev-pc-menu">__page_menu_code__</div>
     </div>
     <div class="bx-dev-page-column bx-dev-page-content">
         <div class="bx-dev-page-column-cnt" id="bx-dev-pc-content">__page_main_code__</div>

studio/template/bp_add_block_form.html

@@ -1,5 +1,5 @@
 <div class="adm-bp-cbf-left bx-def-border-color-layout">
-    <div class="adm-bp-cbf-left-cnt bx-def-padding-sec-top">
+    <div class="adm-bp-cbf-left-cnt pt-4 px-2">
         __menu__
     </div>
 </div>

studio/template/bp_blocks.html

@@ -26,7 +26,7 @@
                 <div class="adm-bpb-description bx-def-font-grayed">__module__ &bull; __visible_for__</div>
             </div>
             <bx_if:show_checkbox>
-                <div class="adm-bpb-checkbox">__content__</div>
+                <div class="adm-bpb-checkbox pr-2">__content__</div>
             </bx_if:show_checkbox>
         </div>
     </div>

studio/template/bp_edit_page_form.html

@@ -1,5 +1,5 @@
 <div class="adm-bp-epf-left bx-def-border-color-layout">
-    <div class="adm-bp-epf-left-cnt bx-def-padding-sec-top">
+    <div class="adm-bp-epf-left-cnt pt-4 px-2">
         __menu__
     </div>
 </div>

studio/template/css/builder_page.css

@@ -79,6 +79,9 @@ div.adm-bpb-icon-bg {
     background-color: #323c46;
     border-radius: 0.5rem;
 }
+div.adm-bpb-icon img {
+    border-radius: 0.5rem;
+}
 div.adm-bpb-icon i.sys-icon {
     position: absolute;
     top: 0px;
@@ -221,6 +224,9 @@ div.adm-bp-epf-left {
     overflow-y: auto; 
 }
 div.adm-bp-epf-left-cnt {}
+div.adm-bp-epf-left .bx-std-pmen-item {
+    height: 2.5rem;
+}
 div.adm-bp-epf-right {
     position: relative;
     width: 620px;
@@ -243,8 +249,8 @@ div.adm-bp-layout {
 	float: left;
 	width: 66px;
 	height: 66px;
-	margin-left: 10px;
-	margin-right: 10px; 
+	margin-left: 0.5rem;
+	margin-right: 0.5rem;
 	border: 2px solid transparent;
 }
 div.adm-bp-layout-active {

studio/template/css/general.css

@@ -153,12 +153,27 @@ div.bx-std-pmen-item-cnt {
 span.bx-std-pmen-item-counter {}
 span.bx-std-pmen-ic-num {}
 
-div.bx-std-pmen-item img,
-div.bx-std-pmen-item svg,
-div.bx-std-pmen-item .sys-icon {
+div.bx-std-pmen-item .bx-std-pmen-ic-icon {
+    display: none;
+    flex: 0 0 auto;
+
     width: 3.0rem;
     height: 3.0rem;
+    box-sizing: border-box;
+
     margin-right: 1rem;
+    
+    border-radius: 0.75rem;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+div.bx-std-pmen-item img,
+div.bx-std-pmen-item svg,
+div.bx-std-pmen-item .sys-icon {
+    width: 100%;
+    height: 100%;
+
     border-radius: 0.75rem;
 }
 

studio/template/menu_side.html

@@ -2,12 +2,14 @@
     <div id="bx-std-pmi-__name__" class="bx-std-pmen-item __class_add__">
         <a href="__link__" onclick="__onclick__" title="__title_attr__"__attrs__>
             <div class="bx-std-pmen-item-cnt">
-                <bx_if:icon>
-                    <i class="sys-icon __icon__ bx-def-margin-sec-right"></i>
-                </bx_if:icon>
-                <bx_if:image><img src="__icon_url__" /></bx_if:image>
-                <bx_if:image_inline>__image__</bx_if:image_inline>
-                <span>__title__</span>
+                <div class="bx-std-pmen-ic-icon" style="<bx_if:show_icon>display: block;</bx_if:show_icon><bx_if:show_icon_bg>padding:0.25rem; background-image: url('__icon_bg_url__');</bx_if:show_icon_bg>">
+                    <bx_if:icon>
+                        <i class="sys-icon __icon__ bx-def-margin-sec-right"></i>
+                    </bx_if:icon>
+                    <bx_if:image><img src="__icon_url__" /></bx_if:image>
+                    <bx_if:image_inline>__image__</bx_if:image_inline>
+                </div>
+                <div class="bx-std-pmen-ic-title">__title__</div>
             </div>
         </a>                
     </div>                

studio/template/scripts/BxBaseStudioBuilderPage.php

@@ -118,11 +118,13 @@ class BxBaseStudioBuilderPage extends BxDolStudioBuilderPage
         $aMenuItems = array(
             BX_DOL_STUDIO_MODULE_SYSTEM => array(
                 'name' => BX_DOL_STUDIO_MODULE_SYSTEM,
-                'icon' => 'cog',
+                'icon' => 'mi-cog.svg',
+                'icon_bg' => true
             ),
             BX_DOL_STUDIO_MODULE_CUSTOM => array(
                 'name' => BX_DOL_STUDIO_MODULE_CUSTOM,
-                'icon' => 'wrench',
+                'icon' => 'mi-wrench.svg',
+                'icon_bg' => true,
                 'title' => '_adm_bp_cpt_type_' . BX_DOL_STUDIO_MODULE_CUSTOM,
             )
         );
@@ -142,15 +144,12 @@ class BxBaseStudioBuilderPage extends BxDolStudioBuilderPage
                 $aMenuItems[$sName]['icon'] = BxDolStudioUtils::getModuleIcon($aModuleDb, 'menu', false); 
         }
 
-        $aMenu = array();
+        $aMenu = [];
         foreach($aMenuItems as $aMenuItem)
-            $aMenu[] = array(
-                'name' => $aMenuItem['name'],
-                'icon' => $aMenuItem['icon'],
+            $aMenu[] = array_merge($aMenuItem, [
                 'link' =>  sprintf($this->sTypeUrl, $aMenuItem['name']),
-                'title' => $aMenuItem['title'],
                 'selected' => $aMenuItem['name'] == $this->sType
-            );
+            ]);
 
         return parent::getPageMenu($aMenu);
     }
@@ -507,19 +506,22 @@ class BxBaseStudioBuilderPage extends BxDolStudioBuilderPage
         $aMenu = array(
             BX_DOL_STUDIO_BP_SKELETONS => array(
                 'name' => BX_DOL_STUDIO_BP_SKELETONS,
-                'icon' => 'qrcode',
+                'icon' => 'mi-qrcode.svg',
+                'icon_bg' => true,
                 'title' => '_sys_block_types_skeletons',
                 'selected' => $sSelected == BX_DOL_STUDIO_BP_SKELETONS,
             ),
             BX_DOL_STUDIO_MODULE_SYSTEM => array(
                 'name' => BX_DOL_STUDIO_MODULE_SYSTEM,
-                'icon' => 'cog',
+                'icon' => 'mi-cog.svg',
+                'icon_bg' => true,
                 'title' => '_sys_block_types_system',
                 'selected' => $sSelected == BX_DOL_STUDIO_MODULE_SYSTEM,
             ),
             BX_DOL_STUDIO_MODULE_CUSTOM => array(
                 'name' => BX_DOL_STUDIO_MODULE_CUSTOM,
-                'icon' => 'wrench',
+                'icon' => 'mi-wrench.svg',
+                'icon_bg' => true,
                 'title' => '_sys_block_types_custom',
                 'selected' => $sSelected == BX_DOL_STUDIO_MODULE_CUSTOM,
             )

studio/template/scripts/BxBaseStudioMenu.php

@@ -10,18 +10,25 @@
 
 class BxBaseStudioMenu extends BxDolStudioMenu
 {
+    protected $_bMenuSide;
     protected $_bInlineIcons;
+    
+    protected $_sIconBgUrl;
 
     public function __construct ($aObject, $oTemplate)
     {
         parent::__construct ($aObject, $oTemplate);
 
+        $this->_bMenuSide = $this->_aObject['template'] == 'menu_side.html';
+
         $this->_bInlineIcons = in_array($this->_aObject['template'], array(
             'menu_side.html', 
             'menu_top_toolbar.html', 
             'menu_launcher_browser.html',
             'page_breadcrumb.html'
         ));
+
+        $this->_sIconBgUrl = $this->_oTemplate->getIconUrl('mi-empty.svg');
     }
 
     public function setInlineIcons($bInlineIcons)
@@ -51,6 +58,20 @@ class BxBaseStudioMenu extends BxDolStudioMenu
             ));
         }
 
+        if($this->_bMenuSide) {
+            $aItem['bx_if:show_icon'] = [
+                'condition' => $aItem['bx_if:icon']['condition'] || $aItem['bx_if:image']['condition'] || $aItem['bx_if:image_inline']['condition'],
+                'content' => []
+            ];
+
+            $aItem['bx_if:show_icon_bg'] = [
+                'condition' => isset($aItem['icon_bg']) && $aItem['icon_bg'] === true,
+                'content' => [
+                    'icon_bg_url' => $this->_sIconBgUrl
+                ]
+            ];
+        }
+
         return $aItem;
     }