Commit edad8832 authored by Hugo Lefeuvre's avatar Hugo Lefeuvre Committed by Sébastien Blin

chatview: implement navbar

Currently the navbar is implemented in native GTK, and has a pretty
bad integration with the chatview. In this patch we implement a
modern navbar *in* the chatview and remove the old GTK bar.

*Changes summary*

chatview, HTML/JS/CSS side:
- Remove useless function setSendIcon from the chatview
- Simplify setTemporary in the chatview
- Use only one single showInvitation function instead of two
  showInvitation and hideInvitation functions.
- Remove pointless/copy&pasted comments

chatview, GTK side:
- Simplify chatview update methods: instead of providing several
separate functions to update the invitation/banned status of the chat
view, only provide one (update_chatview_frame). This should have a
good impact on the performances and simplify webkit crash handling.

Change-Id: I6959240efd357fedb07d3c60d551efc8fca84812
Reviewed-by: Sébastien Blin's avatarSebastien Blin <sebastien.blin@savoirfairelinux.com>
parent 8127fe12
This diff is collapsed.
......@@ -3,6 +3,7 @@
* Author: Stepan Salenikovich <stepan.salenikovich@savoirfairelinux.com>
* Author: Nicolas Jäger <nicolas.jager@savoirfairelinux.com>
* Author: Sébastien Blin <sebastien.blin@savoirfairelinux.com>
* Author: Hugo Lefeuvre <hugo.lefeuvre@savoirfairelinux.com>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
......@@ -56,7 +57,6 @@ GtkWidget *chat_view_new (WebKitChatContainer* view,
AccountInfoPointer const & accountInfo,
lrc::api::conversation::Info* conversation);
lrc::api::conversation::Info chat_view_get_conversation(ChatView*);
bool chat_view_get_temporary(ChatView*);
void chat_view_update_temporary(ChatView*, bool, bool);
void chat_view_set_header_visible(ChatView*, gboolean);
......
......@@ -1031,6 +1031,11 @@ current_call_view_dispose(GObject *object)
auto* view = CURRENT_CALL_VIEW(object);
auto* priv = CURRENT_CALL_VIEW_GET_PRIVATE(view);
// navbar was hidden during setCallInfo, we need to make it visible again before view destruction
auto children = gtk_container_get_children(GTK_CONTAINER(priv->frame_chat));
auto chat_view = children->data;
chat_view_set_header_visible(CHAT_VIEW(chat_view), TRUE);
delete priv->cpp;
priv->cpp = nullptr;
......
......@@ -86,6 +86,11 @@ incoming_call_view_dispose(GObject *object)
view = INCOMING_CALL_VIEW(object);
priv = INCOMING_CALL_VIEW_GET_PRIVATE(view);
// navbar was hidden during init, we need to make it visible again before view destruction
auto children = gtk_container_get_children(GTK_CONTAINER(priv->frame_chat));
auto chat_view = children->data;
chat_view_set_header_visible(CHAT_VIEW(chat_view), TRUE);
QObject::disconnect(priv->state_change_connection);
g_clear_object(&priv->settings);
......
......@@ -1424,7 +1424,7 @@ CppImpl::slotNewConversation(const std::string& uid)
accountInfo_->conversationModel->setFilter("");
// Select new conversation if contact added
auto* old_view = gtk_bin_get_child(GTK_BIN(widgets->frame_call));
if (IS_RING_WELCOME_VIEW(old_view) || (IS_CHAT_VIEW(old_view) && chat_view_get_temporary(CHAT_VIEW(old_view)))) {
if (IS_RING_WELCOME_VIEW(old_view)) {
accountInfo_->conversationModel->selectConversation(uid);
try {
auto contactUri = chatViewConversation_->participants.front();
......
......@@ -2,6 +2,7 @@
* Copyright (C) 2016-2018 Savoir-faire Linux Inc.
* Author: Alexandre Viau <alexandre.viau@savoirfairelinux.com>
* Author: Sébastien Blin <sebastien.blin@savoirfairelinux.com>
* Author: Hugo Lefeuvre <hugo.lefeuvre@savoirfairelinux.com>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
......@@ -670,22 +671,6 @@ webkit_chat_container_print_history(WebKitChatContainer *view,
g_free(function_call);
}
void
webkit_chat_container_set_temporary(WebKitChatContainer *view, bool temporary)
{
WebKitChatContainerPrivate *priv = WEBKIT_CHAT_CONTAINER_GET_PRIVATE(view);
gchar* function_call = g_strdup_printf("setTemporary(%s)", temporary ? "true" : "false");
webkit_web_view_run_javascript(
WEBKIT_WEB_VIEW(priv->webview_chat),
function_call,
NULL,
NULL,
NULL
);
g_free(function_call);
}
void
webkit_chat_container_set_invitation(WebKitChatContainer *view, bool show,
const std::string& contactUri)
......@@ -693,12 +678,8 @@ webkit_chat_container_set_invitation(WebKitChatContainer *view, bool show,
auto priv = WEBKIT_CHAT_CONTAINER_GET_PRIVATE(view);
gchar* function_call = nullptr;
if (show) {
function_call = g_strdup_printf("showInvitation('%s')",
contactUri.c_str());
} else {
function_call = g_strdup_printf("hideInvitation()");
}
// TODO better escape names
function_call = g_strdup_printf(show ? "showInvitation(\"%s\")" : "showInvitation()", contactUri.c_str());
webkit_web_view_run_javascript(
WEBKIT_WEB_VIEW(priv->webview_chat),
......@@ -732,3 +713,38 @@ webkit_chat_container_is_ready(WebKitChatContainer *view)
WebKitChatContainerPrivate *priv = WEBKIT_CHAT_CONTAINER_GET_PRIVATE(view);
return priv->js_libs_loaded;
}
void
webkit_chat_set_header_visible(WebKitChatContainer *view, bool isVisible)
{
WebKitChatContainerPrivate *priv = WEBKIT_CHAT_CONTAINER_GET_PRIVATE(view);
gchar* function_call = g_strdup_printf("displayNavbar(%s)", isVisible ? "true" : "false");
webkit_web_view_run_javascript(
WEBKIT_WEB_VIEW(priv->webview_chat),
function_call,
NULL,
NULL,
NULL
);
g_free(function_call);
}
void
webkit_chat_update_chatview_frame(WebKitChatContainer *view, bool isBanned, bool isTemporary, const gchar* alias, const gchar* bestId)
{
WebKitChatContainerPrivate *priv = WEBKIT_CHAT_CONTAINER_GET_PRIVATE(view);
gchar* function_call = g_strdup_printf("update_chatview_frame(%s, %s, \"%s\", \"%s\")",
isBanned ? "true" : "false", isTemporary ? "true" : "false", alias, bestId);
webkit_web_view_run_javascript(
WEBKIT_WEB_VIEW(priv->webview_chat),
function_call,
NULL,
NULL,
NULL
);
g_free(function_call);
}
......@@ -54,7 +54,8 @@ gboolean webkit_chat_container_is_ready (WebKitChatContainer *view
void webkit_chat_container_set_display_links (WebKitChatContainer *view, bool display);
void webkit_chat_disable_send_interaction (WebKitChatContainer *view, bool isDisabled);
void webkit_chat_hide_message_bar (WebKitChatContainer *view, bool isHidden);
void webkit_chat_container_set_temporary (WebKitChatContainer *view, bool temporary);
void webkit_chat_container_set_invitation (WebKitChatContainer *view, bool show, const std::string& contactUri);
void webkit_chat_set_header_visible (WebKitChatContainer *view, bool isVisible);
void webkit_chat_update_chatview_frame (WebKitChatContainer *view, bool isBanned, bool isInvited, const gchar* alias, const gchar* bestId);
G_END_DECLS
......@@ -8,11 +8,21 @@
/* main properties */
--bg-color: #f2f2f2; /* same as macOS client */
/* navbar properties */
--navbar-height: 40px;
--navbar-padding-top: 8px;
--navbar-padding-bottom: var(--navbar-padding-top);
--navbar-size: calc(var(--navbar-height) + var(--navbar-padding-top) + var(--navbar-padding-bottom));
--messagebar-size: 57px; /* FIXME clean this up */
/* button properties */
--action-icon-color: var(--ring-dark-blue);
--deactivated-icon-color: #BEBEBE;
--action-icon-hover-color: var(--ring-light-blue);
--action-critical-icon-hover-color: rgba(211, 77, 59, 0.3); /* complementary color of ring light blue */
--action-critical-icon-press-color: rgba(211, 77, 59, 0.5);
--action-critical-icon-color: #4E1300;
--non-action-icon-color: #212121;
--action-icon-press-color: rgba(59, 193, 211, 0.5);
/* hairline properties */
......@@ -47,9 +57,155 @@ body {
margin: 0;
overflow: hidden;
background-color: var(--bg-color);
padding-top: var(--navbar-size);
padding-bottom: var(--messagebar-size);
}
/** Navbar */
.navbar-wrapper {
/* on top, over everything and full width */
position: fixed;
left:0; right:0;
z-index: 500;
top: 0;
}
#navbar {
background-color: var(--bg-color);
padding-right: 8px;
padding-left: 8px;
padding-top: var(--navbar-padding-top);
padding-bottom: var(--navbar-padding-bottom);
height: var(--navbar-height);
overflow: hidden;
align-items: center;
/* takes whole width */
left:0; right:0;
/* hairline */
border-bottom: var(--hairline-thickness) solid var(--hairline-color);
/* disable selection highlight because it looks very bad */
-webkit-user-select: none;
}
#navbar.hiddenState {
visibility: hidden;
}
.svgicon {
display: block;
margin: auto;
height: 100%;
}
.nav-button {
width: 40px;
height: 40px;
align-self: center;
display: flex;
cursor: pointer;
border-radius: 50%;
}
.nav-button.deactivated {
width: 40px;
height: 40px;
align-self: center;
display: flex;
border-radius: 50%;
cursor: auto;
}
.nav-right {
float: right;
}
.nav-left {
float: left;
}
#nav-contactid {
margin: 0px;
margin-left: 5px;
padding: 0px;
height: 100%;
font-family: emoji;
/* enable selection (it is globally disabled in the navbar) */
-webkit-user-select: auto;
}
#nav-contactid.oneEntry {
display: flex;
justify-content: center;
align-items: center;
}
#nav-contactid-alias {
font-size: 14px;
font-weight: bold;
margin: 5px 0px 3px;
}
#nav-contactid-bestId {
font-size: 11px;
}
.oneEntry #nav-contactid-bestId {
visibility: hidden;
}
.action-button svg {
fill: var(--action-icon-color);
}
.action-button.deactivated svg {
fill: var(--deactivated-icon-color);
}
.non-action-button svg {
fill: var(--non-action-icon-color);
}
.non-action-button:hover, .action-button:hover {
background: var(--action-icon-hover-color);
}
.non-action-button:active, .action-button:active {
background: var(--action-icon-press-color);
}
.action-button.deactivated:hover, .action-button.deactivated:active {
background: none;
}
.action-critical-button svg {
fill: var(--action-critical-icon-color);
}
.action-critical-button:hover {
background: var(--action-critical-icon-hover-color);
}
.action-critical-button:active {
background: var(--action-critical-icon-press-color);
}
#navbar #addBannedContactButton, #navbar #addToConversationsButton {
display: none;
}
#navbar.onBannedState #addToConvButton, #navbar.onBannedState #callButtons, #navbar.onBannedState #addToConversationsButton {
display: none;
}
#navbar.onBannedState #addBannedContactButton {
display: flex;
}
/** Invitation bar */
#invitation {
......@@ -77,7 +233,7 @@ body {
border: 0;
border-radius: 5px;
transition: all 0.3s ease;
color: #212121;
color: #f9f9f9;
padding: 10px 20px 10px 20px;
vertical-align: middle;
cursor: pointer;
......@@ -113,24 +269,6 @@ body {
/** Messaging bar */
.svgicon {
display: block;
margin: auto;
height: 100%;
}
.action-button svg {
fill: var(--action-icon-color);
}
.action-button:hover {
background: var(--action-icon-hover-color);
}
.action-button:active {
background: var(--action-icon-press-color);
}
#sendMessage {
background-color: var(--bg-color);
display: flex;
......@@ -154,16 +292,6 @@ body {
visibility: hidden;
}
.msg-button {
border-radius: 50%;
border: 0;
width: 40px;
height: 40px;
display: flex;
align-self: center;
cursor: pointer;
}
#message {
flex: 1;
background-color: var(--bg-color);
......
This diff is collapsed.
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