diff --git a/app/util/Layer.js b/app/util/Layer.js index 45ab549cc..5a65c1105 100644 --- a/app/util/Layer.js +++ b/app/util/Layer.js @@ -118,23 +118,10 @@ Ext.define('CpsiMapview.util.Layer', { Ext.log.warn('Layer type not recognized (updateLayerNodeUI)'); } - const originalGlyph = layer.get('_origTreeConf') - ? layer.get('_origTreeConf').glyph - : null; - const expandedGlyph = 'f0b0'; if (hasFilters) { - // only set the glyph and class if needed - better for performance - if (node.get('glyph') !== expandedGlyph) { - node.set('glyph', expandedGlyph); - node.addCls('cpsi-tree-node-filtered'); - } + node.addCls('cpsi-tree-node-filtered'); } else { - // only set the glyph and class if needed - better for performance - if (node.get('glyph') !== originalGlyph) { - // revert to the original glyph if set on the layer - node.set('glyph', originalGlyph); - node.removeCls('cpsi-tree-node-filtered'); - } + node.removeCls('cpsi-tree-node-filtered'); } if (triggerUIUpdate) { diff --git a/sass/src/view/LayerTree.scss b/sass/src/view/LayerTree.scss index afacbc507..617d5194a 100644 --- a/sass/src/view/LayerTree.scss +++ b/sass/src/view/LayerTree.scss @@ -13,10 +13,23 @@ font-style: italic; font-weight: bold; - .x-tree-checkbox:after { - content: "\f0b0"; - font-family: "Font Awesome 5 Free" !important; + .x-tree-checkbox { + position: relative; // anchor point for the badge + margin-right: 14px; // make room so the badge doesn't collide with .x-tree-icon } + + .x-tree-checkbox:after { + content: "\f0b0"; + position: absolute; + left: 100%; // immediately to the right of the checkbox box + top: 50%; + transform: translateY(-50%); + margin-left: 2px; // add small gap between checkbox and icon + font-family: 'Font Awesome 5 Free' !important; // Solid — \f0b0 has no Regular version + font-size: 12px; // smaller than the tree icon + line-height: 1; + pointer-events: none; // don't let it handle clicks meant for the checkbox + } } .cpsi-tree-node-baselayer {