Less for Custom Action Bar

kick

Administrator
Staff member
Joined
Apr 7, 2020
Messages
184
Reaction score
222
Points
43
1589286567026.png

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);
1589286774047.png
 
Last edited:
Top