CrescentLeaf/LingChair-V0
1
0
Fork 0
mirror of https://github.com/LingChair/LingChair-V0.git synced 2025-12-07 17:45:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(chat): 移动端输入体验优化

Browse Source
This commit is contained in:
MoonLeeeaf
2024-06-23 14:00:02 +08:00
parent d4e3104ddf
commit 20990ed3b1
2 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
ling_chair_http/chat-message.css
View File

@@ -19,14 +19,14 @@
* limitations under the License. * limitations under the License.
*/ */
.chat-message-right { .chat-message.right {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: flex-start; align-items: flex-start;
margin: 13px 13px 13px 10%; margin: 13px 13px 13px 10%;
} }
.chat-message-left { .chat-message.left {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
@@ -71,15 +71,14 @@
/* 左对齐元素 */ /* 左对齐元素 */
} }
.chat-message-left .message-content-with-nickname-left .nickname, .chat-message .message-content-with-nickname-left .nickname,
.chat-message-right .message-content-with-nickname-right .nickname { .chat-message .message-content-with-nickname-right .nickname {
margin-right: 5px; margin-right: 5px;
font-size: medium; font-size: medium;
margin-top: 3px; margin-top: 3px;
} }
.chat-message-left > .avatar, .chat-message > .avatar {
.chat-message-right > .avatar {
width: 50px; width: 50px;
height: 50px; height: 50px;
border-radius: 50%; border-radius: 50%;

7
ling_chair_http/handler.js
View File

@@ -523,7 +523,7 @@ class ChatPage {
let temp let temp
if (name === localStorage.userName) if (name === localStorage.userName)
temp = `<div class="chat-message-right"> temp = `<div class="chat-message right">
<div class="message-content-with-nickname-right"> <div class="message-content-with-nickname-right">
<span class="nickname">${nick}</span> <span class="nickname">${nick}</span>
<div class="message-content mdui-card" tag="msg-card" id="msgid_${msgid}"> <div class="message-content mdui-card" tag="msg-card" id="msgid_${msgid}">
@@ -534,7 +534,7 @@ class ChatPage {
<img class="avatar" src="${CurrentUser.getUserHeadUrl(name)}" onerror="this.src='res/default_head.png'" /> <img class="avatar" src="${CurrentUser.getUserHeadUrl(name)}" onerror="this.src='res/default_head.png'" />
</div>` </div>`
else else
temp = `<div class="chat-message-left"> temp = `<div class="chat-message left">
<img class="avatar" src="${CurrentUser.getUserHeadUrl(name)}" onerror="this.src='res/default_head.png'" /> <img class="avatar" src="${CurrentUser.getUserHeadUrl(name)}" onerror="this.src='res/default_head.png'" />
<div class="message-content-with-nickname-left"> <div class="message-content-with-nickname-left">
<span class="nickname">${nick}</span> <span class="nickname">${nick}</span>
@@ -610,12 +610,13 @@ class ChatMsgAdapter {
// CSS 牵一发而动全身 因此这个减少的数值是每天都要更改的 // CSS 牵一发而动全身 因此这个减少的数值是每天都要更改的
viewBinding.chatPager.height(window.innerHeight - viewBinding.inputToolbar.height() - $("header.mdui-appbar").height() - viewBinding.chatTab.height() - 17) viewBinding.chatPager.height(window.innerHeight - viewBinding.inputToolbar.height() - $("header.mdui-appbar").height() - viewBinding.chatTab.height() - 17)
let ledi = this.resizeDick - window.innerHeight let ledi = this.resizeDick - window.innerHeight
let h = $('.chat-seesion[actived=true] > .chat-message:last-child').height()
if (isMobile()) viewBinding.chatPager.get(0).scrollBy({ if (isMobile()) viewBinding.chatPager.get(0).scrollBy({
// 5.19晚10：56分调配出来的秘方 // 5.19晚10：56分调配出来的秘方
// < 0 为窗口变大 // < 0 为窗口变大
// cnm的，调试十万次就你tm检测不到底是吧，就你语法天天错误是吧 // cnm的，调试十万次就你tm检测不到底是吧，就你语法天天错误是吧
// 欺负我现在用不了电脑 // 欺负我现在用不了电脑
top: (ledi >= 0 ? ledi * 2 : 60), top: (ledi > 0 ? (this.isAtBottom() ? viewBinding.inputToolbar.height() : -h * ledi / 20) : -h * ledi / 20),
behavior: 'smooth' behavior: 'smooth'
}) })
this.resizeDick = window.innerHeight this.resizeDick = window.innerHeight