From bcc53fc337bb3162363447927a574c25180cafc2 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Fri, 7 Oct 2022 11:46:57 +0200
Subject: [PATCH] Add style for WysiwygComposer
---
res/css/_components.pcss | 1 +
.../wysiwyg_composer/_WysiwygComposer.pcss | 53 +++++++++++++++++++
.../wysiwyg_composer/WysiwygComposer.tsx | 8 +--
3 files changed, 59 insertions(+), 3 deletions(-)
create mode 100644 res/css/views/rooms/wysiwyg_composer/_WysiwygComposer.pcss
diff --git a/res/css/_components.pcss b/res/css/_components.pcss
index 9161942d87..435ed9158b 100644
--- a/res/css/_components.pcss
+++ b/res/css/_components.pcss
@@ -295,6 +295,7 @@
@import "./views/rooms/_TopUnreadMessagesBar.pcss";
@import "./views/rooms/_VoiceRecordComposerTile.pcss";
@import "./views/rooms/_WhoIsTypingTile.pcss";
+@import "./views/rooms/wysiwyg_composer/_WysiwygComposer.pcss";
@import "./views/settings/_AvatarSetting.pcss";
@import "./views/settings/_CrossSigningPanel.pcss";
@import "./views/settings/_CryptographyPanel.pcss";
diff --git a/res/css/views/rooms/wysiwyg_composer/_WysiwygComposer.pcss b/res/css/views/rooms/wysiwyg_composer/_WysiwygComposer.pcss
new file mode 100644
index 0000000000..133b66388e
--- /dev/null
+++ b/res/css/views/rooms/wysiwyg_composer/_WysiwygComposer.pcss
@@ -0,0 +1,53 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_WysiwygComposer {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ font-size: $font-14px;
+ /* fixed line height to prevent emoji from being taller than text */
+ line-height: $font-18px;
+ justify-content: center;
+ margin-right: 6px;
+ /* don't grow wider than available space */
+ min-width: 0;
+
+ .mx_WysiwygComposer_container {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ /* min-height at this level so the mx_BasicMessageComposer_input */
+ /* still stays vertically centered when less than 55px. */
+ /* We also set this to ensure the voice message recording widget */
+ /* doesn't cause a jump. */
+ min-height: 55px;
+
+ .mx_WysiwygComposer_content {
+ border: 1px solid;
+ border-radius: 20px;
+ padding: 8px 10px;
+ /* this will center the contenteditable */
+ /* in it's parent vertically */
+ /* while keeping the autocomplete at the top */
+ /* of the composer. The parent needs to be a flex container for this to work. */
+ margin: auto 0;
+ /* max-height at this level so autocomplete doesn't get scrolled too */
+ max-height: 140px;
+ overflow-y: auto;
+ }
+ }
+}
diff --git a/src/components/views/rooms/wysiwyg_composer/WysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/WysiwygComposer.tsx
index f22963e4e7..3582b76ac9 100644
--- a/src/components/views/rooms/wysiwyg_composer/WysiwygComposer.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/WysiwygComposer.tsx
@@ -52,9 +52,11 @@ export function WysiwygComposer(
}, [content, mxClient, roomContext, wysiwyg, props, ref]);
return (
- <>
- <div className="mx_SendMessageComposer" style={{ minHeight: '30px', marginBottom: '5px' }} ref={ref} contentEditable={!disabled && isWysiwygReady} />
+ <div className="mx_WysiwygComposer">
+ <div className="mx_WysiwygComposer_container">
+ <div className="mx_WysiwygComposer_content" ref={ref} contentEditable={!disabled && isWysiwygReady} />
+ </div>
{ children?.(memoizedSendMessage) }
- </>
+ </div>
);
}