From 067afdb1872e2571c73d59a787e5931e89bb0bac Mon Sep 17 00:00:00 2001
From: AsbjornOlling <asbjornolling@gmail.com>
Date: Tue, 16 Aug 2022 13:04:35 +0200
Subject: [PATCH] move contacts list to left of messages

this is the common ui pattern in most chat apps. I think it feels more natural.
---
 chatapp.svg | 32 +++++++++++++++++---------------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/chatapp.svg b/chatapp.svg
index d1f0bc6..7df9cb7 100644
--- a/chatapp.svg
+++ b/chatapp.svg
@@ -73,7 +73,7 @@ function ChatMessage(message_text, is_myself) {
   /// Render the chat message on the screen
   this.draw = function() {
     let text = document.createElementNS(svgns, 'text');
-    let x = (is_myself)?10 :50;
+    let x = 100 + (is_myself ? 10 : 50);
     text.setAttribute('x', `${x}%`);
 
     lines.forEach(function(line) {
@@ -133,9 +133,11 @@ function swipe_viewport() {
   let coords = svg.getAttribute('viewBox').split(' ');
   let x = parseInt(coords.shift());
   if(x == 0) {
+      // moving from messages to contacts
       var step = 5;
       var end = width;
   } else {
+      // moving from contacts to messages
       var step = -5;
       var end = 0;
   }
@@ -246,23 +248,23 @@ async function dialog_kaereste() {
 ]]>
 </script>
 
-<!-- [left] contact name view -->
-<rect x="0" y="0" width="100%" height="10%" fill="yellow" />
-<polyline points="0,20 20,0 20,40" fill="blue" onclick="swipe_viewport()" />
-<text x="50" y="30" id="contact_indicator">loading...</text>
+<!-- [right] contact name view -->
+<rect x="100%" y="0" width="100%" height="10%" fill="yellow" />
+<polyline points="300,20 320,0 320,40" fill="blue" onclick="swipe_viewport()" /> <!-- XXX: these polyline points depend on the svg width -->
+<text x="125%" y="30" id="contact_indicator">loading...</text>
 
-<!-- [left] messages view -->
-<rect x="0" y="10%" width="100%" height="90%" style="stroke: green; stroke-width: 10px" fill="blue" />
-<rect id="messages_background" x="5%" y="15%" z="2" width="90%" height="85%" fill="pink" />
+<!-- [right] messages view -->
+<rect x="100%" y="10%" width="100%" height="90%" style="stroke: green; stroke-width: 10px" fill="blue" />
+<rect id="messages_background" x="105%" y="15%" z="2" width="90%" height="85%" fill="pink" />
 <g id="messages"></g>
 
-<!-- [right] contact list -->
-<rect x="100%" y="0" width="100%" height="10%" fill="yellow" />
-<text x="120%" y="30">Dine kontakter</text>
-<rect x="100%" y="10%" width="100%" height="100%" style="stroke: green; stroke-width: 10px" fill="aqua" />
+<!-- [left] contact list -->
+<rect x="0" y="0" width="100%" height="10%" fill="yellow" />
+<text x="20%" y="30">Dine kontakter</text>
+<rect x="0" y="10%" width="100%" height="100%" style="stroke: green; stroke-width: 10px" fill="aqua" />
 
-<text x="105%" y="15%" onclick="start_chat('Ven')">Ven</text>
-<text x="105%" y="20%" onclick="start_chat('Mor')">Mor</text>
-<text x="105%" y="25%" onclick="start_chat('Kæreste')">Kæreste&#10084;</text>
+<text x="5%" y="15%" onclick="start_chat('Ven')">Ven</text>
+<text x="5%" y="20%" onclick="start_chat('Mor')">Mor</text>
+<text x="5%" y="25%" onclick="start_chat('Kæreste')">Kæreste&#10084;</text>
 
 </svg>