Ticket #3073 - Menus and SVG.

studio/classes/BxDolStudioMenuAccountPopup.php

@@ -12,6 +12,8 @@ class BxDolStudioMenuAccountPopup extends BxTemplStudioMenu
     public function __construct ($aObject, $oTemplate)
     {
         parent::__construct ($aObject, $oTemplate);
+
+        $this->_bInlineIcons = true;
     }
 
     protected function _isVisible ($a)
@@ -22,7 +24,6 @@ class BxDolStudioMenuAccountPopup extends BxTemplStudioMenu
         $bResult = false;
         switch ($a['name']) {
             case 'edit':
-            case 'featured':
                 if(!BxDolStudioRolesUtils::getInstance()->isActionAllowed(BX_SRA_MANAGE_APPS))
                     break;
 

studio/classes/BxDolStudioMenuTop.php

@@ -58,7 +58,7 @@ class BxDolStudioMenuTop extends BxDol implements iBxDolSingleton
             'menu_items' => array(
                 'launcher' => array(
                     'name' => 'launcher',
-                    'icon' => 'th',
+                    'icon' => 'wi-launcher.svg',
                     'link' => '{url_studio}',
                     'title' => '_adm_tmi_cpt_launcher'
                 )

studio/template/css/general.css

@@ -128,7 +128,8 @@ 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 img,
+div.bx-std-pmen-item svg {
     position: absolute;
 
     top: 0.5rem;
@@ -160,6 +161,10 @@ div.bx-std-pmen-item .sys-icon {
     text-align: center;
 }
 
+div.bx-std-pmen-item svg g {
+    opacity: 0.7;
+}
+
 div.bx-std-pmen-item.bx-menu-tab-active {
     background-color: rgba(24, 144, 255, 0.2);
     box-shadow: inset -3px 0px 0px rgba(24, 144, 255, 1.0);
@@ -175,6 +180,11 @@ div.bx-std-pmen-item.bx-menu-tab-active .sys-icon {
     color: #1890ff;
 }
 
+div.bx-std-pmen-item:hover svg g,
+div.bx-std-pmen-item.bx-menu-tab-active svg g {
+    opacity: 0.85;
+}
+
 
 /**
  * Footer

studio/template/css/launcher.css

@@ -17,12 +17,20 @@ body.bx-std-bg.bx-std-page-launcher {
 .bx-std-page-launcher div.bx-std-pmen-item .sys-icon {
     color: rgba(255, 255, 255, 0.7);
 }
+.bx-std-page-launcher div.bx-std-pmen-item svg g {
+    opacity: 0.7;
+}
 .bx-std-page-launcher div.bx-std-pmen-item:hover a,
 .bx-std-page-launcher div.bx-std-pmen-item:hover .sys-icon,
 .bx-std-page-launcher div.bx-std-pmen-item.bx-menu-tab-active a,
 .bx-std-page-launcher div.bx-std-pmen-item.bx-menu-tab-active .sys-icon {
     color: rgba(255, 255, 255, 0.85);
 }
+.bx-std-page-launcher div.bx-std-pmen-item:hover svg g,
+.bx-std-page-launcher div.bx-std-pmen-item.bx-menu-tab-active svg g {
+    opacity: 0.85;
+}
+
 
 /**
  * Launcher
@@ -271,7 +279,7 @@ body.shepherd-active .bx-std-widget-cont.shepherd-enabled {
 /**
  * Launcher Browser
  */
-#bx-std-launcher-browser{
+#bx-std-launcher-browser {
     overflow: visible;
 }
 
@@ -285,15 +293,19 @@ body.shepherd-active .bx-std-widget-cont.shepherd-enabled {
     width: 0.5rem;
     height: 0.5rem;
 
+    box-shadow: inset 1px 1px 0px rgba(240, 240, 240, 0.2);
     background: #001529;
 
     transform: rotate(45deg);
 }
+#bx-std-launcher-browser .bx-popup {
+    box-shadow: inset -1px -1px 0px rgba(240, 240, 240, 0.2), inset 1px 1px 0px rgba(240, 240, 240, 0.2);
+    background-color: #001529;
+    
+}
 .bx-std-launcher-browser {
     position: relative;
     width: 42rem;
-
-    background: #001529;
 }
 .bx-std-launcher-browser .bx-std-lb-cnt {
     position: relative;

studio/template/css/menu_top.css

@@ -165,6 +165,14 @@ div.bx-std-menu-top .bx-menu-toolbar li a {
     height: 100%;
 }
 
+div.bx-std-menu-top .bx-menu-toolbar li svg g {
+    opacity: 0.7;
+}
+
+div.bx-std-menu-top .bx-menu-toolbar li:hover svg g {
+    opacity: 0.85;
+}
+
 div.bx-std-menu-top i.sys-icon {
     -webkit-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
@@ -189,12 +197,14 @@ div.bx-std-menu-top-right li.bx-menu-tab-active i.sys-icon {
     width: 0.5rem;
     height: 0.5rem;
 
-    background: #001529;
+    box-shadow: inset 1px 1px 0px rgba(240, 240, 240, 0.2);
+    background-color: #001529;
 
     transform: rotate(45deg);
 }
 #bx-popup-ajax-wrapper-sys_studio_account_popup .bx-popup {
-    background: #001529;
+    box-shadow: inset -1px -1px 0px rgba(240, 240, 240, 0.2), inset 1px 1px 0px rgba(240, 240, 240, 0.2);
+    background-color: #001529;
 }
 #bx-popup-ajax-wrapper-sys_studio_account_popup .bx-popup-content-indent {
     padding: 0;
@@ -205,6 +215,7 @@ div.bx-std-menu-top-right li.bx-menu-tab-active i.sys-icon {
     margin: 0;
     padding: 0 1rem;
 
+    white-space: nowrap;
     line-height: 2.5rem;
     font-size: 0.875rem;
     font-weight: 400;
@@ -214,6 +225,9 @@ div.bx-std-menu-top-right li.bx-menu-tab-active i.sys-icon {
 #bx-popup-ajax-wrapper-sys_studio_account_popup .bx-popup-color-bg li .sys-icon {
     color: rgba(255, 255, 255, 0.7);
 }
+#bx-popup-ajax-wrapper-sys_studio_account_popup .bx-popup-color-bg li svg g {
+    opacity: 0.7;
+}
 #bx-popup-ajax-wrapper-sys_studio_account_popup .bx-popup-color-bg li:hover a,
 #bx-popup-ajax-wrapper-sys_studio_account_popup .bx-popup-color-bg li:hover a .sys-icon {
     color: rgba(255, 255, 255, 0.85);
@@ -222,12 +236,7 @@ div.bx-std-menu-top-right li.bx-menu-tab-active i.sys-icon {
     background-color: rgba(24, 144, 255, 0.2);
     box-shadow: inset 3px 0px 0px rgba(24, 144, 255, 1.0);
 }
-
-.bx-menu-object-sys_studio_account_popup li {
-    white-space: nowrap;
-}
-
-.bx-menu-object-sys_studio_account_popup li.bx-menu-tab-active a,
-.bx-menu-object-sys_studio_account_popup li.bx-menu-tab-active a .sys-icon {
-    color: rgba(0, 0, 0, 0.7);
+#bx-popup-ajax-wrapper-sys_studio_account_popup .bx-popup-color-bg li:hover svg g,
+#bx-popup-ajax-wrapper-sys_studio_account_popup .bx-popup-color-bg li.bx-menu-tab-active svg g {
+    opacity: 0.85;
 }

studio/template/images/icons/lmi-library.svg

@@ -1,8 +1,9 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g opacity="0.7">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.75 9.75H5C3.895 9.75 3 8.855 3 7.75V5C3 3.895 3.895 3 5 3H7.75C8.855 3 9.75 3.895 9.75 5V7.75C9.75 8.855 8.855 9.75 7.75 9.75Z" stroke="#FAFAFA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19 9.75H16.25C15.145 9.75 14.25 8.855 14.25 7.75V5C14.25 3.895 15.145 3 16.25 3H19C20.105 3 21 3.895 21 5V7.75C21 8.855 20.105 9.75 19 9.75Z" stroke="#FAFAFA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.75 21H5C3.895 21 3 20.105 3 19V16.25C3 15.145 3.895 14.25 5 14.25H7.75C8.855 14.25 9.75 15.145 9.75 16.25V19C9.75 20.105 8.855 21 7.75 21Z" stroke="#FAFAFA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19 21H16.25C15.145 21 14.25 20.105 14.25 19V16.25C14.25 15.145 15.145 14.25 16.25 14.25H19C20.105 14.25 21 15.145 21 16.25V19C21 20.105 20.105 21 19 21Z" stroke="#FAFAFA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 10H5C3.895 10 3 9.105 3 8V5C3 3.895 3.895 3 5 3H8C9.105 3 10 3.895 10 5V8C10 9.105 9.105 10 8 10Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 10H16C14.895 10 14 9.105 14 8V5C14 3.895 14.895 3 16 3H19C20.105 3 21 3.895 21 5V8C21 9.105 20.105 10 19 10Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 21H5C3.895 21 3 20.105 3 19V16C3 14.895 3.895 14 5 14H8C9.105 14 10 14.895 10 16V19C10 20.105 9.105 21 8 21Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20 15.55H15" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 19.45H20" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </g>
 </svg>

studio/template/menu_launcher_browser.html

@@ -6,7 +6,8 @@
                     <i class="sys-icon __icon__ bx-def-margin-sec-right"></i>
                 </bx_if:icon>
                 <bx_if:image><img src="__icon_url__" /></bx_if:image>
-                __title__
+                <bx_if:image_inline>__image__</bx_if:image_inline>
+                <span>__title__</span>
             </div>
         </a>                
     </div>                

studio/template/menu_side.html

@@ -6,6 +6,7 @@
                     <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>
         </a>                

studio/template/menu_top_toolbar.html

@@ -1,7 +1,7 @@
 <ul class="bx-menu-toolbar">
     <bx_repeat:menu_items>
         <li class="bx-menu-tab-__name__  __class_add__">
-            <a href="__link__" onclick="__onclick__" class="bx-def-font-contrasted" title="__title__"__attrs__><bx_if:icon><i class="sys-icon __icon__ bx-def-round-corners bx-def-font-contrasted"></i></bx_if:icon><bx_if:image><img src="__icon_url__" /></bx_if:image></a>
+            <a href="__link__" onclick="__onclick__" class="bx-def-font-contrasted" title="__title__"__attrs__><bx_if:icon><i class="sys-icon __icon__ bx-def-round-corners bx-def-font-contrasted"></i></bx_if:icon><bx_if:image><img src="__icon_url__" /></bx_if:image><bx_if:image_inline>__image__</bx_if:image_inline></a>
         </li>
     </bx_repeat:menu_items>
 </ul>

studio/template/scripts/BxBaseStudioMenu.php

@@ -10,16 +10,39 @@
 
 class BxBaseStudioMenu extends BxDolStudioMenu
 {
+    protected $_bInlineIcons;
+
     public function __construct ($aObject, $oTemplate)
     {
         parent::__construct ($aObject, $oTemplate);
+
+        $this->_bInlineIcons = in_array($this->_aObject['template'], array(
+            'menu_side.html', 
+            'menu_top_toolbar.html', 
+            'menu_launcher_browser.html'
+        ));
     }
     
     protected function _getMenuItem ($aItem)
     {
         $aItem = parent::_getMenuItem($aItem);
-        if($aItem !== false)
-            $aItem['class'] = isset($aItem['class']) ? $aItem['class'] : '';
+        if($aItem === false)
+            return $aItem;
+
+        $aItem['class'] = isset($aItem['class']) ? $aItem['class'] : '';
+        if($this->_bInlineIcons && $aItem['bx_if:image']['condition'] && strpos($aItem['bx_if:image']['content']['icon_url'], '.svg') !== false)
+            $aItem = array_merge($aItem, array(
+                'bx_if:image' => array (
+                    'condition' => false,
+                    'content' => array(),
+                ),
+                'bx_if:image_inline' => array (
+                    'condition' => true,
+                    'content' => array(
+                        'image' => bx_file_get_contents($aItem['bx_if:image']['content']['icon_url'])
+                    ),
+                ),
+            ));
 
         return $aItem;
     }

studio/template/scripts/BxBaseStudioMenuAccountPopup.php

@@ -20,14 +20,6 @@ class BxBaseStudioMenuAccountPopup extends BxDolStudioMenuAccountPopup
             'url_studio' => BX_DOL_URL_STUDIO
         ));
     }
-
-    protected function _getMenuItem ($a)
-    {
-        if($a['name'] == 'featured')
-            $a['selected'] = BxTemplStudioLauncher::getInstance()->isFeatured();
-
-        return parent::_getMenuItem($a);
-    }
 }
 
 /** @} */

template/css/menu.css

@@ -111,8 +111,10 @@ ul.bx-menu-custom-ver {
 .bx-menu-notif li img,
 .bx-menu-notif li .sys-icon,
 .bx-menu-verlit li img,
+.bx-menu-verlit li svg,
 .bx-menu-verlit li .sys-icon,
 .bx-menu-ver li img,
+.bx-menu-ver li svg,
 .bx-menu-ver li .sys-icon {
     width:20px;
     width:1.25rem;
@@ -165,6 +167,9 @@ ul.bx-menu-custom-ver {
     background-repeat:no-repeat;
     vertical-align:middle;
 }
+.bx-menu-verlit li svg {
+    vertical-align:middle;
+}
 
 .bx-menu-notif .bx-def-unit-alert-middle {
     position:relative;

template/menu_vertical_lite.html

@@ -4,7 +4,8 @@
             <a href="__link__" onclick="__onclick__"__attrs__>
                 <bx_if:icon><i class="sys-icon __icon__"></i></bx_if:icon>
                 <bx_if:image><img class="bx-def-margin-sec-right" style="background-image:url(__icon_url__)" src="<bx_icon_url:spacer.gif />" /></bx_if:image>
-                __title__
+                <bx_if:image_inline>__image__</bx_if:image_inline>
+                <span>__title__</span>
             </a>
         </li>
     </bx_repeat:menu_items>

template/scripts/BxBaseMenu.php

@@ -188,6 +188,10 @@ class BxBaseMenu extends BxDolMenu
             'condition' => (bool)$sIconUrl,
             'content' => array('icon_url' => $sIconUrl),
         );
+        $a['bx_if:image_inline'] = array (
+            'condition' => false,
+            'content' => array('image' => ''),
+        );
         $a['bx_if:icon'] = array (
             'condition' => (bool)$sIcon,
             'content' => array('icon' => $sIcon),