Skip to content

erp5
erp5
Commit 0fb0c6ad authored by Kristopher Ruzic's avatar Kristopher Ruzic
Browse files
Options

update CSS for prettier messaging, add clickable links, auto-focus textfield 

also replaces text in the titlebar with icons, easy to understand and don't overflow into the titletext
parent fe53a328
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 488 additions and 35 deletions
bt5/erp5_web_jabber_client/PathTemplateItem/web_page_module/jabber_gadget_jabberclient_html.xml
View file @ 0fb0c6ad
......@@ -119,6 +119,10 @@
<link id="favicon" rel="shortcut icon" href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAADf8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAERAAAAAAAAEQEAAAAAAAEQARAAAAAAARAAEQAAAAARAAARAAAAABAAAAEQAAAAAAAAABEAAAAAAAAAEQAAAAAAAAABEAAAAAAAAAARAAAAAAAAABEAAAAAAAAAAQAAAAAAAAAAD//wAA//8AAP7/AAD8fwAA+X8AAPM/AADznwAA558AAO/PAAD/5wAA/+cAAP/zAAD/+QAA//kAAP/9AAD//wAA">\n
\n
<link rel="stylesheet" href="jquerymobile.css">\n
\n
\n
<!-- stylesheets for jabberclient -->\n
<link rel="stylesheet" type="text/css" href="gadget_jabberclient.css" />\n
\n
<script src="jquery.js"></script>\n
<script src="jquerymobile.js"></script>\n
......@@ -210,11 +214,9 @@
<div class="discussion-content"></div>\n
<div data-role="footer" data-position="fixed" data-tap-toggle="false">\n
<form class="message-form">\n
<div class="ui-input-text ui-corner-all ui-body-inherit ui-shadow-inset ui-input-has-clear">\n
<input type="text" data-enhanced="true" name="content" placeholder="Write something..." value="" required>\n
<div class="ui-btn ui-input-clear ui-input-btn ui-corner-all ui-icon-edit ui-btn-icon-notext">\n
<input data-enhanced="true" type="submit" value="Send">\n
</div>\n
<div class="ui-input-text ui-corner-all ui-body-inherit ui-shadow-inset ui-input-has-clear container">\n
<div class="text-button"><input type="text" data-enhanced="true" name="content" placeholder="Write something..." value="" required></div>\n
<div class="button"><button class="ui-btn ui-input-clear ui-input-btn ui-corner-all ui-icon-comment ui-btn-icon-notext" type="submit" data-enhanced="true" value="Send"></button></div>\n
</div>\n
</form>\n
</div>\n
......@@ -246,17 +248,17 @@
</div>\n
</div>\n
</script>\n
<script class="message-template" type="text/x-handlebars-template"><li data-theme="{{theme}}" style="{{style}}"><pre style="white-space: pre-wrap;">{{text}}</pre></li></script>\n
<script class="message-template" type="text/x-handlebars-template"><li data-theme="{{theme}}" class="{{msg_class}}" style=""><p style="white-space: pre-wrap; word-wrap: break-word; font-size: 14px;">{{{text}}}</p><label style="{{timestamp_style}}" class="{{sender}} {{timestamp_class}}">{{timestamp}}</label></li></script>\n
\n
<script class="history-template" type="text/x-handlebars-template"><pre style="white-space: pre-wrap;">{{text}}</pre></script>\n
\n
<script class="header-template" type="text/x-handlebars-template">\n
{{#if left_url}}\n
<a href="{{left_url}}" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all">{{left_title}}</a>\n
<a href="{{left_url}}" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-notext ui-icon-{{left_title}}"></a>\n
{{/if}}\n
<h1 class="ui-title">{{title}}</h1>\n
{{#if right_url}}\n
<a href="{{right_url}}" class="ui-btn-right ui-btn ui-btn-inline ui-mini ui-corner-all">{{right_title}}</a>\n
<a href="{{right_url}}" class="ui-btn-right ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-notext ui-icon-{{right_title}}"></a>\n
{{/if}}\n
</script>\n
</head>\n
......@@ -407,7 +409,7 @@
</item>
<item>
<key> <string>actor</string> </key>
<value> <string>zope1</string> </value>
<value> <string>zope</string> </value>
</item>
<item>
<key> <string>comment</string> </key>
......@@ -421,7 +423,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>944.54830.54261.27972</string> </value>
<value> <string>945.43725.16450.38024</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -439,8 +441,8 @@
</tuple>
<state>
<tuple>
<float>1438695309.09</float>
<string>GMT</string>
<float>1441961206.73</float>
<string>UTC</string>
</tuple>
</state>
</object>
......
bt5/erp5_web_jabber_client/PathTemplateItem/web_page_module/jabber_gadget_jabberclient_js.xml
View file @ 0fb0c6ad
......@@ -235,6 +235,21 @@
return s;\n
}\n
\n
function getHumanReadableDate() {\n
var dateObject = new Date();\n
return dateObject.toUTCString(); \n
}\n
\n
function sequentialMessages(li, new_msg) { \n
if (li === null) {\n
return false;\n
}\n
if ($(li).children(\'li\').last().children(\'label\').attr("class").toString() == new_msg.toString()) {\n
return true;\n
}\n
return false;\n
}\n
\n
function getLogString(text, is_incomming) {\n
var prefix,\n
date = new Date(),\n
......@@ -248,6 +263,7 @@
prefix = \'>\';\n
}\n
return "[" + timestamp + "] " + prefix + " " + text + "\\n";\n
\n
}\n
\n
function getStorageIdFromJid(gadget, jid) {\n
......@@ -335,10 +351,10 @@
parameter.contact.sort(compareContact);\n
gadget.props.header_element.innerHTML = gadget.props.header_template({\n
left_url: result_list[0],\n
left_title: "Reset Password",\n
left_title: "gear",\n
title: "Contact",\n
right_url: result_list[1],\n
right_title: "New"\n
right_title: "plus"\n
});\n
gadget.props.content_element.innerHTML =\n
gadget.props.contact_template(parameter);\n
......@@ -351,14 +367,36 @@
\n
var new_element = document.createElement(\'div\'),\n
theme = "a",\n
style = "padding-right: 5em;";\n
if (!is_incoming) {\n
style = "text-align: right; padding-left: 5em;";\n
timestamp_class, final_text, msg_class;\n
if (is_incoming) {\n
msg_class = "msg incoming-msg";\n
timestamp_class = "incoming-timestamp";\n
} else {\n
msg_class = "msg outgoing-msg";\n
timestamp_class = "outgoing-timestamp";\n
}\n
var timestamp = getHumanReadableDate();\n
final_text = Handlebars.Utils.escapeExpression(text);\n
var reg = "((http(s)?:\\/\\/)|(www\\\\.))[a-zA-Z0-9-._~:/?#@!$&\'()*+,;=%]{2,256}";\n
\n
// before appending new element, check to see if the previous was the same sender\n
// that is, if prev message was incoming or outgoing\n
// this way we can combine chat bubbles from the same user\n
if (gadget.props.contact_dict[jid].conversation_element.children.length !== 0) {\n
var li = gadget.props.contact_dict[jid].conversation_element;\n
if (sequentialMessages(li, is_incoming + " " + timestamp_class)) {\n
final_text = $(li).children(\'li\').last().children(\'p\').text() + "\\n" + text;\n
// get <p> tag from last conversation element, prepend it to text, remove old element\n
$(li).children(\'li\').last().hide();\n
}\n
}\n
new_element.innerHTML = gadget.props.message_template({\n
theme: theme,\n
style: style,\n
text: text\n
msg_class: msg_class,\n
text: final_text.replace(new RegExp(reg,\'ig\'), " <A target=\\"_blank\\" HREF=\\"$&\\">$&</A>"),\n
timestamp: timestamp,\n
timestamp_class: timestamp_class,\n
sender: is_incoming // change this to something else\n
});\n
gadget.props.contact_dict[jid].conversation_element\n
.appendChild(new_element.firstChild);\n
......@@ -385,7 +423,7 @@
});\n
}\n
}(),\n
addLog(gadget, jid, text, is_incoming)\n
addLog(gadget, jid, text, is_incoming) // non-html, merged text is sent to history\n
]);\n
}\n
\n
......@@ -404,7 +442,7 @@
.push(function (result) {\n
gadget.props.header_element.innerHTML = gadget.props.header_template({\n
left_url: dialog_url,\n
left_title: "Back",\n
left_title: "carat-l",\n
title: "History of " + jid\n
});\n
gadget.props.content_element.innerHTML = gadget.props.history_template({\n
......@@ -430,15 +468,15 @@
var last_child;\n
gadget.props.header_element.innerHTML = gadget.props.header_template({\n
left_url: contact_url,\n
left_title: "Back",\n
left_title: "carat-l",\n
title: jid,\n
right_url: history_url,\n
right_title: "History"\n
right_title: "bars"\n
});\n
gadget.props.content_element.innerHTML =\n
gadget.props.dialog_template({});\n
$(gadget.props.element).trigger("create");\n
\n
gadget.props.content_element.querySelector(".message-form")[0].focus();\n
gadget.props.content_element.querySelector(".discussion-content")\n
.appendChild(\n
gadget.props.contact_dict[jid].conversation_element\n
......@@ -538,7 +576,7 @@
contact_url = contact;\n
gadget.props.header_element.innerHTML = gadget.props.header_template({\n
left_url: contact_url,\n
left_title: "Back",\n
left_title: "carat-l",\n
title: "New Contact"\n
});\n
gadget.props.content_element.innerHTML =\n
......@@ -566,6 +604,10 @@
return redirectToDefaultPage(gadget);\n
});\n
}\n
\n
function renderOptionsPage(gadget, connection_gadget, display_message) {\n
\n
}\n
\n
function renderResetPasswordPage(gadget, connection_gadget, display_message) {\n
var new_password = \'\';\n
......@@ -576,7 +618,7 @@
.push(function (contact_url) {\n
gadget.props.header_element.innerHTML = gadget.props.header_template({\n
left_url: contact_url,\n
left_title: "Back",\n
left_title: "carat-l",\n
title: "Reset Password"\n
});\n
gadget.props.content_element.innerHTML =\n
......@@ -749,7 +791,7 @@
// Bye dear contact\n
gadget.props.contact_dict[from].offline = true;\n
} else {\n
// Bye dear contact\n
// Hello dear contact\n
gadget.props.contact_dict[from].offline = false;\n
}\n
if ((gadget.props.options !== undefined) &&\n
......@@ -1012,7 +1054,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>944.63442.46785.34730</string> </value>
<value> <string>945.39425.10362.14284</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -1030,8 +1072,8 @@
</tuple>
<state>
<tuple>
<float>1439212776.16</float>
<string>GMT</string>
<float>1441878474.64</float>
<string>UTC</string>
</tuple>
</state>
</object>
......
bt5/erp5_web_jabber_client/PathTemplateItem/web_page_module/jabber_gadget_jabberconnection_js.xml
View file @ 0fb0c6ad
......@@ -232,7 +232,7 @@
\n
function deferServerDisconnection(gadget) {\n
enqueueDefer(gadget, function () {\n
// Try to auto connection\n
// Try to auto connect\n
if (gadget.props.connection !== undefined) {\n
gadget.props.connection.disconnect();\n
delete gadget.props.connection;\n
......@@ -248,7 +248,7 @@
}\n
\n
enqueueDefer(gadget, function () {\n
// Try to auto connection\n
// Try to auto connect\n
if (gadget.props.server !== undefined) {\n
gadget.props.connection = new Strophe.Connection(gadget.props.server);\n
\n
......@@ -415,6 +415,34 @@
$pres().tree()\n
);\n
})\n
\n
.declareMethod(\'removeContact\', function (jid) {\n
var defer = RSVP.defer();\n
function jsonifyResponse(domElt) {\n
try {\n
var result = [],\n
type = domElt.getAttribute(\'type\');\n
if(type === "result") {\n
result.push("Contact Delete Success.");\n
}\n
else {\n
throw new Error("Contact Delete Failure.");\n
}\n
defer.resolve(result);\n
} catch (error) {\n
defer.reject(error);\n
}\n
}\n
var uid = this.props.jid.split(\'@\')[0];\n
this.props.connection.sendIQ(\n
$iq({type: "set"})\n
.c("query", {xmlns: Strophe.NS.ROSTER})\n
.c("item", {jid: jid, subscription: "remove"}),\n
jsonifyResponse,\n
defer.reject\n
);\n
return defer.promise;\n
})\n
\n
.declareMethod(\'requestSubscribe\', function (jid) {\n
this.props.connection.send(\n
......@@ -583,7 +611,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>944.7242.54723.60006</string> </value>
<value> <string>945.42491.2610.14711</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -601,8 +629,8 @@
</tuple>
<state>
<tuple>
<float>1436191748.38</float>
<string>GMT</string>
<float>1441889236.74</float>
<string>UTC</string>
</tuple>
</state>
</object>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7