Skip to content

Revert "Revert "🧹 Remove Radium from Instructions components "" #70714

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Erin007 wants to merge 1 commit into
base: staging
Choose a base branch
from
Open

Revert "Revert "🧹 Remove Radium from Instructions components "" #70714

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions apps/src/templates/instructions/AniGifPreview.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import PropTypes from 'prop-types';
import Radium from 'radium'; // eslint-disable-line no-restricted-imports
import React from 'react';
import {connect} from 'react-redux';

Expand Down Expand Up @@ -33,17 +32,19 @@ class ImagePreviewUnwrapped extends React.Component {
ariaLabel = `${ariaLabel}. ${alt}`;
}

const previewStyle = {
...styles.aniGifPreview(url),
...(noVisualization ? styles.bigPreview : {}),
};

return (
<div id="ani-gif-preview-wrapper" style={styles.wrapper}>
<div
id="ani-gif-preview"
role="button"
tabIndex={0}
aria-label={ariaLabel}
style={[
styles.aniGifPreview(url),
noVisualization && styles.bigPreview,
]}
style={previewStyle}
onClick={showInstructionsDialog}
onKeyDown={this.handleKeyDown}
/>
Expand All @@ -69,7 +70,7 @@ const styles = {
},
};

export const ImagePreview = Radium(ImagePreviewUnwrapped);
export const ImagePreview = ImagePreviewUnwrapped;
export default connect(
state => ({
url: state.pageConstants.aniGifURL,
Expand Down
60 changes: 16 additions & 44 deletions apps/src/templates/instructions/ChatBubble.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import classNames from 'classnames';
import PropTypes from 'prop-types';
import Radium from 'radium'; // eslint-disable-line no-restricted-imports
import React from 'react';

import color from '@cdo/apps/util/color';
Expand All @@ -8,38 +8,7 @@ import ChatBubbleTip from './ChatBubbleTip';
import InlineAudio from './InlineAudio';
import {shouldDisplayChatTips} from './utils';

const styles = {
container: {
position: 'relative',
},

main: {
backgroundColor: color.white,
borderRadius: 10,
margin: '5px 0',
paddingTop: 5,
paddingBottom: 5,
paddingLeft: 10,
paddingRight: 10,
position: 'relative',
borderWidth: 2,
},

minecraft: {
borderRadius: 4,
borderWidth: 0,
},

withAudioControls: {
paddingRight: 76,
},

audioControls: {
position: 'absolute',
top: 7,
right: 12,
},
};
import styles from './chat-bubble.module.scss';

var audioStyle = {
wrapper: {
Expand Down Expand Up @@ -74,17 +43,20 @@ const ChatBubble = ({
isDashed = isDashed || false;
const showAudioControls = textToSpeechEnabled && (ttsUrl || ttsMessage);

const mainClassName = classNames(styles.main, {
[styles.minecraft]: isMinecraft,
[styles.withAudioControls]: showAudioControls,
});

return (
<div style={styles.container}>
<div className={styles.container}>
<div
style={[
styles.main,
isMinecraft && styles.minecraft,
showAudioControls && styles.withAudioControls,
{borderColor},
{backgroundColor},
{borderStyle: isDashed ? 'dashed' : 'solid'},
]}
className={mainClassName}
style={{
borderColor,
backgroundColor,
borderStyle: isDashed ? 'dashed' : 'solid',
}}
>
{children}
{shouldDisplayChatTips(skinId) && (
Expand All @@ -96,7 +68,7 @@ const ChatBubble = ({
)}
</div>
{showAudioControls && (
<div style={styles.audioControls}>
<div className={styles.audioControls}>
<InlineAudio src={ttsUrl} message={ttsMessage} style={audioStyle} />
</div>
)}
Expand All @@ -116,4 +88,4 @@ ChatBubble.propTypes = {
textToSpeechEnabled: PropTypes.bool,
};

export default Radium(ChatBubble);
export default ChatBubble;
33 changes: 14 additions & 19 deletions apps/src/templates/instructions/ChatBubbleTip.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,28 @@
import PropTypes from 'prop-types';
import Radium from 'radium'; // eslint-disable-line no-restricted-imports
import React from 'react';
import {connect} from 'react-redux';

import styles from './chat-bubble-tip.module.scss';

const ChatBubbleTip = ({isRtl, color, background, isDashed}) => {
background = background || 'white';
color = color || 'none';
isDashed = isDashed || false;

const styles = {
svg: {
position: 'absolute',
left: isRtl ? undefined : -24,
right: isRtl ? -24 : undefined,
bottom: 5,
},
polyline: {
stroke: color,
strokeWidth: 2,
fill: background,
},
};

return (
<svg height="30" width="30" style={styles.svg}>
<svg
height="30"
width="30"
className={isRtl ? styles.svgRtl : styles.svgLtr}
>
<polyline
points={isRtl ? '6,25 25,25 5,5' : '24,24 5,24 25,5'}
style={styles.polyline}
strokeDasharray={isDashed ? '5,5' : '0,0'}
style={{
stroke: color,
strokeWidth: 2,
fill: background,
strokeDasharray: isDashed ? '5,5' : '0,0',
}}
/>
</svg>
);
Expand All @@ -44,4 +39,4 @@ export default connect(state => {
return {
isRtl: state.isRtl,
};
})(Radium(ChatBubbleTip));
})(ChatBubbleTip);
57 changes: 17 additions & 40 deletions apps/src/templates/instructions/CollapserButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import classNames from 'classnames';
import PropTypes from 'prop-types';
import Radium from 'radium'; // eslint-disable-line no-restricted-imports
import React, {Component} from 'react';

import msg from '@cdo/locale';

import FontAwesome from '../../legacySharedComponents/FontAwesome';
import color from '../../util/color';

import styles from './collapser-button.module.scss';

/**
* A button for toggling the collapse state of instructions in CSF
Expand All @@ -26,7 +27,8 @@ class CollapserButton extends Component {
return (
<button
type="button"
style={[styles.collapseButton, this.props.style]}
className={styles.collapseButton}
style={this.props.style}
id="toggleButton"
onClick={this.props.onClick}
>
Expand All @@ -44,28 +46,26 @@ class CollapserButton extends Component {
icon={
this.props.collapsed ? 'chevron-circle-down' : 'chevron-circle-up'
}
style={
className={
this.props.isRtl ? styles.collapseIconRtl : styles.collapseIcon
}
/>
)}
<div style={{display: 'inline-block', userSelect: 'none'}}>
<div style={{display: 'grid'}}>
<div className={styles.textWrapper}>
<div className={styles.labelGrid}>
<div
style={{
opacity: this.props.collapsed ? 1 : 0,
gridRow: 1,
gridColumn: 1,
}}
className={classNames(
styles.label,
this.props.collapsed ? styles.show : styles.hide
)}
>
{msg.more()}
</div>
<div
style={{
opacity: this.props.collapsed ? 0 : 1,
gridRow: 1,
gridColumn: 1,
}}
className={classNames(
styles.label,
this.props.collapsed ? styles.hide : styles.show
)}
>
{msg.less()}
</div>
Expand All @@ -76,27 +76,4 @@ class CollapserButton extends Component {
}
}

const styles = {
collapseButton: {
backgroundColor: color.neutral_white,
border: `2px solid ${color.neutral_dark}`,
color: color.neutral_dark,
whiteSpace: 'nowrap',
':hover': {
backgroundColor: color.neutral_dark20,
boxShadow: 'none',
},
':focus': {
backgroundColor: color.neutral_dark20,
boxShadow: 'none',
},
},
collapseIcon: {
marginRight: 5,
},
collapseIconRtl: {
marginLeft: 5,
},
};

export default Radium(CollapserButton);
export default CollapserButton;
78 changes: 20 additions & 58 deletions apps/src/templates/instructions/HeightResizer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@
* which handles any movement.
*/
import PropTypes from 'prop-types';
import Radium from 'radium'; // eslint-disable-line no-restricted-imports
import React from 'react';

import styleConstants from '../../styleConstants';
import color from '../../util/color';

import styles from './height-resizer.module.scss';

const RESIZER_HEIGHT = styleConstants['resize-bar-width'];

Expand Down Expand Up @@ -151,76 +151,38 @@ class HeightResizer extends React.Component {
};

render() {
let mainStyle, ellipsisStyle, ellipsisClassName;
let mainStyle, ellipsisClassName, mainClass;
if (this.props.vertical) {
mainStyle = [
styles.mainVertical,
{
left: this.props.position - RESIZER_HEIGHT,
},
this.props.style,
];
ellipsisStyle = styles.ellipsisVertical;
mainClass = styles.mainVertical;
mainStyle = {
left: this.props.position - RESIZER_HEIGHT,
...this.props.style,
};
ellipsisClassName = 'fa fa-ellipsis-v';
} else {
mainStyle = [
styles.main,
{
top: this.props.position - RESIZER_HEIGHT,
},
this.props.style,
];
ellipsisStyle = styles.ellipsis;
mainClass = styles.main;
mainStyle = {
top: this.props.position - RESIZER_HEIGHT,
...this.props.style,
};
ellipsisClassName = 'fa fa-ellipsis-h';
}

return (
<div
id="ui-test-resizer"
style={mainStyle}
className={mainClass}
ref={ref => (this.resizerRef = ref)}
>
<div style={ellipsisStyle} className={ellipsisClassName} />
<div
className={`${styles.ellipsis} ${
this.props.vertical ? styles.ellipsisVertical : ''
} ${ellipsisClassName}`}
/>
</div>
);
}
}

const styles = {
main: {
position: 'absolute',
height: RESIZER_HEIGHT,
left: 0,
right: 0,
cursor: 'ns-resize',
},
mainVertical: {
position: 'absolute',
width: RESIZER_HEIGHT,
top: 0,
bottom: 0,
cursor: 'ew-resize',
},
ellipsis: {
width: '100%',
color: color.lighter_gray,
fontSize: 24,
textAlign: 'center',
whiteSpace: 'nowrap',
lineHeight: RESIZER_HEIGHT + 'px',
paddingTop: 1, // results in a slightly better centering
},
ellipsisVertical: {
width: '100%',
color: color.lighter_gray,
fontSize: 24,
textAlign: 'center',
whiteSpace: 'nowrap',
lineHeight: RESIZER_HEIGHT + 'px',
top: '50%',
position: 'absolute',
transform: 'translateY(-50%)',
},
};

export default Radium(HeightResizer);
export default HeightResizer;
3 changes: 1 addition & 2 deletions apps/src/templates/instructions/InlineFeedback.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import PropTypes from 'prop-types';
import Radium from 'radium'; // eslint-disable-line no-restricted-imports
import React, {Component} from 'react';
import ReactDOM from 'react-dom';

Expand Down Expand Up @@ -56,4 +55,4 @@ class InlineFeedback extends Component {
}
}

export default Radium(InlineFeedback);
export default InlineFeedback;
Loading