Custom admin/user icons in header

Support
1

I’ve used a script created by one of the team members here that placed an extra icon in the header. Depending on user type, it showed a different icon.

However, since 2.2, this no longer works.

<script type="text/discourse-plugin" version="0.8.23">
let currentUser = api.getCurrentUser();
if (currentUser && currentUser.admin) {
api.decorateWidget('header-icons:before', helper => {
return helper.h('li', [
    helper.h('a#tickets-button', {
        href:'https://Example.com',
        title: 'Button 1',
        text: ''
    }, helper.h('')),
]);
});
}
</script>
<script type="text/discourse-plugin" version="0.4">
let currentUser = api.getCurrentUser();
if (currentUser && !currentUser.admin) {
api.decorateWidget('header-icons:before', helper => {
return helper.h('li', [
    helper.h('a#home-button', {
        href:'https://Example2.com',
        title: 'Button 2'
    }, helper.h('i.fa.fa-shopping-cart.home-button-icon')),
]);
});
}
</script>

Would appreciate any help.

2

You need to update the second script:

<script type="text/discourse-plugin" version="0.8">
const { iconNode } = require("discourse-common/lib/icon-library");
let currentUser = api.getCurrentUser();
if (currentUser && !currentUser.admin) {
api.decorateWidget('header-icons:before', helper => {
return helper.h('li', [
    helper.h('a#home-button', {
        href:'https://Example2.com',
        title: 'Button 2'
    }, iconNode('shopping-cart')),
]);
});
}
</script>

You will also need to add “shopping-cart” to the site setting called “SVG sprite subset” so that the SVG for that icon can be included in your site.

9 Likes
3

Your script worked @pmusaraj, but it made the other icons vanish:

image
image.png858×420 14.1 KB

Also, admins still can’t see the button from the first script. I’ve been told by staff here that until 2.3 that won’t be possible :confused: (no staff class or something like that in 2.2)

4

That looks like a CSS issue. Easier to debug when looking at the site in a browser with the inspector open.

I didn’t look at the first script at all earlier, because I didn’t see an icon reference, but, in fact, you should merge the two scripts together to something like this:

<script type="text/discourse-plugin" version="0.8">
const { iconNode } = require("discourse-common/lib/icon-library");
let currentUser = api.getCurrentUser();
let icon = 'admin-icon';
if (currentUser && !currentUser.admin) {
  icon = 'shopping-cart';
}
api.decorateWidget('header-icons:before', helper => {
return helper.h('li', [
    helper.h('a#home-button', {
        href:'https://Example2.com',
        title: 'Button 2'
    }, iconNode(icon)),
]);
});
}
</script>

This will use admin-icon for admins and shopping-cart for non-admins. (Use an icon of your choice instead of the admin-icon placeholder I put in the code above.)

4 Likes
5

Had small problems with that code @pmusaraj, also another dev team told me that this would be impossible to do with 2.2 as admin class isn’t used in 2.2? Not sure what that means. Anyway, our UI guy was able to do it (@shaundefense) via this code:

<script type="text/discourse-plugin" version="0.8.23">
const { iconNode } = require("discourse-common/lib/icon-library");
let currentUser = api.getCurrentUser();
let icon = 'shopping-cart';
if (currentUser && !currentUser.admin) {
  icon = 'shopping-cart';
}
if (currentUser && currentUser.admin) {
api.decorateWidget('header-icons:before', helper => {
    return helper.h('li', [
        helper.h('a#tickets-button', {
            href:'https://LinkOne.com',
            title: 'Link One',
            text: ''
        }, iconNode(icon)),
    ]);
});
}
</script>
<script type="text/discourse-plugin" version="0.4">
const { iconNode } = require("discourse-common/lib/icon-library");
let currentUser = api.getCurrentUser();
let icon = 'shopping-cart';
if (currentUser && !currentUser.admin) {
api.decorateWidget('header-icons:before', helper => {
    return helper.h('li', [
        helper.h('a#tickets-button', {
            href:'https://LinkTwo.com',
            title: 'Link Two'
        }, iconNode(icon)),
    ]);
});
}
</script>

Now the button shows up, and it’s two function (for admin it’s different and for users, it displays another link). Thanks everyone for help.