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

chore: 文件头, 输入框UI优化, 部分头像优化, 其他

Browse Source
This commit is contained in:
MoonLeeeaf
2024-05-29 23:40:13 +08:00
parent 822a4ad4da
commit 6654141c18
5 changed files with 56 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ling_chair_http/chat-message.css
View File

@@ -79,7 +79,7 @@
.chat-message-left > .avatar, .chat-message-left > .avatar,
.chat-message-right > .avatar { .chat-message-right > .avatar {
width: 45px; width: 50px;
height: 45px; height: 50px;
border-radius: 50%; border-radius: 50%;
} }

49
ling_chair_http/index.css
View File

@@ -1,29 +1,14 @@
/* /*
* 铃之椅 - 把选择权还给用户, 让聊天权掌握在用户手中 * ©2024 满月叶
* Copyright 2024 满月叶 * Github: MoonLeeeaf
* GitHub: https://github.com/MoonLeeeaf/LingChair-Web-Client * 铃之椅 网页端
* 本项目使用 Apache 2.0 协议开源
*
* Copyright 2024 MoonLeeeaf
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/ */
html, body { html, body {
max-height: 100%; max-height: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
/* overflow: hidden; */ overflow: hidden;
/*font: initial;*/ /*font: initial;*/
} }
body { body {
@@ -49,6 +34,24 @@ body {
position: sticky; position: sticky;
bottom: 0; bottom: 0;
display: block; display: block;
height: var(--pseudo-height); /* 设置伪元素的高度 */ }
z-index: -1; /* 防止遮挡实际内容 */
} .chat-seesion {
flex: 1 1 auto;
display: flex;
flex-direction: column;
position: relative;
}
/* https://segmentfault.com/q/1010000010391524 */
img {
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}
img.round {
border-radius: 50%;
}

29
ling_chair_http/index.html
View File

@@ -1,26 +1,10 @@
<!doctype html> <!doctype html>
<html lang="zh-cmn-Hans"> <html lang="zh-cmn-Hans">
<!-- <!--
* 铃之椅 - 把选择权还给用户, 让聊天权掌握在用户手中 * ©2024 满月叶
* Copyright 2024 满月叶 * Github: MoonLeeeaf
* GitHub: https://github.com/MoonLeeeaf/LingChair-Web-Client * 铃之椅 网页端
* 本项目使用 Apache 2.0 协议开源
*
* Copyright 2024 MoonLeeeaf
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
--> -->
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
@@ -147,13 +131,14 @@
<div class="mdui-center" style="margin: 15px;"><a href="javascript:;" onclick="ChatMsgAdapter.loadMore()" <div class="mdui-center" style="margin: 15px;"><a href="javascript:;" onclick="ChatMsgAdapter.loadMore()"
class="mdui-text-color-theme">加载更多</a> | <a href="javascript:;" class="mdui-text-color-theme">加载更多</a> | <a href="javascript:;"
onclick="ChatMsgAdapter.scrollToBottom()" class="mdui-text-color-theme">回到底部</a></div> onclick="ChatMsgAdapter.scrollToBottom()" class="mdui-text-color-theme">回到底部</a></div>
<div n-id="pageChatSeesion" style="flex: 1 1 auto;display: flex;flex-direction: column;position: relative;"> <div n-id="pageChatSeesion" class="chat-seesion">
</div> </div>
<!-- 输入框和聊天消息重叠的原因就是死人 scrollbar, 把自动调整的距离调小, margin调大就行了 -->
</div> </div>
<!-- 妈的黑化了 私人玩意这么难整 早知道 z-index 弄死它得了 浪费我时间 我就没试过这么离谱的样式表 第三方库真难写CSS 就应该先写后端的 啊啊啊啊啊啊 --> <!-- 妈的黑化了 私人玩意这么难整 早知道 z-index 弄死它得了 浪费我时间 我就没试过这么离谱的样式表 第三方库真难写CSS 就应该先写后端的 啊啊啊啊啊啊 -->
<!-- 不黑化了 因为 stickyfill --> <!-- 不黑化了 因为 stickyfill -->
<div class="mdui-toolbar mdui-theme-color-auto" <div class="mdui-toolbar mdui-theme-color-auto"
style="position: sticky;max-width: 100%;margin-bottom: -30px;bottom: 0;z-index: 101;" n-id="inputToolbar"> style="position: sticky;max-width: 100%;margin-top: 1px;bottom: 0;z-index: 101;padding-top: 7px;" n-id="inputToolbar">
<ul class="mdui-menu" id="msg-input-more"> <ul class="mdui-menu" id="msg-input-more">
<li class="mdui-menu-item"> <li class="mdui-menu-item">
<a class="mdui-ripple">插入图片</a> <a class="mdui-ripple">插入图片</a>

91
ling_chair_http/index.js
View File

@@ -1,22 +1,7 @@
/* /*
* 铃之椅 - 把选择权还给用户, 让聊天权掌握在用户手中 * ©2024 满月叶
* Copyright 2024 满月叶 * Github: MoonLeeeaf
* GitHub: https://github.com/MoonLeeeaf/LingChair-Web-Client * 铃之椅 网页端
* 本项目使用 Apache 2.0 协议开源
*
* Copyright 2024 MoonLeeeaf
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/ */
// 2024.5.28 睡着了 // 2024.5.28 睡着了
@@ -109,24 +94,6 @@ $.ajax({
}, },
}) })
/* // Toolbar 快捷按钮绑定
viewBinding.contactsRefresh.hide()
viewBinding.contactsAdd.hide()
viewBinding.tabChatList.on("show.mdui.tab", () => {
viewBinding.contactsRefresh.hide()
viewBinding.contactsAdd.hide()
})
viewBinding.tabContacts.on("show.mdui.tab", () => {
viewBinding.contactsRefresh.show()
viewBinding.contactsAdd.show()
})
viewBinding.tabChatSeesion.on("show.mdui.tab", () => {
viewBinding.contactsRefresh.hide()
viewBinding.contactsAdd.hide()
}) */
/* viewBinding.tabChatSeesion.hide() */
// 关于页面 // 关于页面
viewBinding.menuAbout.click(() => mdui.alert('这是一个开源项目<br/>作者: MoonLeeeaf<br/>欢迎访问我们的<a class="mdui-text-color-theme-accent" href="https://github.com/LingChair/LingChair">项目主页</a>', '关于 铃之椅', () => { }, { confirmText: "关闭" })) viewBinding.menuAbout.click(() => mdui.alert('这是一个开源项目<br/>作者: MoonLeeeaf<br/>欢迎访问我们的<a class="mdui-text-color-theme-accent" href="https://github.com/LingChair/LingChair">项目主页</a>', '关于 铃之椅', () => { }, { confirmText: "关闭" }))
@@ -177,6 +144,10 @@ viewBinding.switchNotifications.click((a) => {
if (localStorage.useNotifications == "true") if (localStorage.useNotifications == "true")
viewBinding.switchNotificationsIcon.text("notifications") viewBinding.switchNotificationsIcon.text("notifications")
viewBinding.inputMsg.blur(() => {
window.initInputResizerResize()
})
// https://www.runoob.com/w3cnote/javascript-copy-clipboard.html // https://www.runoob.com/w3cnote/javascript-copy-clipboard.html
function copyText(t) { function copyText(t) {
let btn = viewBinding.textCopierBtn let btn = viewBinding.textCopierBtn
@@ -216,8 +187,6 @@ Date.prototype.format = function (tms, format) {
return format; return format;
} }
// new mdui.Drawer('#main-drawer').close()
class NickCache { class NickCache {
static data = {} static data = {}
static async getNick(name) { static async getNick(name) {
@@ -278,8 +247,6 @@ class 通知 {
if (localStorage.useNotifications !== "true") return if (localStorage.useNotifications !== "true") return
let n = new Notification(this.title, this.args) let n = new Notification(this.title, this.args)
n.onclick = onclick == null ? () => n.close() : (n) => onclick(n) n.onclick = onclick == null ? () => n.close() : (n) => onclick(n)
// n.onclose = onclose
// n.close()
return n return n
} }
} }
@@ -298,13 +265,9 @@ class ContactsList {
for (let index in ls) { for (let index in ls) {
let name = ls[index] let name = ls[index]
let dick = await NickCache.getNick(name) let dick = await NickCache.getNick(name)
/*client.emit("user.getNick", { name: localStorage.userName }, (re) => {
let nick = re.data == null ? re.data.nick : null
let name = ls[index]*/
$($.parseHTML(`<li class="mdui-list-item mdui-ripple" mdui-drawer-close><div class="mdui-list-item-avatar"><img src="` + User.getUserHeadUrl(name) + `" onerror="this.src='res/default_head.png'" /></div><div class="mdui-list-item-content">` + dick + `</div></li>`)).appendTo(viewBinding.contactsList).click(() => { $($.parseHTML(`<li class="mdui-list-item mdui-ripple" mdui-drawer-close><div class="mdui-list-item-avatar"><img src="` + User.getUserHeadUrl(name) + `" onerror="this.src='res/default_head.png'" /></div><div class="mdui-list-item-content">` + dick + `</div></li>`)).appendTo(viewBinding.contactsList).click(() => {
ChatMsgAdapter.switchTo(name, "single") ChatMsgAdapter.switchTo(name, "single")
}) })
//})
} }
}) })
@@ -320,9 +283,7 @@ class ContactsList {
} }
} }
// 第一次写前端的消息加载, 代码很乱, 还请原谅~ // 消息核心
// v0.7.0 大改UI 畏惧了 太庞大了
class ChatPage { class ChatPage {
static cached = {} static cached = {}
@@ -338,7 +299,6 @@ class ChatPage {
class ChatMsgAdapter { class ChatMsgAdapter {
static type static type
static target static target
// static msgList
static minMsgId static minMsgId
static time static time
static bbn static bbn
@@ -351,7 +311,6 @@ class ChatMsgAdapter {
this.type = type this.type = type
this.target = name this.target = name
// this.msgList = []
this.minMsgId = null this.minMsgId = null
viewBinding.pageChatSeesion.empty() viewBinding.pageChatSeesion.empty()
@@ -482,27 +441,11 @@ class ChatMsgAdapter {
return e return e
} }
// 添加消息记录 作用在 UI 和 msgList
/* static async addMsgLocal(name, m, t, msgid) {
this.msgList.push({
name: name,
msg: m,
msgid: msgid,
})
this.addMsg(name, m, t)
} */
// 从服务器加载一些聊天记录, limit默认=13 // 从服务器加载一些聊天记录, limit默认=13
static async loadMsgs(limit) { static async loadMsgs(limit) {
let histroy = await this.getHistroy(this.msgList[0] == null ? null : this.msgList[0].msgid - 1, limit == null ? 13 : limit) let histroy = await this.getHistroy(this.msgList[0] == null ? null : this.msgList[0].msgid - 1, limit == null ? 13 : limit)
this.msgList = histroy this.msgList = histroy
} }
/* static async loadMsgsFromList(lst) {
for (let index in lst) {
let i = lst[index]
await this.addMsg(i.name, i.msg, i.time)
}
} */
static scrollToBottom() { static scrollToBottom() {
// 吐了啊 原来这样就行了 我何必在子element去整啊 // 吐了啊 原来这样就行了 我何必在子element去整啊
viewBinding.chatPager.get(0).scrollBy({ viewBinding.chatPager.get(0).scrollBy({
@@ -510,24 +453,13 @@ class ChatMsgAdapter {
behavior: 'smooth' behavior: 'smooth'
}) })
} }
// 从本地加载
/*static loadMsgsFromLocal(target) {
let data = localStorage["chat_msg_" + target]
if (data == null || data === "[]")
return []
return JSON.parse(data)
}
// 把当前聊天记录储存到本地
static saveToLocal() {
localStorage["chat_msg_" + this.target] = JSON.stringify(this.msgList)
}*/
// 自动调整使输入框置底 CSS真tm靠不住啊 // 自动调整使输入框置底 CSS真tm靠不住啊
static initInputResizer() { static initInputResizer() {
// 实验表面移动端切出输入法时会触发1-2次resize事件 // 实验表面移动端切出输入法时会触发1-2次resize事件
// 可以利用这个特性来实现自动滚动文本 // 可以利用这个特性来实现自动滚动文本
let resize = () => { let resize = () => {
viewBinding.pageChatSeesion.height(window.innerHeight - viewBinding.inputToolbar.height() - $("header.mdui-appbar").height() - viewBinding.chatTab.height() - 50) // CSS 牵一发而动全身 因此这个减少的数值是每天都要更改的
viewBinding.pageChatSeesion.height(window.innerHeight - viewBinding.inputToolbar.height() - $("header.mdui-appbar").height() - viewBinding.chatTab.height() - 65)
let ledi = this.resizeDick - window.innerHeight let ledi = this.resizeDick - window.innerHeight
if (isMobile()) viewBinding.chatPager.get(0).scrollBy({ if (isMobile()) viewBinding.chatPager.get(0).scrollBy({
// 5.19晚10：56分调配出来的秘方 // 5.19晚10：56分调配出来的秘方
@@ -539,6 +471,7 @@ class ChatMsgAdapter {
}) })
this.resizeDick = window.innerHeight this.resizeDick = window.innerHeight
} }
window.initInputResizerResize = resize
window.addEventListener("resize", resize) window.addEventListener("resize", resize)
resize() resize()
} }

11
ling_chair_http/mdui-prettier.css
View File

@@ -6,9 +6,12 @@
/* 美化UI */ /* 美化UI */
/* 恢复系统字体 */
body { body {
font-family: -apple-system, system-ui, -webkit-system-font; font-family: -apple-system, system-ui, -webkit-system-font;
} }
/* 圆角化 */
.mdui-dialog { .mdui-dialog {
border-radius: 23px; border-radius: 23px;
} }
@@ -42,10 +45,14 @@ body {
/* 配色方案 */ /* 配色方案 */
.mdui-theme-color-auto { .mdui-list-item-avatar {
background-color: #fff; background-color: rgba(0, 0, 0, 0) !important;
} }
/* 背景底色 */
.mdui-theme-color-auto {
background-color: rgba(0, 0, 0, 0);
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.mdui-theme-color-auto { .mdui-theme-color-auto {
background-color: #303030; background-color: #303030;