chatview: update for the new lrc
Add css and js for temporary chatview, draw new contact and call
messages.
Change-Id: I0e5dcb251a43151cbb4bcd5ed7b192f075731cb6
Reviewed-by: Nicolas Jäger <nicolas.jager@savoirfairelinux.com>
diff --git a/src/chatview.cpp b/src/chatview.cpp
index 6b528fe..076f62d 100644
--- a/src/chatview.cpp
+++ b/src/chatview.cpp
@@ -232,7 +232,10 @@
ChatViewPrivate *priv = CHAT_VIEW_GET_PRIVATE(self);
/* make sure there is more than just whitespace, but if so, send the original text */
- const auto text = QString(message);
+ auto text = QString(message);
+ // NOTE for now, because we only have a send text action from the webkit.
+ if (text.startsWith("SEND:"))
+ text.remove(0, 5);
if (!text.trimmed().isEmpty()) {
QMap<QString, QString> messages;
messages["text/plain"] = text;
diff --git a/web/chatview.css b/web/chatview.css
index 2e9fb6b..ca66df9 100644
--- a/web/chatview.css
+++ b/web/chatview.css
@@ -3,6 +3,66 @@
overflow: hidden;
}
+#invitation {
+ visibility: hidden;
+ width: 100%;
+ background: #bae5f0;
+ z-index: 2;
+ position: absolute;
+ margin: 0 auto;
+ left:0;
+ right:0;
+ top:0;
+}
+
+#actions
+{
+ margin: 10px;
+ list-style: none;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.flat-button {
+ margin: 5px;
+ border: 0;
+ border-radius: 5px;
+ transition: all 0.3s ease;
+ color: white;
+ padding: 10px 20px 10px 20px;
+ vertical-align: middle;
+
+}
+
+.button-green {
+ background: #27ae60;
+}
+
+.button-green:hover {
+ background: #219d55;
+}
+
+.button-red {
+ background: #dc3a37;
+}
+
+.button-red:hover {
+ background: #dc2719;
+}
+
+#invitation #text h1 {
+ font-size: 1.5em;
+}
+
+#invitation #text {
+ text-align: center;
+ width: 90%;
+ margin: auto;
+ margin-top: 10px;
+ font-size: 0.8em;
+}
+
a:link {
text-decoration: none;
color: #0e649b;
@@ -101,6 +161,10 @@
outline: none;
}
+#container[disabled] {
+ background-color: #ccc;
+}
+
input[placeholder], [placeholder], *[placeholder] {
color: #d3d3d3;
}
@@ -432,3 +496,76 @@
.message_out + .message_out .sender_image {
opacity: 0;
}
+
+.message_type_contact,
+.message_type_call {
+ width: 100%;
+}
+
+.message_type_call .sent-checkmark,
+.message_type_call .message_sender,
+.message_type_call .message_delivery_status,
+.message_type_call .message_timestamp,
+.message_type_call .message_sender_image,
+.message_type_contact .sent-checkmark,
+.message_type_contact .message_sender,
+.message_type_contact .message_delivery_status,
+.message_type_contact .message_timestamp,
+.message_type_contact .message_sender_image {
+ visibility: hidden;
+ display: none;
+}
+
+/* NOTE: This rule is temporary to deactivate status for message while the
+ patch for re-implementing status for interactions is not in LRC */
+.message_delivery_status
+{
+ visibility: hidden;
+ display: none;
+}
+
+.message_type_contact .message_wrapper:before,
+.message_type_call .message_wrapper:before {
+ display: none;
+}
+
+.message_type_call .message_wrapper:after,
+.message_type_contact .message_wrapper:after {
+ display: none;
+}
+
+.message_type_call .message_wrapper,
+.message_type_contact .message_wrapper {
+ background: #fff;
+ width: 100%;
+ max-width: 100%;
+ text-align: center;
+ margin: 0;
+ padding: 0;
+ color: #888;
+ font-style: italic;
+ border-radius: 0;
+}
+
+.message_type_call .message_text,
+.message_type_contact .message_text {
+ overflow: hidden;
+ text-align: center;
+ padding-bottom: 5px;
+ margin-bottom: 5px;
+ border-bottom: 1px solid #ccc;
+ margin-left: 20px;
+}
+
+.message_type_call .message_text {
+ border-bottom: 1px dotted #ccc;
+}
+
+#green {
+ color: green;
+}
+
+#red {
+ color: red;
+ font-size: 1.25em;
+}
diff --git a/web/chatview.html b/web/chatview.html
index 1a92438..44cc0e8 100644
--- a/web/chatview.html
+++ b/web/chatview.html
@@ -6,11 +6,21 @@
</head>
<body>
+ <div id="invitation">
+ <div id="text">
+ </div>
+ <div id="actions">
+ <div id="accept-btn" class="flat-button button-green" onclick="ring.chatview.acceptInvitation()" >Accept</div>
+ <div id="refuse-btn" class="flat-button button-red" onclick="ring.chatview.refuseInvitation()" >Refuse</div>
+ <div id="block-btn" class="flat-button button-red" onclick="ring.chatview.blockConversation()" >Block</div>
+ </div>
+ </div>
<div id="container">
<div id="messages"></div>
<div id="sendMessage">
- <textarea id="message" autofocus placeholder="Message" onkeyup="grow_text_area()" rows="1" ></textarea>
+ <!-- when SIP messages will be integrated in the client add 'disabled="false"' -->
+ <textarea id="message" autofocus placeholder="Message" onkeyup="grow_text_area()" rows="1"></textarea>
<div id="sendBtn" onclick="ring.chatview.sendMessage()" title="Send">
<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
<path xmlns="http://www.w3.org/2000/svg" d="M12,11.874v4.357l7-6.69l-7-6.572v3.983c-8.775,0-11,9.732-11,9.732C3.484,12.296,7.237,11.874,12,11.874z"/>
@@ -117,10 +127,65 @@
var message = input.value;
if (message.length > 0) {
input.value = '';
- window.prompt(message);
+ window.prompt('SEND:' + message);
}
}
+ /**
+ * Disable or enable textarea
+ */
+ function disableSendMessage(isDisabled)
+ {
+ var input = document.querySelector("#sendMessage #message");
+ input.disabled = isDisabled;
+ }
+
+ /**
+ * Accept an invite
+ */
+ function acceptInvitation()
+ {
+ window.prompt('ACCEPT');
+ }
+
+ /**
+ * Refuse an invite
+ */
+ function refuseInvitation()
+ {
+ window.prompt('REFUSE');
+ }
+
+ /**
+ * Accept an invite
+ */
+ function blockConversation()
+ {
+ window.prompt('BLOCK');
+ }
+
+ /**
+ * Change the content of the div invitation and show it
+ * @param contactAlias
+ */
+ function showInvitation(contactAlias) {
+ const invitationText = document.querySelector('#text');
+ const invitation = document.querySelector('#invitation');
+ invitationText.innerHTML = '<h1>' + contactAlias + ' sends you an invitation</h1>'
+ + 'Do you want to add them to the conversations list?<br>'
+ + 'Note: you can automatically accept this invitation by sending a message.';
+ invitation.style.visibility = 'visible';
+ }
+
+ /**
+ * Hide the content of invitation
+ * @param contactAlias
+ */
+ function hideInvitation() {
+ const invitation = document.querySelector('#invitation');
+ invitation.style.visibility = 'hidden';
+ }
+
/**
* Clears all messages
*/
@@ -223,10 +288,12 @@
*/
function getMessageHtml(message_text)
{
- const escaped_message = escapeHtml(message_text),
- linkified_message = linkifyHtml(escaped_message, {});
+ const escaped_message = escapeHtml(message_text);
+ var linkified_message = linkifyHtml(escaped_message, {});
const textPart = document.createElement('pre');
+ var linkified_message = linkified_message.replace("📞", "<span id=\"green\">📞</span>")
+ var linkified_message = linkified_message.replace("🕽", "<span id=\"red\">🕽</span>")
textPart.innerHTML = linkified_message;
return textPart.outerHTML;
@@ -347,6 +414,7 @@
message_sender_contact_method = message_object["sender_contact_method"],
message_timestamp = message_object["timestamp"],
message_direction = message_object["direction"],
+ message_type = message_object["type"],
message_delivery_status = message_object["delivery_status"],
message_div_classes,
chatview_message_div,
@@ -368,7 +436,8 @@
{
message_div_classes = [
"message",
- "message_" + message_direction
+ "message_" + message_direction,
+ "message_type_" + message_type
];
chatview_message_div = document.createElement('div');
@@ -559,6 +628,24 @@
}
}
+ function setTemporary(temporary)
+ {
+ var area = document.querySelector("#message");
+ var sendBtn = document.querySelector("#sendBtn");
+ if (temporary) {
+ area.placeholder = "Note: an interaction will create a new contact.";
+ sendBtn.innerHTML = "<svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\">\
+ <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"/>\
+ <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\
+ </svg>";
+ } else {
+ area.placeholder = "Message";
+ sendBtn.innerHTML = "<svg viewBox=\"0 0 30 30\" xmlns=\"http://www.w3.org/2000/svg\">\
+ <path xmlns=\"http://www.w3.org/2000/svg\"\ d=\"M12,11.874v4.357l7-6.69l-7-6.572v3.983c-8.775,0-11,9.732-11,9.732C3.484,12.296,7.237,11.874,12,11.874z\"/>\
+ </svg>";
+ }
+ }
+
return {
addMessage: addMessage,
updateMessage: updateMessage,
@@ -569,6 +656,13 @@
clearSenderImages: clearSenderImages,
sendMessage: sendMessage,
setDisplayLinks: setDisplayLinks,
+ setTemporary: setTemporary,
+ acceptInvitation: acceptInvitation,
+ refuseInvitation: refuseInvitation,
+ blockConversation: blockConversation,
+ showInvitation: showInvitation,
+ hideInvitation: hideInvitation,
+ disableSendMessage: disableSendMessage,
}
})();