ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-12-27 17:02:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'liam-fitzgerald/lf/chat-input-line-height' (#2743)

Browse Source 
* liam-fitzgerald/lf/chat-input-line-height:
  chat-js: adjust line height in chat input

Signed-off-by: Jared Tobin <jared@tlon.io>
This commit is contained in:
Jared Tobin 2020-04-15 20:18:14 +04:00
commit 65cad93b1b
No known key found for this signature in database
GPG Key ID: 0E4647D58F8A69E4
1 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
pkg/interface/chat/src/js/components/lib/chat-input.js
View File

@ -8,7 +8,11 @@ import { Sigil } from '/components/lib/icons/sigil';
import { uuid, uxToHex, hexToRgba } from '/lib/util';
const DEFAULT_INPUT_HEIGHT = 28;
// line height
const INPUT_LINE_HEIGHT = 28;
const INPUT_TOP_PADDING = 3;
function getAdvance(a, b) {
@ -103,7 +107,7 @@ export class ChatInput extends Component {
this.state = {
message: '',
textareaHeight: DEFAULT_INPUT_HEIGHT,
textareaHeight: INPUT_LINE_HEIGHT + INPUT_TOP_PADDING + 1,
patpSuggestions: [],
selectedSuggestion: null
};
@ -309,9 +313,8 @@ export class ChatInput extends Component {
}
textareaInput() {
const newHeight = this.textareaRef.current.scrollHeight < DEFAULT_INPUT_HEIGHT * 8
? `${this.textareaRef.current.scrollHeight}px`
: `${DEFAULT_INPUT_HEIGHT * 8}px`
const maxHeight = INPUT_LINE_HEIGHT * 8 + INPUT_TOP_PADDING;
const newHeight = `${Math.min(maxHeight, this.textareaRef.current.scrollHeight)}px`;
this.setState({
textareaHeight: newHeight
@ -418,7 +421,7 @@ export class ChatInput extends Component {
this.setState({
message: '',
textareaHeight: DEFAULT_INPUT_HEIGHT
textareaHeight: INPUT_LINE_HEIGHT + INPUT_TOP_PADDING + 1
});
}
@ -459,8 +462,8 @@ export class ChatInput extends Component {
</div>
<div className="fr h-100 flex bg-gray0-d" style={{ flexGrow: 1 }}>
<textarea
className={"pl3 bn bg-gray0-d white-d"}
style={{ flexGrow: 1, height: state.textareaHeight, paddingTop: 6, resize: "none" }}
className={"pl3 bn bg-gray0-d white-d lh-copy"}
style={{ flexGrow: 1, height: state.textareaHeight, paddingTop: INPUT_TOP_PADDING, resize: "none" }}
autoCapitalize="none"
autoFocus={(
/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(