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: Sebastien Blin <sebastien.blin@savoirfairelinux.com>
diff --git a/web/chatview.css b/web/chatview.css
index 1ad3382..1d17251 100644
--- a/web/chatview.css
+++ b/web/chatview.css
@@ -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 @@
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 @@
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 @@
/** 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 @@
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);