chatview: unify line endings and add windows css fix

Change-Id: Iaa21f50859456b2127103c7e80acfd9bfdf4edac

chatview: unify line endings and add windows css fix
Change-Id: Iaa21f50859456b2127103c7e80acfd9bfdf4edac
5999c504 · Andreas Traczyk · Kateryna Kostiuk · 529ca3c1 · 5999c504 · 5999c504
Commit 5999c504 authored Oct 23, 2019 by Andreas Traczyk Committed by Kateryna Kostiuk Oct 23, 2019
--- a/src/web-chatview/chatview-windows.css
+++ b/src/web-chatview/chatview-windows.css
-: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;
-    /* main properties */
-    --bg-color: #ffffff;
-    /* navbar properties */
-    --navbar-height: 40px;
-    --navbar-padding-top: 8px;
-    --navbar-padding-bottom: var(--navbar-padding-top);
-    /* message bar properties */
-    --textarea-max-height: 150px;
-    --placeholder-text-color: #d3d3d3;
-    /* button properties */
-    --action-icon-color: #00;
-    --deactivated-icon-color: #bebebe;
-    --action-icon-hover-color: #ededed;
-    --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;
-}
-
-#invite_contact_name {
-    font-weight: 500;
-}
-
-
-.internal_mes_wrapper {
-    margin: 0;
-}
-
-.message_wrapper {
-    padding: 0.5em 1em 0.5em 1em;
-}
-
-.sender_image {
-    margin: 0px 10px 0px 10px;
-}
-
-.message_in .message_wrapper {
-    background-color: #cfebf5;
-}
-
-.message_in .sender_image,
-.message_out .sender_image {
-    visibility: hidden;
-}
-
-.message_in.last_of_sequence .sender_image,
-.message_in.single_message .sender_image {
-    visibility: visible;
-}
-
-.message_in.last_of_sequence .sender_image {
-    margin-top: 2px;
-}
-
-.message_in.middle_of_sequence .sender_image {
-    margin-top: 0px;
-}
-
-
-.generated_message.message_in .message_wrapper,
-.generated_message.message_out .message_wrapper {
-    background-color: transparent !important;
-    border-radius: 0px !important;
-}
-
-.single_message.message_in .message_wrapper,
-.single_message.message_out .message_wrapper {
-    border-radius: 20px 20px 20px 20px !important;
-}
-
-.last_of_sequence.message_in .message_wrapper {
-    border-radius: 4px 20px 20px 20px;
-}
-
-.first_of_sequence.message_in .message_wrapper {
-    border-radius: 20px 20px 20px 4px;
-}
-
-.middle_of_sequence.message_in .message_wrapper {
-    border-radius: 4px 20px 20px 5px;
-}
-
-.last_of_sequence.message_out .message_wrapper {
-    border-radius: 20px 4px 20px 20px;
-}
-
-.first_of_sequence.message_out .message_wrapper {
-    border-radius: 20px 20px 4px 20px;
-}
-
-.middle_of_sequence.message_out .message_wrapper {
-    border-radius: 20px 5px 4px 20px;
-}
-
-.middle_of_sequence .internal_mes_wrapper,
-.last_of_sequence .internal_mes_wrapper,
-.last_message .internal_mes_wrapper {
-    margin: 0px 0 0 0 !important;
-}
-
-.message_out .sender_image {
-    margin: 8px;
-}
-
-.first_of_sequence.message_out .internal_mes_wrapper,
-.single_message.message_out .internal_mes_wrapper {
-    margin: 0px 0 0 0 !important;
-}
-
-.sender_image_cell {
-    vertical-align: bottom;
-    min-width: 16px;
-}
-
-.message_in .sender_image_cell {
-    min-width: 56px;
-}
-
-.dummy_cell {
-    padding: 0;
-}
-
-.timestamp_cell {
-    padding: 0;
-    max-width: 0px;
-    overflow: visible;
-    white-space: nowrap;
-}
-
-.timestamp_cell_out {
-    padding: 0;
-    text-align: right;
-    direction: rtl;
-    max-width: 0px;
-    overflow: visible;
-    white-space: nowrap;
-}
-
-table {
-    border-collapse: collapse;
-    border-spacing: 0 0px;
-    margin: 0;
-    padding: 0;
-}
-
-.message_text {
-    word-break: break-all;
-    word-wrap: hyphenate;
-}
-
-pre {
-    white-space: pre-wrap;
-}
-
-.message:hover:not(.message_type_contact) .menu_interaction {
-    display: block;
-    opacity: 1;
-}
-
-.menuoption {
-    user-select: none;
-    cursor: pointer;
-}
-
-.nav-button {
-    width: 30px;
-    height: 30px;
-    margin: 8px;
-    padding: 2px;
-    display: flex;
-    cursor: pointer;
-    align-self: center;
-    border-radius: 16px;
-}
-
-.nav-button.deactivated {
-    width: 30px;
-    height: 30px;
-    margin: 8px;
-    padding: 2px;
-    align-self: center;
-    display: flex;
-    border-radius: 16px;
-    cursor: auto;
+: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;
+    /* main properties */
+    --bg-color: #ffffff;
+    /* navbar properties */
+    --navbar-height: 40px;
+    --navbar-padding-top: 8px;
+    --navbar-padding-bottom: var(--navbar-padding-top);
+    /* message bar properties */
+    --textarea-max-height: 150px;
+    --placeholder-text-color: #d3d3d3;
+    /* button properties */
+    --action-icon-color: #00;
+    --deactivated-icon-color: #bebebe;
+    --action-icon-hover-color: #ededed;
+    --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;
+}
+
+#invite_contact_name {
+    font-weight: 500;
+}
+
+.internal_mes_wrapper {
+    margin: 0;
+}
+
+.message_wrapper {
+    padding: 0.5em 1em 0.5em 1em;
+}
+
+.sender_image {
+    margin: 0px 10px 0px 10px;
+}
+
+.message_in .message_wrapper {
+    background-color: #cfebf5;
+}
+
+.message_in .sender_image,
+.message_out .sender_image {
+    visibility: hidden;
+}
+
+.message_in.last_of_sequence .sender_image,
+.message_in.single_message .sender_image {
+    visibility: visible;
+}
+
+.message_in.last_of_sequence .sender_image {
+    margin-top: 2px;
+}
+
+.message_in.middle_of_sequence .sender_image {
+    margin-top: 0px;
+}
+
+.generated_message.message_in .message_wrapper,
+.generated_message.message_out .message_wrapper {
+    background-color: transparent !important;
+    border-radius: 0px !important;
+}
+
+.single_message.message_in .message_wrapper,
+.single_message.message_out .message_wrapper {
+    border-radius: 20px 20px 20px 20px !important;
+}
+
+.last_of_sequence.message_in .message_wrapper {
+    border-radius: 4px 20px 20px 20px;
+}
+
+.first_of_sequence.message_in .message_wrapper {
+    border-radius: 20px 20px 20px 4px;
+}
+
+.middle_of_sequence.message_in .message_wrapper {
+    border-radius: 4px 20px 20px 5px;
+}
+
+.last_of_sequence.message_out .message_wrapper {
+    border-radius: 20px 4px 20px 20px;
+}
+
+.first_of_sequence.message_out .message_wrapper {
+    border-radius: 20px 20px 4px 20px;
+}
+
+.middle_of_sequence.message_out .message_wrapper {
+    border-radius: 20px 5px 4px 20px;
+}
+
+.middle_of_sequence .internal_mes_wrapper,
+.last_of_sequence .internal_mes_wrapper,
+.last_message .internal_mes_wrapper {
+    margin: 0px 0 0 0 !important;
+}
+
+.message_out .sender_image {
+    margin: 8px;
+}
+
+.first_of_sequence.message_out .internal_mes_wrapper,
+.single_message.message_out .internal_mes_wrapper {
+    margin: 0px 0 0 0 !important;
+}
+
+.sender_image_cell {
+    vertical-align: bottom;
+    min-width: 16px;
+}
+
+.message_in .sender_image_cell {
+    min-width: 56px;
+}
+
+.dummy_cell {
+    padding: 0;
+}
+
+.timestamp_cell {
+    padding: 0;
+    max-width: 0px;
+    overflow: visible;
+    white-space: nowrap;
+}
+
+.timestamp_cell_out {
+    padding: 0;
+    text-align: right;
+    direction: rtl;
+    max-width: 0px;
+    overflow: visible;
+    white-space: nowrap;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0 0px;
+    margin: 0;
+    padding: 0;
+}
+
+.message_text {
+    word-break: break-all;
+    word-wrap: hyphenate;
+}
+
+pre {
+    white-space: pre-wrap;
+}
+
+.message:hover:not(.message_type_contact) .menu_interaction {
+    display: block;
+    opacity: 1;
+}
+
+.message_type_text .internal_mes_wrapper {
+    padding: 0;
+}
+
+.first_of_sequence .internal_mes_wrapper {
+    padding: 0.1em 0 0 0;
+}
+
+.menuoption {
+    user-select: none;
+    cursor: pointer;
+}
+
+.nav-button {
+    width: 30px;
+    height: 30px;
+    margin: 8px;
+    padding: 2px;
+    display: flex;
+    cursor: pointer;
+    align-self: center;
+    border-radius: 16px;
+}
+
+.nav-button.deactivated {
+    width: 30px;
+    height: 30px;
+    margin: 8px;
+    padding: 2px;
+    align-self: center;
+    display: flex;
+    border-radius: 16px;
+    cursor: auto;
 }
\ No newline at end of file
--- a/src/web-chatview/chatview.css
+++ b/src/web-chatview/chatview.css
@@ -83,7 +83,6 @@ body {
    background-color: var(--bg-color);
 }

-
 /** Navbar */

 .navbar-wrapper {
@@ -251,7 +250,6 @@ body {
  -webkit-user-select: auto;
 }

-
 /** Messaging bar */

 #sendMessage {
@@ -544,7 +542,6 @@ a:hover {
    margin-top: 4px;
 }

-
 /* General messages */

 .internal_mes_wrapper {

--- a/src/web-chatview/chatview.html
+++ b/src/web-chatview/chatview.html
-<html>
+<html>
 <!-- Empty head might be needed for setSenderImage -->

 <head>
@@ -84,11 +84,11 @@
            </div>
        </div>
    </div>
-    <div id="container">
-        <div id="messages" onscroll="onScrolled()"></div>
-        <div id="back_to_bottom_button_container">
-            <div id="back_to_bottom_button" onclick="back_to_bottom()">Jump to latest &#9660;</div>
-        </div>
+    <div id="container">
+        <div id="messages" onscroll="onScrolled()"></div>
+        <div id="back_to_bottom_button_container">
+            <div id="back_to_bottom_button" onclick="back_to_bottom()">Jump to latest &#9660;</div>
+        </div>
        <div id="file_image_send_container"></div>
        <div id="sendMessage">
            <div id="sendFileButton" class="nav-button action-button" onclick="selectFileToSend()" title="select file to send">

--- a/src/web-chatview/chatview.js
+++ b/src/web-chatview/chatview.js
@@ -506,7 +506,6 @@ function formatDate(date) {
    const seconds = Math.floor((new Date() - date) / 1000)
    var interval = Math.floor(seconds / (3600 * 24))

-
    if (use_qt) {
        if (interval > 5) {
            return date.toLocaleDateString()
@@ -883,7 +882,6 @@ function fileInteraction(message_id, message_direction) {
        internal_mes_wrapper.appendChild(message_wrapper)
    }

-
    return internal_mes_wrapper
 }

@@ -988,7 +986,6 @@ function updateFileInteraction(message_div, message_object, forceTypeToFile = fa
        return
    }

-
    if (isAudio(message_text) && message_delivery_status === "finished" && displayLinksEnabled && !forceTypeToFile) {
        // Replace the old wrapper by the downloaded audio
        var old_wrapper = message_div.querySelector(".internal_mes_wrapper")
@@ -1498,7 +1495,6 @@ function buildNewMessage(message_object) {
        }
    }

-
    // Build main content
    if (message_type === "data_transfer") {
        if (isImage(message_text) && delivery_status === "finished" && displayLinksEnabled) {
@@ -1584,7 +1580,6 @@ function addSenderImage(message_div, message_type, message_sender_contact_method
    }
 }

-
 /**
 * Build a timestamp for passed message object
 * @param message_object to treat
@@ -2217,7 +2212,6 @@ function remove(e) {
    }
 }

-
 // It's called in qt qwebengine
 function pasteKeyDetected(e) {
    e.preventDefault()