Less for Custom Action Bar

kick · May 12, 2020

To add or change Font Awesome icons for message control buttons, just add such code to extra.less.

Less:

.message-button-id (@buttonId; @fa-uid; @color: false) {
    .actionBar-action {
        &--@{buttonId}:before {
            margin-right: 3px;
            & when (iscolor(@color)) {
                color: @color;
            }

            .actionBar-set & {
                content: "\@{fa-uid}";
            }
        }
    }

    [data-menu-builder="actionBar"] {
        .menu-content {
            .menu-linkRow {
                &:before {
                    .m-faBase();
                    margin: 0 3px 0 -6px;
                }

                &[href$="/@{buttonId}"] {
                    .m-faBefore("\@{fa-uid}");
                    & when (iscolor(@color)) {
                        color: @color;
                    }
                }
            }
        }
    }
}

.message-button-id (edit, f040);

Now let's look at an example of a ready-made code, how can we change the icon for a message control button or several.
Everything is quite simple, we do not need to duplicate this whole large section of code, just one line is enough.
.message-button-id (edit, f040);
.message-button-id (@buttonId; @fa-uid; @color: false); - it is a variable that takes three parameters, separated by commas.

button id - @buttonId;
Unicode Icons Font Awesome - @fa-uid;
Icon color is @color; this parameter is optional

In our example, this.

button id - edit
Unicode Icons Font Awesome - f040
Icon color - this parameter is optional, therefore missing

Let's say we need to change the icon for a message control button or several
Just duplicate this line: .message-button-id (@buttonId; @fa-uid; @color: false);
Under the existing one.
And slightly change for the desired control button:

Less:

.message-button-id (edit, f040);
.message-button-id (report, f071);
.message-button-id (ip, f002);
.message-button-id (delete, f00d);
.message-button-id (spam, f024);
.message-button-id (warn, f12a);
.message-button-id (history, f1da);
.message-button-id (unapprove, f00d);