Coloured icons in the resource browser

General
6

Here’s the plugin that Jay created that uses CSS varialbes for determining colors, and looks like this:

image
image578×450 25.3 KB

Don’t forget to check the onManagerPageBeforeRender event!

/**
 * 
 * osTreeStyles Plugin
 * A Plugin to use the old-school Revo 2.x Tree Styles
 * Also slightly improves node contrast ratios
 * Fires on the MODX system event onManagerPageBeforeRender
 * @author Jay Gilmore (smashingred)
 * @created 2025-02-07
 *
 * For discussions, see https://github.com/modxcms/revolution/issues/16465
 * TL;DR: hidden = light color     unpublished = italic (+ light color?)
 */

/* @var $modx modX */
/* @var $scriptProperties array */

$eventName = $modx->event->name;

switch ($eventName) {
    case 'OnManagerPageBeforeRender':

        $css = '
#modx-leftbar .icon,
.x-tree-node .icon {
    opacity: 1;
}

.x-tree-node {
    color: #333;
    opactity: 1;
    font-style: normal;

    --color-main: #333;

    --opacity-hidemenu: 0.75;
    --font-style-hidemenu: normal;

    --opacity-unpublished: 0.6;
    --font-style-unpublished: italic;

    --color-deleted: #f00;
    --opacity-deleted: 1;
    --opacity-deleted-icon: 0.333;
    --font-style-deleted: var(--font-style-unpublished);    
}
.x-tree-node a span {
    color: inherit !important;
    opacity: inherit !important;
    font-style: inherit !important;
}
.x-tree-node i.icon,
.x-tree-node i.icon-large,
.x-tree-node a span i.icon,
.x-tree-node a span i.icon-large {
    color: inherit;
    opacity: inherit;
    font-style: normal;
    position: relative;
}
.x-tree-node .hidemenu:not(.unpublished) i.icon,
.x-tree-node .hidemenu i.icon-large {
    color: var(--color-main) !important;
    opacity: 1;
}
.x-tree-node .deleted i.icon,
.x-tree-node .deleted i.icon-large {
    color: var(--color-deleted) !important;
    opacity: var(--opacity-deleted-icon) !important;
}

.x-tree-node .hidemenu,
.x-tree-node .hidemenu a span {
    opacity: var(--opacity-hidemenu) !important;
    font-style: inherit !important;
}
.x-tree-node .unpublished,
.x-tree-node .unpublished a span {
    opacity: var(--opacity-unpublished) !important;
    font-style: var(--font-style-unpublished) !important;
}
.x-tree-node .deleted,
.x-tree-node .deleted a span {
    color: var(--color-deleted) !important;
    opacity: var(--opacity-deleted) !important;
    font-style: var(--font-style-deleted) !important;
}
.x-dd-drag-ghost a span,
.x-dd-drag-ghost a {
    color: var(--color-main) !important;
    font-style: inherit !important;
}
';
        $html = '<style>'.preg_replace( '/\s+/', ' ', $css).'</style>';
        $modx->controller->addHtml($html);
        break;
}
5 Likes