From 1bb836f7eb2a6293faf895df94e1116073e9c750 Mon Sep 17 00:00:00 2001 From: Sarah Rietkerk <49178322+srietkerk@users.noreply.github.com> Date: Thu, 31 Aug 2023 09:07:12 -0700 Subject: [PATCH] High contrast: Icons for block categories now have colors in Minecraft (#9657) * Icons for block categories now have colors in hc mode in Minecraft * No longer looking for agent id to change agent icon in hc mode * Removed conditions for colored and inverted toolbox styling, moved to css * Remove div div, move image icon styling into toolbox.less * Remove added comment * Hoisted iconContent check to avoid duplicate code --- theme/toolbox.less | 52 ++++++++++++++++++++++++ webapp/src/toolbox.tsx | 90 +++++++++--------------------------------- 2 files changed, 71 insertions(+), 71 deletions(-) diff --git a/theme/toolbox.less b/theme/toolbox.less index 7ff8de04f8cb..50e59edc2eb5 100644 --- a/theme/toolbox.less +++ b/theme/toolbox.less @@ -229,6 +229,14 @@ div.blocklyTreeIcon span { .blocklyFlyoutLabelIcon.blocklyFlyoutIconfunctions { font-family: xicon !important; } +.blocklyTreeIcon.image-icon { + background-image: var(--image-icon-url); + width: 30px; + height: 100%; + background-size: 20px !important; + background-repeat: no-repeat !important; + background-position: 50% 50% !important; +} /******************************* Toolbox Animation @@ -259,6 +267,50 @@ div.blocklyTreeIcon span { background-color: #e4e4e4; } +/******************************* + Inverted Toolbox +*******************************/ +#root.hc .invertedToolbox { + div.blocklyTreeRow .blocklyTreeIcon { + color: var(--block-meta-color); + } + + div.blocklyTreeRow.blocklyTreeSelected .blocklyTreeIcon { + color: #fff; + } +} + +.invertedToolbox .blocklyTreeRoot { + div.blocklyTreeRow { + background-color: var(--block-meta-color); + color: #fff; + } + + div.blocklyTreeRow.blocklyTreeSelected { + background-color: var(--block-meta-color); + } + + div.blocklyTreeRow:hover { + background-color: var(--block-faded-color); + color: #fff; + } +} + +/******************************* + Colored Toolbox +*******************************/ +.coloredToolbox .blocklyTreeRoot { + div.blocklyTreeRow { + color: var(--block-meta-color); + border-left: 8px solid var(--block-meta-color); + } + + div.blocklyTreeRow.blocklyTreeSelected { + background-color: var(--block-meta-color); + color: #fff; + } +} + /******************************* Media Adjustments *******************************/ diff --git a/webapp/src/toolbox.tsx b/webapp/src/toolbox.tsx index 7eabc54d5ed4..8baf79ef2775 100644 --- a/webapp/src/toolbox.tsx +++ b/webapp/src/toolbox.tsx @@ -715,8 +715,6 @@ export class TreeRow extends data.Component { this.state = { } - this.onmouseenter = this.onmouseenter.bind(this); - this.onmouseleave = this.onmouseleave.bind(this); this.handleDeleteClick = this.handleDeleteClick.bind(this); } @@ -729,26 +727,6 @@ export class TreeRow extends data.Component { return treeRow; } - onmouseenter() { - const appTheme = pxt.appTarget.appTheme; - const metaColor = this.getMetaColor(); - const invertedMultipler = appTheme.blocklyOptions - && appTheme.blocklyOptions.toolboxOptions - && appTheme.blocklyOptions.toolboxOptions.invertedMultiplier || 0.3; - - if (appTheme.invertedToolbox) { - this.treeRow.style.backgroundColor = pxt.toolbox.fadeColor(metaColor || '#ddd', invertedMultipler, false); - } - } - - onmouseleave() { - const appTheme = pxt.appTarget.appTheme; - const metaColor = this.getMetaColor(); - if (appTheme.invertedToolbox) { - this.treeRow.style.backgroundColor = (metaColor || '#ddd'); - } - } - getMetaColor() { const { color } = this.props.treeRow; return pxt.toolbox.convertColor(color) || pxt.toolbox.getNamespaceColor('default'); @@ -774,57 +752,29 @@ export class TreeRow extends data.Component { && appTheme.blocklyOptions.toolboxOptions.invertedMultiplier || 0.3; let treeRowStyle: React.CSSProperties = { - paddingLeft: '0px' - } - let treeRowClass = 'blocklyTreeRow'; - if (appTheme.invertedToolbox) { - // Inverted toolbox - treeRowStyle.backgroundColor = (metaColor || '#ddd'); - treeRowStyle.color = '#fff'; - } else { - if (appTheme.coloredToolbox) { - // Colored toolbox - treeRowStyle.color = `${metaColor}`; - } - const border = `8px solid ${metaColor}`; - if (isRtl) { - treeRowStyle.borderRight = border; - } else { - treeRowStyle.borderLeft = border; - } - if (topRowIndex && this.props.shouldAnimate) { - treeRowStyle.animationDelay = `${(topRowIndex * this.animationDelay) + this.baseAnimationDelay}s`; - treeRowClass += ' blocklyTreeAnimate'; - } - } + paddingLeft: '0px', + "--block-meta-color": metaColor, + "--block-faded-color": pxt.toolbox.fadeColor(metaColor || '#ddd', invertedMultipler, false) + } as React.CSSProperties; - // Selected - if (selected) { - treeRowClass += ' blocklyTreeSelected'; - if (appTheme.invertedToolbox) { - treeRowStyle.backgroundColor = `${pxt.toolbox.fadeColor(metaColor, invertedMultipler, false)}`; - } else { - treeRowStyle.backgroundColor = (metaColor || '#ddd'); - } - treeRowStyle.color = '#fff'; + let treeRowClass = `blocklyTreeRow${selected ? ' blocklyTreeSelected' : '' }`; + + if (topRowIndex && this.props.shouldAnimate) { + treeRowStyle.animationDelay = `${(topRowIndex * this.animationDelay) + this.baseAnimationDelay}s`; + treeRowClass += ' blocklyTreeAnimate'; } // Icon - const iconClass = `blocklyTreeIcon${subns ? 'more' : icon ? (nameid || icon).toLowerCase() : 'Default'}`.replace(/\s/g, ''); + let iconClass = `blocklyTreeIcon${subns ? 'more' : icon ? (nameid || icon).toLowerCase() : 'Default'}`.replace(/\s/g, ''); let iconContent = subns ? pxt.toolbox.getNamespaceIcon('more') : icon || pxt.toolbox.getNamespaceIcon('default'); - let iconImageStyle: JSX.Element; - if (iconContent.length > 1) { - // It's probably an image icon, and not an icon code - iconImageStyle = + const isImageIcon = iconContent.length > 1; // It's probably an image icon, and not an icon code + let iconImageStyle: React.CSSProperties = { + "--image-icon-url": isImageIcon ? `url("${Util.pathJoin(pxt.webConfig.commitCdnUrl, encodeURI(icon))}")!important`: undefined, + display: "inline-block" + } as React.CSSProperties; + + if (isImageIcon) { + iconClass += ' image-icon'; iconContent = undefined; } const rowTitle = name ? name : Util.capitalize(subns || nameid); @@ -835,11 +785,9 @@ export class TreeRow extends data.Component { style={treeRowStyle} tabIndex={0} data-ns={dataNs} aria-label={lf("Toggle category {0}", rowTitle)} aria-expanded={selected} - onMouseEnter={this.onmouseenter} onMouseLeave={this.onmouseleave} onClick={onClick} onContextMenu={onClick} onKeyDown={onKeyDown ? onKeyDown : fireClickOnEnter}> - {iconImageStyle} - {iconContent} + {iconContent} {rowTitle} {hasDeleteButton ? : undefined}