Commit 721323d6 authored by Sébastien Blin's avatar Sébastien Blin Committed by Andreas Traczyk

chatview: update invite bar

Change-Id: I03c19f1e5cafb39ac63e27b4eba26498b71a9076
Reviewed-by: Andreas Traczyk's avatarAndreas Traczyk <andreas.traczyk@savoirfairelinux.com>
parent da44532e
......@@ -533,7 +533,8 @@ update_chatview_frame(ChatView* self)
webkit_chat_container_set_invitation(WEBKIT_CHAT_CONTAINER(priv->webkit_chat_container),
(contactInfo.profileInfo.type == lrc::api::profile::Type::PENDING),
bestName);
bestName,
(*priv->accountInfo_)->contactModel->getContactProfileId(contactInfo.profileInfo.uri));
// hide navbar if we are in call
try {
......
......@@ -662,10 +662,10 @@ webkit_chat_container_print_history(WebKitChatContainer *view,
void
webkit_chat_container_set_invitation(WebKitChatContainer *view, bool show,
const std::string& contactUri)
const std::string& contactUri, const std::string& contactId)
{
// TODO better escape names
gchar* function_call = g_strdup_printf(show ? "showInvitation(\"%s\")" : "showInvitation()", contactUri.c_str());
gchar* function_call = g_strdup_printf(show ? "showInvitation(\"%s\", \"%s\")" : "showInvitation()", contactUri.c_str(), contactId.c_str());
webkit_chat_container_execute_js(view, function_call);
g_free(function_call);
}
......
......@@ -53,7 +53,7 @@ void webkit_chat_container_print_history (WebKitChatContainer *view
void webkit_chat_container_set_sender_image (WebKitChatContainer *view, const std::string& sender, const std::string& senderImage);
gboolean webkit_chat_container_is_ready (WebKitChatContainer *view);
void webkit_chat_container_set_display_links (WebKitChatContainer *view, bool display);
void webkit_chat_container_set_invitation (WebKitChatContainer *view, bool show, const std::string& contactUri);
void webkit_chat_container_set_invitation (WebKitChatContainer *view, bool show, const std::string& contactUri, const std::string& contactId);
void webkit_chat_set_header_visible (WebKitChatContainer *view, bool isVisible);
void webkit_chat_update_chatview_frame (WebKitChatContainer *view, bool accountEnabled, bool isBanned, bool isInvited, const gchar* alias, const gchar* bestId);
......
......@@ -4,6 +4,10 @@
/* color definitions */
--ring-light-blue: rgba(59, 193, 211, 0.3);
--ring-dark-blue: #003b4e;
--ring-green: #219d55;
--ring-green-hover: #1f8b4c;
--ring-red: #dc2719;
--ring-red-hover: #b02e2c;
/* main properties */
--bg-color: #f2f2f2; /* same as macOS client */
......@@ -26,6 +30,7 @@
--action-critical-icon-color: #4E1300;
--non-action-icon-color: #212121;
--action-icon-press-color: rgba(59, 193, 211, 0.5);
--invite-hover-color: white;
/* hairline properties */
--hairline-color: #d9d9d9;
......@@ -240,15 +245,16 @@ body {
#invitation {
visibility: hidden;
background: var(--ring-light-blue);
background: var(--bg-color);
position: absolute;
width: 100%;
padding-bottom: 10px;
/* hairline */
border-bottom: var(--hairline-thickness) solid var(--hairline-color);
}
#invitation #actions {
#invitation #invite_header {
margin: 10px;
list-style: none;
display: flex;
......@@ -259,48 +265,40 @@ body {
-webkit-user-select: auto;
}
#invitation #text h1 {
font-size: 1.5em;
#invitation .sender_image {
width: 50px;
height: 50px;
}
#invitation #text {
text-align: center;
width: 90%;
margin: auto;
margin-top: 10px;
font-size: 0.8em;
#invitation #actions {
margin-right: auto;
margin-left: auto;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
/* enable selection (it is globally disabled in the body) */
-webkit-user-select: auto;
}
.invitation-button,
.flat-button {
margin: 5px;
border: 0;
border-radius: 5px;
transition: all 0.3s ease;
color: #f9f9f9;
padding: 10px 20px 10px 20px;
vertical-align: middle;
cursor: pointer;
#invitation #actions div {
display: flex;
align-items: center;
justify-content: center;
margin-right: 5px;
margin-left: 5px;
}
.button-green {
background: #27ae60;
}
#invitation #text {
text-align: center;
font-size: 0.8em;
.button-green:hover {
background: #1f8b4c;
/* enable selection (it is globally disabled in the body) */
-webkit-user-select: auto;
}
.button-red {
background: #dc3a37;
}
.button-red:hover {
background: #b02e2c;
}
/** Messaging bar */
......@@ -484,6 +482,8 @@ a:hover {
.sender_image {
border-radius: 50%;
margin: 10px;
width: 35px;
height: 35px;
}
.message_out .message_wrapper {
......@@ -627,8 +627,15 @@ input[type=checkbox]{
/* Buttons */
.flat-button {
flex: 1;
padding: 0;
border: 0;
border-radius: 5px;
transition: all 0.3s ease;
color: #f9f9f9;
padding: 10px 20px 10px 20px;
vertical-align: middle;
cursor: pointer;
flex: 1;
padding: 0;
}
.left_buttons {
......@@ -707,6 +714,40 @@ input[type=checkbox]{
flex-wrap: wrap;
}
.invite-btn-red {
transition: background-color 0.5s ease;
}
.invite-btn-red:hover {
background: var(--ring-red);
}
.invite-btn-red svg {
fill: var(--ring-red);
transition: fill 0.5s ease;
}
.invite-btn-red:hover svg {
fill: var(--invite-hover-color);
}
.invite-btn-green {
transition: background-color 0.5s ease;
}
.invite-btn-green:hover {
background: var(--ring-green);
}
.invite-btn-green svg {
fill: var(--ring-green);
transition: fill 0.5s ease;
}
.invite-btn-green:hover svg {
fill: white;
}
.accept, .refuse {
border-radius: 50%;
cursor: pointer;
......@@ -720,21 +761,21 @@ input[type=checkbox]{
}
.accept {
fill: #219d55;
fill: var(--ring-green);
}
.accept:hover {
fill: white;
background: #219d55;
fill: var(--invite-hover-color);
background: var(--ring-green-hover);
}
.refuse {
fill: #dc2719;
fill: var(--ring-red);
}
.refuse:hover {
fill: white;
background: #dc2719;
fill: var(--invite-hover-color);
background: var(--ring-red-hover);
}
.message_type_data_transfer .text {
......
......@@ -55,12 +55,29 @@
</div>
</div>
<div id="invitation">
<div id="text">
<div id="invite_header">
<span id="invite_image"></span>
<div id="text"></div>
</div>
<div id="actions">
<div id="accept-btn" class="invitation-button button-green" onclick="acceptInvitation()" >Accept</div>
<div id="refuse-btn" class="invitation-button button-red" onclick="refuseInvitation()" >Refuse</div>
<div id="block-btn" class="invitation-button button-red" onclick="blockConversation()" >Block</div>
<div id="accept-btn" class="nav-button action-button invite-btn-green" onclick="acceptInvitation()" title="Accept" >
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
</svg>
</div>
<div id="refuse-btn" class="nav-button action-button invite-btn-red" onclick="refuseInvitation()" title="Refuse" >
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0V0z"/>
<path d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"/>
</svg>
</div>
<div id="block-btn" class="nav-button action-button invite-btn-red" onclick="blockConversation()" title="Block" >
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z"/>
</svg>
</div>
</div>
</div>
</div>
......@@ -119,6 +136,7 @@ const messageBar = document.getElementById("sendMessage")
const messageBarInput = document.getElementById("message")
const addToConvButton = document.getElementById("addToConversationsButton")
const invitation = document.getElementById("invitation")
const inviteImage = document.getElementById("invite_image")
const navbar = document.getElementById("navbar")
const invitationText = document.getElementById("text")
var messages = document.getElementById("messages")
......@@ -255,18 +273,24 @@ function update_chatview_frame(accountEnabled, banned, temporary, alias, bestid)
* Otherwise, invitation div is updated.
*
* @param contactAlias
* @param contactId
*/
/* exported showInvitation */
function showInvitation(contactAlias) {
function showInvitation(contactAlias, contactId) {
if (!contactAlias) {
if (hasInvitation) {
hasInvitation = false
invitation.style.visibility = ""
}
} else {
if (!inviteImage.classList.contains('sender_image')) {
inviteImage.classList.add('sender_image');
}
if (!inviteImage.classList.contains(`sender_image_${contactId}`)) {
inviteImage.classList.add(`sender_image_${contactId}`);
}
hasInvitation = true
invitationText.innerHTML = "<h1>" + contactAlias + " sends you an invitation</h1>"
+ "Do you want to add them to the conversations list?<br>"
invitationText.innerHTML = "<b>" + contactAlias + " is not in your contacts</b><br/>"
+ "Note: you can automatically accept this invitation by sending a message."
invitation.style.visibility = "visible"
}
......@@ -1535,7 +1559,7 @@ function setSenderImage(set_sender_image_object)
style.type = "text/css"
style.id = sender_image_id
style.innerHTML = "." + sender_image_id + " {content: url(data:image/png;base64," + sender_image + ");height: 35px;width: 35px;}"
style.innerHTML = "." + sender_image_id + " {content: url(data:image/png;base64," + sender_image + ");}"
document.head.appendChild(style)
}
......
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