ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2025-01-05 13:55:54 +03:00
Code Issues Packages Projects Releases Wiki Activity

chat: fix sizing on mobile

Browse Source 
fixes https://github.com/urbit/landscape/issues/230
This commit is contained in:
Tyler Brown Cifu Shuster 2021-01-11 12:04:19 -08:00
parent 168431f4d5
commit f1c9a596c2
1 changed files with 67 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,8 +2,9 @@ import React, { Component } from 'react';
import { UnControlled as CodeEditor } from 'react-codemirror2'; import { UnControlled as CodeEditor } from 'react-codemirror2';
import { MOBILE_BROWSER_REGEX } from "~/logic/lib/util"; import { MOBILE_BROWSER_REGEX } from "~/logic/lib/util";
import CodeMirror from 'codemirror'; import CodeMirror from 'codemirror';
import styled from "styled-components";
import { Row, BaseTextArea } from '@tlon/indigo-react'; import { Row, BaseTextArea, Box } from '@tlon/indigo-react';
import 'codemirror/mode/markdown/markdown'; import 'codemirror/mode/markdown/markdown';
import 'codemirror/addon/display/placeholder'; import 'codemirror/addon/display/placeholder';
@ -52,9 +53,40 @@ const inputProxy = (input) => new Proxy(input, {
if (property === 'setValue') { if (property === 'setValue') {
return (val) => target.value = val; return (val) => target.value = val;
} }
if (property === 'element') {
return input;
}
} }
}); });
const MobileBox = styled(Box)`
display: inline-grid;
vertical-align: center;
align-items: stretch;
position: relative;
justify-content: flex-start;
width: 100%;
&:after,
textarea {
grid-area: 2 / 1;
width: auto;
min-width: 1em;
font: inherit;
padding: 0.25em;
margin: 0;
resize: none;
background: none;
appearance: none;
border: none;
}
&::after {
content: attr(data-value) ' ';
visibility: hidden;
white-space: pre-wrap;
}
`;
export default class ChatEditor extends Component { export default class ChatEditor extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -167,26 +199,41 @@ export default class ChatEditor extends Component {
color="black" color="black"
> >
{MOBILE_BROWSER_REGEX.test(navigator.userAgent) {MOBILE_BROWSER_REGEX.test(navigator.userAgent)
? <BaseTextArea ? <MobileBox
fontFamily={inCodeMode ? 'Source Code Pro' : 'Inter'} data-value={this.state.message}
fontSize="14px" fontSize="14px"
lineHeight="tall" lineHeight="tall"
style={{ width: '100%', background: 'transparent', color: 'currentColor' }} onClick={event => {
placeholder={inCodeMode ? "Code..." : "Message..."} if (this.editor) {
onKeyDown={event => { this.editor.element.focus();
if (event.key === 'Enter') { }
event.preventDefault(); }}
this.submit(); >
} else { <BaseTextArea
fontFamily={inCodeMode ? 'Source Code Pro' : 'Inter'}
fontSize="14px"
lineHeight="tall"
rows="1"
style={{ width: '100%', background: 'transparent', color: 'currentColor' }}
placeholder={inCodeMode ? "Code..." : "Message..."}
onChange={event => {
this.messageChange(null, null, event.target.value); this.messageChange(null, null, event.target.value);
} }}
}} onKeyDown={event => {
ref={input => { if (event.key === 'Enter') {
if (!input) return; event.preventDefault();
this.editor = inputProxy(input); this.submit();
}} } else {
{...props} this.messageChange(null, null, event.target.value);
/> }
}}
ref={input => {
if (!input) return;
this.editor = inputProxy(input);
}}
{...props}
/>
</MobileBox>
: <CodeEditor : <CodeEditor
className="lh-copy" className="lh-copy"
value={message} value={message}