Skip to content
GitLab
Commit 45d50d04 authored by Sébastien Blin's avatar Sébastien Blin
Browse files

chatview: add setTheme method 

Change-Id: I8784db4fd58eb85ef43bdeeb2af066ddedb7ba43
parent df55e7dd
Hide whitespace changes
Inline Side-by-side
src/web-chatview/chatview.css
View file @ 45d50d04
......@@ -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;
}
......
src/web-chatview/chatview.js
View file @ 45d50d04
......@@ -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
Supports Markdown
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