Ticket #3629 - Artificer: Profile Stats and Profile Avatar blocks.

inc/js/functions.js

@@ -675,12 +675,11 @@ function bx_menu_show_live_update(oData) {
 	}
 }
 
-function bx_menu_show_more(oLink, sSelectorParent) {
+function bx_menu_show_more_less(oLink, sSelectorParent) {
     if(!sSelectorParent)
         sSelectorParent = 'ul';
 
-    $(oLink).parents(sSelectorParent + ':first').find('.bx-mi-aux').toggle('bx-mi-hidden');
-    $(oLink).find('.bx-mi-sm').toggle().siblings('.bx-mi-sl').toggle();
+    $(oLink).parents(sSelectorParent + ':first').find('.bx-mi-aux, .bx-psmi-show-more, .bx-psmi-show-less').toggle('bx-mi-hidden');
 }
 
 /**

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

@@ -35,13 +35,17 @@ import url(../../../../../../../template/css/general.css);
 }
 
 /*--- Profile Stats ---*/
-.bx-menu-profile-stats li.bx-psmi-show-more:hover {
-    background-color: transparent;
-}
-.bx-menu-profile-stats li.bx-psmi-show-more .bx-menu-item-icon {
-    display: none;
+.bx-menu-profile-stats li.bx-psmi-show-more,
+.bx-menu-profile-stats li.bx-psmi-show-less {
+    text-transform: uppercase;
+    font-size: 0.875rem;
+    color: rgba(0, 0, 0, 0.5);
 }
 
+.bx-menu-profile-stats  li.bx-psmi-show-more:hover,
+.bx-menu-profile-stats  li.bx-psmi-show-less:hover {
+    background-color: transparent;
+}
 
 /*--- Author Info ---*/
 .sys-author-profile .bx-menu-custom.bx-menu-custom-hor > li:first-child .bx-base-general-unit-meta-div {
@@ -60,14 +64,5 @@ import url(../../../../../../../template/css/general.css);
 
 /*--- Page Type: Application ---*/
 .bx-menu-panel-item .bx-profile-avatar .bx-profile-avatar-cnt {
-    min-height: 2rem;
-
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-}
-.bx-menu-panel-item .bx-profile-avatar .bx-base-pofile-unit-wo-info,
-.bx-menu-panel-item .bx-profile-avatar .bx-def-unit-img,
-.bx-menu-panel-item .bx-profile-avatar .bx-def-thumb-size {
-    width: 2rem;
-    height: 2rem;
+    min-height: 2.5rem;
 }

modules/boonex/artificer/data/template/system/menu_profile_followings.html

@@ -2,7 +2,7 @@
     <bx_repeat:menu_items>
         <li class="bx-menu-item bx-menu-item-__name__ __class_add__ text-sm font-medium">
             <div class="bx-menu-item-cnt">
-                <div class="bx-menu-item-link flex items-center justify-between p-2 text-gray-600 dark:text-gray-300 hover:bg-gray-900/5 dark:hover:text-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 rounded-md">
+                <div class="bx-menu-item-link flex items-center justify-between p-2 text-gray-600 dark:text-gray-300 dark:hover:text-gray-100 hover:bg-gray-900/5 dark:hover:bg-gray-700 hover:text-gray-900 rounded-md">
                     <a class="flex items-center w-full uppercase" href="__link__" onclick="__onclick__"__attrs__>
                         <span class="bx-menu-item-icon flex items-center justify-center h-6 w-6 leading-6 text-base">
                             <bx_if:icon><i class="sys-icon __icon__"></i></bx_if:icon>

modules/boonex/artificer/data/template/system/profile_avatar.html

@@ -1,21 +1,23 @@
-<div class="bx-profile-avatar group text-gray-600 hover:text-gray-800 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-800 rounded-md">
-    <a href="__switcher_url__" onclick="__switcher_onclick__">
-        <div class="bx-profile-avatar-cnt relative flex items-center px-4 py-2">
-            <div class="bx-pa-img absolute">__profile_unit__</div>
-            <div class="bx-pa-info w-full" sidebar-toggle-item>
-                <div class="bx-pa-info-cnt flex flex-col justify-center h-10 pl-14 pr-4 box-border">
-                    <div class="bx-pai-line text-gray-600 dark:text-gray-300 text-sm group-hover:text-gray-800 dark:group-hover:text-white font-semibold truncate">__profile_title__</div>
-                    <div class="bx-pai-line text-green-600 dark:text-green-400 text-xs truncate uppercase tracking-wider font-normal">
-                        <!--<bx_include_auto:menu_icon.html />--><span>__profile_acl_title__</span>
-                    </div>
+<div class="bx-profile-avatar group text-gray-600 dark:text-gray-300">
+    <div class="bx-profile-avatar-cnt relative flex items-center">
+        <div class="bx-pa-img absolute">__profile_unit__</div>
+        <div class="bx-pa-info w-full" sidebar-toggle-item>
+            <div class="bx-pa-info-cnt flex flex-col justify-center h-10 pl-14 pr-4 box-border">
+                <div class="bx-pai-line text-gray-600 dark:text-gray-300 text-sm group-hover:text-gray-800 dark:group-hover:text-white font-semibold truncate">
+                    <a href="__profile_url__" title="__profile_title_attr__">__profile_title__</a>
                 </div>
-            </div>
-            <bx_if:show_switcher_icon>
-                <div class="bx-pa-actions absolute right-0 pr-4" sidebar-toggle-item>
-                    <div class="bx-pa-action flex items-center justify-center h-5"><i class="sys-icon arrows-alt-v flex-shrink-0 text-gray-400 group-hover:text-gray-500"></i></div>
+                <div class="bx-pai-line text-green-600 dark:text-green-400 text-xs truncate uppercase tracking-wider font-normal">
+                    <!--<bx_include_auto:menu_icon.html />--><span>__profile_acl_title__</span>
                 </div>
-            </bx_if:show_switcher_icon>
+            </div>
         </div>
-    </a>
+        <bx_if:show_switcher_icon>
+            <div class="bx-pa-actions absolute right-0" sidebar-toggle-item>
+                <a class="block" href="__switcher_url__" onclick="__switcher_onclick__">
+                    <div class="bx-pa-action flex items-center justify-center h-8 w-8 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-full"><i class="sys-icon arrows-alt-v flex-shrink-0 text-gray-400 group-hover:text-gray-500"></i></div>
+                </a>
+            </div>
+        </bx_if:show_switcher_icon>
+    </div>
 </div>
 __switcher__

template/css/general.css

@@ -334,6 +334,12 @@ div.bx-account-unit-online {
     text-overflow: ellipsis;
 }
 
+.bx-profile-avatar .bx-pa-action {
+    width: 2rem;
+    height: 2rem;
+
+    border-radius: 2rem;
+}
 .bx-profile-avatar .bx-pa-action .sys-icon {
     display: inline-block;
     text-align: center;
@@ -410,15 +416,10 @@ div.bx-account-unit-online {
     text-overflow: ellipsis;
 }
 
-.bx-menu-profile-stats li.bx-psmi-show-more:hover {
+.bx-menu-profile-stats li.bx-psmi-show-more:hover,
+.bx-menu-profile-stats li.bx-psmi-show-less:hover {
     background-color: transparent;
 }
-.bx-menu-profile-stats li.bx-psmi-show-more .bx-menu-item-icon {
-    display: none;
-}
-.bx-menu-profile-stats li.bx-psmi-show-more .bx-menu-item-title {
-    margin-left: 0;
-}
 
 
 /* --------------- Join/Login Forms */

template/profile_avatar.html

@@ -1,10 +1,12 @@
 <div class="bx-profile-avatar bx-def-border-radius-block">
-    <a href="__switcher_url__" onclick="__switcher_onclick__">
+    
         <div class="bx-profile-avatar-cnt bx-def-padding-sec">
             <div class="bx-pa-img">__profile_unit__</div>
             <div class="bx-pa-info">
                 <div class="bx-pa-info-cnt bx-def-padding-left bx-def-box-sizing">
-                    <div class="bx-pai-line bx-def-font-h3">__profile_title__</div>
+                    <div class="bx-pai-line bx-def-font-h3">
+                        <a href="__profile_url__" title="__profile_title_attr__">__profile_title__</a>
+                    </div>
                     <div class="bx-pai-line bx-def-margin-thd-top">
                         <div><bx_include_auto:menu_icon.html /><span class="bx-def-padding-sec-left">__profile_acl_title__</span></div>
                     </div>
@@ -12,10 +14,11 @@
             </div>
             <bx_if:show_switcher_icon>
                 <div class="bx-pa-actions">
-                    <div class="bx-pa-action bx-def-margin-sec-left"><i class="sys-icon arrows-alt-v"></i></div>
+                    <a href="__switcher_url__" onclick="__switcher_onclick__">
+                        <div class="bx-pa-action bx-def-margin-sec-left bx-def-color-bg-hl bx-def-align-center"><i class="sys-icon arrows-alt-v"></i></div>
+                    </a>
                 </div>
             </bx_if:show_switcher_icon>
         </div>
-    </a>
 </div>
 __switcher__

template/scripts/BxBaseMenuProfileStats.php

@@ -36,38 +36,44 @@ class BxBaseMenuProfileStats extends BxTemplMenuAccountNotifications
         for($i = $this->_iMenuItemsMin; $i < $iMaxNum; $i++)
             $aItems[$i]['class_add'] .= ' bx-mi-aux bx-mi-hidden';
 
-        $aItems[] = array(
-            'class_add' => ' bx-psmi-show-more',
-            'name' => 'show_more',
-            'title' => '<span class="bx-mi-sm">' . _t('_sys_show_more') . '</span><span class="bx-mi-sl" style="display:none">' . _t('_sys_show_less') . '</span>',
-            'link' => 'javascript:void(0)',
-            'onclick' => "bx_menu_show_more(this, '.bx-menu-profile-stats')",
-            'attrs' => '',
-            'bx_if:image' => [
-                'condition' => false,
-                'content' => ['icon_url' => ''],
-            ],
-            'bx_if:image_inline' => [
-                'condition' => false,
-                'content' => ['image' => ''],
-            ],
-            'bx_if:icon' => [
-                'condition' => false,
-                'content' => ['icon' => ''],
-            ],
-            'bx_if:icon-html' => [
-                'condition' => false,
-                'content' => ['icon-a' => ''],
-            ],
-            'bx_if:icon-a' => [
-                'condition' => false,
-                'content' => ['icon-a' => ''],
-            ],
-            'bx_if:addon' => [
-                'condition' => false,
-                'content' => []
-            ]
-        );
+        $aShowMoreLinks = [
+            'more' => ['title' => '_sys_show_more', 'icon' => 'chevron-down', 'class' => ''],
+            'less' => ['title' => '_sys_show_less', 'icon' => 'chevron-up', 'class' => 'bx-mi-hidden']
+        ];
+
+        foreach($aShowMoreLinks as $sLink => $aLink)
+            $aItems[] = array(
+                'class_add' => 'bx-psmi-show-' . $sLink . ' ' . $aLink['class'],
+                'name' => 'show-' . $sLink,
+                'title' => _t($aLink['title']),
+                'link' => 'javascript:void(0)',
+                'onclick' => 'bx_menu_show_more_less(this, \'.bx-menu-profile-stats\')',
+                'attrs' => '',
+                'bx_if:image' => [
+                    'condition' => false,
+                    'content' => ['icon_url' => ''],
+                ],
+                'bx_if:image_inline' => [
+                    'condition' => false,
+                    'content' => ['image' => ''],
+                ],
+                'bx_if:icon' => [
+                    'condition' => true,
+                    'content' => ['icon' => $aLink['icon']],
+                ],
+                'bx_if:icon-html' => [
+                    'condition' => false,
+                    'content' => ['icon-a' => ''],
+                ],
+                'bx_if:icon-a' => [
+                    'condition' => false,
+                    'content' => ['icon-a' => ''],
+                ],
+                'bx_if:addon' => [
+                    'condition' => false,
+                    'content' => []
+                ]
+            );
 
         return $aItems;
     }

template/scripts/BxBaseServiceProfiles.php

@@ -60,9 +60,12 @@ class BxBaseServiceProfiles extends BxDol
                     )
                 )
             )), true);
-        $bSwitcher = !empty($sSwitcher);
+        $bSwitcher = !empty($sSwitcher);        
+        $sSwitcherUrl = $bSwitcher ? 'javascript:void(0)' : $sUrl;
+        $sSwitcherOnclick = $bSwitcher ? "javascript:$('#bx-profile-switcher').dolPopup({});" : "";
 
         $sDisplayName = $oProfile->getDisplayName();
+        $sUrl = $oProfile->getUrl();
 
         $oAcl = BxDolAcl::getInstance();
         $aAcl = $oAcl->getMemberMembershipInfo($iProfileId);
@@ -71,7 +74,7 @@ class BxBaseServiceProfiles extends BxDol
 
         $aVars = array(
             'profile_id' => $oProfile->id(),
-            'profile_url' => $oProfile->getUrl(),
+            'profile_url' => $sUrl,
             'profile_edit_url' => $oProfile->getEditUrl(),
             'profile_title' => $sDisplayName,
             'profile_title_attr' => bx_html_attribute($sDisplayName),
@@ -101,11 +104,14 @@ class BxBaseServiceProfiles extends BxDol
                 'condition' => (bool)$sIconHtml,
                 'content' => array('icon' => $sIconHtml),
             ),
-            'switcher_url' => $bSwitcher ? 'javascript:void(0)' : $oProfile->getUrl(),
-            'switcher_onclick' => $bSwitcher ? "javascript:$('#bx-profile-switcher').dolPopup({});" : "",
+            'switcher_url' => $sSwitcherUrl,
+            'switcher_onclick' => $sSwitcherOnclick,
             'bx_if:show_switcher_icon' => array(
                 'condition' => $bSwitcher,
-                'content' => array()
+                'content' => array(
+                    'switcher_url' => $sSwitcherUrl,
+                    'switcher_onclick' => $bSwitcher ? "javascript:$('#bx-profile-switcher').dolPopup({});" : "",
+                )
             ),
             'switcher' => $sSwitcher
         );