mirror of
https://github.com/elyby/emails-renderer.git
synced 2024-12-22 13:19:45 +05:30
Initial implementation for bitmap text component. Only dimensions support for now
This commit is contained in:
parent
3fcf10a393
commit
a6b6055fe8
@ -47,6 +47,7 @@
|
||||
"extract-text-webpack-plugin": "^1.0.0",
|
||||
"file-loader": "^0.9.0",
|
||||
"html-webpack-plugin": "^2.0.0",
|
||||
"image-size-loader": "^0.7.0",
|
||||
"json-loader": "^0.5.4",
|
||||
"scripts": "file:scripts",
|
||||
"url-loader": "^0.5.7",
|
||||
|
37
src/components/text/BitmapText.jsx
Normal file
37
src/components/text/BitmapText.jsx
Normal 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
|
||||
};
|
1
src/components/text/index.js
Normal file
1
src/components/text/index.js
Normal file
@ -0,0 +1 @@
|
||||
export BitmapText from './BitmapText';
|
@ -19,7 +19,7 @@ export default class DevApp extends Component {
|
||||
componentWillMount() {
|
||||
try {
|
||||
const lastState = JSON.parse(localStorage.getItem('emailRendererState'));
|
||||
this.setState(lastState);
|
||||
lastState && this.setState(lastState);
|
||||
} catch (err) {/* no state was saved */}
|
||||
}
|
||||
|
||||
|
@ -6,6 +6,7 @@ import { Userbar } from 'components/userbar';
|
||||
import { Table } from 'components/table';
|
||||
import { Button } from 'components/button';
|
||||
import { Input } from 'components/input';
|
||||
import { BitmapText } from 'components/text';
|
||||
|
||||
import styles from './styles';
|
||||
import messages from './messages.intl.json';
|
||||
@ -14,7 +15,6 @@ import violetManImage from './images/violetMan.png';
|
||||
import orangeManImage from './images/orangeMan.png';
|
||||
import darkBlueManImage from './images/darkBlueMan.png';
|
||||
|
||||
import welcomeImage from './images/ru/welcome.png';
|
||||
import confirmEmailImage from './images/ru/confirmEmail.png';
|
||||
import whatsNextImage from './images/ru/whatsNext.png';
|
||||
import chooseYouSkin from './images/ru/chooseYouSkin.png';
|
||||
@ -32,15 +32,8 @@ export default function Register({username, link, code}) {
|
||||
<div style={styles.welcomeUsername}>
|
||||
<Message {...messages.hello_username} values={{username}} />
|
||||
</div>
|
||||
{/* TODO: картинка и её alt */}
|
||||
<Message {...messages.welcome_image}>{(message) =>
|
||||
<img src={welcomeImage} alt={message} style={{
|
||||
width: '374px',
|
||||
// width: '231px',
|
||||
// width: '407px',
|
||||
verticalAlign: 'middle'
|
||||
}}/>
|
||||
}</Message>
|
||||
|
||||
<BitmapText message={messages.welcome_image} />
|
||||
</td>
|
||||
</tr>
|
||||
</Table>
|
||||
|
Loading…
Reference in New Issue
Block a user