Skip to content

Commit

Permalink
merge-upstream: dynamic icon recoloring
Browse files Browse the repository at this point in the history
  • Loading branch information
GarboMuffin committed Dec 25, 2023
1 parent bba8c9f commit d3500a2
Show file tree
Hide file tree
Showing 7 changed files with 84 additions and 32 deletions.
19 changes: 10 additions & 9 deletions src/components/color-picker/color-picker.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,18 @@ import {MIXED} from '../../helper/style-path';
import eyeDropperIcon from './icons/eye-dropper.svg';
import noFillIcon from '../color-button/no-fill.svg';
import mixedFillIcon from '../color-button/mixed-fill.svg';
import fillHorzGradientIcon from './icons/fill-horz-gradient-enabled.svg';
import fillRadialIcon from './icons/fill-radial-enabled.svg';
import fillSolidIcon from './icons/fill-solid-enabled.svg';
import fillVertGradientIcon from './icons/fill-vert-gradient-enabled.svg';
import swapIcon from './icons/swap.svg';
import fillHorzGradientIcon from '!../../tw-recolor/build!./icons/fill-horz-gradient-enabled.svg';
import fillRadialIcon from '!../../tw-recolor/build!./icons/fill-radial-enabled.svg';
import fillSolidIcon from '!../../tw-recolor/build!./icons/fill-solid-enabled.svg';
import fillVertGradientIcon from '!../../tw-recolor/build!./icons/fill-vert-gradient-enabled.svg';
import swapIcon from '!../../tw-recolor/build!./icons/swap.svg';
import Modes from '../../lib/modes';
import alphaBackground from './alpha.png';
import BufferedInputHOC from '../forms/buffered-input-hoc.jsx';
import Input from '../forms/input.jsx';
import {makeAlphaComponent} from '../../lib/tw-color-utils';
import TWColorReadout from '../tw-color-readout/tw-color-readout.jsx';
import TWRenderRecoloredImage from '../../tw-recolor/render.jsx';

const BufferedInput = BufferedInputHOC(Input);

Expand Down Expand Up @@ -91,7 +92,7 @@ class ColorPickerComponent extends React.Component {
<div>
<div className={styles.row}>
<div className={styles.gradientPickerRow}>
<img
<TWRenderRecoloredImage
className={classNames({
[styles.inactiveGradient]: this.props.gradientType !== GradientTypes.SOLID,
[styles.clickable]: true
Expand All @@ -102,7 +103,7 @@ class ColorPickerComponent extends React.Component {
width={20}
height={20}
/>
<img
<TWRenderRecoloredImage
className={classNames({
[styles.inactiveGradient]:
this.props.gradientType !== GradientTypes.HORIZONTAL,
Expand All @@ -114,7 +115,7 @@ class ColorPickerComponent extends React.Component {
width={20}
height={20}
/>
<img
<TWRenderRecoloredImage
className={classNames({
[styles.inactiveGradient]: this.props.gradientType !== GradientTypes.VERTICAL,
[styles.clickable]: true
Expand All @@ -125,7 +126,7 @@ class ColorPickerComponent extends React.Component {
width={20}
height={20}
/>
<img
<TWRenderRecoloredImage
className={classNames({
[styles.inactiveGradient]: this.props.gradientType !== GradientTypes.RADIAL,
[styles.clickable]: true
Expand Down
5 changes: 3 additions & 2 deletions src/components/dropdown/dropdown.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ import React from 'react';

import styles from './dropdown.css';

import dropdownIcon from './dropdown-caret.svg';
import dropdownIcon from '!../../tw-recolor/build!./dropdown-caret.svg';
import TWRenderRecoloredImage from '../../tw-recolor/render.jsx';

class Dropdown extends React.Component {
constructor (props) {
Expand Down Expand Up @@ -55,7 +56,7 @@ class Dropdown extends React.Component {
onClick={this.handleToggleOpenState}
>
{this.props.children}
<img
<TWRenderRecoloredImage
className={classNames(styles.dropdownIcon, {
[styles.modCaretUp]: this.state.isOpen
})}
Expand Down
25 changes: 13 additions & 12 deletions src/components/fixed-tools/fixed-tools.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,15 @@ import layout from '../../lib/layout-constants';
import {hideLabel} from '../../lib/hide-label';
import styles from './fixed-tools.css';

import groupIcon from './icons/group.svg';
import redoIcon from './icons/redo.svg';
import sendBackIcon from './icons/send-back.svg';
import sendBackwardIcon from './icons/send-backward.svg';
import sendForwardIcon from './icons/send-forward.svg';
import sendFrontIcon from './icons/send-front.svg';
import undoIcon from './icons/undo.svg';
import ungroupIcon from './icons/ungroup.svg';
import groupIcon from '!../../tw-recolor/build!./icons/group.svg';
import redoIcon from '!../../tw-recolor/build!./icons/redo.svg';
import sendBackIcon from '!../../tw-recolor/build!./icons/send-back.svg';
import sendBackwardIcon from '!../../tw-recolor/build!./icons/send-backward.svg';
import sendForwardIcon from '!../../tw-recolor/build!./icons/send-forward.svg';
import sendFrontIcon from '!../../tw-recolor/build!./icons/send-front.svg';
import undoIcon from '!../../tw-recolor/build!./icons/undo.svg';
import ungroupIcon from '!../../tw-recolor/build!./icons/ungroup.svg';
import TWRenderRecoloredImage from '../../tw-recolor/render.jsx';

const BufferedInput = BufferedInputHOC(Input);
const messages = defineMessages({
Expand Down Expand Up @@ -127,7 +128,7 @@ const FixedToolsComponent = props => {
disabled={undoDisabled}
onClick={props.onUndo}
>
<img
<TWRenderRecoloredImage
alt={props.intl.formatMessage(messages.undo)}
className={classNames(
styles.buttonGroupButtonIcon,
Expand All @@ -149,7 +150,7 @@ const FixedToolsComponent = props => {
disabled={redoDisabled}
onClick={props.onRedo}
>
<img
<TWRenderRecoloredImage
alt={props.intl.formatMessage(messages.redo)}
className={styles.buttonGroupButtonIcon}
draggable={false}
Expand Down Expand Up @@ -247,7 +248,7 @@ const FixedToolsComponent = props => {
disabled={!shouldShowBringForward()}
onClick={props.onSendToFront}
>
<img
<TWRenderRecoloredImage
className={styles.menuItemIcon}
draggable={false}
src={sendFrontIcon}
Expand All @@ -261,7 +262,7 @@ const FixedToolsComponent = props => {
disabled={!shouldShowSendBackward()}
onClick={props.onSendToBack}
>
<img
<TWRenderRecoloredImage
className={styles.menuItemIcon}
draggable={false}
src={sendBackIcon}
Expand Down
5 changes: 3 additions & 2 deletions src/components/labeled-icon-button/labeled-icon-button.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import React from 'react';
import PropTypes from 'prop-types';

import Button from '../button/button.jsx';
import TWRenderRecoloredImage from '../../tw-recolor/render.jsx';

import styles from './labeled-icon-button.css';

Expand All @@ -24,7 +25,7 @@ const LabeledIconButton = ({
onClick={onClick}
{...props}
>
<img
<TWRenderRecoloredImage
alt={imgAlt || title}
className={styles.editFieldIcon}
draggable={false}
Expand All @@ -40,7 +41,7 @@ LabeledIconButton.propTypes = {
hideLabel: PropTypes.bool,
highlighted: PropTypes.bool,
imgAlt: PropTypes.string,
imgSrc: PropTypes.string.isRequired,
imgSrc: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
onClick: PropTypes.func.isRequired,
title: PropTypes.string.isRequired
};
Expand Down
14 changes: 7 additions & 7 deletions src/components/mode-tools/mode-tools.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,19 +21,19 @@ import Formats, {isBitmap, isVector} from '../../lib/format';
import {hideLabel} from '../../lib/hide-label';
import styles from './mode-tools.css';

import copyIcon from './icons/copy.svg';
import pasteIcon from './icons/paste.svg';
import deleteIcon from './icons/delete.svg';
import copyIcon from '!../../tw-recolor/build!./icons/copy.svg';
import pasteIcon from '!../../tw-recolor/build!./icons/paste.svg';
import deleteIcon from '!../../tw-recolor/build!./icons/delete.svg';

import bitBrushIcon from '../bit-brush-mode/brush.svg';
import bitEraserIcon from '../bit-eraser-mode/eraser.svg';
import bitLineIcon from '../bit-line-mode/line.svg';
import brushIcon from '../brush-mode/brush.svg';
import curvedPointIcon from './icons/curved-point.svg';
import curvedPointIcon from '!../../tw-recolor/build!./icons/curved-point.svg';
import eraserIcon from '../eraser-mode/eraser.svg';
import flipHorizontalIcon from './icons/flip-horizontal.svg';
import flipVerticalIcon from './icons/flip-vertical.svg';
import straightPointIcon from './icons/straight-point.svg';
import flipHorizontalIcon from '!../../tw-recolor/build!./icons/flip-horizontal.svg';
import flipVerticalIcon from '!../../tw-recolor/build!./icons/flip-vertical.svg';
import straightPointIcon from '!../../tw-recolor/build!./icons/straight-point.svg';
import bitOvalIcon from '../bit-oval-mode/oval.svg';
import bitRectIcon from '../bit-rect-mode/rectangle.svg';
import bitOvalOutlinedIcon from '../bit-oval-mode/oval-outlined.svg';
Expand Down
18 changes: 18 additions & 0 deletions src/tw-recolor/build.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
/* eslint-disable import/no-commonjs */

const OLD_PRIMARY_COLOR = '#855cd6';

const loader = source => `
const original = ${JSON.stringify(source)};
const getSRC = () => {
const recolored = typeof Recolor === 'object' ? (
original.replace(/${OLD_PRIMARY_COLOR}/gi, Recolor.primary)
) : original;
return 'data:image/svg+xml;,' + encodeURIComponent(recolored);
};
export default getSRC;
`;

module.exports = loader;
30 changes: 30 additions & 0 deletions src/tw-recolor/render.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';

// This is a wrapper around <img> that forces re-render when theme state updates.

const TWRenderRecoloredImage = ({
src,
...props
}) => (
<img
src={typeof src === 'function' ? src() : src}
{...props}
/>
);

TWRenderRecoloredImage.propTypes = {
src: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
};

const mapStateToProps = state => ({
theme: state.scratchGui ? state.scratchGui.theme.theme : ''
});

const mapDispatchToProps = () => ({});

export default connect(
mapStateToProps,
mapDispatchToProps
)(TWRenderRecoloredImage);

0 comments on commit d3500a2

Please sign in to comment.