om/chatcontrol-live-demo
1
0
Fork 1
Code Issues Pull requests Projects Releases Wiki Activity

move contacts list to left of messages

Browse source 
this is the common ui pattern in most chat apps. I think it feels more natural.
This commit is contained in:
AsbjornOlling 2022-08-16 13:04:35 +02:00
parent 0678213516
commit 067afdb187
1 changed files with 17 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
chatapp.svg
View file

@ -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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8 KiB

After

Width:  |  Height:  |  Size: 8.1 KiB