style: contact search, global header & animations

Author: SrGaabriel

web/.gitignore renamed to .gitignore

@@ -137,7 +137,7 @@ bower_components
 build/Release
 
 # Dependency directories
-node_modules/
+web/node_modules/
 jspm_packages/
 
 # Snowpack dependency directory (https://snowpack.dev/)

package-lock.json

@@ -0,0 +1,21 @@
+import {crossfade} from "svelte/transition";
+import {quintOut} from "svelte/easing";
+
+export function createCrossfade(amplifier: number, duration: number) {
+    return crossfade({
+        duration: (d) => Math.sqrt(d * amplifier),
+
+        fallback(node, params) {
+            const style = getComputedStyle(node);
+            const transform = style.transform === 'none' ? '' : style.transform;
+
+            return {
+                duration,
+                easing: quintOut,
+                css: (t) => `
+				transform: ${transform} scale(${t});
+				opacity: ${t}`
+            };
+        }
+    })
+}

package.json

@@ -21,6 +21,7 @@
     import Alert from "$lib/components/Alert.svelte";
     import {writable} from "svelte/store";
     import {TYPING_DELAY} from "$lib/constants.ts";
+    import {createCrossfade} from "$lib/animation/crossfade.ts";
 
     export let token;
     export let user;
@@ -43,6 +44,8 @@
     let typingTimeout = null;
     let alertStore = writable();
 
+    const [send, receive] = createCrossfade(200, 600);
+
     onMount(() => {
         messagesElement = document.getElementById('messages');
         inputElement = document.getElementById('send-input');
@@ -82,14 +85,17 @@
         if (event.key === 'Escape') {
             clearState()
         }
+        // Ignore keydown events if the user is already focused on an input element
 
         if (!event.key || event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) return;
-        if (event.key === 'Enter') {
+        if (event.key === 'Enter' && document.activeElement === inputElement) {
             event.preventDefault();
             submit();
             return;
         }
-        if (document.activeElement !== inputElement && !editingMessage && !openContextMenu && !addingEmoji) {
+        if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA')
+            return;
+        if (!editingMessage && !openContextMenu && !addingEmoji) {
             inputElement.focus();
         }
     }
@@ -344,31 +350,30 @@
             typingMessage += emoji.emoji;
         }} bottom={position.y} left={position.x}/>
     {/if}
-    <div class="header">
-        <span class="contact-name">{contact?.name}</span>
-    </div>
     <div class="messages" id="messages">
         <div class="messages-container" data-relevant="true">
             {#each messages as message,i (message.id)}
-                <Message
-                        user={user}
-                        contact={contact}
-                        message={message}
-                        sent={message.user_id === user.id}
-                        sender={getUserObject(message.user_id)}
-                        followingMessage={messages[i + 1]}
-                        reactEmoji={reactEmoji}
-                        removeReaction={removeReaction}
-                        clearState={clearState}
-                        messageRepliesTo={messages.find((m) => m.id === message.reply_to || m.id === message.reply_to?.id)}
-                        submitEdit={submitEdit}
-                        excludeMessage={deleteMessage}
-                        bind:editingMessage={editingMessage}
-                        bind:reactingTo={reactingTo}
-                        bind:replyingTo={replyingTo}
-                        bind:openContextMenu={openContextMenu}
-                        bind:alertStore={alertStore}
-                />
+                <div in:receive={{key: message.id}} out:send={{key: message.id}}>
+                    <Message
+                            user={user}
+                            contact={contact}
+                            message={message}
+                            sent={message.user_id === user.id}
+                            sender={getUserObject(message.user_id)}
+                            followingMessage={messages[i + 1]}
+                            reactEmoji={reactEmoji}
+                            removeReaction={removeReaction}
+                            clearState={clearState}
+                            messageRepliesTo={messages.find((m) => m.id === message.reply_to || m.id === message.reply_to?.id)}
+                            submitEdit={submitEdit}
+                            excludeMessage={deleteMessage}
+                            bind:editingMessage={editingMessage}
+                            bind:reactingTo={reactingTo}
+                            bind:replyingTo={replyingTo}
+                            bind:openContextMenu={openContextMenu}
+                            bind:alertStore={alertStore}
+                    />
+                </div>
             {/each}
         </div>
     </div>
@@ -438,7 +443,7 @@
         flex-direction: column;
         align-items: center;
         width: 100%;
-        height: 62.5vh;
+        height: 72.5vh;
         overflow-x: hidden;
         overflow-y: scroll;
     }

web/src/lib/animation/crossfade.ts

@@ -1,9 +1,9 @@
+<!--This is a component, and not a layout page due to:-->
+<!--https://github.com/sveltejs/kit/issues/627-->
+
 <script lang="ts">
-    import ThemeToggle from "$lib/components/ThemeToggle.svelte";
     import {browser} from "$app/environment";
 
-    export let data;
-
     let isSidebarExpanded = false;
 
     // TODO: fix workaround
@@ -24,21 +24,8 @@
     <div class="background"></div>
     <div class="space">
         <div class="header">
-            <div class="icon-space">
-            </div>
-            <div class="theme-toggle-container">
-                <ThemeToggle/>
-            </div>
-            <div class="self-profile">
-                <img src="/assets/no_profile_picture.jpg" alt="Your profile picture" class="photo"/>
-                <div class="self-identifier">
-                    <div class="self-identifier-name">
-                        <span class="self-name">{data.user.name}</span>
-                        <span class="self-username">@{data.user.username}</span>
-                    </div>
-                    <span class="self-biography">A free thinker roaming Earth.</span>
-                </div>
-            </div>
+            <div class="icon-space"></div>
+            <slot name="header"></slot>
         </div>
         <div class="content">
             <div class={isSidebarExpanded ? 'sidebar expanded' : 'sidebar'}>
@@ -104,9 +91,16 @@
         background-color: var(--light-heavier-contrast);
         border-bottom: 1px solid var(--thin-border);
     }
+    .standard-header-info {
+        display: flex;
+        height: 100%;
+        width: 399px;
+        border-right: 1px solid var(--thin-border);
+    }
     .icon-space {
         height: 100%;
-        width: 72px;
+        width: 84.5px;
+        border-right: 1px solid var(--thin-border);
     }
     .self-profile {
         display: flex;