@yariplus I think it only works for issues, not PR's
edit: works for commits too
You can reorder them using some CSS. You have to set the order for each icon individually though. They are ordered from lowest to highest order
value, and have a default of 0. You can use negetive values to pull to the left also.
.formatting-bar > ul {
display: flex !important;
flex-direction: row;
}
.formatting-bar > ul > li[data-format="list"] {
order: -2;
}
.formatting-bar > ul > li[data-format="strikethrough"] {
order: -1;
}
.formatting-bar > ul > li[data-format="emoji-add-emoji"] {
order: 1;
}
@yariplus probably the best way to select is with the data-format
attribute
@tlinden You don't need !important
, you just need more specificity.
The following arranges the composer buttons for this forum in alphabetic order:
.composer .formatting-bar .formatting-group {
display: inline-flex;
}
.composer .formatting-bar .formatting-group [data-format="bold"] {
order: 0;
}
.composer .formatting-bar .formatting-group [data-format="canned-responses"] {
order: 1;
}
.composer .formatting-bar .formatting-group [data-format="emoji-add-emoji"] {
order: 2;
}
.composer .formatting-bar .formatting-group [data-format="gif"] {
order: 3;
}
.composer .formatting-bar .formatting-group [data-format="italic"] {
order: 4;
}
.composer .formatting-bar .formatting-group [data-format="link"] {
order: 5;
}
.composer .formatting-bar .formatting-group [data-format="list"] {
order: 6;
}
.composer .formatting-bar .formatting-group [data-format="picture"] {
order: 7;
}
.composer .formatting-bar .formatting-group [data-format="picture-o"] {
order: 8;
}
.composer .formatting-bar .formatting-group [data-format="strikethrough"] {
order: 9;
}
.composer .formatting-bar .formatting-group [data-format="upload"] {
order: 10;
}
.composer .formatting-bar .formatting-group [data-format="zen"] {
order: 11;
}
You can clean it up by using less, which does work in the ACP:
.composer .formatting-bar .formatting-group {
display: inline-flex;
[data-format="bold"] {
order: 0;
}
[data-format="canned-responses"] {
order: 1;
}
[data-format="emoji-add-emoji"] {
order: 2;
}
[data-format="gif"] {
order: 3;
}
[data-format="italic"] {
order: 4;
}
[data-format="link"] {
order: 5;
}
[data-format="list"] {
order: 6;
}
[data-format="picture"] {
order: 7;
}
[data-format="picture-o"] {
order: 8;
}
[data-format="strikethrough"] {
order: 9;
}
[data-format="upload"] {
order: 10;
}
[data-format="zen"] {
order: 11;
}
}