center renderer + add min build config

diff --git a/package.json b/package.json
index 03c666902a36957178c8405025d3309c62f69ee9..41a8d7730d3122ddae5208b5e6bc6bd00428fd37 100644 (file)
--- a/package.json
+++ b/package.json
@@ -1,7 +1,12 @@
 {
   "name": "crimata-messenger",
+  "productName": "crimata-messenger",
+  "description": "Cross-platform messenger application built with electron, vue3, and TS.",
   "version": "0.1.0",
   "private": true,
+  "author": {
+    "name": "Enrique Hernandez"
+  },
   "scripts": {
     "dev": "yarn electron:serve",
     "serve": "vue-cli-service serve",

diff --git a/src/components/UI/UIDetails/messageRenderer.vue b/src/components/UI/UIDetails/messageRenderer.vue
index a07459e735c67bd8471a9af34ec0b6cbc20d8117..761b347f10d8cf87c977306916f172e4ac890022 100644 (file)
--- a/src/components/UI/UIDetails/messageRenderer.vue
+++ b/src/components/UI/UIDetails/messageRenderer.vue
@@ -5,12 +5,14 @@
     xmlns:xlink="http://www.w3.org/1999/xlink"
     :viewBox="scrollView"
   >
-    <g id="messageRenderer">
+    <g id="messageRenderer" transform="translate(0, 5)">
       <g
         v-for="(item, index) in renderArr"
         :key="index"
         class="messageList"
-        transform="translate(0, 0)"
+        transform="translate(0, 25)"
+        preserverAspectRatio="none"
+
       >
         <transition
           appear
@@ -65,3 +67,13 @@ export default defineComponent({
   },
 });
 </script>
+
+<style lang="scss" scoped>
+svg {
+  height: 1%;
+  overflow: hidden;
+}
+#messageRenderer {
+  margin: 0;
+}
+</style>

diff --git a/src/composables/messageRenderer/useMessageRenderer.ts b/src/composables/messageRenderer/useMessageRenderer.ts
index 052788ab3a7cfeb2bc659c9a3d6918fbf2cf584f..a916f5cc3290c788c668e45f86ae7a4f1e8339a3 100644 (file)
--- a/src/composables/messageRenderer/useMessageRenderer.ts
+++ b/src/composables/messageRenderer/useMessageRenderer.ts
@@ -14,7 +14,7 @@ export default function useMessageRenderer() {
     function animateMessage(el: SVGGElement): void {
         const transform = {
             initialTranslate: `translate(${messageOffset.x} ${messageOffset.y})`,
-            finalTranslate: `translate(${messageOffset.x} ${messageOffset.y + 5})`
+            finalTranslate: `translate(${messageOffset.x} ${messageOffset.y})`
         }
         shift ? shiftAnimate(el, transform, shiftValue, messageList) : stackAnimate(el, transform);
     }
@@ -29,11 +29,11 @@ export default function useMessageRenderer() {
     }
 
     function afterEnter(el: SVGGElement) {
-        const messagePadding = 10;
+        const messagePadding = 15;
 
         if (message) {
             messageOffset = calculateMessageOffsets(message);
-            shift = messageOffset.y > 450 ? true : false;
+            shift = messageOffset.y > 445 ? true : false;
         }
         if (shift) {
             shiftValue -= el.getBBox().height + messagePadding;

diff --git a/src/composables/messageRenderer/useOffsetCalculator.ts b/src/composables/messageRenderer/useOffsetCalculator.ts
index 5efad539437c8f9bc0174076dd2ac431c41b46e7..b8e2451bf203c1573b8a5fa52fb3f3fce6897d08 100644 (file)
--- a/src/composables/messageRenderer/useOffsetCalculator.ts
+++ b/src/composables/messageRenderer/useOffsetCalculator.ts
@@ -2,9 +2,9 @@ import { ref } from "vue";
 export default function useOffsetCalculator() {
     const xOffset = ref(0);
     const yOffset = ref(0);
-    const firstChildMarginTop = 40;
+    const firstChildMarginTop = 0;
     let previousMessageHeight = 0;
-    const messagePadding = 10;
+    const messagePadding = 15;
 
     function setXoffset(message: HTMLElement): void {
         const computedQuery = window.getComputedStyle(message)

diff --git a/src/composables/messageRenderer/useRendererAnims.ts b/src/composables/messageRenderer/useRendererAnims.ts
index f780281e3b8f62d707de98f5401903f7ff94724e..8a2acb96232fea61b0cb1ba274b895a7f8ce10dd 100644 (file)
--- a/src/composables/messageRenderer/useRendererAnims.ts
+++ b/src/composables/messageRenderer/useRendererAnims.ts
@@ -37,6 +37,8 @@ export default function useRendererAnims() {
                 anime({
                     targets: el,
                     transform: transform.finalTranslate,
+                    easing: "easeInOutQuad",
+                    duration: 500,
                     offset: 1000
                 });
             }

diff --git a/src/composables/scroller/useScroller.ts b/src/composables/scroller/useScroller.ts
index 6bf195eea4f13d670d4b3589b4799c9bf286e3ab..510c88f288e584193daafa6b6e8bc7cb0e8bc83e 100644 (file)
--- a/src/composables/scroller/useScroller.ts
+++ b/src/composables/scroller/useScroller.ts
@@ -8,7 +8,7 @@ export default function useScroller({ targetId }: {targetId: string}) {
 
     const clampedScroll = computed(() => {
       if (targetHeight.value === 0) { return 0; }
-      topBound = -targetHeight.value + 440;
+      topBound = -targetHeight.value + 450;
       return Math.max(topBound, Math.min(scroll.value, 0)) as number;
     })
 

diff --git a/src/router/index.ts b/src/router/index.ts
index 00420037dbe40ebf8401a9183cf6a83a443cbfa6..be6cd4b18db75159632716fcce166e7362dee034 100644 (file)
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,4 +1,4 @@
-import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
+import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from "vue-router";
 import HomeIndex from "../views/home/index.vue";
 
 const routes: Array<RouteRecordRaw> = [
@@ -10,7 +10,7 @@ const routes: Array<RouteRecordRaw> = [
 ];
 
 const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
+  history: process.env.IS_ELECTRON ? createWebHashHistory() : createWebHistory(process.env.BASE_URL),
   routes
 });
 

diff --git a/src/views/user/login.vue b/src/views/user/login.vue
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/src/views/user/register.vue b/src/views/user/register.vue
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/vue.config.js b/vue.config.js
index c1f417074ae3992916a63701a34141f1aaf09ca6..8a7dde9c571fcf108dd0032d1616778c0a5942de 100644 (file)
--- a/vue.config.js
+++ b/vue.config.js
@@ -21,7 +21,7 @@ module.exports = {
       builderOptions: {
         // TODO electron-builder config https://www.electron.build/configuration/configuration
         appId: "com.crimata.messenger",
-        name: "CrimataMessenger"
+        productName: "Crimata-Messenger"
       },
       preload: "src/preload.ts"
     }