Implement i18n 6/9 Chat

This commit is contained in:
Reckless_Satoshi 2022-04-04 12:26:09 -07:00
parent 433f538508
commit 41d121ce82
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
3 changed files with 21 additions and 7 deletions

View File

@ -80,6 +80,7 @@ class Chat extends Component {
} }
render() { render() {
const { t } = this.props;
return ( return (
<Container component="main" maxWidth="xs" > <Container component="main" maxWidth="xs" >
<Grid container xs={12} spacing={0.5}> <Grid container xs={12} spacing={0.5}>
@ -87,7 +88,7 @@ class Chat extends Component {
<Grid item xs={5.5}> <Grid item xs={5.5}>
<Paper elevation={1} style={this.state.connected ? {backgroundColor: '#e8ffe6'}: {backgroundColor: '#FFF1C5'}}> <Paper elevation={1} style={this.state.connected ? {backgroundColor: '#e8ffe6'}: {backgroundColor: '#FFF1C5'}}>
<Typography variant='caption' sx={{color: '#111111'}}> <Typography variant='caption' sx={{color: '#111111'}}>
You: {this.state.connected ? 'connected': 'disconnected'} {t("You")+": "}{this.state.connected ? t("connected"): t("disconnected")}
</Typography> </Typography>
</Paper> </Paper>
</Grid> </Grid>
@ -95,7 +96,7 @@ class Chat extends Component {
<Grid item xs={5.5}> <Grid item xs={5.5}>
<Paper elevation={1} style={this.state.peer_connected ? {backgroundColor: '#e8ffe6'}: {backgroundColor: '#FFF1C5'}}> <Paper elevation={1} style={this.state.peer_connected ? {backgroundColor: '#e8ffe6'}: {backgroundColor: '#FFF1C5'}}>
<Typography variant='caption' sx={{color: '#111111'}}> <Typography variant='caption' sx={{color: '#111111'}}>
Peer: {this.state.peer_connected ? 'connected': 'disconnected'} {t("Peer")+": "}{this.state.peer_connected ? t("connected"): t("disconnected")}
</Typography> </Typography>
</Paper> </Paper>
</Grid> </Grid>
@ -143,10 +144,10 @@ class Chat extends Component {
<Grid containter alignItems="stretch" style={{ display: "flex" }}> <Grid containter alignItems="stretch" style={{ display: "flex" }}>
<Grid item alignItems="stretch" style={{ display: "flex"}}> <Grid item alignItems="stretch" style={{ display: "flex"}}>
<TextField <TextField
label="Type a message" label={t("Type a message")}
variant="standard" variant="standard"
size="small" size="small"
helperText={this.state.connected ? null : "Connecting..."} helperText={this.state.connected ? null : t("Connecting...")}
value={this.state.value} value={this.state.value}
onChange={e => { onChange={e => {
this.setState({ value: e.target.value }); this.setState({ value: e.target.value });
@ -156,12 +157,12 @@ class Chat extends Component {
/> />
</Grid> </Grid>
<Grid item alignItems="stretch" style={{ display: "flex" }}> <Grid item alignItems="stretch" style={{ display: "flex" }}>
<Button disabled={!this.state.connected} type="submit" variant="contained" color="primary" > Send </Button> <Button disabled={!this.state.connected} type="submit" variant="contained" color="primary">{t("Send")} </Button>
</Grid> </Grid>
</Grid> </Grid>
</form> </form>
<FormHelperText> <FormHelperText>
The chat has no memory: if you leave, messages are lost. <Link target="_blank" href="https://github.com/Reckless-Satoshi/robosats/blob/main/docs/sensitive-data-PGP-guide.md/"> Learn easy PGP encryption.</Link> {t("The chat has no memory: if you leave, messages are lost.")} <Link target="_blank" href="https://github.com/Reckless-Satoshi/robosats/blob/main/docs/sensitive-data-PGP-guide.md/"> {t("Learn easy PGP encryption.")}</Link>
</FormHelperText> </FormHelperText>
</Container> </Container>
) )

View File

@ -125,6 +125,19 @@
"Cancel":"Cancel", "Cancel":"Cancel",
"Collaborative Cancel":"Collaborative Cancel", "Collaborative Cancel":"Collaborative Cancel",
"CHAT BOX - Chat.js":"Chat Box",
"You":"You",
"Peer":"Peer",
"connected":"connected",
"disconnected":"disconnected",
"Type a message":"Type a message",
"Connecting...":"Connecting...",
"Send":"Send",
"The chat has no memory: if you leave, messages are lost.":"The chat has no memory: if you leave, messages are lost.",
"Learn easy PGP encryption.":"Learn easy PGP encryption.",
"CONTRACT BOX - TradeBox.js": "The Contract Box that guides users trough the whole trade pipeline", "CONTRACT BOX - TradeBox.js": "The Contract Box that guides users trough the whole trade pipeline",
"Contract Box":"Contract Box", "Contract Box":"Contract Box",

File diff suppressed because one or more lines are too long