urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-01 06:35:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

chat-js: adjust line height in chat input

Browse Source 
Set the line height of the input to be the same as a sent message.
Additionally fixes an issue that would cause unnecessary scrollbars to
be shown.
This commit is contained in:
Liam Fitzgerald 2020-04-15 15:04:04 +10:00
parent b978d4f824
commit 8b48f3fa0f
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(