Resource icon

XF 2.x Custom [ShikiSuen] Put StaffBar into NavBar

ShikiSuen

New member
Registered
Joined
Apr 29, 2020
Messages
4
Reaction score
2
Points
12
Location
Japan

Reputation:

New resource:

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



Step 1: Edit PAGE_CONTAINER. Find the following block:

Code:
 <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:
Code:
 <div class="p-nav-opposite">
                <div class="p-navgroup p-account {{ $xf.visitor.user_id ? 'p-navgroup--member' : 'p-navgroup--guest' }}">
                    <xf:include template="template_pnavStaffBar" />
                    <xf:if is="$xf.visitor.user_id">
Step 2: Add template template_pnavStaffBar and template_pnavStaffBar.less.

TEMPLATE "template_pnavStaffBar.less":

Code:
.p-staffBar {display: none;}
.p-navStaffBar {display: inline-block;}
@media (max-width: @xf-responsiveNarrow) {
    .p-navStaffBar {display: none;}
    .p-staffBar {display: inline-block;}
}
.p-navgroup-link {
    &.p-navgroup-link--approvalqueue i:after {.m-faContent(@fa-var-user-check, 1em);}
    &.p-navgroup-link--reports i:after {.m-faContent(@fa-var-siren, 1em);}
    &.p-navgroup-link--moderatortools i:after {.m-faContent(@fa-var-tools, 1em);}
    &.p-navgroup-link--admincp i:after {.m-faContent(@fa-var-cogs, 1em);}
    &.p-navgroup-link-staffbar {
        &.p-navgroup-link--iconic .p-navgroup-linkText,
        &.p-navgroup-link--textual i{display: none;}
    }
}
.p-navgroup-link-staffbar {
    opacity: .6;
    &:hover, &.badgeContainer--highlighted, &.is-menuOpen {opacity: 1;}
}

.p-navgroup-link--admincp{display:none}
TEMPLATE "template_pnavStaffBar":

Code:
<xf:css src="template_pnavStaffBar.less" />
<xf:if contentcheck="true">
            <xf:contentcheck>
                <xf:if is="$xf.visitor.is_moderator && $xf.session.unapprovedCounts.total">
                    <a href="{{ link('approval-queue') }}" class="p-navStaffBar p-navgroup-link p-navgroup-link-staffbar p-navgroup-link--iconic p-navgroup-link--approvalqueue badgeContainer badgeContainer--visible {{ ($xf.visitor.is_moderator && $xf.session.unapprovedCounts.total) ? ' badgeContainer--highlighted' : '' }}"
                                data-badge="{$xf.session.unapprovedCounts.total|number}"
                                title="{{ phrase('approval_queue') }}"
                                aria-label="{{ phrase('approval_queue')|for_attr }}"
                                aria-expanded="false"
                                aria-haspopup="true">
                                <i aria-hidden="true"></i>
                        <span class="p-navgroup-linkText">{{ phrase('approval_queue') }}    </span>
                    </a>
                </xf:if>
                <xf:if is="$xf.visitor.is_moderator && !$xf.options.reportIntoForumId && $xf.session.reportCounts.total">
                    <a href="{{ link('reports') }}"
                        class="p-navStaffBar p-navgroup-link p-navgroup-link--iconic  p-navgroup-link-staffbar p-navgroup-link--reports badgeContainer badgeContainer--visible {{ ($xf.session.reportCounts.total && ($xf.session.reportCounts.lastBuilt > $xf.session.reportLastRead) OR $xf.session.reportCounts.assigned) ? ' 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) : '' }}"
                                aria-label="{{ phrase('reports')|for_attr }}"
                                aria-expanded="false"
                                aria-haspopup="true">
                                <i aria-hidden="true"></i>
                        <span class="p-navgroup-linkText">{{ phrase('reports') }}    </span>
                    </a>
                </xf:if>
                <xf:if contentcheck="true">
                    <a class="p-navStaffBar p-navgroup-link p-navgroup-link-staffbar p-navgroup-link--iconic p-navgroup-link--moderatortools" data-xf-click="menu" data-xf-key="alt+m" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true"
                                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">{{ phrase('approval_queue') }}</a>
                            </xf:if>
                            <xf:if is="$xf.visitor.is_moderator && !$xf.options.reportIntoForumId">
                                <a href="{{ link('reports') }}" class="menu-linkRow" 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>
Done, Enjoy.

Read more about this resource...
 

Sam

New member
Registered
Joined
Jun 16, 2020
Messages
3
Reaction score
1
Points
13
Location
USA

Reputation:

Thank you very much for the tip
 
Top