Skip to content

GitLab

Commit 86052314 authored by Yang Wang's avatar Yang Wang Committed by Sébastien Blin
Browse files

chatview: change the layout 

- change the file send container below the message bar

Change-Id: I48a9b8e4beff762a9b55d81f4a01a2063dafa49c
parent 45d50d04
Hide whitespace changes
Inline Side-by-side
src/web-chatview/chatview.css
View file @ 86052314
...@@ -70,11 +70,11 @@ ...@@ -70,11 +70,11 @@
body { body {
color: var(--text-color); color: var(--text-color);
--messagebar-size: 47px; --messagebar-size: 57px;
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
background-color: var(--bg-color); background-color: var(--bg-color);
padding-bottom: var(--messagebar-size); padding-bottom: 0;
/* disable selection highlight because it looks very bad */ /* disable selection highlight because it looks very bad */
-webkit-user-select: text; -webkit-user-select: text;
} }
...@@ -161,7 +161,7 @@ body { ...@@ -161,7 +161,7 @@ body {
.message_out .filesvg { .message_out .filesvg {
fill: var(--message-out-txt); fill: var(--message-out-txt);
} }
.message_in .filesvg { .message_in .filesvg {
fill: var(--message-in-txt); fill: var(--message-in-txt);
} }
...@@ -275,13 +275,13 @@ body { ...@@ -275,13 +275,13 @@ body {
overflow: hidden; overflow: hidden;
padding: 4px; padding: 4px;
align-items: center; align-items: center;
position: fixed; position: relative;
left: 0; left: 0;
right: 0; right: 0;
z-index: 500; top: 0;
bottom: 0; z-index: 1;
/* hairline */ /* hairline */
border-top: var(--hairline-thickness) solid var(--hairline-color); border: var(--hairline-thickness) solid var(--hairline-color);
} }
#message { #message {
...@@ -350,16 +350,15 @@ a:hover { ...@@ -350,16 +350,15 @@ a:hover {
border: 0; border: 0;
} }
#file_image_send_container { #data_transfer_send_container {
visibility: hidden; position: relative;
position: fixed;
bottom: var(--messagebar-size);
z-index: 1; z-index: 1;
display: flex; display: none;
justify-content: flex-start; justify-content: flex-start;
left: 0; left: 0;
right: 0; right: 0;
height: 8em; min-height: 8em;
max-height: 8em;
border: 2px solid lightgray; border: 2px solid lightgray;
padding: 20px; padding: 20px;
border-bottom: none; border-bottom: none;
...@@ -368,11 +367,11 @@ a:hover { ...@@ -368,11 +367,11 @@ a:hover {
overflow-x: overlay; overflow-x: overlay;
} }
#file_image_send_container::-webkit-scrollbar { #data_transfer_send_container::-webkit-scrollbar {
height: 10px; height: 10px;
} }
#file_image_send_container::after { #data_transfer_send_container::after {
/*Create the margins with pseudo-elements*/ /*Create the margins with pseudo-elements*/
/*to solve overflow:scroll and The Right Padding Problem*/ /*to solve overflow:scroll and The Right Padding Problem*/
content: ' '; content: ' ';
...@@ -433,7 +432,7 @@ a:hover { ...@@ -433,7 +432,7 @@ a:hover {
padding: 30px; padding: 30px;
border-radius: 20px; border-radius: 20px;
background-color: white; background-color: white;
display: flex; display: inline-block;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
margin: 5px; margin: 5px;
...@@ -490,6 +489,7 @@ a:hover { ...@@ -490,6 +489,7 @@ a:hover {
#back_to_bottom_button_container { #back_to_bottom_button_container {
position: absolute; position: absolute;
bottom: var(--messagebar-size);
z-index: 1; z-index: 1;
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -558,6 +558,19 @@ a:hover { ...@@ -558,6 +558,19 @@ a:hover {
margin-top: 4px; margin-top: 4px;
} }
/* The container that envelopes the messagebar and file container */
#send_inteface_container {
position: relative;
overflow: auto;
height: auto;
width: 100%;
bottom: 0;
padding: 0;
margin: 0;
z-index: 0;
display: table;
}
/* General messages */ /* General messages */
.internal_mes_wrapper { .internal_mes_wrapper {
......
src/web-chatview/chatview.html
View file @ 86052314
<html> <html>
<!-- Empty head might be needed for setSenderImage --> <!-- Empty head might be needed for setSenderImage -->
<head> <head>
...@@ -89,28 +89,30 @@ ...@@ -89,28 +89,30 @@
<div id="back_to_bottom_button_container"> <div id="back_to_bottom_button_container">
<div id="back_to_bottom_button" onclick="back_to_bottom()">Jump to latest &#9660;</div> <div id="back_to_bottom_button" onclick="back_to_bottom()">Jump to latest &#9660;</div>
</div> </div>
<div id="file_image_send_container"></div> <div id="send_inteface_container" onresize="updateBackToBottomContainer()">
<div id="sendMessage"> <div id="sendMessage">
<div id="sendFileButton" class="nav-button action-button" onclick="selectFileToSend()"> <div id="sendFileButton" class="nav-button action-button" onclick="selectFileToSend()">
<svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<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="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" /> <path d="M0 0h24v24H0z" fill="none" />
</svg> </svg>
</div> </div>
<div id="videoRecordButton" class="nav-button action-button nav-right" onclick="videoRecord()"> <div id="videoRecordButton" class="nav-button action-button nav-right" onclick="videoRecord()">
<svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0V0z"/> <path fill="none" d="M0 0h24v24H0V0z" />
<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 4zM14 13h-3v3H9v-3H6v-2h3V8h2v3h3v2z"/> <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 4zM14 13h-3v3H9v-3H6v-2h3V8h2v3h3v2z" />
</svg> </svg>
</div> </div>
<textarea id="message" autofocus placeholder="Type a message" onkeyup="grow_text_area()" onkeydown="process_messagebar_keydown()" <textarea id="message" autofocus placeholder="Type a message" onkeyup="grow_text_area()" onkeydown="process_messagebar_keydown()"
rows="1"></textarea> rows="1"></textarea>
<div id="sendButton" class="nav-button action-button" onclick="sendMessage(); grow_text_area()"> <div id="sendButton" class="nav-button action-button" onclick="sendMessage(); grow_text_area()">
<svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" /> <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
<path d="M0 0h24v24H0z" fill="none" /> <path d="M0 0h24v24H0z" fill="none" />
</svg> </svg>
</div>
</div> </div>
<div id="data_transfer_send_container"></div>
</div> </div>
</div> </div>
</body> </body>
......
src/web-chatview/chatview.js
View file @ 86052314
...@@ -56,7 +56,7 @@ const inviteImage = document.getElementById("invite_image") ...@@ -56,7 +56,7 @@ const inviteImage = document.getElementById("invite_image")
const navbar = document.getElementById("navbar") const navbar = document.getElementById("navbar")
const invitationText = document.getElementById("text") const invitationText = document.getElementById("text")
var messages = document.getElementById("messages") var messages = document.getElementById("messages")
var sendContainer = document.getElementById("file_image_send_container") var sendContainer = document.getElementById("data_transfer_send_container")
var wrapperOfNavbar = document.getElementById("wrapperOfNavbar") var wrapperOfNavbar = document.getElementById("wrapperOfNavbar")
/* States: allows us to avoid re-doing something if it isn't meaningful */ /* States: allows us to avoid re-doing something if it isn't meaningful */
...@@ -97,8 +97,6 @@ if (use_qt) { ...@@ -97,8 +97,6 @@ if (use_qt) {
new QWebChannel(qt.webChannelTransport, function (channel) { new QWebChannel(qt.webChannelTransport, function (channel) {
window.jsbridge = channel.objects.jsbridge window.jsbridge = channel.objects.jsbridge
}) })
} else {
sendContainer.outerHTML = ""
} }
/* i18n manager */ /* i18n manager */
...@@ -597,7 +595,7 @@ function sendMessage() { ...@@ -597,7 +595,7 @@ function sendMessage() {
} }
sendContainer.innerHTML = "" sendContainer.innerHTML = ""
sendContainer.style.visibility = "hidden" sendContainer.style.display = "none"
reduce_send_container(); reduce_send_container();
} }
...@@ -2167,12 +2165,13 @@ function addFile_path(path, name, size) { ...@@ -2167,12 +2165,13 @@ function addFile_path(path, name, size) {
"<button class='btn' onclick='remove(this)'>X</button>" + "<button class='btn' onclick='remove(this)'>X</button>" +
"</div >" "</div >"
// At first, visiblity can empty // At first, visiblity can empty
if (sendContainer.style.visibility.length == 0 || sendContainer.style.visibility == "hidden") { if (sendContainer.style.display.length == 0 || sendContainer.style.display == "none") {
grow_send_container() grow_send_container()
sendContainer.style.visibility = "visible" sendContainer.style.display = "flex"
} }
//add html here since display is set to flex, image will change accordingly //add html here since display is set to flex, image will change accordingly
sendContainer.innerHTML += html sendContainer.innerHTML += html
updateMesPos()
} }
/** /**
...@@ -2185,12 +2184,13 @@ function addImage_base64(base64) { ...@@ -2185,12 +2184,13 @@ function addImage_base64(base64) {
"<button class='btn' onclick='remove(this)'>X</button>" + "<button class='btn' onclick='remove(this)'>X</button>" +
"</div >" "</div >"
// At first, visiblity can empty // At first, visiblity can empty
if (sendContainer.style.visibility.length == 0 || sendContainer.style.visibility == "hidden") { if (sendContainer.style.display.length == 0 || sendContainer.style.display == "none") {
grow_send_container() grow_send_container()
sendContainer.style.visibility = "visible" sendContainer.style.display = "flex"
} }
//add html here since display is set to flex, image will change accordingly //add html here since display is set to flex, image will change accordingly
sendContainer.innerHTML += html sendContainer.innerHTML += html
updateMesPos()
} }
/** /**
...@@ -2203,45 +2203,51 @@ function addImage_path(path) { ...@@ -2203,45 +2203,51 @@ function addImage_path(path) {
"<button class='btn' onclick='remove(this)'>X</button>" + "<button class='btn' onclick='remove(this)'>X</button>" +
"</div >" "</div >"
// At first, visiblity can empty // At first, visiblity can empty
if (sendContainer.style.visibility.length == 0 || sendContainer.style.visibility == "hidden") { if (sendContainer.style.display.length == 0 || sendContainer.style.display == "none") {
grow_send_container() grow_send_container()
sendContainer.style.visibility = "visible" sendContainer.style.display = "flex"
} }
//add html here since display is set to flex, image will change accordingly //add html here since display is set to flex, image will change accordingly
sendContainer.innerHTML += html sendContainer.innerHTML += html
updateMesPos()
} }
/** /**
* This function adjusts the body paddings so that that the file_image_send_container doesn't * This function adjusts the body paddings so that that the data_transfer_send_container doesn't
* overlap messages when it grows. * overlap messages when it grows.
*/ */
/* exported grow_send_container */ /* exported grow_send_container */
function grow_send_container() { function grow_send_container() {
exec_keeping_scroll_position(function () { exec_keeping_scroll_position(function () {
var msgbar_size = window.getComputedStyle(document.body).getPropertyValue("--messagebar-size"); backToBottomBtnContainer.style.bottom = "calc(var(--messagebar-size) + 168px)"
document.body.style.paddingBottom = (parseInt(msgbar_size) + 158).toString() + "px";
//6em
}, []) }, [])
} }
/** /**
* This function adjusts the body paddings so that that the file_image_send_container will hide * This function adjusts the body paddings so that that the data_transfer_send_container will hide
* and recover padding bottom * and recover padding bottom
*/ */
/* exported grow_send_container */ /* exported grow_send_container */
function reduce_send_container() { function reduce_send_container() {
exec_keeping_scroll_position(function () { exec_keeping_scroll_position(function () {
document.body.style.paddingBottom = (parseInt(document.body.style.paddingBottom) - 158).toString() + "px"; backToBottomBtnContainer.style.bottom = "var(--messagebar-size)"
//6em //6em
}, []) }, [])
} }
// This function update the bottom of messages window whenever the send_interface changes size when the scroll is at the end
function updateMesPos() {
if (messages.scrollTop >= messages.scrollHeight - messages.clientHeight - scrollDetectionThresh) {
back_to_bottom()
}
}
// Remove current cancel button division and hide the sendContainer // Remove current cancel button division and hide the sendContainer
function remove(e) { function remove(e) {
e.parentNode.parentNode.removeChild(e.parentNode) e.parentNode.parentNode.removeChild(e.parentNode)
if (sendContainer.innerHTML.length == 0) { if (sendContainer.innerHTML.length == 0) {
reduce_send_container() reduce_send_container()
sendContainer.style.visibility = "hidden" sendContainer.style.display = "none"
} }
} }
......
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