Enhancement: Outline icons for unpublished and deleted resources in tree

[jaygilmore]

What does it do?

This PR updates the resource tree icons to make unpublished and deleted resources easier to distinguish at a glance:

• Published resources use the standard dark icon color.
• Unpublished and deleted resources use an outlined version of the icon.

The outlined style visually separates them from published items without relying solely on color or status labels.

It factors in @rthrash's comments here: #16465 (comment)

---

Screenshot

---

Why is it needed?

This is a potential enhancement to the visual updates introduced in #16759. While that PR introduced more consistent icon styling, this change improves visual clarity by making unpublished and deleted resources more visually distinct. It helps users quickly spot content that isn't live.

---

How to test

1. Go to the resource tree in the manager.
2. Create or locate:
   • A published resource
   • An unpublished resource
   • A deleted resource (that is still in the trash)
3. Confirm that:
   • Published resources use the solid dark icon.
   • Unpublished and deleted resources show the outline version of the icon.
4. Try switching publish status and check that the icon updates correctly.

---

Related issue(s)/PR(s)

• Enhancement to PR: #16759

[jaygilmore]

@opengeek I realized I had accidentally merged the compiled css. What's the correct way to resolve that on my end.

[jaygilmore]

@opengeek should that stuff not all be omitted in the .gitignore?

[opengeek]

@jaygilmore you'll need to remove the compiled css files from your commit above. They cannot be omitted through .gitignore as they have to be included in the repository. They just cannot be committed with your PR as those compiled resources always have to be pushed to the main branches after being compiled when they are accepted and merged.

[smg6511]

@jaygilmore - I think for consistency of the design pattern I'd make Published & Hidden gray as you had it before. Also, consider keeping the Deleted icon filled. I get why you chose the outline, but I think it's a special-case state and the filled icon makes those items more highly visible.

[Ruslan-Aleev]

@jaygilmore Hi!
No offense, but I don't think this is a very useful PR, because the icons are constantly being overridden by the template icons, and the new icons will only be visible for the default state, which doesn't make much sense, I think.

Another comment on the PR for tree design - we need to remember about the resource group settings tree, so that the styles are consistent.

[smg6511]

I wouldn't say this PR isn't useful, it just needs to take template icon customization into account. @Ruslan-Aleev - good catch on that. I do wonder though how many users are assigning custom template icons; I haven't so far in my projects. Nonetheless, that needs to be factored in. One way of doing this could be to allow two classes or sets of classes separated by some delimiter (probably a comma) to be specified if a user wants to follow the filled/outlined pattern being proposed. If the user only assigns one icon class/set of classes, then both resource states would use the same icon.

[Ruslan-Aleev]

I do wonder though how many users are assigning custom template icons; I haven't so far in my projects.

I have it differently, no matter how many sites I've come across, almost all of them have icons in the template =)

Nonetheless, that needs to be factored in. One way of doing this could be to allow two classes or sets of classes separated by some delimiter (probably a comma) to be specified if a user wants to follow the filled/outlined pattern being proposed.

Is it worth it? There is no problem with the publication status now, it is mixed up, in my opinion, see #16759, but icons will not fix this.
And by adding icon classes, we create new flaws that need to be fixed.
You also doubt that users use template icons, but now there will be even more of them =)

[jaygilmore]

@opengeek

@jaygilmore you'll need to remove the compiled css files from your commit above.

Can this be done here in github or do I need to do some magic in my repo and then resubmit the PR? This is outside of my normal area of expertise.

[jaygilmore]

@smg6511 that's a fair point on the deleted icon. That was a request of @rthrash as was this entire PR. He may have some further thougts here.

@Ruslan-Aleev @Ruslan-Aleev, no offense taken. However, this should be compatible with any of the available Font Awesome icons, as the way it's accomplished in the CSS is that the outline versions of the icons are displayed when the font-weight: 400; is applied. The default state is that the font-weight of the icons is 900. So, any custom icons in the Font Awesome sets will be handled similarly. If there is no outline version of the icon, it will use the default. So, it's entirely compatible with custom Template icons. I'm not adding any classes or any other tricks other than to apply a variation on an unpublished resource icon in the CSS.

Let me know if I'm misunderstanding. :)

font-weight:900 (standard)

font weight: 400 (outline)

[opengeek]

@opengeek

@jaygilmore you'll need to remove the compiled css files from your commit above.

Can this be done here in github or do I need to do some magic in my repo and then resubmit the PR? This is outside of my normal area of expertise.

There's no simple way to do this once you add these files to the commit. You'll have to do an interactive rebase and remove the changes to the compiled files from the commit. I'm not sure the exact steps to do that off the top of my head. I would do it for you, but that would invalidate your local branch since I would be rewriting the history of it.

[rthrash]

@jaygilmore @smg6511

@smg6511 that's a fair point on the deleted icon. That was a request of @rthrash as was this entire PR. He may have some further thougts here.

The thought was simple: keep the site at-a-glance clear on what's actually published, which is far and above what typically shows in most MODX sites to non-authenticated visitors and to aid in findability.

[jaygilmore]

@opengeek

You'll have to do an interactive rebase and remove the changes to the compiled files from the commit.

I think I've resolved it correctly at this time. From that regard, please let me know if there's still anything needed to change for the PR to be technically valid.

[jaygilmore]

@Mark-H is this anything you have concerns about? @smg6511 and @Ruslan-Aleev what are your thoughts on this as it relates to my further comments on the handling and fallback for custom template icons.

[jaygilmore]

Closing in favour of #16761