Initial implementation for bitmap text component. Only dimensions support for now

This commit is contained in:
SleepWalker 2016-09-22 08:10:00 +03:00
parent 3fcf10a393
commit a6b6055fe8
5 changed files with 43 additions and 11 deletions

View File

@ -47,6 +47,7 @@
"extract-text-webpack-plugin": "^1.0.0", "extract-text-webpack-plugin": "^1.0.0",
"file-loader": "^0.9.0", "file-loader": "^0.9.0",
"html-webpack-plugin": "^2.0.0", "html-webpack-plugin": "^2.0.0",
"image-size-loader": "^0.7.0",
"json-loader": "^0.5.4", "json-loader": "^0.5.4",
"scripts": "file:scripts", "scripts": "file:scripts",
"url-loader": "^0.5.7", "url-loader": "^0.5.7",

View File

@ -0,0 +1,37 @@
import { PropTypes } from 'react';
import { FormattedMessage as Message } from 'react-intl';
export default function BitmapText(props) {
const src = require(`emails/register/images/ru/welcome.png`);
// TODO: we can improve this loader in future by adding an option to disable file emitting
// because this thing is handled by url-loader
const size = require(`image-size!emails/register/images/ru/welcome.png`);
const width = props.retina ? size.width / 2 : size.width;
const height = props.retina ? size.height / 2 : size.height;
return (
<Message {...props.message}>{(message) =>
<img src={src} alt={message} style={{
width: `${width}px`,
height: `${height}px`,
verticalAlign: 'middle'
}}/>
}</Message>
);
}
BitmapText.propTypes = {
message: PropTypes.oneOfType([
PropTypes.string,
PropTypes.shape({
id: PropTypes.string
})
]).isRequired,
retina: PropTypes.bool
};
BitmapText.defaultProps = {
retina: true
};

View File

@ -0,0 +1 @@
export BitmapText from './BitmapText';

View File

@ -19,7 +19,7 @@ export default class DevApp extends Component {
componentWillMount() { componentWillMount() {
try { try {
const lastState = JSON.parse(localStorage.getItem('emailRendererState')); const lastState = JSON.parse(localStorage.getItem('emailRendererState'));
this.setState(lastState); lastState && this.setState(lastState);
} catch (err) {/* no state was saved */} } catch (err) {/* no state was saved */}
} }

View File

@ -6,6 +6,7 @@ import { Userbar } from 'components/userbar';
import { Table } from 'components/table'; import { Table } from 'components/table';
import { Button } from 'components/button'; import { Button } from 'components/button';
import { Input } from 'components/input'; import { Input } from 'components/input';
import { BitmapText } from 'components/text';
import styles from './styles'; import styles from './styles';
import messages from './messages.intl.json'; import messages from './messages.intl.json';
@ -14,7 +15,6 @@ import violetManImage from './images/violetMan.png';
import orangeManImage from './images/orangeMan.png'; import orangeManImage from './images/orangeMan.png';
import darkBlueManImage from './images/darkBlueMan.png'; import darkBlueManImage from './images/darkBlueMan.png';
import welcomeImage from './images/ru/welcome.png';
import confirmEmailImage from './images/ru/confirmEmail.png'; import confirmEmailImage from './images/ru/confirmEmail.png';
import whatsNextImage from './images/ru/whatsNext.png'; import whatsNextImage from './images/ru/whatsNext.png';
import chooseYouSkin from './images/ru/chooseYouSkin.png'; import chooseYouSkin from './images/ru/chooseYouSkin.png';
@ -32,15 +32,8 @@ export default function Register({username, link, code}) {
<div style={styles.welcomeUsername}> <div style={styles.welcomeUsername}>
<Message {...messages.hello_username} values={{username}} /> <Message {...messages.hello_username} values={{username}} />
</div> </div>
{/* TODO: картинка и её alt */}
<Message {...messages.welcome_image}>{(message) => <BitmapText message={messages.welcome_image} />
<img src={welcomeImage} alt={message} style={{
width: '374px',
// width: '231px',
// width: '407px',
verticalAlign: 'middle'
}}/>
}</Message>
</td> </td>
</tr> </tr>
</Table> </Table>