Fix DM code layout

This commit is contained in:
Clayton Wilson 2019-12-05 16:13:56 -05:00
parent fc9994d42e
commit 719294f0ed

View File

@ -377,7 +377,7 @@ export class directMessages extends Component {
const open = Boolean(this.state.anchorEl); const open = Boolean(this.state.anchorEl);
const id = open ? 'simple-popover' : undefined; const id = open ? 'simple-popover' : undefined;
let dmListMarkup = this.state.dmData ? ( let dmListMarkup = this.state.dmData ? (
this.state.dmData.map((channel) => ( this.state.dmData.map((channel) => (
<Card <Card
onClick={this.handleClickChannel} onClick={this.handleClickChannel}
@ -524,35 +524,35 @@ export class directMessages extends Component {
onChange={this.handleChangeAddDMUsername} onChange={this.handleChangeAddDMUsername}
value={this.state.createDMUsername} value={this.state.createDMUsername}
label="Username" label="Username"
variant="outlined" variant="outlined"
helperText={errors.createDirectMessage} helperText={errors.createDirectMessage}
error={errors.createDirectMessage ? true : false} error={errors.createDirectMessage ? true : false}
style={{ style={{
width: 265, width: 265,
marginRight: 10, marginRight: 10,
marginLeft: 10, marginLeft: 10,
textAlign: 'center', textAlign: 'center',
}} }}
/> />
</Grid> </Grid>
<Grid item> <Grid item>
<Button <Button
className={classes.createButton} className={classes.createButton}
variant="outlined" variant="outlined"
color="primary" color="primary"
onClick={this.handleClickCreate} onClick={this.handleClickCreate}
disabled={ disabled={
creatingDirectMessage || creatingDirectMessage ||
this.state.createDMUsername === "" this.state.createDMUsername === ""
} }
> >
Create Create
{creatingDirectMessage && {creatingDirectMessage &&
<CircularProgress size={30} style={{position: "absolute"}}/> // Won't accept classes style for some reason
// Won't accept classes style for some reason <CircularProgress size={30} style={{position: "absolute"}}/>
} }
</Button> </Button>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
<Grid item sm /> <Grid item sm />
@ -572,13 +572,13 @@ export class directMessages extends Component {
<Grid item className={classes.dmItemsUpper} id="dmItemsUpper"> <Grid item className={classes.dmItemsUpper} id="dmItemsUpper">
{dmListMarkup} {dmListMarkup}
</Grid> </Grid>
<Grid item className={classes.dmItemsLower}> <Grid item className={classes.dmItemsLower}>
<Card key="5555" data-key="5555" className={classes.dmCardUnselected}> <Card key="5555" data-key="5555" className={classes.dmCardUnselected}>
<Box className={classes.dmListItemContainer}> <Box className={classes.dmListItemContainer}>
{addDMMarkup} {addDMMarkup}
</Box> </Box>
</Card> </Card>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
<Grid item className={classes.messagesGrid} sm> <Grid item className={classes.messagesGrid} sm>
@ -596,30 +596,30 @@ export class directMessages extends Component {
variant="outlined" variant="outlined"
multiline multiline
rows={2} rows={2}
margin="dense" margin="dense"
value={this.state.drafts[this.state.selectedChannel.dmId] ? this.state.drafts[this.state.selectedChannel.dmId] : ""} value={this.state.drafts[this.state.selectedChannel.dmId] ? this.state.drafts[this.state.selectedChannel.dmId] : ""}
onChange={this.handleChangeMessage} onChange={this.handleChangeMessage}
/> />
<Fab <Fab
className={classes.messageButton} className={classes.messageButton}
onClick={this.handleClickSend} onClick={this.handleClickSend}
disabled={ disabled={
sendingDirectMessage || sendingDirectMessage ||
!this.state.drafts[this.state.selectedChannel.dmId] || !this.state.drafts[this.state.selectedChannel.dmId] ||
this.state.drafts[this.state.selectedChannel.dmId] === "" this.state.drafts[this.state.selectedChannel.dmId] === ""
} }
> >
<SendIcon style={{ color: '#FFFFFF' }} /> <SendIcon style={{ color: '#FFFFFF' }} />
{ {
sendingDirectMessage && sendingDirectMessage &&
<CircularProgress size={30} style={{position: "absolute"}}/> <CircularProgress size={30} style={{position: "absolute"}}/>
// Won't accept classes style for some reason // Won't accept classes style for some reason
} }
</Fab> </Fab>
</Box> </Box>
</Card> </Card>
)} )}
{!this.state.hasChannelSelected && {!this.state.hasChannelSelected &&
this.state.dmData && <Typography>Select a DM on the left</Typography>} this.state.dmData && <Typography>Select a DM on the left</Typography>}
</Box> </Box>
</Grid> </Grid>