From: Andrew Gundersen <gundersena@xavier.edu>
Date: Thu, 4 Mar 2021 17:03:33 +0000 (-0600)
Subject: ui enhacements and next-gen input item code (not implented)
X-Git-Tag: v0.9~65
X-Git-Url: https://andrewgundersen.net/repos?a=commitdiff_plain;h=a79dbf0e6c0ec40b4a143baa0a3932376b657397;p=mime-chat

ui enhacements and next-gen input item code (not implented)
---

diff --git a/src/App.vue b/src/App.vue
index 17e28a1..9461abf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -50,6 +50,7 @@ export default defineComponent({
   html, body {
     margin: 0;
     padding: 0;
+    background-color: #EBEBEB;
   }
 
   #app {
@@ -61,7 +62,6 @@ export default defineComponent({
     height: 100vh;
     width: 100vw;
 
-    background-color: #EBEBEB;
     border-radius: 15px;
    }
 
diff --git a/src/background/run.ts b/src/background/run.ts
index a92e941..55aad46 100644
--- a/src/background/run.ts
+++ b/src/background/run.ts
@@ -13,7 +13,7 @@ export async function main() {
 
     // create main window.
     await createWindow({
-        width: 350,
+        width: 600,
         height: 500,
         resizable: true
     });
diff --git a/src/background/session.ts b/src/background/session.ts
index 88d1586..dd5597c 100644
--- a/src/background/session.ts
+++ b/src/background/session.ts
@@ -9,11 +9,8 @@ interface RenderMessage {
         text: string;
         audio: boolean | Buffer;
     };
-    avatar: string;
     context: string;
-    subContext: string;
     modifier: string;
-    time: string;
     id: string;
 }
 
diff --git a/src/components/drag.ts b/src/components/drag.ts
new file mode 100644
index 0000000..7e91b84
--- /dev/null
+++ b/src/components/drag.ts
@@ -0,0 +1,26 @@
+
+// When user clicks and holds inputItem.
+function onMouseDown (e: any) {
+    window.addEventListener('mousemove', onMouseMove, true);
+}
+
+// When user drags inputItem.
+function onMouseMove (e: any) {
+
+    const element = document.getElementById('inputItem')
+
+    if (element) {
+
+        const inputItemRect = element.getBoundingClientRect()
+        inputItemX.value = inputItemRect.left + e.movementX
+        inputItemY.value = inputItemRect.top + e.movementY
+
+    }
+    
+}
+
+// When user lets go of inputItem.
+function onMouseUp (e: any) {
+
+}
+
diff --git a/src/components/inputItem.vue b/src/components/inputItem.vue
new file mode 100644
index 0000000..4148df2
--- /dev/null
+++ b/src/components/inputItem.vue
@@ -0,0 +1,133 @@
+<template>
+  <div id=inputItem 
+    :style="{ top: `${inputItemY}px`, left: `${inputItemX}px` }">
+    
+  </div>
+</template>
+
+<script lang="ts">
+
+import { defineComponent, onMounted, ref, onUnmounted } from "vue";
+
+export default defineComponent({
+  name: "InputItem",
+
+  setup() {
+
+    let inputItemX = ref(0)
+    let inputItemY = ref(0)
+
+    let xShort: object = {
+      distance: Number,
+      side: String
+    }
+
+    let percentX: number;
+    let percentY: number;
+
+    // Draggable on mousedown.
+    const mouseDown = (e: any) => {
+       window.addEventListener('mousemove', divMove, true);
+    }
+
+    // Update the positional refs.
+    const mouseUp = (e: any) => {
+      window.removeEventListener('mousemove', divMove, true);
+
+
+
+      const winW = window.innerWidth
+      const winH = window.innerHeight
+      console.log(`Window dimensions: W${winW} H${winH}`)
+      
+    }
+
+    // Called on mousemove event. Updates the inputItem cords when user is
+    // dragging it.
+    const divMove = (e: any) => {
+      const element = document.getElementById('inputItem')
+
+      if (element) {
+
+        const inputItemRect = element.getBoundingClientRect()
+        inputItemX.value = inputItemRect.left + e.movementX
+        inputItemY.value = inputItemRect.top + e.movementY
+
+      }
+
+    }
+
+    // Adjust position of inputItem on window resize.
+    // If inputItem is within 10% of corner, keep the distances from that
+    // corner fixed, else resize relative to percentages.
+    const handleResize = (e: any) => {
+
+      // Adjust X:
+      // Is X close to a vertical side?
+      // If so: position fixed
+      if (inputItemX.onSide) {
+
+        if (inputItemX.rightSide) {
+          inputItemX.value = window.innerWidth - xShort
+        } else {
+          inputItemX.value = xShort
+        }
+
+      // Else: position relative
+      } else {
+        inputItemX.value = window.innerWidth * percentX
+      }
+
+    // Initialize InputPosition.
+    inputItemX.value = 300
+    inputItemY.value = 300
+    percentX = 0.5
+    percentY = 0.5
+
+    onMounted(() => {
+
+      const element = document.getElementById('inputItem')
+
+      if (element) {
+        element.addEventListener('mousedown', mouseDown, false);
+      }
+
+      window.addEventListener('mouseup', mouseUp, false);
+      window.addEventListener('resize', handleResize, false)
+
+    });
+
+    return {
+      inputItemX,
+      inputItemY
+    }
+  }
+
+});
+
+</script>
+
+<style lang="scss" scoped>
+
+  #inputItem {
+    position: absolute;
+
+    width: 30px;
+    height: 30px;
+
+    border-radius: 19px;
+
+    z-index: 20;
+
+    top: 200px;
+    right: 0px;
+
+    border-style: solid;
+    border-width: 4px;
+    border-color: #C3C3C3;
+
+    background-color: white;
+
+  }
+
+</style>
\ No newline at end of file
diff --git a/src/components/messageItem.vue b/src/components/messageItem.vue
index d60795e..6197c94 100644
--- a/src/components/messageItem.vue
+++ b/src/components/messageItem.vue
@@ -5,6 +5,9 @@
     :key="message.id"
   >
 
+    <!-- Three types of messages: self (sf), friend (fr), and crimata (ai) -->
+    <!-- !denoted by the modifier attribute -->
+
     <!-- Includes bubble and context. -->
     <div class="messageBox" :id="`${message.modifier}MessageBox`">
 
@@ -13,19 +16,20 @@
         class="bubble"
         :id="`${message.modifier}Bubble`"
       >
-        {{ message.content }}
+        {{ message.content.text }}
       </div>
 
       <!-- message context -->
       <span class="context">
 
-        <!-- Render Crimata icon or initials. -->
-        <div v-if="message.avatar == 'crimata'" class="photo">
+        <!-- Render Crimata icon or friend's initials. -->
+        <div v-if="message.modifier == 'ai'" class="photo">
           <img src="@/assets/crimata.svg"/>
         </div>
 
-        <div v-else class="photo">
-          {{ message.avatar }}
+        <!-- Render Crimata icon or friend's initials. -->
+        <div v-if="message.modifier == 'fr'" class="photo">
+          {{ message.context[0] }}
         </div>
 
         {{ message.context }}
@@ -79,12 +83,28 @@
     align-items: flex-end;
   }
 
+  #frMessage {
+    align-items: flex-start;
+  }
+
+  .messageBox {
+    display: flex;
+    flex-direction: column;
+  }
+
   #aiMessageBox {
     margin-left: 20px;
+    align-items: flex-start;
   }
 
   #sfMessageBox {
     margin-right: 20px;
+    align-items: flex-end;
+  }
+
+  #frMessageBox {
+    margin-left: 20px;
+    align-items: flex-start;
   }
 
   .bubble {
@@ -110,6 +130,10 @@
     color: white;
   }
 
+  #frBubble {
+    background-color: white;
+  }
+
   .context {
     display: flex;
     align-items: center;
@@ -117,7 +141,6 @@
     font-family: "SF Compact Display";
     font-size: 12px;
     font-weight: bold;
-    margin-left: 7px;
     margin-top: 5px;
   }
 
diff --git a/src/components/resize.ts b/src/components/resize.ts
new file mode 100644
index 0000000..4a28203
--- /dev/null
+++ b/src/components/resize.ts
@@ -0,0 +1,7 @@
+
+// Update inputItem position on window resize.
+// Gets called on window.resize event.
+function handleWindowResize (e: any) {
+
+}
+
diff --git a/src/test.vue b/src/test.vue
new file mode 100644
index 0000000..5651d69
--- /dev/null
+++ b/src/test.vue
@@ -0,0 +1,66 @@
+    // Snap to the nearest window border and update percentages. Called when
+    // user stops dragging the inputItem.
+    const mouseUp = (e: any) => {
+      window.removeEventListener('mousemove', divMove, true);
+
+      const winW = window.innerWidth
+      const winH = window.innerHeight
+      console.log(`Window dimensions: W${winW} H${winH}`)
+
+      // First, are we changing inputItemX or inputItemY?
+
+      let xShort = winW - inputItemX.value
+      if (xShort > winW / 2) {
+        xShort = inputItemX.value
+      }
+
+      let yShort = winH - inputItemY.value
+      if (yShort > winH / 2) {
+        yShort = inputItemY.value
+      }
+
+      const shortest = (xShort < yShort) ? "inputItemX" : "inputItemY"
+
+      // Then, are we tranlating it positive or negative?
+      // To answer this, we see which side is it closer to.
+      // We also update percentages to aid in window resizing (handleResize).
+
+      if (shortest == "inputItemX") {
+        if (inputItemX.value < winW / 2) {
+          inputItemX.value = 0
+          percentX = 0.0
+        } else {
+          inputItemX.value = winW - 38
+          percentX = 1.0
+        }
+        percentY = inputItemY.value / winH
+      } else {
+        if (inputItemY.value < winH / 2) {
+          inputItemY.value = 0
+          percentY = 0.0
+        } else {
+          inputItemY.value = winH - 38
+          percentY = 1.0
+        }
+        percentX = inputItemX.value / winW
+
+      }
+      console.log(`Percents updated: iX: ${percentX} iY: ${percentY}`)
+    }
+
+
+
+
+    if (percentX == 1.0) {
+        inputItemX.value = window.innerWidth * percentX - 38
+      } else {
+        inputItemX.value = window.innerWidth * percentX
+      }
+
+      if (percentY == 1.0) {
+        inputItemY.value = window.innerHeight * percentY - 38
+      } else {
+        inputItemY.value = window.innerHeight * percentY
+      }
+
+    }
\ No newline at end of file
diff --git a/src/types/message/index.ts b/src/types/message/index.ts
index 1997303..5163d68 100644
--- a/src/types/message/index.ts
+++ b/src/types/message/index.ts
@@ -1,11 +1,11 @@
 export interface Message {
-    content: string;
-    avatar: string;
+    content: {
+        text: string;
+        audio: boolean | Buffer;
+    };
     context: string;
-    subContext: string;
     modifier: string;
     id: string;
-    time: string;
 }
 
 interface MessageTransform {
diff --git a/src/views/messenger.vue b/src/views/messenger.vue
index 25ebd75..91ccc8c 100644
--- a/src/views/messenger.vue
+++ b/src/views/messenger.vue
@@ -1,6 +1,7 @@
 <template>
 
     <TextAudioInput />
+    <!-- <InputItem /> -->
 
     <!-- List of message bubbles. -->
     <div id="messenger" >
@@ -15,6 +16,7 @@ import { defineComponent, reactive, onMounted, ref, onUnmounted } from "vue";
 import TextAudioInput from "@/components/taInput/index.vue";
 import { Message } from "@/types/message/index";
 import MessageItem from '@/components/messageItem.vue'
+// import InputItem from "@/components/inputItem.vue";
 
 export default defineComponent({
   name: "Messenger",
@@ -22,6 +24,7 @@ export default defineComponent({
   components: {
     TextAudioInput,
     MessageItem,
+    // InputItem
   },
 
   setup() {
@@ -33,7 +36,7 @@ export default defineComponent({
     // Render a message.
     const render = (message: Message) => {
       messages.push(message);
-      console.log(`Pushing: ${message.modifier}: ${message.avatar}, ${message.content}`);
+      console.log(`Pushing: ${message.modifier}: ${message.content.text} ${message.context}`);
     }
 
     onMounted(() => {