Table editing icons hardly decipherable #2763

New Issue

OVERLORD · 2026-02-05T05:06:03+03:00

OVERLORD commented

2026-02-05 05:06:03 +03:00

Originally created by @Wookbert on GitHub (Apr 26, 2022).

Describe the feature you'd like

More a design flaw, than a bug. But also not quite a feature request.

Compared to the previous design I find the new icons for table editing hardly decipherable, especially at very dense display resolutions (as smaller the icons, as more difficult to distinguish). If not replacing those icons entirely, one should at least make the X in the icons red and the + green.

Describe the benefits this would bring to existing BookStack users

Better usability.

Can the goal of this request already be achieved via other means?

No.

Have you searched for an existing open/closed issue?

I have searched for existing issues and none cover my fundemental request

How long have you been using BookStack?

1 to 5 years

Additional context

No response

Originally created by @Wookbert on GitHub (Apr 26, 2022). ### Describe the feature you'd like More a design flaw, than a bug. But also not quite a feature request. <img width="345" alt="image" src="https://user-images.githubusercontent.com/3104762/165251833-ecfef6cf-2abe-43e3-b3f6-428bf977829e.png"> Compared to the previous design I find the new icons for table editing hardly decipherable, especially at very dense display resolutions (as smaller the icons, as more difficult to distinguish). If not replacing those icons entirely, one should at least make the X in the icons **red** and the + **green**. ### Describe the benefits this would bring to existing BookStack users Better usability. ### Can the goal of this request already be achieved via other means? No. ### Have you searched for an existing open/closed issue? - [X] I have searched for existing issues and none cover my fundemental request ### How long have you been using BookStack? 1 to 5 years ### Additional context _No response_

OVERLORD added the 🔨 Feature Request label 2026-02-05 05:06:03 +03:00

OVERLORD closed this issue

2026-02-05 05:06:14 +03:00

OVERLORD commented

2026-02-05 05:06:20 +03:00

@ssddanbrown commented on GitHub (Apr 28, 2022):

Thanks for the input @Wookbert

Previous Icon Designs for Reference

TinyMCE 6 icons appear to be the same as the current, newer icons.

Personally, I don't see too much of a difference between these, and think the newer icons actually make a little more sense in their representation although differentiating between the cross and plus is maybe slightly harder in the new.

Is there anything particular in the new icons that you find particularly troublesome in comparison to the old ones or is it mainly due to distinguishing the cross/plus?

@ssddanbrown commented on GitHub (Apr 28, 2022): Thanks for the input @Wookbert ### Previous Icon Designs for Reference ![Screenshot from 2022-04-28 08-47-50](https://user-images.githubusercontent.com/8343178/165704304-3c456fae-c8ee-4cb8-83f6-597747913e4d.png) --- TinyMCE 6 icons appear to be the same as the current, newer icons. Personally, I don't see too much of a difference between these, and think the newer icons actually make a little more sense in their representation although differentiating between the cross and plus is maybe slightly harder in the new. Is there anything particular in the new icons that you find particularly troublesome in comparison to the old ones or is it mainly due to distinguishing the cross/plus?

OVERLORD commented

2026-02-05 05:06:29 +03:00

@Wookbert commented on GitHub (Apr 28, 2022):

No idea what you display size and resolution is, but I use a 14" MacBook Pro with 3024 × 1964 px. resolution, which is set to "more space" under scaling (looks as 1800 x 1169). As smaller the icons on the screen are (due to high resolution and scaling), as harder it becomes to identify the individual icons and their function. You might get a better idea if you view the icon images in this thread on a small Smartphone screen or decrease Zoom below 100% on your Desktop browser.

Keep in mind that you personally might be able to press the respective buttons blindly, but anyone who’s using the function only occasionally, has to identify them actually by their graphical meaning.

As for previous TinyMCE icons: These are clearly much easier/better to identify as the X and + are both bigger, bolder and the + in particular has more white space. Every designer knows that: As smaller a line graphic gets, as more space between the lines are needed. That’s why same logos can't be printed on ball pens (if they still should be recognizable).

@Wookbert commented on GitHub (Apr 28, 2022): No idea what you display size and resolution is, but I use a 14" MacBook Pro with 3024 × 1964 px. resolution, which is set to "more space" under scaling (looks as 1800 x 1169). As smaller the icons on the screen are (due to high resolution and scaling), as harder it becomes to identify the individual icons and their function. You might get a better idea if you view the icon images in this thread on a small Smartphone screen or decrease Zoom below 100% on your Desktop browser. Keep in mind that you personally might be able to press the respective buttons blindly, but anyone who’s using the function only occasionally, has to identify them actually by their graphical meaning. As for previous TinyMCE icons: These are clearly much easier/better to identify as **the X and + are both bigger, bolder and the + in particular has more white space.** Every designer knows that: As smaller a line graphic gets, as more space between the lines are needed. That’s why same logos can't be printed on ball pens (if they still should be recognizable).

OVERLORD commented

2026-02-05 05:06:32 +03:00

@ssddanbrown commented on GitHub (May 12, 2022):

Sure, as I alluded to in my previous comment, I think the older icons are graphically clearer but the new icons are a better representation of their action.

Keep in mind that you personally might be able to press the respective buttons blindly, but anyone who’s using the function only occasionally, has to identify them actually by their graphical meaning.

I don't use these actions too much, I have often deferred to the hover text, both before and after the icon change.

I looked to google material icons for some alternatives but they don't have many options for these cases.

Getting color involved is a little messy and adds some complication but doable. Coloring small details can often appear awkward, and we may have to have different colors for light/dark modes. Would need to test things out.

@ssddanbrown commented on GitHub (May 12, 2022): Sure, as I alluded to in my previous comment, I think the older icons are graphically clearer but the new icons are a better representation of their action. > Keep in mind that you personally might be able to press the respective buttons blindly, but anyone who’s using the function only occasionally, has to identify them actually by their graphical meaning. I don't use these actions too much, I have often deferred to the hover text, both before and after the icon change. I looked to google material icons for some alternatives but they don't have many options for these cases. Getting color involved is a little messy and adds some complication but doable. Coloring small details can often appear awkward, and we may have to have different colors for light/dark modes. Would need to test things out.

OVERLORD commented

2026-02-05 05:06:39 +03:00

@Wookbert commented on GitHub (May 12, 2022):

Sure, as I alluded to in my previous comment, I think the older icons are graphically clearer but the new icons are a better representation of their action.

IMO there is ZERO room for misinterpreting the previous icons, but a SERIOUS problem deciphering the current ones at small representation and /or bad eye sight. Can’t you simply roll back to the previous graphics, or does that involve tweaking TinyMCE now and in future releases?

@Wookbert commented on GitHub (May 12, 2022): > Sure, as I alluded to in my previous comment, I think the older icons are graphically clearer but the new icons are a better representation of their action. IMO there is ZERO room for misinterpreting the previous icons, but a SERIOUS problem deciphering the current ones at small representation and /or bad eye sight. Can’t you simply roll back to the previous graphics, or does that involve tweaking TinyMCE now and in future releases?

OVERLORD commented

2026-02-05 05:06:43 +03:00

@ssddanbrown commented on GitHub (May 12, 2022):

Can’t you simply roll back to the previous graphics, or does that involve tweaking TinyMCE now and in future releases?

We could probably find the old icon sources then override the newer icons, assuming the old ones were also SVGs, but then they won't really fit with the theme of the others too well. Personally I still have a slight preference for the new icons.

@ssddanbrown commented on GitHub (May 12, 2022): > Can’t you simply roll back to the previous graphics, or does that involve tweaking TinyMCE now and in future releases? We could probably find the old icon sources then override the newer icons, assuming the old ones were also SVGs, but then they won't really fit with the theme of the others too well. Personally I still have a slight preference for the new icons.

OVERLORD commented

2026-02-05 05:06:45 +03:00

@Wookbert commented on GitHub (May 12, 2022):

I can lend you my nearly 50 year old eyes, plus my 14" 2021 MacBook and you'll instantly change your mind. 🤪
(Say no more... you are going for the MacBook only).

@Wookbert commented on GitHub (May 12, 2022): I can lend you my nearly 50 year old eyes, plus my 14" 2021 MacBook and you'll instantly change your mind. 🤪 (Say no more... you are going for the MacBook only).

OVERLORD commented

2026-02-05 05:06:50 +03:00

@Wookbert commented on GitHub (May 12, 2022):

OK... Coincidentally creating a table in BookStack right now and noticed that in the menus, the disable icons in medium grey are a bit easier readable (sic!) than the high contrast black editing icons which appear under an existing table. But I understand that this color scheme is reserved for the ghosted items and would require the ghosted icons to be brighter.

Still, if we'd make the editing icons in the same grey, it would help already. And if we could turn the + green and the X red I think it would be perfect.

Forward me the SVG package and I'll create an alternative, improved version. Both color added to black/medium grey and medium grey/lighter grey.

@Wookbert commented on GitHub (May 12, 2022): OK... Coincidentally creating a table in BookStack right now and noticed that in the menus, the disable icons in medium grey are a bit easier readable (sic!) than the high contrast black editing icons which appear under an existing table. But I understand that this color scheme is reserved for the ghosted items and would require the ghosted icons to be brighter. <img width="453" alt="image" src="https://user-images.githubusercontent.com/3104762/168132843-af03742c-26f3-49c4-b22c-56f657f6ba37.png"> Still, if we'd make the editing icons in the same grey, it would help already. And if we could turn the + green and the X red I think it would be perfect. Forward me the SVG package and I'll create an alternative, improved version. Both color added to black/medium grey and medium grey/lighter grey.

OVERLORD commented

2026-02-05 05:06:55 +03:00

@ssddanbrown commented on GitHub (Jul 24, 2022):

Here's an easy "Custom HTML Head Content" addition which should work on a current instance:

<style>
.tox-pop__dialog .tox-toolbar button svg {
	fill: #666;
}

.tox button[title="Delete table"] svg,
.tox button[title="Delete row"] svg,
.tox button[title="Delete column"] svg {
	fill: #ac4242;
}

.tox button[title="Insert row before"] svg,
.tox button[title="Insert column before"] svg,
.tox button[title="Insert column after"] svg,
.tox button[title="Insert row after"] svg {
	fill: #41992f;
}
</style>

This will selectively change the color of the icons as a whole. Not tested against dark mode though.
I did play around with changing the +/x color but they don't look right, the tiny hint of color made the icons harder to parse from my perspective.

@ssddanbrown commented on GitHub (Jul 24, 2022): Here's an easy "Custom HTML Head Content" addition which should work on a current instance: ```html <style> .tox-pop__dialog .tox-toolbar button svg { fill: #666; } .tox button[title="Delete table"] svg, .tox button[title="Delete row"] svg, .tox button[title="Delete column"] svg { fill: #ac4242; } .tox button[title="Insert row before"] svg, .tox button[title="Insert column before"] svg, .tox button[title="Insert column after"] svg, .tox button[title="Insert row after"] svg { fill: #41992f; } </style> ``` This will selectively change the color of the icons as a whole. Not tested against dark mode though. I did play around with changing the +/x color but they don't look right, the tiny hint of color made the icons harder to parse from my perspective.

OVERLORD commented

2026-02-05 05:06:59 +03:00

@ssddanbrown commented on GitHub (Sep 30, 2022):

Just spent a little time with the icons, seeing if I use the modern & monotone styling of the newer icons while removing some of the visual noise. In the image is the current icons and then the tweaked icons below.
I've tried to scale this screenshot (Within the display of this issue, not the file itself) to be representative of the matching web-viewed size as 100% zoom.

Do you find the second set to be an improvement?

Commit for my reference: 953402f2eb

@ssddanbrown commented on GitHub (Sep 30, 2022): Just spent a little time with the icons, seeing if I use the modern & monotone styling of the newer icons while removing some of the visual noise. In the image is the current icons and then the tweaked icons below. I've tried to scale this screenshot (Within the display of this issue, not the file itself) to be representative of the matching web-viewed size as 100% zoom. <img width="436" src="https://user-images.githubusercontent.com/8343178/193325694-056dce8e-2fbd-4920-88fa-164363f42870.png"> Do you find the second set to be an improvement? --- Commit for my reference: 953402f2eb05e00f2aa8440084df17a16fc8e52a

OVERLORD commented

2026-02-05 05:07:00 +03:00

@Wookbert commented on GitHub (Oct 1, 2022):

Second design is definitely an improvement in my opinion. Any chance to additionally make the +sses green and the Xsses red? (Only the + and X, not the entire icons).

@Wookbert commented on GitHub (Oct 1, 2022): Second design is definitely an improvement in my opinion. Any chance to additionally make the +sses green and the Xsses red? (Only the + and X, not the entire icons).

OVERLORD commented

2026-02-05 05:07:02 +03:00

@ssddanbrown commented on GitHub (Oct 1, 2022):

Any chance to additionally make the +sses green and the Xsses red? (Only the + and X, not the entire icons).

I did play about with that back in July, but it only seemed to make the icons harder to read. The small amount of color seemed to not be instantly recognizable and caused more visual distraction.

@ssddanbrown commented on GitHub (Oct 1, 2022): > Any chance to additionally make the +sses green and the Xsses red? (Only the + and X, not the entire icons). I did play about with that back in July, but it only seemed to make the icons harder to read. The small amount of color seemed to not be instantly recognizable and caused more visual distraction.

OVERLORD commented

2026-02-05 05:07:06 +03:00

@ssddanbrown commented on GitHub (Oct 2, 2022):

Have now merged the tweaked icons into the development branch, to be part of the next feature release.
Hopefully between these changes, the hover-labels that already exist and, if applied, the color tweak above, these icons should be significantly more decipherable so I will therefore close this off.

@ssddanbrown commented on GitHub (Oct 2, 2022): Have now merged the tweaked icons into the development branch, to be part of the next feature release. Hopefully between these changes, the hover-labels that already exist and, if applied, the color tweak above, these icons should be significantly more decipherable so I will therefore close this off.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#2763