ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2025-01-03 20:52:23 +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 { MOBILE_BROWSER_REGEX } from "~/logic/lib/util";
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/addon/display/placeholder';
@ -52,9 +53,40 @@ const inputProxy = (input) => new Proxy(input, {
if (property === 'setValue') {
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 {
constructor(props) {
super(props);
@ -167,26 +199,41 @@ export default class ChatEditor extends Component {
color="black"
>
{MOBILE_BROWSER_REGEX.test(navigator.userAgent)
? <BaseTextArea
fontFamily={inCodeMode ? 'Source Code Pro' : 'Inter'}
fontSize="14px"
lineHeight="tall"
style={{ width: '100%', background: 'transparent', color: 'currentColor' }}
placeholder={inCodeMode ? "Code..." : "Message..."}
onKeyDown={event => {
if (event.key === 'Enter') {
event.preventDefault();
this.submit();
} else {
? <MobileBox
data-value={this.state.message}
fontSize="14px"
lineHeight="tall"
onClick={event => {
if (this.editor) {
this.editor.element.focus();
}
}}
>
<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);
}
}}
ref={input => {
if (!input) return;
this.editor = inputProxy(input);
}}
{...props}
/>
}}
onKeyDown={event => {
if (event.key === 'Enter') {
event.preventDefault();
this.submit();
} else {
this.messageChange(null, null, event.target.value);
}
}}
ref={input => {
if (!input) return;
this.editor = inputProxy(input);
}}
{...props}
/>
</MobileBox>
: <CodeEditor
className="lh-copy"
value={message}