From a24bcf9f86d9795566e68f82a007ce70d053ab83 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Sun, 20 Jun 2021 20:36:52 +0100
Subject: [PATCH] Fix mobile height. Add send button.
---
.../common/messaging/MessageBox.tsx | 25 ++++++++++++-------
src/pages/RevoltApp.tsx | 2 +-
2 files changed, 17 insertions(+), 10 deletions(-)
diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx
index ae98052..26825ca 100644
--- a/src/components/common/messaging/MessageBox.tsx
+++ b/src/components/common/messaging/MessageBox.tsx
@@ -8,7 +8,9 @@ import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { SingletonMessageRenderer, SMOOTH_SCROLL_ON_RECEIVE } from "../../../lib/renderer/Singleton";
import { connectState } from "../../../redux/connector";
import { WithDispatcher } from "../../../redux/reducers";
+import IconButton from "../../ui/IconButton";
import TextArea from "../../ui/TextArea";
+import { Send } from '@styled-icons/feather';
type Props = WithDispatcher & {
channel: Channel;
@@ -70,15 +72,20 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
}
return (
- <TextArea
- value={draft}
- onKeyDown={e => {
- if (!e.shiftKey && e.key === "Enter" && !isTouchscreenDevice) {
- e.preventDefault();
- return send();
- }
- }}
- onChange={e => setMessage(e.currentTarget.value)} />
+ <div style={{ display: 'flex' }}>
+ <TextArea
+ value={draft}
+ onKeyDown={e => {
+ if (!e.shiftKey && e.key === "Enter" && !isTouchscreenDevice) {
+ e.preventDefault();
+ return send();
+ }
+ }}
+ onChange={e => setMessage(e.currentTarget.value)} />
+ <IconButton onClick={send}>
+ <Send size={20} />
+ </IconButton>
+ </div>
)
}
diff --git a/src/pages/RevoltApp.tsx b/src/pages/RevoltApp.tsx
index 5bd4a85..ab74d14 100644
--- a/src/pages/RevoltApp.tsx
+++ b/src/pages/RevoltApp.tsx
@@ -29,7 +29,7 @@ export default function App() {
return (
<OverlappingPanels
width="100vw"
- height="100%"
+ height="100vh"
leftPanel={{ width: 292, component: <LeftSidebar /> }}
rightPanel={{ width: 240, component: <RightSidebar /> }}
docked={isTouchscreenDevice ? Docked.None : Docked.Left}>
--
GitLab