diff --git a/src/chatview.cpp b/src/chatview.cpp
index 6538246d093efbccd8313e13b75c0bee73b7a38a..b673233f2211ffbdad9b30af9d688eca2e4ae5ca 100644
--- a/src/chatview.cpp
+++ b/src/chatview.cpp
@@ -45,6 +45,10 @@ getTranslatedStrings(bool qwebview)
{"Note: an interaction will create a new contact.",
QObject::tr("Note: an interaction will create a new contact.")},
{"is not in your contacts", QObject::tr("is not in your contacts")},
+ {"has sent you a conversation request.",
+ QObject::tr("has sent you a conversation request.")},
+ {"Hello, do you want to join the conversation?",
+ QObject::tr("Hello, do you want to join the conversation?")},
{"Note: you can automatically accept this invitation by sending a message.",
QObject::tr("Note: you can automatically accept this invitation by sending a message.")},
{"%d days ago", qwebview ? QObject::tr("{0} days ago") : QObject::tr("%d days ago")},
@@ -55,8 +59,8 @@ getTranslatedStrings(bool qwebview)
{"one hour ago", QObject::tr("one hour ago")},
{"just now", QObject::tr("just now")},
{"Failure", QObject::tr("Failure")},
- {"Accept", QObject::tr("Confirm")},
- {"Refuse", QObject::tr("Deny")},
+ {"Accept", QObject::tr("Accept")},
+ {"Refuse", QObject::tr("Refuse")},
{"Delete", QObject::tr("Delete")},
{"Retry", QObject::tr("Retry")},
{"unjoinable peer", QObject::tr("Unable to make contact")},
diff --git a/src/web-chatview/chatview-qt.css b/src/web-chatview/chatview-qt.css
index 0ef8e7d67caee042aa0e0d339dc89cc5e0b3b52f..1c5e4e803f8e86e4bc9ad24d1fabaa950468e649 100644
--- a/src/web-chatview/chatview-qt.css
+++ b/src/web-chatview/chatview-qt.css
@@ -1,11 +1,9 @@
:root {
/* color definitions */
--jami-light-blue: rgba(59, 193, 211, 0.3);
- --jami-dark-blue: #004e86;
- --jami-green: #219d55;
- --jami-green-hover: #1f8b4c;
- --jami-red: #dc2719;
- --jami-red-hover: #b02e2c;
+ --jami-dark-blue: #003b4e;
+ --jami-green: #1ed0a8;
+ --jami-green-hover: #1ed0a8;
/* main properties */
--bg-color: #ffffff;
/* navbar properties */
@@ -22,12 +20,9 @@
--action-critical-icon-hover-color: rgba(211, 77, 59, 0.3); /* complementary color of jami 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(212, 212, 212, 1.0);
--invite-hover-color: white;
- /* hairline properties */
- --hairline-color: #f0f0f0;
- --hairline-thickness: 2px;
+ --bg-text-input: white;
}
body {
diff --git a/src/web-chatview/chatview.css b/src/web-chatview/chatview.css
index 79d3184ba3d927f288cd32a0c2816f89169b1115..b5cfe594ebd0241b72db970f901f6ff1e314acc7 100644
--- a/src/web-chatview/chatview.css
+++ b/src/web-chatview/chatview.css
@@ -6,8 +6,6 @@
--jami-dark-blue: #003b4e;
--jami-green: #219d55;
--jami-green-hover: #1f8b4c;
- --jami-red: #dc2719;
- --jami-red-hover: #b02e2c;
--text-color: black;
--hyperlink-color: var(--text-color);
--timestamp-color: #333;
@@ -37,13 +35,12 @@
--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);
--invite-hover-color: white;
- /* hairline properties */
- --hairline-color: #d9d9d9;
- --hairline-thickness: 0.2px;
+ --bg-text-input: white;
+ --bg-invitation-rect: white;
+
}
@font-face {
@@ -120,9 +117,6 @@ body {
/* takes whole width */
left:0; right:0;
- /* hairline */
- border-bottom: var(--hairline-thickness) solid var(--hairline-color);
-
display: flex;
}
@@ -139,8 +133,8 @@ body {
}
.nav-button {
- width: 40px;
- height: 40px;
+ width: 30px;
+ height: 30px;
display: flex;
cursor: pointer;
align-self: center;
@@ -175,7 +169,12 @@ body {
}
.non-action-button svg {
- fill: var(--non-action-icon-color);
+ stroke: var(--action-icon-color);
+}
+
+.action-button.deactivated svg {
+ fill: var(--deactivated-icon-color);
+ stroke: var(--deactivated-icon-color);
}
.non-action-button:hover, .action-button:hover {
@@ -218,63 +217,121 @@ body {
display: flex;
}
-/** Invitation bar */
+/** Invitation */
#invitation {
- visibility: hidden;
- background: var(--bg-color);
- position: absolute;
- width: 100%;
- padding-bottom: 10px;
+ width: 100%;
+ height: 100%;
+}
- /* hairline */
- border-bottom: var(--hairline-thickness) solid var(--hairline-color);
+.note_container {
+ width: 100%;
+ position: absolute;
+ opacity: 1;
+ transition: opacity 0.3s linear;
+ text-overflow: elipsis;
}
-#invitation #invite_header {
- margin: 10px;
- 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_text_container {
+ top: 5%;
}
-#invitation .sender_image {
- width: 50px;
- height: 50px;
+#invitation_note_container {
+ bottom: 20%;
}
-#invitation #actions {
- margin-right: auto;
- margin-left: auto;
- list-style: none;
- display: flex;
- align-items: center;
- justify-content: center;
+#invitation_text {
+ margin: 0px 20px 0px 20px;
+ text-align: center;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
- /* enable selection (it is globally disabled in the body) */
- -webkit-user-select: auto;
+#invitation_note {
+ margin: 20px 20px 20px 20px;
+ text-align: center;
+ opacity: 0.5;
}
-#invitation #actions div {
+#invitation_rect {
+ width: 375px;
+ height: 25%;
+ min-height: 220px;
+ max-height: 280px;
+
+ background-color: var(--bg-invitation-rect);
+ transition: background-color 0.3s;
+ border-radius: 20px;
+ box-shadow: 7px 7px 30px #12000930;
+ transition: box-shadow 0.3s;
+
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -75%);
+ transition: transform 0.8s;
+
display: flex;
- align-items: center;
justify-content: center;
- margin-right: 5px;
- margin-left: 5px;
}
-#invitation #text {
- text-align: center;
- font-size: 0.8em;
+#invite_image {
+ width: 112px;
+ height: 112px;
+ position: absolute;
+ top: -56px;
+ margin: 0 auto;
+ opacity: 1;
+ transition: opacity 0.3s;
+}
- /* enable selection (it is globally disabled in the body) */
- -webkit-user-select: auto;
+#quote_img_wrapper {
+ position: absolute;
+ top: 40px;
+ opacity: 1;
+ transition: opacity 0.3s;
+}
+
+
+#invite_text {
+ margin-top: 96px;
+ margin-bottom: auto;
+ width: 66%;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+#join_text {
+ text-align: center;
+ font-size: 1.2em;
+ line-height: 1.5;
+}
+
+#note_text {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ text-align: center;
+ font-size: .9em;
+ line-height: 1.5;
}
+#actions {
+ position: absolute;
+ margin: 0 auto;
+
+ bottom: -40px;
+ width: 240px;
+ height: 20px;
+ max-height: 20px;
+ min-height: 20px;
+
+ display: flex;
+ justify-content: space-between;
+}
+
+
+
/** Messaging bar */
#sendMessage {
@@ -288,29 +345,37 @@ body {
right: 0;
top: 0;
z-index: 1;
- /* hairline */
- border-top: var(--hairline-thickness) solid var(--hairline-color);
- border-bottom: var(--hairline-thickness) solid var(--hairline-color);
}
#message {
- font-family: emoji;
- flex: 1;
- background-color: var(--bg-color);
- border: 0;
- overflow-y: scroll;
- color: var(--text-color);;
- max-height: var(--textarea-max-height);
- margin-right: 10px;
- resize: none;
+ flex: 1;
+ background-color: transparent;
+ overflow-y: hidden;
+ color: var(--text-color);
+ width: 100%;
+ min-height: 50px;
+ max-height: var(--textarea-max-height);
+ resize: none;
+ border: none;
+ padding: 30px 5px;
+ padding-left: 20px;
+ /* enable selection (it is globally disabled in the body) */
+ -webkit-user-select: auto;
+}
- /* enable selection (it is globally disabled in the body) */
- -webkit-user-select: auto;
+#message_bar_container {
+ height: "auto";
+ width: 100%;
+ min-height: 50px;
+ background-color: var(--bg-text-input);
+ border-radius: 25px 25px 0px 25px;
+ display: flex;
+ flex-direction: row;
+ vertical-align: middle;
}
-#message:focus,
-#message.focus {
- outline: none;
+#message:focus{
+ outline: none;
}
#container[disabled] {
@@ -733,10 +798,6 @@ div.last_message > span {
opacity: 1;
}
-.message_type_contact svg {
- fill: var(--message-in-txt);
-}
-
/* Ellipsis - dropdown menu */
input[type=checkbox] {
@@ -761,42 +822,12 @@ input[type=checkbox] {
vertical-align: center;
}
-.message_type_call .menu_interaction .dropdown
-.message_type_contact .menu_interaction .dropdown
-{
- margin-top: -17px;
-}
-
.message:hover .menu_interaction
{
display: block;
opacity: 1;
}
-.dropdown {
- display: none;
- z-index: 1;
- position: absolute;
- background-color: #fff;
- padding-top: 3px;
- padding-bottom: 3px;
-}
-
-.dropdown div
-{
- color: #111;
- padding: 10px;
-}
-
-.dropdown div:hover
-{
- background-color: #ddd;
-}
-
-.showmenu:checked ~ .dropdown{
- display: block;
-}
-
/* Buttons */
.flat-button {
@@ -886,68 +917,22 @@ input[type=checkbox] {
flex-wrap: wrap;
}
-.invite-btn-red {
- transition: background-color 0.5s ease;
-}
-
-.invite-btn-red:hover {
- background: var(--jami-red);
-}
-
-.invite-btn-red svg {
- fill: var(--jami-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(--jami-green);
-}
-
-.invite-btn-green svg {
- fill: var(--jami-green);
- transition: fill 0.5s ease;
-}
-
-.invite-btn-green:hover svg {
- fill: var(--invite-hover-color);
-}
-
-.accept, .refuse {
- border-radius: 50%;
- cursor: pointer;
-}
-
-.accept svg,
-.refuse svg {
- padding: 8px;
- width: 24px;
- height: 24px;
-}
-
-.accept {
- fill: var(--jami-green);
+.text-button {
+ border: none;
+ color: var(--text-color);
+ background-color: transparent;
+ font-size: 13px;
+ text-transform: uppercase;
+ font-weight: bold;
}
-.accept:hover {
- fill: var(--invite-hover-color);
- background: var(--jami-green-hover);
-}
-.refuse {
- fill: var(--jami-red);
+.text-button:hover {
+ opacity: 0.5;
}
-.refuse:hover {
- fill: var(--invite-hover-color);
- background: var(--jami-red-hover);
+.text-button-green {
+ color: var(--jami-green);
}
.message_type_data_transfer .text {
@@ -1151,11 +1136,15 @@ video {
.message_type_data_transfer .message_wrapper {
width: 250px;
}
+
+ #join_text {
+ font-size: 18px;
+ }
}
/* Special case */
@media screen and (max-width: 350px) {
- .sender_image {
+ .sender_image:not(#invite_image) {
display: none;
}
@@ -1172,6 +1161,35 @@ video {
.message_type_data_transfer .message_wrapper {
width: 200px;
}
+
+ #join_text {
+ font-size: 16px;
+ }
+}
+
+@media screen and (max-height: 640px) {
+
+ .note_container {
+ opacity: 0;
+ transition: opacity 0.3s linear;
+ }
+}
+
+@media screen and (max-height: 500px) {
+
+ #invitation_rect {
+ background-color: transparent;
+ transition: background-color 0.3s;
+ box-shadow: 7px 7px 30px transparent;
+ transition: box-shadow 0.3s;
+ transform: translate(-50%, -95%);
+ transition: transform 0.8s;
+ }
+
+ #invite_image, #quote_img {
+ opacity: 0;
+ transition: opacity 0.3s;
+ }
}
.nav-right {
diff --git a/src/web-chatview/chatview.html b/src/web-chatview/chatview.html
index be41b5250b67c34689ecece32239f0817ec1d1e1..ed277b7cc74037074959741b958f0cfdd43570a8 100644
--- a/src/web-chatview/chatview.html
+++ b/src/web-chatview/chatview.html
@@ -30,29 +30,50 @@
</div>
<div id="callButtons">
<!-- callButtons block allows more efficient hiding of placeCallButton and placeAudioCallButton -->
- <div id="placeCallButton" class="nav-button action-button nav-right" onclick="placeCall()">
- <svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
- <path d="M0 0h24v24H0z" fill="none" />
- <path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z" />
+ <div id="placeCallButton" class="nav-button action-button nav-rigth" onclick="placeCall();">
+ <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <g id="Icones_Outline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="Camera" fill-rule="nonzero" stroke="#000000" stroke-width="1.3">
+ <g id="Ico_Camera" transform="translate(2.000000, 6.000000)">
+ <path d="M14.838,0.964 L15.0727616,4.95098691 L18.549033,2.8441558 L19.1831325,10.5544613 L15.0431125,8.28294586 L15.0431125,12.1828061 C15.0222904,12.2250926 14.9986583,12.2532258 14.9607672,12.2532258 L14.9607672,12.2532258 L0.881,12.253 L0.654407741,1.14977472 L14.838,0.964 Z" id="Path"></path>
+ </g>
+ </g>
+ </g>
</svg>
</div>
- <div id="placeAudioCallButton" class="nav-button action-button nav-right" onclick="placeAudioCall()">
- <svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
- <path fill="none" d="M0 0h24v24H0z" />
- <path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z" />
+ <div id="placeAudioCallButton" class="nav-button action-button" onclick="placeAudioCall();">
+ <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <g id="Icones_Outline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="Phone" stroke="#000000" stroke-width="1.3">
+ <g id="Ico_TEL" transform="translate(3.000000, 3.000000)">
+ <path d="M2.08318114,0.702801822 C3.47221232,-0.375546383 4.67183016,-0.185249641 5.24007015,1.08339531 C6.37655021,3.36695621 7.19734136,4.50873667 6.37655021,5.39678812 C4.86124348,6.41170409 3.78790122,6.91916206 4.35614125,7.99751029 C5.49262131,10.7250969 7.70244359,13.0720901 10.3542304,14.4675995 C11.3644349,15.101922 11.9326749,14.0235738 13.0691549,12.6280643 C14.0162216,11.8668773 15.0895639,12.6914966 17.2993862,14.0235738 C18.4990041,14.7213285 18.5621418,15.8631089 17.4256618,17.1951861 C10.7961949,24.6801913 -5.80904142,6.85572983 2.08318114,0.702801822" id="Path"></path>
+ </g>
+ </g>
+ </g>
</svg>
</div>
</div>
<div id="pluginsButton" style="display:none" class="nav-button action-button nav-right" onclick="openPluginHandlersList()">
- <svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
- <path d="M0 0h24v24H0V0z" fill="none" />
- <path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7s2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"/>
+ <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <g id="Icones_Outline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="Plugin" fill="#000000" fill-rule="nonzero" stroke="#000000" stroke-width="0.25">
+ <g id="noun_add-on-plugin_2469914" transform="translate(2.000000, 2.000000)">
+ <path d="M7.95454545,-2.58379177e-14 C6.07714045,-2.58379177e-14 4.54545455,1.53168636 4.54545455,3.40909091 C4.54545455,3.81146364 4.63639864,4.18709545 4.765625,4.54545455 L0.454545455,4.54545455 C0.203517329,4.54547964 -3.28047432e-07,4.74897187 -3.28047432e-07,5 L-3.28047432e-07,9.54545909 C-3.28047432e-07,9.69805849 0.0762260247,9.84056553 0.20341697,9.92488084 C0.330607915,10.0091961 0.49161786,10.0240699 0.632102273,9.96448182 C0.928123182,9.84116364 1.2500475,9.77273182 1.59090909,9.77273182 C2.977005,9.77273182 4.09090909,10.8866409 4.09090909,12.2727318 C4.09090909,13.6588227 2.977005,14.7727318 1.59090909,14.7727318 C1.2500475,14.7727318 0.928123182,14.7043 0.632102273,14.5809591 C0.491614149,14.5213694 0.330599681,14.5362456 0.203407479,14.6205663 C0.0762152768,14.704887 -3.28047432e-07,14.8474011 -3.28047432e-07,15 L-3.28047432e-07,19.5454591 C-3.28047432e-07,19.7964872 0.203517329,20 0.454545455,20 L15.4545455,20 C15.7055736,20 15.9090658,19.7964872 15.9090909,19.5454591 L15.9090909,15.6108 C16.1285164,15.6553682 16.3589991,15.6818227 16.5909091,15.6818227 C18.4683141,15.6818227 19.9999997,14.1501409 19.9999997,12.2727318 C19.9999997,10.3953227 18.4683141,8.86363636 16.5909091,8.86363636 C16.3589991,8.86363636 16.1285164,8.89009545 15.9090909,8.93465909 L15.9090909,5 C15.9090658,4.74897187 15.7055736,4.54547964 15.4545455,4.54545455 L11.1434659,4.54545455 C11.2726923,4.18709545 11.3636364,3.81146364 11.3636364,3.40909091 C11.3636364,1.53168636 9.83195045,-2.58379177e-14 7.95454545,-2.58379177e-14 L7.95454545,-2.58379177e-14 Z M7.95454545,0.909090909 C9.34064136,0.909090909 10.4545455,2.02299545 10.4545455,3.40909091 C10.4545455,3.90517045 10.3070727,4.36090227 10.0568182,4.75142045 C9.96529803,4.89157836 9.95820859,5.07069263 10.0383647,5.21764558 C10.1185209,5.36459852 10.272952,5.45561067 10.4403409,5.45454545 L15,5.45454545 L15,9.54545909 C14.9998246,9.69805849 15.076226,9.84056553 15.203417,9.92488084 C15.3306079,10.0091961 15.4916179,10.0240699 15.6321023,9.96448182 C15.928123,9.84116364 16.2500475,9.77273182 16.5909091,9.77273182 C17.977005,9.77273182 19.0909091,10.8866409 19.0909091,12.2727318 C19.0909091,13.6588227 17.977005,14.7727318 16.5909091,14.7727318 C16.2500475,14.7727318 15.928123,14.7043 15.6321023,14.5809591 C15.4916141,14.5213694 15.3305997,14.5362456 15.2034075,14.6205663 C15.0762153,14.704887 14.999817,14.8474011 15,15.0000045 L15,19.0909136 L0.909090909,19.0909136 L0.909090909,15.6108 C1.12851636,15.6553682 1.35899909,15.6818227 1.59090909,15.6818227 C3.46831409,15.6818227 5,14.1501409 5,12.2727318 C5,10.3953227 3.46831409,8.86363636 1.59090909,8.86363636 C1.35899909,8.86363636 1.12851636,8.89009545 0.909090909,8.93465909 L0.909090909,5.45454545 L5.46875,5.45454545 C5.6361389,5.45561067 5.79057002,5.36459852 5.87072617,5.21764558 C5.95088232,5.07069263 5.94379288,4.89157836 5.85227273,4.75142045 C5.60201818,4.36090227 5.45454545,3.90517045 5.45454545,3.40909091 C5.45454545,2.02299545 6.56844955,0.909090909 7.95454545,0.909090909 L7.95454545,0.909090909 Z" id="Shape"></path>
+ </g>
+ </g>
+ </g>
</svg>
</div>
- <div id="addToConversationsButton" class="nav-button action-button nav-right" onclick="addToConversations()">
- <svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
- <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" />
+ <div id="addToConversationsButton" class="nav-button action-button nav-right" onclick="addToConversations();">
+ <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <g id="Icones_Outline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="Profil" stroke="#000000" stroke-width="1.3">
+ <g id="Ico_PROFIL" transform="translate(3.000000, 2.000000)">
+ <path d="M14,4.5 C14,6.98522308 11.9852231,9 9.5,9 C7.01477692,9 5,6.98522308 5,4.5 C5,2.0147769 7.01477692,0 9.5,0 C11.9852231,0 14,2.0147769 14,4.5 Z" id="Stroke-1"></path>
+ <path d="M0,20 C0,14.4771733 4.02947764,10 9.00005436,10 C13.9705224,10 18,14.4771733 18,20" id="Stroke-3"></path>
+ </g>
+ </g>
+ </g>
</svg>
</div>
<div id="unbanButton" class="nav-button action-critical-button nav-right" onclick="addBannedContact()">
@@ -63,34 +84,38 @@
</svg>
</div>
</div>
- <div id="invitation">
- <div id="invite_header">
- <span id="invite_image"></span>
- <div id="text" margin="16px"></div>
- </div>
- <div id="actions">
- <div id="acceptButton" class="nav-button action-button invite-btn-green" onclick="acceptInvitation()">
- <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="refuseButton" class="nav-button action-button invite-btn-red" onclick="refuseInvitation()">
- <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="container">
+ <div id="invitation" class="column">
+ <div id="invitation_text_container" class="note_container">
+ <div id="invitation_text"></div>
</div>
- <div id="blockButton" class="nav-button action-button invite-btn-red" onclick="blockConversation()">
- <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 id="invitation_rect">
+ <div id="invite_image"></div>
+ <div id="quote_img_wrapper">
+ <img id="quote_img" src="qrc:/images/icons/quote.svg"></img>
+ </div>
+ <div id="invite_text">
+ <div id="join_text"></div>
+ <div id="note_text"></div>
+ </div>
+ <div id="actions">
+ <button id="blockButton" class="text-button" onclick="blockConversation()">
+ </button>
+ <button id="refuseButton" class="text-button" onclick="refuseInvitation()">
+ </button>
+ <button id="acceptButton" class="text-button text-button-green" onclick="acceptInvitation()">
+ </button>
+ </div>
</div>
+
+ <div id="invitation_note_container" class="note_container">
+ <div id="invitation_note"></div>
</div>
</div>
- </div>
- <div id="container">
+
<div id="messages" onscroll="onScrolled()"></div>
<div id="typing_indicator_container"></div>
diff --git a/src/web-chatview/chatview.js b/src/web-chatview/chatview.js
index f059dd1039172177b80cc5d26e43e8ab018bfd41..43cc4139164bdcbe6c79b377e8b331ae949fe94c 100644
--- a/src/web-chatview/chatview.js
+++ b/src/web-chatview/chatview.js
@@ -39,8 +39,10 @@ const unbanButton = document.getElementById("unbanButton")
const acceptButton = document.getElementById("acceptButton")
const refuseButton = document.getElementById("refuseButton")
const blockButton = document.getElementById("blockButton")
+
const callButtons = document.getElementById("callButtons")
const sendButton = document.getElementById("sendButton")
+sendButton.style.display = "none"
const optionsButton = document.getElementById("optionsButton")
const backToBottomBtn = document.getElementById("back_to_bottom_button")
const backToBottomBtnContainer = document.getElementById("back_to_bottom_button_container")
@@ -54,10 +56,16 @@ const messageBar = document.getElementById("sendMessage")
const messageBarInput = document.getElementById("message")
const addToConvButton = document.getElementById("addToConversationsButton")
const invitation = document.getElementById("invitation")
+invitation.style.display = "none"
+
const inviteImage = document.getElementById("invite_image")
+
const navbar = document.getElementById("navbar")
-const invitationText = document.getElementById("text")
const emojiBtn = document.getElementById('emojiButton');
+const invitationText = document.getElementById("invitation_text")
+const joinText = document.getElementById("join_text")
+const invitationNoteText = document.getElementById("invitation_note")
+
var messages = document.getElementById("messages")
var sendContainer = document.getElementById("data_transfer_send_container")
var wrapperOfNavbar = document.getElementById("wrapperOfNavbar")
@@ -194,6 +202,9 @@ function set_titles() {
acceptButton.title = i18nStringData["Accept"]
refuseButton.title = i18nStringData["Refuse"]
blockButton.title = i18nStringData["Block"]
+ acceptButton.innerHTML = i18nStringData["Accept"]
+ refuseButton.innerHTML = i18nStringData["Refuse"]
+ blockButton.innerHTML = i18nStringData["Block"]
} else {
backButton.title = i18n.gettext("Hide chat view")
placeCallButton.title = i18n.gettext("Place video call")
@@ -211,6 +222,9 @@ function set_titles() {
acceptButton.title = i18n.gettext("Accept")
refuseButton.title = i18n.gettext("Refuse")
blockButton.title = i18n.gettext("Block")
+ acceptButton.innerHTML = i18n.gettext("Accept")
+ refuseButton.innerHTML = i18n.gettext("Refuse")
+ blockButton.innerHTML = i18n.gettext("Block")
}
}
@@ -356,8 +370,9 @@ function update_chatview_frame(accountEnabled, banned, temporary, alias, bestid)
navbar.style.display = ""
}
+
/**
- * Hide or show invitation.
+ * Hide or show invitation to a conversation.
*
* Invitation is hidden if no contactAlias/invalid alias is passed.
* Otherwise, invitation div is updated.
@@ -366,12 +381,14 @@ function update_chatview_frame(accountEnabled, banned, temporary, alias, bestid)
* @param contactId
*/
/* exported showInvitation */
-function showInvitation(contactAlias, contactId) {
+function showInvitation(contactAlias, contactId, isSwarm) {
if (!contactAlias) {
if (hasInvitation) {
hasInvitation = false
- invitation.style.visibility = ""
+ invitation.style.display = "none"
+ messages.style.visibility = "visible"
}
+ messageBar.style.visibility = "visible"
} else {
if (!inviteImage.classList.contains("sender_image")) {
inviteImage.classList.add("sender_image")
@@ -386,15 +403,48 @@ function showInvitation(contactAlias, contactId) {
inviteImage.classList.add(className)
}
}
- invitationText.innerHTML = "<b>"
- + contactAlias + use_qt ? i18nStringData["is not in your contacts"] :
- i18n.sprintf(i18n.gettext("%s is not in your contacts"), contactAlias)
- + "</b><br/>"
- + use_qt ?
+ invitationText.innerHTML = contactAlias + " " + (use_qt ?
+ i18nStringData["has sent you a conversation request."] :
+ i18n.sprintf(i18n.gettext("%s has sent you a conversation request."), contactAlias))
+ + "<br/>"
+
+ joinText.innerHTML = (use_qt ?
+ i18nStringData["Hello, do you want to join the conversation?"] :
+ i18n.gettext("Hello, do you want to join the conversation?"))
+ + "<br/>"
+
+ invitationNoteText.innerHTML = (use_qt ?
i18nStringData["Note: you can automatically accept this invitation by sending a message."] :
- i18n.gettext("Note: you can automatically accept this invitation by sending a message.")
+ i18n.gettext("Note: you can automatically accept this invitation by sending a message."))
+ + "<br/>"
+
+ messages.style.visibility = "hidden"
hasInvitation = true
+
+ if (isSwarm) {
+ invitationNoteText.style.visibility = "hidden"
+ messageBar.style.visibility = "hidden"
+ } else {
+ invitationNoteText.style.visibility = "visible"
+ messageBar.style.visibility = "visible"
+ }
+
+ invitation.style.display = "flex"
invitation.style.visibility = "visible"
+
+ var actions = document.getElementById("actions")
+ var quote_img = document.getElementById("quote_img_wrapper")
+ if (isSyncing) {
+ actions.style.visibility = "collapse"
+ invitationText.style.visibility = "hidden"
+ quote_img.style.visibility = "collapse"
+ noteText.style.visibility = "visible"
+ } else {
+ actions.style.visibility = "visible"
+ invitationText.style.visibility = "visible"
+ quote_img.style.visibility = "visible"
+ noteText.style.visibility = "collapse"
+ }
}
}
@@ -503,6 +553,7 @@ function grow_text_area() {
window.prompt(`ON_COMPOSING:${messageBarInput.value.length !== 0}`)
}
}, [])
+ checkSendButton()
}
/**
@@ -1040,6 +1091,12 @@ function buildFileInformationText(message_object) {
function updateFileInteraction(message_div, message_object, forceTypeToFile = false) {
if (!message_div.querySelector(".informations")) return // media
+ if (!message_object["text"]) {
+ message_div.style.visibility = "collapse"
+ } else {
+ message_div.style.visibility = "visible"
+ }
+
var acceptSvg = "<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=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\"/></svg>",
refuseSvg = "<svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/><path d=\"M0 0h24v24H0z\" fill=\"none\"/></svg>",
fileSvg = "<svg class=\"filesvg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z\"/><path d=\"M0 0h24v24H0z\" fill=\"none\"/></svg>",
@@ -1540,15 +1597,6 @@ function updateContactInteraction(message_div, message_object) {
const message_text = message_object["text"]
message_div.querySelector(".text").innerText = message_text
-
- var left_buttons = message_div.querySelector(".left_buttons")
- left_buttons.innerHTML = ""
- var status_button = document.createElement("div")
- status_button.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\
-<path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"/>\
-<path d=\"M0 0h24v24H0z\" fill=\"none\"/></svg>"
- status_button.setAttribute("class", "flat-button")
- left_buttons.appendChild(status_button)
}
/**
@@ -1589,53 +1637,6 @@ function removeInteraction(interaction_id) {
interaction.parentNode.removeChild(interaction)
}
-/**
- * Build message dropdown
- * @return a message dropdown for passed message id
- */
-function buildMessageDropdown(message_id) {
- const menu_element = document.createElement("div")
- menu_element.setAttribute("class", "menu_interaction")
- menu_element.innerHTML =
- `<input type="checkbox" id="showmenu${message_id}" class="showmenu">
- <label for="showmenu${message_id}">
- <svg fill="#888888" height="12" viewBox="0 0 24 24" width="12" xmlns="http://www.w3.org/2000/svg">
- <path d="M0 0h24v24H0z" fill="none"/>
- <path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
- </svg>
- </label>`
- menu_element.onclick = function () {
- const button = this.querySelector(".showmenu")
- button.checked = !button.checked
- }
- menu_element.onmouseleave = function () {
- const button = this.querySelector(".showmenu")
- button.checked = false
- }
- const dropdown = document.createElement("div")
- const dropdown_classes = [
- "dropdown",
- `dropdown_${message_id}`
- ]
- dropdown.setAttribute("class", dropdown_classes.join(" "))
-
- const remove = document.createElement("div")
- remove.setAttribute("class", "menuoption")
- remove.innerHTML = use_qt ? i18nStringData["Delete"] : i18n.gettext("Delete")
- remove.msg_id = message_id
- remove.onclick = function () {
- if (use_qt) {
- window.jsbridge.deleteInteraction(`${this.msg_id}`)
- } else {
- window.prompt(`DELETE_INTERACTION:${this.msg_id}`)
- }
- }
- dropdown.appendChild(remove)
- menu_element.appendChild(dropdown)
-
- return menu_element
-}
-
/**
* Build a message div for passed message object
* @param message_object to treat
@@ -1727,21 +1728,6 @@ function buildNewMessage(message_object) {
message_div.appendChild(temp)
}
- if (message_id !== 'typing') {
- var message_dropdown = buildMessageDropdown(message_id)
- if (message_type !== "call" && message_type !== "contact") {
- message_div.appendChild(message_dropdown)
- } else {
- var wrapper = message_div.querySelector(".message_wrapper")
- wrapper.insertBefore(message_dropdown, wrapper.firstChild)
- }
- }
-
- if(use_qt) {
- // Add sender images if necessary (like if the interaction doesn't take the whole width)
- addSenderImage(message_div, message_type, message_sender_contact_method)
- }
-
return message_div
}
@@ -1857,24 +1843,6 @@ function addOrUpdateMessage(message_object, new_message, insert_after = true, me
}
}
- if (isErrorStatus(delivery_status) && message_direction === "out") {
- const dropdown = messages_div.querySelector(`.dropdown_${message_id}`)
- if (!dropdown.querySelector(".retry")) {
- const retry = document.createElement("div")
- retry.setAttribute("class", "retry")
- retry.innerHTML = use_qt ? i18nStringData["Retry"] : i18n.gettext("Retry")
- retry.msg_id = message_id
- retry.onclick = function () {
- if (use_qt) {
- window.jsbridge.retryInteraction(`${this.msg_id}`)
- } else {
- window.prompt(`RETRY_INTERACTION:${this.msg_id}`)
- }
- }
- dropdown.insertBefore(retry, message_div.querySelector(".delete"))
- }
- }
-
// Update informations if needed
if (message_type === "data_transfer")
updateFileInteraction(message_div, message_object)
@@ -2470,6 +2438,7 @@ function grow_send_container() {
exec_keeping_scroll_position(function () {
backToBottomBtnContainer.style.bottom = "calc(var(--messagebar-size) + 168px)"
}, [])
+ checkSendButton()
}
/**
@@ -2484,6 +2453,7 @@ function reduce_send_container() {
backToBottomBtnContainer.style.bottom = "var(--messagebar-size)"
//6em
}, [])
+ checkSendButton()
}
// This function update the bottom of messages window whenever the send_interface changes size when the scroll is at the end
@@ -2491,6 +2461,7 @@ function updateMesPos() {
if (messages.scrollTop >= messages.scrollHeight - messages.clientHeight - scrollDetectionThresh) {
back_to_bottom()
}
+ checkSendButton()
}
// Remove current cancel button division and hide the sendContainer
@@ -2549,7 +2520,7 @@ function setTheme(theme) {
root.setAttribute("style", "\
--jami-light-blue: rgba(59, 193, 211, 0.3);\
--jami-dark-blue: #003b4e;\
- --jami-green: #219d55;\
+ --jami-green: #1ed0a8;\
--jami-green-hover: #1f8b4c;\
--jami-red: #dc2719;\
--jami-red-hover: #b02e2c;\
@@ -2573,11 +2544,9 @@ function setTheme(theme) {
--action-critical-icon-hover-color: rgba(211, 77, 59, 0.3);\
--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);\
--invite-hover-color: white;\
- --hairline-color: #d9d9d9;\
- --hairline-thickness: 0.2px;\
+ --bg-text-input: white;\
")
if (theme != "") {
root.setAttribute("style", theme)
@@ -2612,3 +2581,9 @@ function setSendMessageContent(contentStr) {
grow_text_area();
reduce_send_container();
}
+
+function checkSendButton() {
+ sendButton.style.display = (messageBarInput.value.length > 0
+ || sendContainer.innerHTML.length > 0)
+ ? "block" : "none"
+}