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.
This commit is contained in:
parent
3fb3ef927a
commit
0daf5a8e52
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ th, td {
|
|||
}
|
||||
|
||||
.message-mobile-date-time {
|
||||
width: 1em;
|
||||
width: 2em;
|
||||
}
|
||||
|
||||
.message-from-user {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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"/> <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"/> <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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue