Ticket #2169 - Get rid of scroll shadow in page submenu and cover cleanup in Lucid.

inc/js/classes/BxDolMenuSubmenu.js

@@ -1,43 +0,0 @@
-/**
- * Copyright (c) UNA, Inc - https://una.io
- * MIT License - https://opensource.org/licenses/MIT
- *
- * @defgroup    UnaCore UNA Core
- * @{
- */
-
-function BxDolMenuSubmenu(oOptions)
-{
-    this._sObject = oOptions.sObject;
-    this._aHtmlIds = oOptions.aHtmlIds != undefined ? oOptions.aHtmlIds : {};  
-
-    this._sClassBar = oOptions.sClassBar != undefined ? oOptions.sClassBar : 'bx-menu-main-bar';
-    this._sClassBarWrapper = oOptions.sClassBarWrapper != undefined ? oOptions.sClassBarWrapper : 'bx-menu-main-bar-wrapper';
-    this._sClassMenu = oOptions.sClassMenu != undefined ? oOptions.sClassMenu : 'bx-menu-main-submenu';
-    this._sClassHideShadowAfter = 'bx-menu-main-bar-hide-shadow-after';
-    this._sClassHideShadowBefore = 'bx-menu-main-bar-hide-shadow-before';
-}
-
-BxDolMenuSubmenu.prototype.init = function() {
-    var $this = this;
-
-    $(document).ready(function() {
-        //--- Initialize Scrolling Effects ---//
-        $('.' + $this._sClassBar).bind('scroll', function () {
-            var oMenuBarWrapper = $(this).parents('.' + $this._sClassBarWrapper);
-            var oMenu = $(this).find('.' + $this._sClassMenu);
-
-            if(Math.abs(oMenu.position().left) >= (oMenu.width() - $(this).width() - 1))
-                oMenuBarWrapper.addClass($this._sClassHideShadowAfter);
-            else
-                oMenuBarWrapper.removeClass($this._sClassHideShadowAfter);
-
-            if(oMenu.position().left >= 0)
-                oMenuBarWrapper.addClass($this._sClassHideShadowBefore);
-            else
-                oMenuBarWrapper.removeClass($this._sClassHideShadowBefore);
-        });
-    });
-};
-
-/** @} */

modules/base/profile/template/css/main.css

@@ -296,10 +296,6 @@ a.bx-base-pofile-cover-thumb p.bx-base-pofile-unit-thumb.bx-def-ava-big-size {
 .bx-base-profile-view .bx-menu-main-bar {
     overflow: visible;
 }
-.bx-base-profile-view .bx-menu-main-bar-wrapper::before, 
-.bx-base-profile-view .bx-menu-main-bar-wrapper::after {
-    display: none;
-}
 
 .bx-menu-main-bar ul.bx-menu-main-submenu.bx-menu-more-auto,
 .bx-base-pofile-cover-actions ul.bx-menu-hor.bx-menu-more-auto {

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

@@ -703,14 +703,6 @@ a.bx-def-font-h3:hover {
     background-attachment: @bx-image-bg-menu-page-attachment;
     background-size: @bx-image-bg-menu-page-size;
 }
-.bx-menu-main-bar-wrapper:before {
-    border-bottom-left-radius: @bx-border-radius-block-bl;
-    background: @bx-color-menu-page-gradient-left;
-}
-.bx-menu-main-bar-wrapper:after {
-    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/decorous/data/template/system/menu_main_submenu_bar.html

@@ -1,5 +1,5 @@
 <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-wrapper" class="bx-menu-main-bar-wrapper 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 />
             __code__

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

@@ -142,8 +142,6 @@ class BxTemplConfig extends BxBaseConfig
         $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-add'] = $this->_setColorRgba($sName . '_menu_add_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)');

modules/boonex/lucid/data/template/bx_events/menu_main_submenu.html

@@ -0,0 +1,11 @@
+<div class="bx-menu-main-submenu-wrp bx-menu-profile-view-submenu-wrp">
+    <div class="bx-menu-main-submenu-group">
+        <ul id="bx-menu-main-submenu" class="bx-menu-main-submenu<bx_if:show_more_auto_class> bx-menu-more-auto</bx_if:show_more_auto_class> bx-menu-object-__object__ bx-clearfix">
+            <bx_repeat:menu_items>
+                <li class="bx-menu-item bx-menu-item-__name__ bx-def-padding-sec-leftright bx-def-color-bg-hl-hover bx-def-box-sizing __class_add__"><a href="__link__" target="__target__" onclick="__onclick__">__title__</a><div class="bx-mms-item-hr"></div>__popup__</li>
+            </bx_repeat:menu_items>
+        </ul>
+        <div class="bx-menu-main-submenu-hr"></div>
+    </div>
+</div>
+__js_code__

modules/boonex/lucid/data/template/bx_groups/menu_main_submenu.html

@@ -0,0 +1,11 @@
+<div class="bx-menu-main-submenu-wrp bx-menu-profile-view-submenu-wrp">
+    <div class="bx-menu-main-submenu-group">
+        <ul id="bx-menu-main-submenu" class="bx-menu-main-submenu<bx_if:show_more_auto_class> bx-menu-more-auto</bx_if:show_more_auto_class> bx-menu-object-__object__ bx-clearfix">
+            <bx_repeat:menu_items>
+                <li class="bx-menu-item bx-menu-item-__name__ bx-def-padding-sec-leftright bx-def-color-bg-hl-hover bx-def-box-sizing __class_add__"><a href="__link__" target="__target__" onclick="__onclick__">__title__</a><div class="bx-mms-item-hr"></div>__popup__</li>
+            </bx_repeat:menu_items>
+        </ul>
+        <div class="bx-menu-main-submenu-hr"></div>
+    </div>
+</div>
+__js_code__

modules/boonex/lucid/data/template/bx_organizations/menu_main_submenu.html

@@ -0,0 +1,11 @@
+<div class="bx-menu-main-submenu-wrp bx-menu-profile-view-submenu-wrp">
+    <div class="bx-menu-main-submenu-group">
+        <ul id="bx-menu-main-submenu" class="bx-menu-main-submenu<bx_if:show_more_auto_class> bx-menu-more-auto</bx_if:show_more_auto_class> bx-menu-object-__object__ bx-clearfix">
+            <bx_repeat:menu_items>
+                <li class="bx-menu-item bx-menu-item-__name__ bx-def-padding-sec-leftright bx-def-color-bg-hl-hover bx-def-box-sizing __class_add__"><a href="__link__" target="__target__" onclick="__onclick__">__title__</a><div class="bx-mms-item-hr"></div>__popup__</li>
+            </bx_repeat:menu_items>
+        </ul>
+        <div class="bx-menu-main-submenu-hr"></div>
+    </div>
+</div>
+__js_code__

modules/boonex/lucid/data/template/bx_persons/menu_main_submenu.html

@@ -0,0 +1,11 @@
+<div class="bx-menu-main-submenu-wrp bx-menu-profile-view-submenu-wrp">
+    <div class="bx-menu-main-submenu-group">
+        <ul id="bx-menu-main-submenu" class="bx-menu-main-submenu<bx_if:show_more_auto_class> bx-menu-more-auto</bx_if:show_more_auto_class> bx-menu-object-__object__ bx-clearfix">
+            <bx_repeat:menu_items>
+                <li class="bx-menu-item bx-menu-item-__name__ bx-def-padding-sec-leftright bx-def-color-bg-hl-hover bx-def-box-sizing __class_add__"><a href="__link__" target="__target__" onclick="__onclick__">__title__</a><div class="bx-mms-item-hr"></div>__popup__</li>
+            </bx_repeat:menu_items>
+        </ul>
+        <div class="bx-menu-main-submenu-hr"></div>
+    </div>
+</div>
+__js_code__

modules/boonex/lucid/data/template/bx_spaces/menu_main_submenu.html

@@ -0,0 +1,11 @@
+<div class="bx-menu-main-submenu-wrp bx-menu-profile-view-submenu-wrp">
+    <div class="bx-menu-main-submenu-group">
+        <ul id="bx-menu-main-submenu" class="bx-menu-main-submenu<bx_if:show_more_auto_class> bx-menu-more-auto</bx_if:show_more_auto_class> bx-menu-object-__object__ bx-clearfix">
+            <bx_repeat:menu_items>
+                <li class="bx-menu-item bx-menu-item-__name__ bx-def-padding-sec-leftright bx-def-color-bg-hl-hover bx-def-box-sizing __class_add__"><a href="__link__" target="__target__" onclick="__onclick__">__title__</a><div class="bx-mms-item-hr"></div>__popup__</li>
+            </bx_repeat:menu_items>
+        </ul>
+        <div class="bx-menu-main-submenu-hr"></div>
+    </div>
+</div>
+__js_code__

modules/boonex/lucid/data/template/system/css/cover.css

@@ -0,0 +1,5 @@
+@import url(../../../../../../../template/css/cover.css);
+.bx-menu-toolbar-padding .bx-cover-wrapper {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}

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

@@ -360,7 +360,8 @@ a.bx-def-font-h3:hover {
     background-color: @bx-color-cover;
 }
 
-.bx-menu-toolbar-padding .bx-cover-wrapper {
+.bx-menu-toolbar-padding .bx-cover-wrapper,
+.bx-menu-toolbar-padding .bx-base-pofile-cover {
     border-width: @bx-border-width-cover;
     border-style: @bx-border-type;
     border-color: @bx-color-border-cover;
@@ -718,14 +719,6 @@ a.bx-def-font-h3:hover {
 	background-repeat: @bx-image-bg-menu-page-repeat;
     background-size: @bx-image-bg-menu-page-size;
 }
-.bx-menu-main-bar-wrapper:before {
-    border-bottom-left-radius: @bx-border-radius-block-bl;
-    background: @bx-color-menu-page-gradient-left;
-}
-.bx-menu-main-bar-wrapper:after {
-    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/lucid/data/template/system/css/menu.css

@@ -266,6 +266,16 @@ ul.bx-menu-toolbar li a .bx-menu-item-addon {
 	display: block;
 }
 
+
+/*--- Profile View Submenu ---*/
+.bx-menu-main-bar-wrapper .bx-menu-main-submenu-wrp.bx-menu-profile-view-submenu-wrp {
+    overflow-x: visible;
+}
+.bx-menu-main-bar-wrapper .bx-menu-main-submenu-wrp.bx-menu-profile-view-submenu-wrp .bx-menu-main-submenu-group {
+    display: block;
+}
+
+
 /*--- Toolbars ---*/
 .bx-toolbar-item .bx-menu-toolbar .bx-menu-toolbar-item a.bx-btn {
 	width: auto;

modules/boonex/lucid/data/template/system/menu_main_submenu_bar.html

@@ -1,5 +1,5 @@
 <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-color-bg-sec">
+    <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_injection:injection_top_menu_before />
             __code__

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

@@ -156,8 +156,6 @@ class BxTemplConfig extends BxBaseConfig
         $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-add'] = $this->_setColorRgba($sName . '_menu_add_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)');

modules/boonex/lucid/install/sql/install.sql

@@ -729,14 +729,14 @@ INSERT INTO `sys_options_mixes2options` (`option`, `mix_id`, `value`) VALUES
 ('bx_lucid_block_bg_image_repeat', @iMixId, 'no-repeat'),
 ('bx_lucid_cover_icon_shadow', @iMixId, 'none'),
 ('bx_lucid_cover_text_shadow', @iMixId, '0px 1px 3px rgba(0, 0, 0, .3)'),
-('bx_lucid_cover_border_radius', @iMixId, '0px'),
+('bx_lucid_cover_border_radius', @iMixId, '8px'),
 ('bx_lucid_cover_icon_border_color', @iMixId, 'rgba(208, 208, 208, 1)'),
 ('bx_lucid_cover_icon_border_size', @iMixId, '1px'),
 ('bx_lucid_cover_icon_border_radius', @iMixId, '3px'),
 ('bx_lucid_cover_text_align', @iMixId, 'center'),
-('bx_lucid_cover_border_size', @iMixId, '0px'),
-('bx_lucid_cover_border_color', @iMixId, 'rgba(208, 208, 208, 0)'),
-('bx_lucid_cover_shadow', @iMixId, 'none'),
+('bx_lucid_cover_border_size', @iMixId, '1px'),
+('bx_lucid_cover_border_color', @iMixId, 'rgba(20, 80, 100, 0.1)'),
+('bx_lucid_cover_shadow', @iMixId, '0px 2px 6px 0px rgba(0, 0, 0, 0.05)'),
 ('bx_lucid_cover_content_padding', @iMixId, '2rem 3rem 2rem 3rem'),
 ('bx_lucid_cover_height', @iMixId, '8rem'),
 ('bx_lucid_body_icon_color_hover', @iMixId, 'rgba(20, 80, 160, 1)'),

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

@@ -1,13 +1,5 @@
 @import '../../../../../../../template/css/default.less';
 
-/* page menu */
-.bx-menu-main-bar-wrapper:before {
-    background: @bx-color-menu-page-gradient-left;
-}
-.bx-menu-main-bar-wrapper:after {
-    background: @bx-color-menu-page-gradient-right;
-}
-
 /* image/thumbnail/gallery default styles */
 .bx-def-ava,
 .bx-def-thumb,

modules/boonex/ocean/data/template/system/menu_main_submenu_bar.html

@@ -1,5 +1,5 @@
 <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-wrapper" class="bx-menu-main-bar-wrapper 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 />
             __code__

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

@@ -25,9 +25,6 @@ class BxTemplConfig extends BxBaseConfig
             'bx-color-active' => 'rgba(202, 242, 252, 0.4)',
 
             'bx-border-color' => '#00a0ce',
-
-            'bx-color-menu-page-gradient-left' => 'linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%)',
-            'bx-color-menu-page-gradient-right' => 'linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #ffffff 100%)'
         ));
 
         $this->setPageWidth('bx_ocean_page_width');

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

@@ -657,14 +657,6 @@ a.bx-def-font-h3:hover {
     background-size: @bx-image-bg-menu-page-size;
     background-clip: border-box;
 }
-.bx-menu-main-bar-wrapper:before {
-    border-bottom-left-radius: @bx-border-radius-block-bl;
-    background: @bx-color-menu-page-gradient-left;
-}
-.bx-menu-main-bar-wrapper:after {
-    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/menu_main_submenu_bar.html

@@ -1,5 +1,5 @@
 <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-wrapper" class="bx-menu-main-bar-wrapper 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 />
             __code__

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

@@ -144,8 +144,6 @@ 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)');

template/css/general.css

@@ -112,10 +112,6 @@
     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;

template/scripts/BxBaseConfig.php

@@ -275,20 +275,6 @@ class BxBaseConfig extends BxDol implements iBxDolSingleton
         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%)";
-    }
-
     protected function _setBgUrl($sKey, $oStorage = null)
     {
         if(empty($oStorage))

template/scripts/BxBaseMenuSubmenu.php

@@ -94,7 +94,7 @@ class BxBaseMenuSubmenu extends BxTemplMenu
 
         $this->_addJsCss();
         return $this->_oTemplate->parseHtmlByName('menu_main_submenu_bar.html', array(
-            'code' => $sCode . $this->_getJsCode()
+            'code' => $sCode
         ));
     }
 
@@ -163,22 +163,6 @@ class BxBaseMenuSubmenu extends BxTemplMenu
 
         return false;
     }
-
-    protected function _getJsCode($aParams = array())
-    {
-        $aParams = array_merge(array(
-            'sObject' => $this->_sObject
-        ), $aParams);
-
-        return $this->_oTemplate->_wrapInTagJsCode("if(!" . $this->_sJsObject . ") var " . $this->_sJsObject . " = new BxDolMenuSubmenu(" . json_encode($aParams) . "); " . $this->_sJsObject . ".init();");
-    }
-
-    protected function _addJsCss()
-    {
-        parent::_addJsCss();
-
-        $this->_oTemplate->addJs(array('BxDolMenuSubmenu.js'));
-    }
 }
 
 /** @} */