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

Compare commits

base: om:9533513e5fcf8bd304cfd56e9e8fb6c009abe7c0
Branches Tags
om:master
..
compare: om:911a58bd6b9823bd686d6c862a1dac0485d41803
Branches Tags
om:master

No commits in common. "9533513e5fcf8bd304cfd56e9e8fb6c009abe7c0" and "911a58bd6b9823bd686d6c862a1dac0485d41803" have entirely different histories.
9533513e5f ... 911a58bd6b

1 changed files with 16 additions and 18 deletions
Show stats Expand all files Collapse all files

34
chatapp.svg
View file

@ -9,7 +9,6 @@
viewBox="0 0 300 600" viewBox="0 0 300 600"
onload="start_chat('Ven')" onload="start_chat('Ven')"
overflow="auto" overflow="auto"
style="font-family: sans; border-radius: 10px;"
> >
<defs> <defs>
<symbol id="kaereste_foto" width="60" height="200"> <symbol id="kaereste_foto" width="60" height="200">
@ -101,8 +100,7 @@ function create_link_node(url) {
/// *ChatMessages are owned by a Dialog. /// *ChatMessages are owned by a Dialog.
function TextChatMessage(message_text, is_myself) { function TextChatMessage(message_text, is_myself) {
let lines = split_text_into_lines(message_text, 28); let lines = split_text_into_lines(message_text, 28);
let bubble_color = (is_myself)? '#0084FF': '#E4E6EB'; let bubble_color = (is_myself)? 'white': '#DDFF66';
let text_color = (is_myself)? 'white': 'black';
let container = document.getElementById('messages'); let container = document.getElementById('messages');
// attributes // attributes
@ -113,7 +111,7 @@ function TextChatMessage(message_text, is_myself) {
this.draw = function(y_offset, y_shift) { this.draw = function(y_offset, y_shift) {
let group = create_svg_node('g', {'transform': `translate(0, ${y_shift})`}); let group = create_svg_node('g', {'transform': `translate(0, ${y_shift})`});
let x = (is_myself ? 195 : 105); let x = (is_myself ? 190 : 110);
let text = create_svg_node('text', { let text = create_svg_node('text', {
'x': `${x}%`, 'x': `${x}%`,
'font-size': `${line_height}px`, 'font-size': `${line_height}px`,
@ -127,7 +125,7 @@ function TextChatMessage(message_text, is_myself) {
let tspan = create_svg_node('tspan', { let tspan = create_svg_node('tspan', {
'x': `${x}%`, 'x': `${x}%`,
'y': `${y + line_height}`, // important: y is lower text baseline 'y': `${y + line_height}`, // important: y is lower text baseline
'fill': text_color, 'fill': 'green',
'width': '5%' 'width': '5%'
}); });
@ -392,7 +390,7 @@ async function local_message_processing(will_be_flagged) {
let text_element = document.getElementById('message_status'); let text_element = document.getElementById('message_status');
let indicator = text_element.childNodes[0]; let indicator = text_element.childNodes[0];
indicator.data = 'scanning for illegal content'; indicator.data = 'scanning for illegal content';
await wait(800); await wait(200);
if(will_be_flagged) { if(will_be_flagged) {
let box = document.getElementById('message_status_box'); let box = document.getElementById('message_status_box');
text_element.setAttribute('fill', 'red'); text_element.setAttribute('fill', 'red');
@ -400,12 +398,12 @@ async function local_message_processing(will_be_flagged) {
indicator.data = 'Reporting suspicious content'; indicator.data = 'Reporting suspicious content';
await wait(1000); await wait(1000);
text_element.setAttribute('fill', 'white'); text_element.setAttribute('fill', 'white');
box.setAttribute('fill', '#FF7B00'); box.setAttribute('fill', 'blue');
} }
indicator.data = 'encrypting message'; indicator.data = 'encrypting message';
await wait(550); await wait(250);
indicator.data = 'sending message'; indicator.data = 'sending message';
await wait(500); await wait(100);
indicator.data = 'message was sent'; indicator.data = 'message was sent';
} }
@ -517,20 +515,20 @@ async function dialog_nabopige() {
<!-- [right] contact name view --> <!-- [right] contact name view -->
<g id="contact_name_box"> <g id="contact_name_box">
<rect x="300" y="0" width="300" height="50" fill="#F5F5F5"/> <rect x="300" y="0" width="300" height="50" fill="yellow" />
<polyline points="300,20 320,0 320,40" fill="#0084FF" onclick="swipe_viewport()" /> <polyline points="300,20 320,0 320,40" fill="blue" onclick="swipe_viewport()" />
<polyline points="560,20 600,20 580,0" fill="#0084FF" onclick="scroll_up()" /> <polyline points="560,20 600,20 580,0" fill="blue" onclick="scroll_up()" />
<polyline points="560,30 600,30 580,50" fill="#0084FF" onclick="scroll_down()" /> <polyline points="560,30 600,30 580,50" fill="blue" onclick="scroll_down()" />
<text x="350" y="30" id="contact_indicator">loading...</text> <text x="350" y="30" id="contact_indicator">loading...</text>
</g> </g>
<!-- [right] messages view --> <!-- [right] messages view -->
<rect x="300" y="50" width="300" height="450" fill="white" /> <rect x="300" y="50" width="300" height="450" fill="aqua" />
<g id="messages"></g> <g id="messages"></g>
<!-- [right] message status --> <!-- [right] message status -->
<rect id="message_status_box" x="300" y="520" fill="#FF7B00" width="300" height="30" /> <rect id="message_status_box" x="300" y="500" fill="blue" width="300" height="50" />
<text id="message_status" x="310" y="540" fill="white">status</text> <text id="message_status" x="310" y="530" fill="white">status</text>
<!-- [right] text input --> <!-- [right] text input -->
<rect id="message_input_box" x="300" y="550" stroke="black" fill="white" width="250" height="50" /> <rect id="message_input_box" x="300" y="550" stroke="black" fill="white" width="250" height="50" />
@ -539,9 +537,9 @@ async function dialog_nabopige() {
<text id="message_submit_button" x="555" y="580" fill="black">SEND</text> <text id="message_submit_button" x="555" y="580" fill="black">SEND</text>
<!-- [left] contact list --> <!-- [left] contact list -->
<rect x="0" y="0" width="300" height="50" fill="#E4E6EB" /> <rect x="0" y="0" width="300" height="50" fill="yellow" />
<text x="60" y="30">Dine kontakter</text> <text x="60" y="30">Dine kontakter</text>
<rect x="0" y="50" width="300" height="550" style="stroke: green; stroke-width: 0px" fill="white" /> <rect x="0" y="50" width="300" height="550" style="stroke: green; stroke-width: 10px" fill="aqua" />
<text x="15" y="75" onclick="start_chat('Ven')">Ven</text> <text x="15" y="75" onclick="start_chat('Ven')">Ven</text>
<text x="15" y="100" onclick="start_chat('Mor')">Mor</text> <text x="15" y="100" onclick="start_chat('Mor')">Mor</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB