cetirizine

commit 079b0333e20bad9f8f11084a826aba60b24b7ded
parent 0ac290a24a2f1ce8913b1aaa89c8af3570f7116f
Author: MTRNord <mtrnord1@gmail.com>
Date:   Tue,  9 May 2023 21:42:28 +0200

Make sure input toolbar dropdown overlaps properly and that the input has max 50% of screenheight

Diffstat:
M
src/app/sdk/slidingSync.ts
 | 
8
++++++++
M
src/components/input/chat/input.scss
 | 
20
+++++++++++++++++++-
M
src/components/input/chat/plugins/ToolbarPlugin.tsx
 | 
11
++++++++---
M
src/pages/MainPage.tsx
 | 
2
+-

4 files changed, 36 insertions(+), 5 deletions(-)
diff --git a/src/app/sdk/slidingSync.ts b/src/app/sdk/slidingSync.ts
@@ -344,6 +344,14 @@ export class MatrixSlidingSync extends EventEmitter {
                 to_device: {
                     enabled: true,
                     since: this.to_device_since
+                },
+                typing: {
+                    enabled: true,
+                    lists: ["overview", "e2ee"],
+                },
+                receipts: {
+                    enabled: true,
+                    lists: ["overview", "e2ee"],
                 }
             },
         };
diff --git a/src/components/input/chat/input.scss b/src/components/input/chat/input.scss
@@ -9,6 +9,23 @@
 .editor-inner {
     background: #fff;
     position: relative;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    max-height: 50lvh;
+}
+
+.editor-inner::-webkit-scrollbar {
+    width: 8px;
+}
+
+.editor-inner::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.editor-inner::-webkit-scrollbar-thumb {
+    background-color: rgba(155, 155, 155, 0.5);
+    border-radius: 5px;
+    border: transparent;
 }
 
 .editor-input {
@@ -231,8 +248,9 @@
     z-index: 5;
     display: inline-flex;
     flex-direction: column;
-    //position: absolute;
+    position: absolute;
     //position: relative;
+    bottom: 0;
     margin-bottom: 24px;
     box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1),
         inset 0 0 0 1px rgba(255, 255, 255, 0.5);
diff --git a/src/components/input/chat/plugins/ToolbarPlugin.tsx b/src/components/input/chat/plugins/ToolbarPlugin.tsx
@@ -297,6 +297,11 @@ const BlockOptionsDropdownList = memo(({
         const toolbar = toolbarRef.current;
 
         if (dropDown !== null && toolbar !== null) {
+            const editorContainer = document.getElementsByClassName("editor-container")[0];
+            if (editorContainer) {
+                dropDown.style.bottom = `${editorContainer.clientHeight}px`;
+            }
+
             const handle = (event: MouseEvent) => {
                 const target = event.target;
 
@@ -559,12 +564,12 @@ const ToolbarPlugin = memo(() => {
 
     const [portalContainer, setPortalContainer] = useState<HTMLDivElement | null>(null);
     useEffect(() => {
-        const container = document.getElementsByClassName("editor-container")[0];
+        const container = document.getElementById("room-wrapper");
         const portalContainer = document.createElement('div');
-        container.prepend(portalContainer)
+        container?.prepend(portalContainer)
         setPortalContainer(portalContainer)
         return () => {
-            container.removeChild(portalContainer)
+            container?.removeChild(portalContainer)
         }
     }, [])
 
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
@@ -343,7 +343,7 @@ const MainPage = memo(() => {
             <RoomList sections={sections} rooms={otherRooms} />
         </div>
         {
-            room && <div className='flex-1 flex flex-col'>
+            room && <div className='flex-1 flex flex-col' id='room-wrapper'>
                 <div className='pb-2 flex flex-row items-center border-b-2 mt-4 ml-2'>
                     <Avatar displayname={room.getName()} avatarUrl={room.getAvatarURL()} dm={room.isDM()} online={room.presence} />
                     <div className='flex flex-row items-start'>