diff --git a/src/web-chatview/chatview.css b/src/web-chatview/chatview.css index 44ab8dd095161b9202ab13f928b489dbec3f89d0..0489a46e90ae3b515f23e38226719fd79abcace4 100644 --- a/src/web-chatview/chatview.css +++ b/src/web-chatview/chatview.css @@ -8,6 +8,14 @@ --jami-green-hover: #1f8b4c; --jami-red: #dc2719; --jami-red-hover: #b02e2c; + --text-color: black; + --timestamp-color: #333; + --message-out-bg: #cfd8dc; + --message-out-txt: black; + --message-in-bg: #fdfdfd; + --message-in-txt: black; + --file-in-timestamp-color: #555; + --file-out-timestamp-color: #555; /* main properties */ --bg-color: #f2f2f2; /* same as macOS client */ @@ -61,6 +69,7 @@ /** Body */ body { + color: var(--text-color); --messagebar-size: 47px; margin: 0; overflow: hidden; @@ -149,6 +158,14 @@ body { fill: var(--deactivated-icon-color); } +.message_out .filesvg { + fill: var(--message-out-txt); +} + +.message_in .filesvg { + fill: var(--message-in-txt); +} + .non-action-button svg { fill: var(--non-action-icon-color); } @@ -273,7 +290,7 @@ body { background-color: var(--bg-color); border: 0; overflow-y: scroll; - color: black; + color: var(--text-color);; max-height: var(--textarea-max-height); margin-right: 10px; resize: none; @@ -343,12 +360,11 @@ a:hover { left: 0; right: 0; height: 8em; - /*border-top-left-radius: 25px; - border-top-right-radius: 25px;*/ border: 2px solid lightgray; padding: 20px; border-bottom: none; - background-color: #cfdbdd; + color: var(--message-out-txt); + background-color: var(--message-out-bg); overflow-x: overlay; } @@ -371,7 +387,7 @@ a:hover { border: 3px solid rgba(255,255,255,0); padding: 30px; border-radius: 20px; - background-color: #cfdbdd; + background-color: var(--message-out-bg); display: flex; justify-content: center; align-items: center; @@ -405,7 +421,7 @@ a:hover { .img_wrapper .btn:focus { outline: none; - color: black; + color: var(--text-color); } .file_wrapper { @@ -631,18 +647,15 @@ div.last_message > span { .message_out .message_wrapper { border-top-right-radius: 0; transform-origin: top right; + background-color: var(--message-out-bg); + color: var(--message-out-txt); } .message_in .message_wrapper { border-top-left-radius: 0; transform-origin: top left; -} - -.message_out .message_wrapper { - background-color: #cfd8dc; -} -.message_in .message_wrapper { - background-color: #fdfdfd; + background-color: var(--message-out-bg); + color: var(--message-out-txt); } @-webkit-keyframes fade-in { @@ -658,7 +671,7 @@ div.last_message > span { display: inline-flex; justify-content: flex-start; align-self: stretch; - color: #333; + color: var(--timestamp-color); font-size: 10px; padding: 5px; } @@ -680,6 +693,10 @@ div.last_message > span { opacity: 1; } +.message_type_contact svg { + fill: var(--message-in-txt); +} + /* Ellipsis - dropdown menu */ input[type=checkbox] { @@ -917,8 +934,13 @@ input[type=checkbox] { font-size: 1.1em; } -.message_type_data_transfer .informations { - color: #555; +.message_in .informations { + color: var(--file-in-timestamp-color); + font-size: 0.8em; +} + +.message_out .informations { + color: var(--file-out-timestamp-color); font-size: 0.8em; } diff --git a/src/web-chatview/chatview.js b/src/web-chatview/chatview.js index fd402afe01557951c07e8d5b0a83a3bffc2d5ea1..700fbade3be43cd82384af9c5feb21b6be1905ac 100644 --- a/src/web-chatview/chatview.js +++ b/src/web-chatview/chatview.js @@ -972,8 +972,8 @@ function updateFileInteraction(message_div, message_object, forceTypeToFile = fa 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 fill=\"#000000\" 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>", - warningSvg = "<svg fill=\"#000000\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"/></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>", + warningSvg = "<svg class=\"filesvg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"/></svg>" var message_delivery_status = message_object["delivery_status"] var message_direction = message_object["direction"] var message_id = message_object["id"] @@ -1290,6 +1290,8 @@ function textInteraction(message_id, message_direction, htmlText) { */ function updateTextInteraction(message_div, delivery_status) { if (!message_div.querySelector(".message_text")) return // media + const message_text = message_div.querySelector(".message_text") + const message_in = message_div.querySelector(".message_in") var sending = message_div.querySelector(".sending") switch(delivery_status) { @@ -1302,11 +1304,9 @@ function updateTextInteraction(message_div, delivery_status) { // add sending animation to message message_div.insertBefore(sending, message_div.querySelector(".menu_interaction")) } - message_div.querySelector(".message_text").style.color = "#888" + message_text.style.color = "#888" break case "failure": - // change text color to red - message_div.querySelector(".message_text").color = "#000" var failure_div = message_div.querySelector(".failure") if (!failure_div) { failure_div = document.createElement("div") @@ -1315,15 +1315,20 @@ function updateTextInteraction(message_div, delivery_status) { // add failure animation to message message_div.insertBefore(failure_div, message_div.querySelector(".menu_interaction")) } - message_div.querySelector(".message_text").style.color = "#000" + if (message_in) + message_text.style.color = "var(--message-in-txt)" + else + message_text.style.color = "var(--message-out-txt)" if (sending) sending.style.display = "none" break case "sent": case "finished": case "unknown": case "read": - // change text color to black - message_div.querySelector(".message_text").style.color = "#000" + if (message_in) + message_text.style.color = "var(--message-in-txt)" + else + message_text.style.color = "var(--message-out-txt)" if (sending) sending.style.display = "none" break default: @@ -2271,3 +2276,47 @@ function replaceText(text) { input.value = output setCaretPosition(input, start + text.length) } + +/** + * Change theme + * @param theme The dark theme + */ +function setTheme(theme) { + let root = document.documentElement; + root.setAttribute("style", "\ + --jami-light-blue: rgba(59, 193, 211, 0.3);\ + --jami-dark-blue: #003b4e;\ + --jami-green: #219d55;\ + --jami-green-hover: #1f8b4c;\ + --jami-red: #dc2719;\ + --jami-red-hover: #b02e2c;\ + --text-color: black;\ + --timestamp-color: #333;\ + --message-out-bg: #cfd8dc;\ + --message-out-txt: black;\ + --message-in-bg: #fdfdfd;\ + --message-in-txt: black;\ + --file-in-timestamp-color: #555;\ + --file-out-timestamp-color: #555;\ + --bg-color: #f2f2f2;\ + --navbar-height: 40px;\ + --navbar-padding-top: 8px;\ + --navbar-padding-bottom: var(--navbar-padding-top);\ + --textarea-max-height: 150px;\ + --placeholder-text-color: #d3d3d3;\ + --action-icon-color: var(--jami-dark-blue);\ + --deactivated-icon-color: #BEBEBE;\ + --action-icon-hover-color: var(--jami-light-blue);\ + --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;\ + ") + if (theme != "") { + root.setAttribute("style", theme) + } +} \ No newline at end of file