Merge pull request #3351 from urbit/mp/revert/3344

Revert "chat: bottom-align UI in input"
This commit is contained in:
matildepark 2020-08-19 13:05:47 -04:00 committed by GitHub
commit 94151b4a8f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 51 deletions

View File

@ -122,7 +122,7 @@ export default class ChatEditor extends Component {
return ( return (
<div <div
className={ className={
'chat fr h-100 flex flex-shrink-0 bg-gray0-d lh-copy pl2 w-100 items-center' + 'chat fr h-100 flex bg-gray0-d lh-copy pl2 w-100 items-center' +
(props.inCodeMode ? ' code' : '') (props.inCodeMode ? ' code' : '')
} }
style={{ flexGrow: 1, maxHeight: '224px', width: 'calc(100% - 72px)' }}> style={{ flexGrow: 1, maxHeight: '224px', width: 'calc(100% - 72px)' }}>

View File

@ -1,7 +1,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import ChatEditor from './chat-editor'; import ChatEditor from './chat-editor';
import { S3Upload } from './s3-upload'; import { S3Upload } from './s3-upload'
import { Col } from '@tlon/indigo-react'; ;
import { uxToHex } from '~/logic/lib/util'; import { uxToHex } from '~/logic/lib/util';
import { Sigil } from '~/logic/lib/sigil'; import { Sigil } from '~/logic/lib/sigil';
@ -211,60 +211,54 @@ export class ChatInput extends Component {
/>; />;
return ( return (
<div <div className={
className={ "pa3 cf flex black white-d bt b--gray4 b--gray1-d bg-white " +
"pa3 cf flex black white-d bt b--gray4 b--gray1-d bg-white " + "bg-gray0-d relative"
"bg-gray0-d relative" }
} style={{ flexGrow: 1 }}>
style={{ flexGrow: 1 }}> <div className="fl"
<Col style={{
style={{ float: 'left' }} marginTop: 6,
flexDirection="row" flexBasis: 24,
alignItems="flex-end" height: 24
mb="5px" }}>
>
{avatar} {avatar}
</Col> </div>
<ChatEditor <ChatEditor
inCodeMode={state.inCodeMode} inCodeMode={state.inCodeMode}
submit={this.submit} submit={this.submit}
onUnmount={props.onUnmount} onUnmount={props.onUnmount}
message={props.message} message={props.message}
placeholder='Message...' placeholder='Message...' />
/> <div className="ml2 mr2"
<Col flexDirection="row" alignItems="flex-end" mb="9px"> style={{
<div height: '16px',
className='ml2 mr2' width: '16px',
style={{ flexBasis: 16,
height: "16px", marginTop: 10
width: "16px", }}>
flexBasis: 16 <S3Upload
}}> configuration={props.s3.configuration}
<S3Upload credentials={props.s3.credentials}
configuration={props.s3.configuration} uploadSuccess={this.uploadSuccess.bind(this)}
credentials={props.s3.credentials} uploadError={this.uploadError.bind(this)}
uploadSuccess={this.uploadSuccess.bind(this)} />
uploadError={this.uploadError.bind(this)} </div>
/> <div style={{
</div> height: '16px',
<div width: '16px',
style={{ flexBasis: 16,
height: "16px", marginTop: 10
width: "16px", }}>
flexBasis: 16 <img style={{
}}> filter: state.inCodeMode && 'invert(100%)',
<img height: '14px',
style={{ width: '14px',
filter: state.inCodeMode && "invert(100%)", }}
height: "14px", onClick={this.toggleCode}
width: "14px", src="/~chat/img/CodeEval.png"
}} className="contrast-10-d bg-white bg-none-d ba b--gray1-d br1" />
onClick={this.toggleCode} </div>
src='/~chat/img/CodeEval.png'
className='contrast-10-d bg-white bg-none-d ba b--gray1-d br1'
/>
</div>
</Col>
</div> </div>
); );
} }