[CSCN] Moving Staff Tools to Nav Group

[CSCN] Moving Staff Tools to Nav Group 1.0.1

No permission to download

ShikiSuen

Well-known member
ShikiSuen submitted a new resource:

Put StaffBar into NavBar. - Put StaffBar into NavBar (not effective within @xf-responsiveNarrow).

View attachment 224184

Step 1: Edit PAGE_CONTAINER. Find the following block:
HTML:
            <div class="p-nav-opposite">
                <div class="p-navgroup p-account .....
And add this line right beneath this block: <xf:include template="template_pnavStaffBar" />
Then it looks like:
HTML:
            <div class="p-nav-opposite">
                <div class="p-navgroup p-account {{ $xf.visitor.user_id ? 'p-navgroup--member' ...

Read more about this resource...
 

ShikiSuen

Well-known member
A small notice: The .p-sectionLinks-list .p-navEl-link {text-transform: lowercase} is actually not necessary at all.
 

kolakube

Well-known member
Brilliant idea and simple to execute, thank you for sharing!

I moved the link after the username field and label it "ModCP" (I always liked how that sounded from using vBulletin).

Screen Shot 2020-05-04 at 9.15.44 PM.png
 

ShikiSuen

Well-known member
Brilliant idea and simple to execute, thank you for sharing!

I moved the link after the username field and label it "ModCP" (I always liked how that sounded from using vBulletin).

View attachment 224328
The Admin CP is within that menu.
You can check through the codes and call the hidden Admin CP button out, if you wish.

Beware that there will be more button show out if you have new notifications of approving queues and reports.
 

kolakube

Well-known member
The Admin CP is within that menu.
You can check through the codes and call the hidden Admin CP button out, if you wish.

Beware that there will be more button show out if you have new notifications of approving queues and reports.

Since I'm the only admin I'm willing to overlook that detail for now.

Maybe it's also worth mentioning the reports link will show up when there are active reports; this was my only concern going in but you've handled it perfectly.

Screen Shot 2020-05-04 at 9.25.44 PM.png
 

ShikiSuen

Well-known member
Since I'm the only admin I'm willing to overlook that detail for now.

Maybe it's also worth mentioning the reports link will show up when there are active reports; this was my only concern going in but you've handled it perfectly.

View attachment 224329
Is this really a good idea to keep all of those texts shown up?
I mean, considering the page-container width, the entire tab-bar may look over-condensed.
 

ShikiSuen

Well-known member
(I want to see notification badges directly on the wrench icon, seriously. This will make other badge icons useless.)
 

kolakube

Well-known member
(I want to see notification badges directly on the wrench icon, seriously. This will make other badge icons useless.)

Great idea! I couldn't resist giving it a shot and think I came up with a solid solution. This is the first time I have really worked with XenForo templates so bare with me, but here are my results:

Screen Shot 2020-05-04 at 10.26.18 PM.png

  1. Adds the total # of posts awaiting approval + total open reports together in main badge
  2. Moves approval queue and reports badge into separate dropdown menu
  3. Deletes approval/reports links from main menu
Here's the final code I came up with for the new template_pnavStaffBar template. I hope you can use this and if you see anything that can be improved let me know - it's running on my forum now!

HTML:
<xf:if contentcheck="true">
    <xf:contentcheck>
        <xf:if contentcheck="true">
            <a class="p-navStaffBar p-navgroup-link p-navgroup-link-staffbar p-navgroup-link--iconic p-navgroup-link--moderatortools badgeContainer {{ ($xf.session.reportCounts.total OR ($xf.visitor.is_moderator && $xf.session.unapprovedCounts.total)) ? ' badgeContainer--highlighted' : '' }}"
                data-xf-click="menu" data-xf-key="alt+m" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true"
                data-badge="{{ $xf.session.reportCounts.total|number + $xf.session.unapprovedCounts.total|number }}"
                title="{{ phrase('moderator') }}"
                aria-label="{{ phrase('approval_queue')|for_attr }}"
                aria-expanded="false"
                aria-haspopup="true">
                <i aria-hidden="true"></i>
                <span class="p-navgroup-linkText">{{ phrase('admin_navigation.tools') }}</span>
            </a>
            <div class="menu menu--structural" data-menu="menu" aria-hidden="true">
                <div class="menu-content">
                    <h4 class="menu-header">{{ phrase('admin_navigation.tools') }}</h4>
                    <xf:contentcheck>
                        <!--[XF:mod_tools_menu:top]-->
                        <xf:if is="$xf.visitor.is_admin">
                            <a href="{{ base_url('admin.php') }}" class="menu-linkRow" title="{{ phrase('admin_control_panel') }}">{{ phrase('admin_control_panel') }}</a>
                        </xf:if>
                        <xf:if is="$xf.visitor.is_moderator">
                            <a href="{{ link('approval-queue') }}" class="menu-linkRow badgeContainer{{ ($xf.visitor.is_moderator && $xf.session.unapprovedCounts.total) ? ' badgeContainer--highlighted' : '' }}" data-badge="{$xf.session.unapprovedCounts.total|number}">{{ phrase('approval_queue') }} </a>
                        </xf:if>
                        <xf:if is="$xf.visitor.is_moderator && !$xf.options.reportIntoForumId">
                            <a href="{{ link('reports') }}" class="menu-linkRow badgeContainer{{ $xf.session.reportCounts.total ? ' badgeContainer--highlighted' : '' }}" data-badge="{{ $xf.session.reportCounts.assigned ? $xf.session.reportCounts.assigned|number . ' / ' . $xf.session.reportCounts.total|number : $xf.session.reportCounts.total|number }}" title="{{ $xf.session.reportCounts.lastBuilt ? phrase('last_report_update:')|for_attr . ' ' . date_time($xf.session.reportCounts.lastBuilt) : '' }}">{{ phrase('reports') }} </a>
                        </xf:if>
                        <!--[XF:mod_tools_menu:bottom]-->
                    </xf:contentcheck>
                </div>
            </div>
        </xf:if>
        <xf:if is="$xf.visitor.is_admin">
            <a href="{{ base_url('admin.php') }}" class="p-navStaffBar p-navgroup-link p-navgroup-link-staffbar p-navgroup-link--iconic p-navgroup-link--admincp" target="_blank" title="{{ phrase('admin') }}" aria-label="{{ phrase('reports')|for_attr }}" aria-expanded="false" aria-haspopup="true">
                <i aria-hidden="true"></i>
                <span class="p-navgroup-linkText">{{ phrase('admin') }}</span>
            </a>
        </xf:if>
    </xf:contentcheck>
</xf:if>
 
Last edited:

ShikiSuen

Well-known member
Great idea! I couldn't resist giving it a shot and think I came up with a solid solution. This is the first time I have really worked with XenForo templates so bare with me, but here are my results.
The experience of coding templates for XenForo is better than that for vBulletin 3.8, esp. LASS stylesheet system.
(SASS is better but it requires Ruby.)
 

ShikiSuen

Well-known member
ShikiSuen updated [CSCN] Moving Staff Tools to Nav Group with a new update entry:

1.0.0 Update

Finally, I decided to make this feature (previously exclusive in CSCN-Anniversary theme) into a standalone addon. This plugin turns the XF original staff bar into three parts:

1. The enhanced Alert menu: For Moderators, if there are incoming new reports or approval queue items, the bell icon will be turned into a badged alarm-clock icon indicating moderators & administrators their existence.

2. In the top-right side of Alert menu, the entry links (as badged icons) of reports & approval queue always shown up. // Its CSS style has been specifically tweaked in this style to make sure it always look good in most 3rd-party styles.

3. The wrench-screwdriver icon (to the left of user menu icon) functions as an admin-only button to AdminCP. However, if you installed any add-ons with entries added to the staffbar moderators menu, then this wrench-screwdriver icon will be also available to moderators and will show a dropdown menu containing those new entries introduced by those add-ons.
See the description of this addon.
 

#Wz

New member
Ah ok thank you but the problem is that I do not know what to add to this line, if I take this line "& .p-navgroup-link --moderatortools i: after {
.m-faContent (@ fa-var-tools, 1em);
" and that I put my link there which is therefore moderatorpanel nothing happens there
Screenshot_5.png

Sorry to bother you I'm not very good at coding all this,

@Jeremy P Can you help me with this please?
 

Jeremy P

XenForo developer
Staff member
I don't use this add-on, so my ability to offer support for it or any modifications thereof are rather limited. In any case, you have a space before --moderatortools which may be the culprit.
 

#Wz

New member
I deleted the space but it does not work :/, it does not matter I will try to find a solution, thanks anyway
 

#Wz

New member
Is this code good? I don't think so because I ain't no results on my side I'm in despair lol

.p-navStaffBar.p-navgroup-link.p-navgroup-link-staffbar.p-navgroup-link--iconic.p-navgroup-link--moderatorpanel:before
{
display: inline-block;
font-family: Font Awesome 5 Pro;
content: "\f641";
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
margin-right: 5px;
}

( code I put in the '' EXTRA.LESS "
@Jeremy P @ShikiSuen Sorry for the inconvenience
 
Last edited:

ShikiSuen

Well-known member
Is this code good? I don't think so because I ain't no results on my side I'm in despair lol

.p-navStaffBar.p-navgroup-link.p-navgroup-link-staffbar.p-navgroup-link--iconic.p-navgroup-link--moderatorpanel:before
{
display: inline-block;
font-family: Font Awesome 5 Pro;
content: "\f641";
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
margin-right: 5px;
}

( code I put in the '' EXTRA.LESS "
@Jeremy P @ShikiSuen Sorry for the inconvenience
You study how XenForo default template uses FontAwesome, period.
 

ShikiSuen

Well-known member
Good evening,

When will the plugin be updated to support xenforo 2.2.8?
You are suggested to directly upgrade to see how XF auto style merge function works.

My manual update is scheduled to be done in the incoming January, unless there are failure cases reported regarding the automerge.

P.S.: Could you please drop me an URL of your site with this theme applied? Just my curiosity.
 
Top