Ticket #2095 - related changes in Protean.

modules/boonex/protean/data/template/system/_header_js_custom.html

@@ -1,5 +1,23 @@
 <script type="text/javascript" language="javascript">
     $(document).ready(function () {
         bx_activate_anim_icons('#283C50');
+
+        /**
+         * Page submenu.
+         */
+        $('.bx-menu-main-bar').bind('scroll', function () {
+            var oMenuBarWrapper = $(this).parents('.bx-menu-main-bar-wrapper');
+            var oMenu = $(this).find('#bx-menu-main-submenu');
+
+            if(Math.abs(oMenu.position().left) >= (oMenu.width() - $(this).width() - 1))
+                oMenuBarWrapper.addClass('bx-menu-main-bar-hide-shadow-after');
+            else
+                oMenuBarWrapper.removeClass('bx-menu-main-bar-hide-shadow-after');
+
+            if(oMenu.position().left >= 0)
+                oMenuBarWrapper.addClass('bx-menu-main-bar-hide-shadow-before');
+            else
+                oMenuBarWrapper.removeClass('bx-menu-main-bar-hide-shadow-before');
+        });
     });
 </script>

modules/boonex/protean/data/template/system/_sub_header.html

@@ -1,48 +1,47 @@
 <bx_include_auto:_header.html />
 
 <div class="bx-main">
+    <bx_injection:top />
 
-	<bx_injection:top />
-
-	<div id="bx-toolbar" class="bx-header bx-def-image-bg-header bx-def-color-bg-header bx-def-border-header bx-shadow-header bx-def-z-index-nav">
-	    <div class="bx-def-centered bx-def-padding-sec-leftright bx-def-page-width bx-def-box-sizing">
-	    	<div class="bx-toolbar-content-wrapper bx-content-padding-header">
-		        <div id="bx-toolbar-content" class="bx-clearfix">
-		            <div id="bx-menu-toolbar-1-container">
-		                <bx_menu:sys_toolbar_site />
-		            </div>
-		            <div id="bx-logo-container">
-		                <bx_injection:injection_logo_before />
-		                    __main_logo__
-		                <bx_injection:injection_logo_after />
-		            </div>
-		            <div id="bx-menu-toolbar-2-container">
-		                <bx_menu:sys_toolbar_member />
-		            </div>
-		        </div>
-			</div>
-	    </div>
-	</div>
-	
-	<bx_injection:injection_between_cover_logo />
+    <div id="bx-toolbar" class="bx-header bx-def-image-bg-header bx-def-color-bg-header bx-def-border-header bx-shadow-header bx-def-z-index-nav">
+        <div class="bx-def-centered bx-def-padding-sec-leftright bx-def-page-width bx-def-box-sizing">
+            <div class="bx-toolbar-content-wrapper bx-content-padding-header">
+                    <div id="bx-toolbar-content" class="bx-clearfix">
+                        <div id="bx-menu-toolbar-1-container">
+                            <bx_menu:sys_toolbar_site />
+                        </div>
+                        <div id="bx-logo-container">
+                            <bx_injection:injection_logo_before />
+                                __main_logo__
+                            <bx_injection:injection_logo_after />
+                        </div>
+                        <div id="bx-menu-toolbar-2-container">
+                            <bx_menu:sys_toolbar_member />
+                        </div>
+                    </div>
+                    </div>
+        </div>
+    </div>
 
+    <bx_injection:injection_between_cover_logo />
     __cover__
-	
-	<bx_injection:injection_between_cover_top_menu />
-	
-	<div id="bx-menu-main-bar-wrapper" class="bx-menu-main-bar-wrapper bx-def-color-bg-sec">
-	    <div id="bx-menu-main-bar" class="bx-menu-main-bar bx-def-padding-sec-leftright bx-def-box-sizing">
-	        <bx_injection:injection_top_menu_before />
-        	<bx_menu:sys_site_submenu />
-	        <bx_injection:injection_top_menu_after />
-	    </div>
-	</div>
-	
-	<bx_injection:injection_between_content_menu />
+    <bx_injection:injection_between_cover_top_menu />
+
+    <div class="bx-menu-main-bar-gap bx-def-centered bx-def-padding-leftright bx-def-page-width bx-def-box-sizing">
+        <div id="bx-menu-main-bar-wrapper" class="bx-menu-main-bar-wrapper bx-menu-main-bar-hide-shadow-before bx-def-round-corners bx-def-color-bg-sec">
+            <div id="bx-menu-main-bar" class="bx-menu-main-bar">
+                <bx_injection:injection_top_menu_before />
+                <bx_menu:sys_site_submenu />
+                <bx_injection:injection_top_menu_after />
+            </div>
+        </div>
+    </div>
+
+    <bx_injection:injection_between_content_menu />
 
-	<div id="bx-content-wrapper">
-		__informer__
-		<div class="bx-page-wrapper bx-def-centered bx-def-padding-sec-leftright bx-def-page-width bx-def-box-sizing">
-		    <div id="bx-content-container" class="bx-def-padding-sec-left bx-def-padding-sec-right">
-		        <bx_injection:injection_content_before />
-		        <div id="bx-content-main" class="bx-def-margin-sec-topbottom">
+    <div id="bx-content-wrapper">
+        __informer__
+        <div class="bx-page-wrapper bx-def-centered bx-def-padding-sec-leftright bx-def-page-width bx-def-box-sizing">
+            <div id="bx-content-container" class="bx-content-container bx-def-padding-sec-leftright">
+                <bx_injection:injection_content_before />
+                <div id="bx-content-main" class="bx-content-main bx-def-margin-sec-topbottom">

modules/boonex/protean/data/template/system/css/default.less

@@ -28,10 +28,6 @@ html.bx-media-phone {
 	padding: @bx-content-padding-block;
 }
 
-#bx-logo {
-    margin-top:-@bx-content-padding-header;
-}
-
 /* shadow */
 .bx-shadow-header {
     -webkit-box-shadow: @bx-shadow-header;
@@ -335,8 +331,7 @@ a.bx-def-font-h3:hover {
 }
 
 /* cover */
-.bx-menu-toolbar-padding,
-.bx-menu-toolbar-padding .bx-cover-wrapper {
+.bx-menu-toolbar-padding .bx-def-cover-color-bg {
     background-color: @bx-color-cover;
 }
 
@@ -404,6 +399,18 @@ a.bx-def-font-h3:hover {
     border-radius: @bx-border-radius-block;
     background-clip: padding-box;
 }
+.bx-def-border-radius-block-int {
+    border-radius: @bx-border-radius-block-itl @bx-border-radius-block-itr @bx-border-radius-block-ibr @bx-border-radius-block-ibl;
+    background-clip: padding-box;
+}
+.bx-def-border-radius-block-int-top {
+    border-radius: @bx-border-radius-block-itl @bx-border-radius-block-itr 0 0;
+    background-clip: padding-box;
+}
+.bx-def-border-radius-block-int-bottom {
+    border-radius: 0 0 @bx-border-radius-block-ibr @bx-border-radius-block-ibl;
+    background-clip: padding-box;
+}
 .bx-db-header {
     padding: @bx-title-padding-block;
 
@@ -623,21 +630,33 @@ a.bx-def-font-h3:hover {
 
 /* page menu */
 .bx-menu-main-bar-wrapper {
-	-webkit-box-shadow: @bx-shadow-menu-page;
-	-moz-box-shadow: @bx-shadow-menu-page;
-	box-shadow: @bx-shadow-menu-page;
+    -webkit-box-shadow: @bx-shadow-menu-page;
+    -moz-box-shadow: @bx-shadow-menu-page;
+    box-shadow: @bx-shadow-menu-page;
 
-	border-width: @bx-border-width-menu-page;
-	border-style: solid;
-	border-color: @bx-color-border-menu-page;
+    border-width: @bx-border-width-menu-page;
+    border-style: solid;
+    border-color: @bx-color-border-menu-page;
+    border-bottom-right-radius: @bx-border-radius-block-br;
+    border-bottom-left-radius: @bx-border-radius-block-bl;
 
-	background-color: @bx-color-menu-page;
+    background-color: @bx-color-menu-page;
 
-	background-image: @bx-image-bg-menu-page;
-	background-repeat: @bx-image-bg-menu-page-repeat;
-	background-attachment: @bx-image-bg-menu-page-attachment;
+    background-image: @bx-image-bg-menu-page;
+    background-repeat: @bx-image-bg-menu-page-repeat;
+    background-attachment: @bx-image-bg-menu-page-attachment;
     background-size: @bx-image-bg-menu-page-size;
 }
+.bx-menu-main-bar-wrapper:before {
+    left: 0px;
+    border-bottom-left-radius: @bx-border-radius-block-bl;
+    background: @bx-color-menu-page-gradient-left;
+}
+.bx-menu-main-bar-wrapper:after {
+    right: 0px;
+    border-bottom-right-radius: @bx-border-radius-block-br;
+    background: @bx-color-menu-page-gradient-right;
+}
 .bx-menu-main-bar-wrapper .bx-menu-main-submenu {
 	padding: @bx-content-padding-menu-page;
 }

modules/boonex/protean/data/template/system/css/general.css

@@ -1,5 +1,45 @@
 @import url(../../../../../../../template/css/general.css);
 
+/* --------------- Submenu */
+.bx-menu-main-bar-gap {
+    position: relative;
+}
+.bx-media-phone .bx-menu-main-bar-gap {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.bx-menu-main-bar-wrapper {
+    position: relative;
+
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+.bx-menu-main-bar-wrapper.bx-menu-main-bar-hide-shadow-before:before,
+.bx-menu-main-bar-wrapper.bx-menu-main-bar-hide-shadow-after:after {
+    display:none !important;
+}
+.bx-menu-main-bar-wrapper:before,
+.bx-menu-main-bar-wrapper:after {
+    display: block;
+    content: "";
+    position: absolute;
+    top: 0;
+    width: 1.5rem;
+    height: 100%;
+    z-index: 1;
+}
+.bx-media-phone .bx-menu-main-bar-wrapper {
+    border-left-width: 0;
+    border-right-width: 0;
+}
+.bx-media-phone .bx-menu-main-bar-wrapper:before {
+    border-bottom-left-radius: 0;
+}
+.bx-media-phone .bx-menu-main-bar-wrapper:after {
+    border-bottom-right-radius: 0;
+}
+
 /* --------------- Profile Stats block */
 .bx-profile-stats .bx-profile-stats-cnt {
     padding: 0;

modules/boonex/protean/data/template/system/css/media-phone.css

@@ -1 +1,24 @@
 @import url(../../../../../../../template/css/media-phone.css);
+
+.bx-media-phone .bx-page-wrapper.bx-def-padding-sec-leftright {
+    padding-left: 0;
+    padding-right: 0;
+}
+.bx-media-phone .bx-content-container.bx-def-padding-sec-leftright {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+
+/* --------------- design boxes */
+.bx-media-phone .bx-db-container {
+    border-left-width: 0;
+    border-right-width: 0;
+    border-radius: 0;
+}
+
+.bx-media-phone .bx-db-content:not(.bx-content-padding-block) .bx-def-box.bx-def-round-corners {
+    border-left-width: 0;
+    border-right-width: 0;
+    border-radius: 0;
+}

modules/boonex/protean/data/template/system/scripts/BxTemplConfig.php

@@ -20,13 +20,15 @@ class BxTemplConfig extends BxBaseConfig
 
         //--- Defaults
         $this->_aConfig['aLessConfig'] = array_merge($this->_aConfig['aLessConfig'], array(
-            'bx-margin' => '16px',
-            'bx-margin-sec' => '8px',
-            'bx-margin-thd' => '4px',
-
-            'bx-padding' => '16px',
-            'bx-padding-sec' => '8px',
-            'bx-padding-thd' => '4px'
+            'bx-margin' => '20px',
+            'bx-margin-sec' => '10px',
+            'bx-margin-thd' => '5px',
+
+            'bx-padding' => '20px',
+            'bx-padding-sec' => '10px',
+            'bx-padding-thd' => '5px',
+        
+            'bx-size-avatar' => '200px'
         ));
 
         //--- Images
@@ -127,6 +129,7 @@ class BxTemplConfig extends BxBaseConfig
         if($this->_isModule) {
             $this->_aConfig['aLessConfig']['bx-color-hl'] = $this->_setColorRgba($sName . '_general_item_bg_color_hover', 'rgba(196, 248, 156, 0.2)');
             $this->_aConfig['aLessConfig']['bx-color-active'] = $this->_setColorRgba($sName . '_general_item_bg_color_active', 'rgba(196, 248, 156, 0.4)');
+            $this->_aConfig['aLessConfig']['bx-color-disabled'] = $this->_setColorRgba($sName . '_general_item_bg_color_disabled', 'rgba(221, 221, 221, 1.0)');
         }
 
         $this->_aConfig['aLessConfig']['bx-color-header'] = $this->_setColorRgba($sName . '_header_bg_color', 'rgba(59, 134, 134, 1)');
@@ -143,6 +146,8 @@ class BxTemplConfig extends BxBaseConfig
         $this->_aConfig['aLessConfig']['bx-color-menu-main'] = $this->_setColorRgba($sName . '_menu_main_bg_color', 'rgba(255, 255, 255, 0.9)');
         $this->_aConfig['aLessConfig']['bx-color-menu-account'] = $this->_setColorRgba($sName . '_menu_account_bg_color', 'rgba(255, 255, 255, 0.9)');
         $this->_aConfig['aLessConfig']['bx-color-menu-page'] = $this->_setColorRgba($sName . '_menu_page_bg_color', 'rgba(242, 242, 242, 1)');
+        $this->_aConfig['aLessConfig']['bx-color-menu-page-gradient-left'] = $this->_setGradientMenuPageLeft($sName . '_menu_page_bg_color', '242, 242, 242');
+        $this->_aConfig['aLessConfig']['bx-color-menu-page-gradient-right'] = $this->_setGradientMenuPageRight($sName . '_menu_page_bg_color', '242, 242, 242');
         $this->_aConfig['aLessConfig']['bx-color-menu-slide'] = $this->_setColorRgba($sName . '_menu_slide_bg_color', 'rgba(255, 255, 255, 0.9)');
         $this->_aConfig['aLessConfig']['bx-color-form-input'] = $this->_setColorRgba($sName . '_form_input_bg_color', 'rgba(255, 255, 255, 1)');
         $this->_aConfig['aLessConfig']['bx-color-form-input-active'] = $this->_setColorRgba($sName . '_form_input_bg_color_active', 'rgba(255, 255, 255, 1)');
@@ -213,6 +218,12 @@ class BxTemplConfig extends BxBaseConfig
             $this->_aConfig['aLessConfig']['bx-border-radius-block-br'],
             $this->_aConfig['aLessConfig']['bx-border-radius-block-bl']
         ) = $this->_setSizeDivided($this->_aConfig['aLessConfig']['bx-border-radius-block']);
+        list(
+            $this->_aConfig['aLessConfig']['bx-border-radius-block-itl'],
+            $this->_aConfig['aLessConfig']['bx-border-radius-block-itr'],
+            $this->_aConfig['aLessConfig']['bx-border-radius-block-ibr'],
+            $this->_aConfig['aLessConfig']['bx-border-radius-block-ibl']
+        ) = $this->_setInnerSizeDivided($this->_aConfig['aLessConfig']['bx-border-radius-block']);
         $this->_aConfig['aLessConfig']['bx-border-radius-cover'] = $this->_setSize($sName . '_cover_border_radius');
         $this->_aConfig['aLessConfig']['bx-border-radius-cover-icon'] = $this->_setSize($sName . '_cover_icon_border_radius');
         $this->_aConfig['aLessConfig']['bx-border-radius-block-title'] = $this->_setSize($sName . '_block_title_border_radius');
@@ -342,6 +353,37 @@ class BxTemplConfig extends BxBaseConfig
         if($this->_isModule)
             $this->setPageWidth('bx_protean_page_width');
     }
+
+    protected function _getColorFromRgba($sKey, $sDefault = '')
+    {
+        if(empty($sDefault))
+            $sDefault = '51, 51, 51';
+
+        $sPattern = "/rgba?\s*\(\s*(([0-9]{1,3}\s*,?\s*){3})\s*([0-9\.]+)?\s*\)/";
+
+        $aMatch = array();
+        $sValue = trim(getParam($sKey));
+        if(!$this->_isModule || empty($sValue) || !preg_match($sPattern, $sValue, $aMatch) || empty($aMatch[1]))
+            $sValue = $sDefault;
+        else 
+            $sValue = trim($aMatch[1], ', ');
+
+        return $sValue;
+    }
+    
+    protected function _setGradientMenuPageLeft($sKey, $sDefault = '')
+    {
+        $sValue = $this->_getColorFromRgba($sKey, $sDefault);
+
+        return "linear-gradient(to right, rgba(" . $sValue . ", 1) 0%, rgba(" . $sValue . ", 0) 100%)";
+    }
+
+    protected function _setGradientMenuPageRight($sKey, $sDefault = '')
+    {
+        $sValue = $this->_getColorFromRgba($sKey, $sDefault);
+
+        return "linear-gradient(to right, rgba(" . $sValue . ", 0) 0%, rgba(" . $sValue . ", 1) 100%)";
+    }
 }
 
 /** @} */

modules/boonex/protean/install/langs/en.xml

@@ -9,6 +9,7 @@
 	<string name="_bx_protean_stg_cpt_category_styles_general"><![CDATA[General]]></string>
 	<string name="_bx_protean_stg_cpt_option_general_item_bg_color_hover"><![CDATA[On-hover item background color]]></string>
 	<string name="_bx_protean_stg_cpt_option_general_item_bg_color_active"><![CDATA[Active item background color]]></string>
+        <string name="_bx_protean_stg_cpt_option_general_item_bg_color_disabled"><![CDATA[Disabled item background color]]></string>
 
 	<string name="_bx_protean_stg_cpt_category_styles_header"><![CDATA[Header]]></string>
 	<string name="_bx_protean_stg_cpt_option_header_height"><![CDATA[Height]]></string>

modules/boonex/protean/install/sql/install.sql

@@ -22,7 +22,8 @@ SET @iCategoryId = LAST_INSERT_ID();
 
 INSERT INTO `sys_options`(`category_id`, `name`, `caption`, `value`, `type`, `extra`, `check`, `check_error`, `order`) VALUES
 (@iCategoryId, CONCAT(@sName, '_general_item_bg_color_hover'), '_bx_protean_stg_cpt_option_general_item_bg_color_hover', 'rgba(210, 230, 250, 0.3)', 'rgba', '', '', '', 1),
-(@iCategoryId, CONCAT(@sName, '_general_item_bg_color_active'), '_bx_protean_stg_cpt_option_general_item_bg_color_active', 'rgba(196, 248, 156, 0.4)', 'rgba', '', '', '', 2);
+(@iCategoryId, CONCAT(@sName, '_general_item_bg_color_active'), '_bx_protean_stg_cpt_option_general_item_bg_color_active', 'rgba(196, 248, 156, 0.4)', 'rgba', '', '', '', 2),
+(@iCategoryId, CONCAT(@sName, '_general_item_bg_color_disabled'), '_bx_protean_stg_cpt_option_general_item_bg_color_disabled', 'rgba(221, 221, 221, 1.0)', 'rgba', '', '', '', 3);
 
 
 -- SETTINGS: Protean template Styles Header

modules/boonex/russian/data/langs/bx_protean/ru.xml

@@ -9,6 +9,7 @@
 	<string name="_bx_protean_stg_cpt_category_styles_general"><![CDATA[Общие]]></string>
 	<string name="_bx_protean_stg_cpt_option_general_item_bg_color_hover"><![CDATA[Цвет фона пункта при наведении курсора]]></string>
 	<string name="_bx_protean_stg_cpt_option_general_item_bg_color_active"><![CDATA[Цвет фона активного пункта]]></string>
+        <string name="_bx_protean_stg_cpt_option_general_item_bg_color_disabled"><![CDATA[Цвет фона не активного пункта]]></string>
 
 	<string name="_bx_protean_stg_cpt_category_styles_header"><![CDATA[Заголовок]]></string>
 	<string name="_bx_protean_stg_cpt_option_header_height"><![CDATA[Высота]]></string>