urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2025-01-04 10:32:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

chat: bottom-align UI in input

Browse Source
This commit is contained in:
Matilde Park 2020-08-18 17:47:05 -04:00
parent f769c89c3c
commit a2af03fc70
2 changed files with 51 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pkg/interface/src/views/apps/chat/components/lib/chat-editor.js
View File

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

94
pkg/interface/src/views/apps/chat/components/lib/chat-input.js
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,54 +211,60 @@ export class ChatInput extends Component {
/>; />;
return ( return (
<div className={ <div
"pa3 cf flex black white-d bt b--gray4 b--gray1-d bg-white " + className={
"bg-gray0-d relative" "pa3 cf flex black white-d bt b--gray4 b--gray1-d bg-white " +
} "bg-gray0-d relative"
style={{ flexGrow: 1 }}> }
<div className="fl" style={{ flexGrow: 1 }}>
style={{ <Col
marginTop: 6, style={{ float: 'left' }}
flexBasis: 24, flexDirection="row"
height: 24 alignItems="flex-end"
}}> mb="5px"
>
{avatar} {avatar}
</div> </Col>
<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" />
style={{ <Col flexDirection="row" alignItems="flex-end" mb="9px">
height: '16px', <div
width: '16px', className='ml2 mr2'
flexBasis: 16, style={{
marginTop: 10 height: "16px",
}}> width: "16px",
<S3Upload flexBasis: 16
configuration={props.s3.configuration} }}>
credentials={props.s3.credentials} <S3Upload
uploadSuccess={this.uploadSuccess.bind(this)} configuration={props.s3.configuration}
uploadError={this.uploadError.bind(this)} credentials={props.s3.credentials}
/> uploadSuccess={this.uploadSuccess.bind(this)}
</div> uploadError={this.uploadError.bind(this)}
<div style={{ />
height: '16px', </div>
width: '16px', <div
flexBasis: 16, style={{
marginTop: 10 height: "16px",
}}> width: "16px",
<img style={{ flexBasis: 16
filter: state.inCodeMode && 'invert(100%)', }}>
height: '14px', <img
width: '14px', style={{
}} filter: state.inCodeMode && "invert(100%)",
onClick={this.toggleCode} height: "14px",
src="/~chat/img/CodeEval.png" width: "14px",
className="contrast-10-d bg-white bg-none-d ba b--gray1-d br1" /> }}
</div> onClick={this.toggleCode}
src='/~chat/img/CodeEval.png'
className='contrast-10-d bg-white bg-none-d ba b--gray1-d br1'
/>
</div>
</Col>
</div> </div>
); );
} }