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
......@@ -70,11 +70,11 @@
body {
color: var(--text-color);
--messagebar-size: 47px;
--messagebar-size: 57px;
margin: 0;
overflow: hidden;
background-color: var(--bg-color);
padding-bottom: var(--messagebar-size);
padding-bottom: 0;
/* disable selection highlight because it looks very bad */
-webkit-user-select: text;
}
......@@ -275,13 +275,13 @@ body {
overflow: hidden;
padding: 4px;
align-items: center;
position: fixed;
position: relative;
left: 0;
right: 0;
z-index: 500;
bottom: 0;
top: 0;
z-index: 1;
/* hairline */
border-top: var(--hairline-thickness) solid var(--hairline-color);
border: var(--hairline-thickness) solid var(--hairline-color);
}
#message {
......@@ -350,16 +350,15 @@ a:hover {
border: 0;
}
#file_image_send_container {
visibility: hidden;
position: fixed;
bottom: var(--messagebar-size);
#data_transfer_send_container {
position: relative;
z-index: 1;
display: flex;
display: none;
justify-content: flex-start;
left: 0;
right: 0;
height: 8em;
min-height: 8em;
max-height: 8em;
border: 2px solid lightgray;
padding: 20px;
border-bottom: none;
......@@ -368,11 +367,11 @@ a:hover {
overflow-x: overlay;
}
#file_image_send_container::-webkit-scrollbar {
#data_transfer_send_container::-webkit-scrollbar {
height: 10px;
}
#file_image_send_container::after {
#data_transfer_send_container::after {
/*Create the margins with pseudo-elements*/
/*to solve overflow:scroll and The Right Padding Problem*/
content: ' ';
......@@ -433,7 +432,7 @@ a:hover {
padding: 30px;
border-radius: 20px;
background-color: white;
display: flex;
display: inline-block;
justify-content: flex-start;
align-items: center;
margin: 5px;
......@@ -490,6 +489,7 @@ a:hover {
#back_to_bottom_button_container {
position: absolute;
bottom: var(--messagebar-size);
z-index: 1;
display: flex;
justify-content: center;
......@@ -558,6 +558,19 @@ a:hover {
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 */
.internal_mes_wrapper {
......
<html>
<html>
<!-- Empty head might be needed for setSenderImage -->
<head>
......@@ -89,7 +89,7 @@
<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="send_inteface_container" onresize="updateBackToBottomContainer()">
<div id="sendMessage">
<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">
......@@ -99,8 +99,8 @@
</div>
<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">
<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 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" />
</svg>
</div>
<textarea id="message" autofocus placeholder="Type a message" onkeyup="grow_text_area()" onkeydown="process_messagebar_keydown()"
......@@ -112,6 +112,8 @@
</svg>
</div>
</div>
<div id="data_transfer_send_container"></div>
</div>
</div>
</body>
</html>
......@@ -56,7 +56,7 @@ const inviteImage = document.getElementById("invite_image")
const navbar = document.getElementById("navbar")
const invitationText = document.getElementById("text")
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")
/* States: allows us to avoid re-doing something if it isn't meaningful */
......@@ -97,8 +97,6 @@ if (use_qt) {
new QWebChannel(qt.webChannelTransport, function (channel) {
window.jsbridge = channel.objects.jsbridge
})
} else {
sendContainer.outerHTML = ""
}
/* i18n manager */
......@@ -597,7 +595,7 @@ function sendMessage() {
}
sendContainer.innerHTML = ""
sendContainer.style.visibility = "hidden"
sendContainer.style.display = "none"
reduce_send_container();
}
......@@ -2167,12 +2165,13 @@ function addFile_path(path, name, size) {
"<button class='btn' onclick='remove(this)'>X</button>" +
"</div >"
// 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()
sendContainer.style.visibility = "visible"
sendContainer.style.display = "flex"
}
//add html here since display is set to flex, image will change accordingly
sendContainer.innerHTML += html
updateMesPos()
}
/**
......@@ -2185,12 +2184,13 @@ function addImage_base64(base64) {
"<button class='btn' onclick='remove(this)'>X</button>" +
"</div >"
// 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()
sendContainer.style.visibility = "visible"
sendContainer.style.display = "flex"
}
//add html here since display is set to flex, image will change accordingly
sendContainer.innerHTML += html
updateMesPos()
}
/**
......@@ -2203,45 +2203,51 @@ function addImage_path(path) {
"<button class='btn' onclick='remove(this)'>X</button>" +
"</div >"
// 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()
sendContainer.style.visibility = "visible"
sendContainer.style.display = "flex"
}
//add html here since display is set to flex, image will change accordingly
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.
*/
/* exported grow_send_container */
function grow_send_container() {
exec_keeping_scroll_position(function () {
var msgbar_size = window.getComputedStyle(document.body).getPropertyValue("--messagebar-size");
document.body.style.paddingBottom = (parseInt(msgbar_size) + 158).toString() + "px";
//6em
backToBottomBtnContainer.style.bottom = "calc(var(--messagebar-size) + 168px)"
}, [])
}
/**
* 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
*/
/* exported grow_send_container */
function reduce_send_container() {
exec_keeping_scroll_position(function () {
document.body.style.paddingBottom = (parseInt(document.body.style.paddingBottom) - 158).toString() + "px";
backToBottomBtnContainer.style.bottom = "var(--messagebar-size)"
//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
function remove(e) {
e.parentNode.parentNode.removeChild(e.parentNode)
if (sendContainer.innerHTML.length == 0) {
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