From 0daf5a8e5202c1b85f30a691de6f3bbed69f9076 Mon Sep 17 00:00:00 2001
From: projectmoon <projectmoon@agnos.is>
Date: Wed, 4 Jan 2023 11:54:46 +0100
Subject: [PATCH] Remove table-sm resizing, use clock icon in mobile UI, fix
 mobile UI jumping around when clicking a date/username. Fix line endings in
 xsl file.

---
 src/index.html         |   3 +-
 src/scss/index.scss    |   2 +-
 src/ts/index.ts        |   8 --
 src/xsl/MessageLog.xsl | 274 ++++++++++++++++++++---------------------
 4 files changed, 140 insertions(+), 147 deletions(-)

diff --git a/src/index.html b/src/index.html
index 7f35640..4fb666b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -167,7 +167,8 @@
                             information hidden to make reading
                             messages easier.
                             <ul>
-                                <li>Tap on the pound sign to see the
+                                <li>Tap on the <i class="bi
+                                    bi-clock"></i> clock to see the
                                     date and time of the message.</li>
                                 <li>Tap again to hide the popup.</li>
                                 <li>Long chat messages are scrollable.
diff --git a/src/scss/index.scss b/src/scss/index.scss
index a41e7f5..7f2bc01 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -63,7 +63,7 @@ th, td {
     }
 
     .message-mobile-date-time {
-	width: 1em;
+	width: 2em;
     }
 
     .message-from-user {
diff --git a/src/ts/index.ts b/src/ts/index.ts
index f68c8e8..4de3513 100644
--- a/src/ts/index.ts
+++ b/src/ts/index.ts
@@ -190,14 +190,6 @@ async function populateSavedBackups() {
 }
 
 window.addEventListener('DOMContentLoaded', async () => {
-    window.addEventListener('resize', () => {
-        if (window.innerWidth <= 500) {
-            ui.chatDisplay.querySelector('table')?.classList.add('table-sm');
-        } else {
-            ui.chatDisplay.querySelector('table')?.classList.remove('table-sm');
-        }
-    });
-
     initEvents();
     showLoadingIndicator(false);
     showApplication(true);
diff --git a/src/xsl/MessageLog.xsl b/src/xsl/MessageLog.xsl
index 6660c21..57e2327 100644
--- a/src/xsl/MessageLog.xsl
+++ b/src/xsl/MessageLog.xsl
@@ -1,137 +1,137 @@
-<?xml version="1.0"?>
-
-<!--
-
-This XSLT file is based on the default XSL stylesheet generated by MSN
-Messenger, and unlike the rest of the application, is probably(?) not
-covered under the AGPL.
-
-The file was originally retrieved from this project:
-
-https://github.com/jerecui/MSNChatHistoryCombiner
-
--->
-
-<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
-  <!-- localized strings -->
-  <xsl:variable name='ColumnHeader_Date'>Date</xsl:variable>
-  <xsl:variable name='ColumnHeader_Time'>Time</xsl:variable>
-  <xsl:variable name='ColumnHeader_From'>From</xsl:variable>
-  <xsl:variable name='ColumnHeader_Message'>Message</xsl:variable>
-
-  <!-- variables -->
-  <xsl:variable name='UseZebraStripe'>1</xsl:variable>
-  <xsl:variable name='ZebraStripeStyle'>background-color:#e0edff</xsl:variable>
-  <xsl:variable name='MostRecentSessionFirst'>0</xsl:variable>
-
-  <xsl:template match="Log">
-    <table id='BodyTable' class="table">
-      <thead>
-        <tr>
-	  <th class="d-lg-none message-mobile-date-time">
-	    <!-- for mobile date/time -->
-	  </th>
-	  <th class="d-none d-lg-table-cell">
-            <xsl:value-of select="$ColumnHeader_Date"/>
-          </th>
-	  <th class="d-none d-lg-table-cell">
-            <xsl:value-of select="$ColumnHeader_Time"/>
-          </th>
-	  <th class="message-from-user">
-            <xsl:value-of select="$ColumnHeader_From"/>
-          </th>
-	  <th>
-            <xsl:value-of select="$ColumnHeader_Message"/>
-          </th>
-        </tr>
-      </thead>
-
-      <tbody class="table-group-divider">
-        <xsl:choose>
-          <!-- newest session first -->
-          <xsl:when test="$MostRecentSessionFirst = 1">
-            <xsl:apply-templates>
-              <xsl:sort select='@SessionID' order='descending' data-type='number'/>
-              <xsl:sort select='@DateTime'  order='ascending'/>
-            </xsl:apply-templates>
-          </xsl:when>
-
-          <!-- oldest session first -->
-          <xsl:otherwise>
-            <xsl:apply-templates>
-              <xsl:sort select='@SessionID' order='ascending' data-type='number'/>
-              <xsl:sort select='@DateTime'  order='ascending'/>
-            </xsl:apply-templates>
-          </xsl:otherwise>
-        </xsl:choose>
-      </tbody>
-    </table>
-  </xsl:template>
-
-
-  <xsl:template match="Message">
-    <tr>
-      <xsl:call-template name="CommonMessageProcessing" />
-
-      <td class="message-from-user"><xsl:apply-templates select="From/User"/> </td>
-      <td class="message-content">
-        <div class="overflow-auto">
-          <xsl:value-of select="Text"/>
-        </div>
-      </td>
-    </tr>
-  </xsl:template>
-
-
-  <xsl:template match="Invitation|InvitationResponse|Join|Leave">
-    <tr>
-      <xsl:call-template name="CommonMessageProcessing" />
-
-      <td>
-        <span>
-          <xsl:value-of select="Text"/>
-        </span>
-      </td>
-    </tr>
-  </xsl:template>
-
-  <xsl:template match="From/User">
-    <a class="info-popover" href="#" tabindex="0"
-       data-bs-trigger="focus"
-       data-bs-container="body" data-bs-toggle="popover"
-       data-bs-placement="bottom" data-bs-title="Username">
-      <xsl:attribute name="data-bs-content">
-	<xsl:value-of select="@FriendlyName"/>
-      </xsl:attribute>
-      <xsl:value-of select="@FriendlyName"/>
-    </a>
-  </xsl:template>
-
-  <xsl:template name="CommonMessageProcessing">
-    <!-- zebra-stripe the sessions -->
-    <xsl:if test="$UseZebraStripe = 1">
-      <xsl:if test="(@SessionID mod 2) = 1">
-        <xsl:attribute name="style">
-          <xsl:value-of select="$ZebraStripeStyle"/>
-        </xsl:attribute>
-      </xsl:if>
-    </xsl:if>
-
-    <!-- mobile shows a popover span for date/time -->
-    <td class="d-lg-none message-mobile-date-time">
-      <a class="info-popover" href="#" tabindex="0"
-	 data-bs-trigger="focus"
-	 data-bs-container="body" data-bs-toggle="popover"
-	 data-bs-placement="right" data-bs-title="Date/Time">
-	<xsl:attribute name="data-bs-content">
-	  <xsl:value-of select="@Date"/>&#160;<xsl:value-of select="@Time"/>
-	</xsl:attribute>
-	#
-      </a>
-    </td>
-    <td class="d-none d-lg-table-cell message-date"> <xsl:value-of select="@Date"/> </td>
-    <td class="d-none d-lg-table-cell message-time"> <xsl:value-of select="@Time"/> </td>
-  </xsl:template>
-
-
-</xsl:stylesheet>
+<?xml version="1.0"?>
+
+<!--
+
+This XSLT file is based on the default XSL stylesheet generated by MSN
+Messenger, and unlike the rest of the application, is probably(?) not
+covered under the AGPL.
+
+The file was originally retrieved from this project:
+
+https://github.com/jerecui/MSNChatHistoryCombiner
+
+-->
+
+<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+  <!-- localized strings -->
+  <xsl:variable name='ColumnHeader_Date'>Date</xsl:variable>
+  <xsl:variable name='ColumnHeader_Time'>Time</xsl:variable>
+  <xsl:variable name='ColumnHeader_From'>From</xsl:variable>
+  <xsl:variable name='ColumnHeader_Message'>Message</xsl:variable>
+
+  <!-- variables -->
+  <xsl:variable name='UseZebraStripe'>1</xsl:variable>
+  <xsl:variable name='ZebraStripeStyle'>background-color:#e0edff</xsl:variable>
+  <xsl:variable name='MostRecentSessionFirst'>0</xsl:variable>
+
+  <xsl:template match="Log">
+    <table id='BodyTable' class="table">
+      <thead>
+        <tr>
+	  <th class="d-lg-none message-mobile-date-time">
+	    <!-- for mobile date/time -->
+	  </th>
+	  <th class="d-none d-lg-table-cell">
+            <xsl:value-of select="$ColumnHeader_Date"/>
+          </th>
+	  <th class="d-none d-lg-table-cell">
+            <xsl:value-of select="$ColumnHeader_Time"/>
+          </th>
+	  <th class="message-from-user">
+            <xsl:value-of select="$ColumnHeader_From"/>
+          </th>
+	  <th>
+            <xsl:value-of select="$ColumnHeader_Message"/>
+          </th>
+        </tr>
+      </thead>
+
+      <tbody class="table-group-divider">
+        <xsl:choose>
+          <!-- newest session first -->
+          <xsl:when test="$MostRecentSessionFirst = 1">
+            <xsl:apply-templates>
+              <xsl:sort select='@SessionID' order='descending' data-type='number'/>
+              <xsl:sort select='@DateTime'  order='ascending'/>
+            </xsl:apply-templates>
+          </xsl:when>
+
+          <!-- oldest session first -->
+          <xsl:otherwise>
+            <xsl:apply-templates>
+              <xsl:sort select='@SessionID' order='ascending' data-type='number'/>
+              <xsl:sort select='@DateTime'  order='ascending'/>
+            </xsl:apply-templates>
+          </xsl:otherwise>
+        </xsl:choose>
+      </tbody>
+    </table>
+  </xsl:template>
+
+
+  <xsl:template match="Message">
+    <tr>
+      <xsl:call-template name="CommonMessageProcessing" />
+
+      <td class="message-from-user"><xsl:apply-templates select="From/User"/> </td>
+      <td class="message-content">
+        <div class="overflow-auto">
+          <xsl:value-of select="Text"/>
+        </div>
+      </td>
+    </tr>
+  </xsl:template>
+
+
+  <xsl:template match="Invitation|InvitationResponse|Join|Leave">
+    <tr>
+      <xsl:call-template name="CommonMessageProcessing" />
+
+      <td>
+        <span>
+          <xsl:value-of select="Text"/>
+        </span>
+      </td>
+    </tr>
+  </xsl:template>
+
+  <xsl:template match="From/User">
+    <a class="info-popover" href="javascript:void(0);" tabindex="0"
+       data-bs-trigger="focus"
+       data-bs-container="body" data-bs-toggle="popover"
+       data-bs-placement="bottom" data-bs-title="Username">
+      <xsl:attribute name="data-bs-content">
+	<xsl:value-of select="@FriendlyName"/>
+      </xsl:attribute>
+      <xsl:value-of select="@FriendlyName"/>
+    </a>
+  </xsl:template>
+
+  <xsl:template name="CommonMessageProcessing">
+    <!-- zebra-stripe the sessions -->
+    <xsl:if test="$UseZebraStripe = 1">
+      <xsl:if test="(@SessionID mod 2) = 1">
+        <xsl:attribute name="style">
+          <xsl:value-of select="$ZebraStripeStyle"/>
+        </xsl:attribute>
+      </xsl:if>
+    </xsl:if>
+
+    <!-- mobile shows a popover span for date/time -->
+    <td class="d-lg-none message-mobile-date-time">
+      <a class="info-popover" href="javascript:void(0);" tabindex="0"
+	 data-bs-trigger="focus"
+	 data-bs-container="body" data-bs-toggle="popover"
+	 data-bs-placement="right" data-bs-title="Date/Time">
+	<xsl:attribute name="data-bs-content">
+	  <xsl:value-of select="@Date"/>&#160;<xsl:value-of select="@Time"/>
+	</xsl:attribute>
+	<i class="bi bi-clock"></i>
+      </a>
+    </td>
+    <td class="d-none d-lg-table-cell message-date"> <xsl:value-of select="@Date"/> </td>
+    <td class="d-none d-lg-table-cell message-time"> <xsl:value-of select="@Time"/> </td>
+  </xsl:template>
+
+
+</xsl:stylesheet>