rejig message entry layout a bit (#4849)

open-chat-labs · Nov 24, 2023 · 1d9dad5 · 1d9dad5
1 parent af5660f
commit 1d9dad5
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 58 deletions.
diff --git a/frontend/app/src/components/home/Footer.svelte b/frontend/app/src/components/home/Footer.svelte
@@ -2,6 +2,7 @@
     import { _ } from "svelte-i18n";
     import ReplyingTo from "./ReplyingTo.svelte";
     import MessageEntry from "./MessageEntry.svelte";
+    import Close from "svelte-material-icons/Close.svelte";
     import DraftMediaMessage from "./DraftMediaMessage.svelte";
     import { toastStore } from "../../stores/toast";
     import EmojiPicker from "./EmojiPicker.svelte";
@@ -17,6 +18,9 @@
         AttachmentContent,
     } from "openchat-client";
     import { createEventDispatcher, getContext } from "svelte";
+    import HoverIcon from "../HoverIcon.svelte";
+    import ModalContent from "../ModalContent.svelte";
+    import { iconSize } from "../../stores/iconSize";
 
     const client = getContext<OpenChat>("client");
 
@@ -95,6 +99,25 @@
     }
 </script>
 
+{#if messageAction === "emoji"}
+    <div class="emoji-overlay">
+        <ModalContent hideFooter hideHeader fill>
+            <span slot="body">
+                <div class="emoji-header">
+                    <h4>{$_("pickEmoji")}</h4>
+                    <span title={$_("close")} class="close-emoji">
+                        <HoverIcon on:click={() => (messageAction = undefined)}>
+                            <Close size={$iconSize} color={"var(--icon-txt)"} />
+                        </HoverIcon>
+                    </span>
+                </div>
+                <EmojiPicker on:emojiSelected={emojiSelected} {mode} />
+            </span>
+            <span slot="footer" />
+        </ModalContent>
+    </div>
+{/if}
+
 <div class="footer">
     <div class="footer-overlay">
         {#if editingEvent === undefined && (replyingTo || attachment !== undefined)}
@@ -107,9 +130,6 @@
                 {/if}
             </div>
         {/if}
-        {#if messageAction === "emoji"}
-            <EmojiPicker {mode} on:emojiSelected={emojiSelected} />
-        {/if}
     </div>
     <MessageEntry
         bind:this={messageEntry}
@@ -165,6 +185,31 @@
         background-color: var(--entry-bg);
     }
 
+    .emoji-overlay {
+        position: absolute;
+        bottom: toRem(70);
+        left: toRem(10);
+        width: 100%;
+        @include z-index("footer-overlay");
+
+        @include mobile() {
+            left: 0;
+            bottom: toRem(60);
+        }
+
+        .emoji-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: $sp3 $sp4;
+            background-color: var(--section-bg);
+
+            .close-emoji {
+                flex: 0 0 20px;
+            }
+        }
+    }
+
     .draft-container {
         max-width: 80%;
         padding: 0 $sp4 $sp4 $sp4;

diff --git a/frontend/app/src/components/home/MessageActions.svelte b/frontend/app/src/components/home/MessageActions.svelte
@@ -90,7 +90,7 @@
 
     function buildListOfActions(
         permissions: Map<MessagePermission, boolean>,
-        messageAction: MessageAction
+        messageAction: MessageAction,
     ): Map<string, number> {
         const actions = new Map<string, number>();
         if (permissions.get("text") || messageAction === "file") {
@@ -119,13 +119,13 @@
 
     function cssVars(key: string): string {
         return `--top: ${top(supportedActions.get(key))}px; --transition-delay: ${delay(
-            supportedActions.get(key)
+            supportedActions.get(key),
         )}ms`;
     }
 
     function top(i: number | undefined): number {
         if (i === undefined) return 0;
-        return -75 - i * 45;
+        return -55 - i * 45;
     }
 
     function delay(i: number | undefined): number {
@@ -284,7 +284,9 @@
                 left: toRem(-44);
                 opacity: 0;
                 position: absolute;
-                transition: top 200ms ease-in, opacity 200ms ease-in;
+                transition:
+                    top 200ms ease-in,
+                    opacity 200ms ease-in;
                 @include z-index("action-list");
             }
 

diff --git a/frontend/app/src/components/home/MessageEntry.svelte b/frontend/app/src/components/home/MessageEntry.svelte
@@ -94,7 +94,7 @@
             if (editingEvent && editingEvent.index !== previousEditingEvent?.index) {
                 if (editingEvent.event.content.kind === "text_content") {
                     inp.textContent = formatUserGroupMentions(
-                        formatUserMentions(editingEvent.event.content.text)
+                        formatUserMentions(editingEvent.event.content.text),
                     );
                     selectedRange = undefined;
                     restoreSelection();
@@ -144,10 +144,10 @@
     $: placeholder = !canEnterText
         ? $_("sendTextDisabled")
         : attachment !== undefined
-        ? $_("enterCaption")
-        : dragging
-        ? $_("dropFile")
-        : $_("enterMessage");
+          ? $_("enterCaption")
+          : dragging
+            ? $_("dropFile")
+            : $_("enterMessage");
 
     export function replaceSelection(text: string) {
         restoreSelection();
@@ -171,7 +171,7 @@
 
     function uptoCaret(
         inputContent: string | null,
-        fn: (slice: string, pos: number) => void
+        fn: (slice: string, pos: number) => void,
     ): void {
         if (inputContent === null) return;
 
@@ -228,7 +228,7 @@
 
             typingTimer = window.setTimeout(
                 () => dispatch("stopTyping"),
-                MARK_TYPING_STOPPED_INTERVAL_MS
+                MARK_TYPING_STOPPED_INTERVAL_MS,
             );
         });
     }
@@ -363,7 +363,7 @@
             if (tokenMatch && tokenMatch[2] !== undefined) {
                 const token = tokenMatch[1];
                 const tokenDetails = Object.values($cryptoLookup).find(
-                    (t) => t.symbol.toLowerCase() === token
+                    (t) => t.symbol.toLowerCase() === token,
                 );
                 if (tokenDetails !== undefined) {
                     dispatch("tokenTransfer", {
@@ -453,7 +453,7 @@
 
         const replaced = `${inp.textContent?.slice(
             0,
-            rangeToReplace[0]
+            rangeToReplace[0],
         )}${replacement} ${inp.textContent?.slice(rangeToReplace[1])}`;
         inp.textContent = replaced;
 
@@ -552,51 +552,54 @@
                 {placeholder}
             </div>
         {/if}
-        {#if editingEvent === undefined}
-            {#if permittedMessages.get("audio") && messageIsEmpty && audioMimeType !== undefined && audioSupported}
-                <div class="record">
-                    <AudioAttacher
-                        mimeType={audioMimeType}
-                        bind:percentRecorded
-                        bind:recording
-                        bind:supported={audioSupported}
-                        on:audioCaptured />
-                </div>
-            {:else if canEnterText}
+
+        <div class="icons">
+            {#if editingEvent === undefined}
+                {#if permittedMessages.get("audio") && messageIsEmpty && audioMimeType !== undefined && audioSupported}
+                    <div class="record">
+                        <AudioAttacher
+                            mimeType={audioMimeType}
+                            bind:percentRecorded
+                            bind:recording
+                            bind:supported={audioSupported}
+                            on:audioCaptured />
+                    </div>
+                {:else if canEnterText}
+                    <div class="send" on:click={sendMessage}>
+                        <HoverIcon title={$_("sendMessage")}>
+                            <Send size={$iconSize} color={"var(--icon-txt)"} />
+                        </HoverIcon>
+                    </div>
+                {/if}
+                <!-- we might need this if we are editing too -->
+                <MessageActions
+                    bind:this={messageActions}
+                    bind:messageAction
+                    {permittedMessages}
+                    {attachment}
+                    {mode}
+                    editing={editingEvent !== undefined}
+                    on:tokenTransfer
+                    on:createPrizeMessage
+                    on:attachGif
+                    on:makeMeme
+                    on:createPoll
+                    on:upgrade
+                    on:clearAttachment
+                    on:fileSelected />
+            {:else}
                 <div class="send" on:click={sendMessage}>
-                    <HoverIcon title={$_("sendMessage")}>
-                        <Send size={$iconSize} color={"var(--icon-txt)"} />
+                    <HoverIcon>
+                        <ContentSaveEditOutline size={$iconSize} color={"var(--button-txt)"} />
+                    </HoverIcon>
+                </div>
+                <div class="send" on:click={cancelEdit}>
+                    <HoverIcon>
+                        <Close size={$iconSize} color={"var(--button-txt)"} />
                     </HoverIcon>
                 </div>
             {/if}
-            <!-- we might need this if we are editing too -->
-            <MessageActions
-                bind:this={messageActions}
-                bind:messageAction
-                {permittedMessages}
-                {attachment}
-                {mode}
-                editing={editingEvent !== undefined}
-                on:tokenTransfer
-                on:createPrizeMessage
-                on:attachGif
-                on:makeMeme
-                on:createPoll
-                on:upgrade
-                on:clearAttachment
-                on:fileSelected />
-        {:else}
-            <div class="send" on:click={sendMessage}>
-                <HoverIcon>
-                    <ContentSaveEditOutline size={$iconSize} color={"var(--button-txt)"} />
-                </HoverIcon>
-            </div>
-            <div class="send" on:click={cancelEdit}>
-                <HoverIcon>
-                    <Close size={$iconSize} color={"var(--button-txt)"} />
-                </HoverIcon>
-            </div>
-        {/if}
+        </div>
     {/if}
 </div>
 
@@ -614,6 +617,11 @@
         &.editing {
             background-color: var(--button-bg);
         }
+
+        .icons {
+            display: flex;
+            align-self: flex-end;
+        }
     }
     .send {
         flex: 0 0 15px;
@@ -626,7 +634,7 @@
         border-radius: var(--entry-input-rd);
         outline: none;
         border: 0;
-        max-height: 100px;
+        max-height: calc(var(--vh, 1vh) * 50);
         min-height: toRem(30);
         overflow-x: hidden;
         overflow-y: auto;

diff --git a/frontend/app/src/components/home/RepliesTo.svelte b/frontend/app/src/components/home/RepliesTo.svelte
@@ -105,6 +105,8 @@
         cursor: pointer;
         margin-bottom: $sp3;
         overflow: hidden;
+        @include nice-scrollbar();
+        max-height: 300px;
 
         &.me {
             background-color: var(--currentChat-msg-me-bg);

diff --git a/frontend/app/src/components/home/ReplyingTo.svelte b/frontend/app/src/components/home/ReplyingTo.svelte
@@ -75,6 +75,8 @@
         background-color: var(--currentChat-msg-bg);
         color: var(--currentChat-msg-txt);
         position: relative;
+        @include nice-scrollbar();
+        max-height: 150px;
 
         .close-icon {
             position: absolute;