chatview: add setTheme method

Change-Id: I8784db4fd58eb85ef43bdeeb2af066ddedb7ba43

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;
 }
 

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