#3530 - Use inline SVG and Emoji in Icons - permissions

install/sql/system.sql

@@ -1060,7 +1060,7 @@ INSERT INTO `sys_acl_matrix` (`IDLevel`, `IDAction`) VALUES
 CREATE TABLE `sys_acl_levels` (
   `ID` int(10) unsigned NOT NULL AUTO_INCREMENT,
   `Name` varchar(100) NOT NULL default '',
-  `Icon` varchar(255) NOT NULL default '',
+  `Icon` text NOT NULL default '',
   `Description` varchar(255) NOT NULL default '',
   `Active` enum('yes','no') NOT NULL default 'no',
   `Purchasable` enum('yes','no') NOT NULL default 'yes',

studio/template/css/permissions.css

@@ -6,7 +6,8 @@ div.bx-grid-header div.bx-form-element-wrapper {
 }
 
 /*--- Levels page ---*/
-img.bx-prm-level-icon {
+img.bx-prm-level-icon,
+svg.bx-prm-level-icon{
     width: 32px;
     height: 32px;
 }

studio/template/nav_item_icon_preview.html

@@ -18,4 +18,8 @@
 	<bx_if:show_icon_svg>
 		__icon__
 	</bx_if:show_icon_svg>
+	<bx_if:show_icon_emoji>
+		<i class="sys-icon sys-icon-emoji">__icon__</i>
+	</bx_if:show_icon_emoji>
+	
 </div>

studio/template/prm_level_icon_preview.html

@@ -15,4 +15,10 @@
 	<bx_if:show_icon_font>
 		<i class="sys-icon __icon__"></i>
 	</bx_if:show_icon_font>
+	<bx_if:show_icon_svg>
+		__icon__
+	</bx_if:show_icon_svg>
+	<bx_if:show_icon_emoji>
+		<i class="sys-icon sys-icon-emoji">__icon__</i>
+	</bx_if:show_icon_emoji>
 </div>

studio/template/scripts/BxBaseStudioNavigationItems.php

@@ -845,16 +845,17 @@ class BxBaseStudioNavigationItems extends BxDolStudioNavigationItems
         return  new BxTemplStudioFormView($aForm);
     }
 
-    protected function _getIconPreview($iId, $sIconImage = '', $sIconFontOrSvg = '')
+    protected function _getIconPreview($iId, $sIconImage = '', $sIcon = '')
     {
         $bIconImage = !empty($sIconImage);
-		$bIconSvg = !empty($sIconFontOrSvg) && strpos($sIconFontOrSvg, '<svg') !== false;
-        $bIconFont = !empty($sIconFontOrSvg) && !$bIconSvg;
+		$bIconSvg = !empty($sIcon) && strpos($sIcon, '<svg') !== false;
+		$bIconEmoji = !empty($sIcon) && preg_match('/([0-9#][\x{20E3}])|[\x{00ae}\x{00a9}\x{203C}\x{2047}\x{2048}\x{2049}\x{3030}\x{303D}\x{2139}\x{2122}\x{3297}\x{3299}][\x{FE00}-\x{FEFF}]?|[\x{2190}-\x{21FF}][\x{FE00}-\x{FEFF}]?|[\x{2300}-\x{23FF}][\x{FE00}-\x{FEFF}]?|[\x{2460}-\x{24FF}][\x{FE00}-\x{FEFF}]?|[\x{25A0}-\x{25FF}][\x{FE00}-\x{FEFF}]?|[\x{2600}-\x{27BF}][\x{FE00}-\x{FEFF}]?|[\x{2900}-\x{297F}][\x{FE00}-\x{FEFF}]?|[\x{2B00}-\x{2BF0}][\x{FE00}-\x{FEFF}]?|[\x{1F000}-\x{1F6FF}][\x{FE00}-\x{FEFF}]?/u', $sIcon, $a);
+        $bIconFont = !empty($sIcon) && !$bIconSvg && !$bIconEmoji;
 		
         return $this->_oTemplate->parseHtmlByName('nav_item_icon_preview.html', array(
             'id' => $iId,
             'bx_if:show_icon_empty' => array(
-                'condition' => !$bIconImage && !$bIconFont && !$bIconSvg,
+                'condition' => !$bIconImage && !$bIconFont && !$bIconSvg && !$bIconEmoji,
                 'content' => array()
             ),
             'bx_if:show_icon_image' => array(
@@ -868,13 +869,19 @@ class BxBaseStudioNavigationItems extends BxDolStudioNavigationItems
             'bx_if:show_icon_font' => array(
                 'condition' => $bIconFont,
                 'content' => array(
-                    'icon' => $sIconFontOrSvg
+                    'icon' => $sIcon
                 )
             ),
 			'bx_if:show_icon_svg' => array(
                 'condition' => $bIconSvg,
                 'content' => array(
-                    'icon' => $sIconFontOrSvg
+                    'icon' => $sIcon
+                )
+            ),
+			'bx_if:show_icon_emoji' => array(
+                'condition' => $bIconEmoji,
+                'content' => array(
+                    'icon' => $sIcon
                 )
             )
         ));

studio/template/scripts/BxBaseStudioPermissionsLevels.php

@@ -319,15 +319,17 @@ class BxBaseStudioPermissionsLevels extends BxDolStudioPermissionsLevels
         return  parent::_getActionDefault($sType, $sKey, $a, false, $isDisabled, $aRow);
     }
 
-    protected function _getIconPreview($iId, $sIconImage = '', $sIconFont = '')
+    protected function _getIconPreview($iId, $sIconImage = '', $sIcon = '')
     {
         $bIconImage = !empty($sIconImage);
-        $bIconFont = !empty($sIconFont);
-
-        return $this->_oTemplate->parseHtmlByName('prm_level_icon_preview.html', array(
+		$bIconSvg = !empty($sIcon) && strpos($sIcon, '<svg') !== false;
+		$bIconEmoji = !empty($sIcon) && preg_match('/([0-9#][\x{20E3}])|[\x{00ae}\x{00a9}\x{203C}\x{2047}\x{2048}\x{2049}\x{3030}\x{303D}\x{2139}\x{2122}\x{3297}\x{3299}][\x{FE00}-\x{FEFF}]?|[\x{2190}-\x{21FF}][\x{FE00}-\x{FEFF}]?|[\x{2300}-\x{23FF}][\x{FE00}-\x{FEFF}]?|[\x{2460}-\x{24FF}][\x{FE00}-\x{FEFF}]?|[\x{25A0}-\x{25FF}][\x{FE00}-\x{FEFF}]?|[\x{2600}-\x{27BF}][\x{FE00}-\x{FEFF}]?|[\x{2900}-\x{297F}][\x{FE00}-\x{FEFF}]?|[\x{2B00}-\x{2BF0}][\x{FE00}-\x{FEFF}]?|[\x{1F000}-\x{1F6FF}][\x{FE00}-\x{FEFF}]?/u', $sIcon, $a);
+        $bIconFont = !empty($sIcon) && !$bIconSvg && !$bIconEmoji;
+		
+        return $this->_oTemplate->parseHtmlByName('nav_item_icon_preview.html', array(
             'id' => $iId,
             'bx_if:show_icon_empty' => array(
-                'condition' => !$bIconImage && !$bIconFont,
+                'condition' => !$bIconImage && !$bIconFont && !$bIconSvg && !$bIconEmoji,
                 'content' => array()
             ),
             'bx_if:show_icon_image' => array(
@@ -341,7 +343,19 @@ class BxBaseStudioPermissionsLevels extends BxDolStudioPermissionsLevels
             'bx_if:show_icon_font' => array(
                 'condition' => $bIconFont,
                 'content' => array(
-                    'icon' => $sIconFont
+                    'icon' => $sIcon
+                )
+            ),
+			'bx_if:show_icon_svg' => array(
+                'condition' => $bIconSvg,
+                'content' => array(
+                    'icon' => $sIcon
+                )
+            ),
+			'bx_if:show_icon_emoji' => array(
+                'condition' => $bIconEmoji,
+                'content' => array(
+                    'icon' => $sIcon
                 )
             )
         ));

template/icon_emoji.html

@@ -0,0 +1 @@
+<i class="sys-icon sys-icon-emoji">__icon__</i>

template/menu_account_notifications.html

@@ -1,8 +1,7 @@
 <ul class="bx-menu-notif bx-menu-object-__object__ bx-clearfix">
     <bx_repeat:menu_items>
         <li class="bx-menu-item-__name__ bx-def-border-bottom bx-def-padding-sec-top bx-def-padding-sec-bottom __class_add__">
-            <bx_if:icon><i class="sys-icon __icon__"></i></bx_if:icon>
-            <bx_if:image><img style="background-image:url(__icon_url__)" src="<bx_icon_url:spacer.gif />" /></bx_if:image>
+            <bx_include_auto:menu_icon.html />
             <a href="__link__" onclick="__onclick__"__attrs__><span>__title__</span></a>
             <bx_if:addon>__addonf__</bx_if:addon>
         </li>

template/profile_stats.html

@@ -9,7 +9,9 @@
                     <div class="bx-ps-user-info-cnt bx-def-padding-left bx-def-box-sizing">
                         <div class="bx-ps-user-line bx-def-font-h2"><a href="__profile_url__" title="__profile_title_attr__">__profile_title__</a></div>
                         <div class="bx-ps-user-line bx-def-margin-thd-top">
-                            <div><i class="sys-icon __profile_acl_icon__"></i><span class="bx-def-padding-sec-left">__profile_acl_title__</span></div>
+                            <div>
+								<bx_include_auto:menu_icon.html />
+								<span class="bx-def-padding-sec-left">__profile_acl_title__</span></div>
                         </div>
                         <!--<div class="bx-def-unit-line"><a href="__profile_edit_url__"><bx_text:_sys_edit_profile /></a></div>-->
                     </div>

template/scripts/BxBaseMenu.php

@@ -286,7 +286,7 @@ class BxBaseMenu extends BxDolMenu
 				else{
 					//emoji
 					if(preg_match('/([0-9#][\x{20E3}])|[\x{00ae}\x{00a9}\x{203C}\x{2047}\x{2048}\x{2049}\x{3030}\x{303D}\x{2139}\x{2122}\x{3297}\x{3299}][\x{FE00}-\x{FEFF}]?|[\x{2190}-\x{21FF}][\x{FE00}-\x{FEFF}]?|[\x{2300}-\x{23FF}][\x{FE00}-\x{FEFF}]?|[\x{2460}-\x{24FF}][\x{FE00}-\x{FEFF}]?|[\x{25A0}-\x{25FF}][\x{FE00}-\x{FEFF}]?|[\x{2600}-\x{27BF}][\x{FE00}-\x{FEFF}]?|[\x{2900}-\x{297F}][\x{FE00}-\x{FEFF}]?|[\x{2B00}-\x{2BF0}][\x{FE00}-\x{FEFF}]?|[\x{1F000}-\x{1F6FF}][\x{FE00}-\x{FEFF}]?/u', $a['icon'], $aTmp)){
-						$sIconHtml = '<i class="sys-icon sys-icon-emoji">' . $a['icon'] . '</i>';
+						$sIconHtml = $this->_oTemplate->parseHtmlByName('icon_emoji.html', array('icon' => $a['icon']));
 					}
 						else{
 						if (false === strpos($a['icon'], '.')) { 

template/scripts/BxBaseServiceProfiles.php

@@ -107,6 +107,8 @@ class BxBaseServiceProfiles extends BxDol
         $aAcl = $oAcl->getMemberMembershipInfo($iProfileId);
         $aAclInfo = $oAcl->getMembershipInfo($aAcl['id']);
 
+		list ($sIcon, $sIconUrl, $sIconA, $sIconHtml) = $this->_getIcon($aAclInfo['icon']);
+		
         $aVars = array(
             'profile_id' => $oProfile->id(),
             'profile_url' => $oProfile->getUrl(),
@@ -119,9 +121,29 @@ class BxBaseServiceProfiles extends BxDol
                 'size' => 'ava'
             ))),
             'profile_acl_title' => _t($aAclInfo['name']),
-            'profile_acl_icon' => $aAclInfo['icon'],
             'menu' => BxDolMenu::getObjectInstance('sys_profile_stats')->getCode(),
         );
+		
+		$aVars['bx_if:image'] = array (
+            'condition' => (bool)$sIconUrl,
+            'content' => array('icon_url' => $sIconUrl),
+        );
+        $aVars['bx_if:image_inline'] = array (
+            'condition' => false,
+            'content' => array('image' => ''),
+        );
+        $aVars['bx_if:icon'] = array (
+            'condition' => (bool)$sIcon,
+            'content' => array('icon' => $sIcon),
+        );
+		$a['bx_if:icon-html'] = array (
+            'condition' => (bool)$sIconHtml,
+            'content' => array('icon' => $sIconHtml),
+        );
+        $aVars['bx_if:icon-a'] = array (
+            'condition' => (bool)$sIconA,
+            'content' => array('icon-a' => $sIconA),
+        );
 
         return BxDolTemplate::getInstance()->parseHtmlByName('profile_stats.html', $aVars);
     }
@@ -444,6 +466,47 @@ class BxBaseServiceProfiles extends BxDol
         );
     }
 
+	protected function _getIcon ($sIcon)
+    {
+        $sIconFont = false;
+        $sIconA = false;
+        $sIconUrl = false;
+		$sIconHtml = false;
+        if ($sIcon != '') {
+            if ((int)$sIcon > 0 ) {
+                $oStorage = BxDolStorage::getObjectInstance(BX_DOL_STORAGE_OBJ_IMAGES);
+                $sIconUrl = $oStorage ? $oStorage->getFileUrlById((int)$sIcon) : false;
+            } else {
+				//svg
+				if (strpos($sIcon, '<svg') !== false){
+					$sIconHtml = $sIcon;
+					$sClass = 'sys-icon sys-icon-svg-inline ';
+					if ($sClass != '' && strpos($sIconHtml, 'class="') !== false)
+						$sIconHtml = str_replace('class="', 'class="' . $sClass, $sIconHtml);
+					else
+						$sIconHtml = str_replace('<svg', '<svg class="' . $sClass . '" ', $sIconHtml);
+				}
+				else{
+					//emoji
+					if(preg_match('/([0-9#][\x{20E3}])|[\x{00ae}\x{00a9}\x{203C}\x{2047}\x{2048}\x{2049}\x{3030}\x{303D}\x{2139}\x{2122}\x{3297}\x{3299}][\x{FE00}-\x{FEFF}]?|[\x{2190}-\x{21FF}][\x{FE00}-\x{FEFF}]?|[\x{2300}-\x{23FF}][\x{FE00}-\x{FEFF}]?|[\x{2460}-\x{24FF}][\x{FE00}-\x{FEFF}]?|[\x{25A0}-\x{25FF}][\x{FE00}-\x{FEFF}]?|[\x{2600}-\x{27BF}][\x{FE00}-\x{FEFF}]?|[\x{2900}-\x{297F}][\x{FE00}-\x{FEFF}]?|[\x{2B00}-\x{2BF0}][\x{FE00}-\x{FEFF}]?|[\x{1F000}-\x{1F6FF}][\x{FE00}-\x{FEFF}]?/u', $sIcon, $aTmp)){
+						$sIconHtml = $this->_oTemplate->parseHtmlByName('icon_emoji.html', array('icon' => $sIcon));
+					}
+						else{
+						if (false === strpos($sIcon, '.')) { 
+							if (0 === strncmp($sIcon, 'a:', 2))
+								$sIconA = substr($sIcon, 2); // animated icon
+							else
+								$sIconFont = $sIcon; // font icons
+						} else {
+							$sIconUrl = $this->_oTemplate->getIconUrl($sIcon);
+						}
+					}
+				}
+            }
+        }
+        return array ($sIconFont, $sIconUrl, $sIconA, $sIconHtml);
+    }
+	
     protected function _getLatestModuleTimestamp ()
     {
         $aModules = BxDolModuleQuery::getInstance()->getModulesBy(array('type' => 'modules', 'active' => 1, 'order_by' => '`date` ASC'));