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

feat: 新的界面布局方式(WIP)

Browse Source
This commit is contained in:
MoonLeeeaf
2024-05-18 16:13:29 +08:00
parent 7253f0a4ec
commit 541f043531
2 changed files with 85 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
ling_chair_http/index.html
View File

@@ -55,13 +55,34 @@
<div id="lingchair-app" style="height: 100%;">
<!-- 侧滑栏 -->
<div class="mdui-drawer" id="main-drawer">
<ul class="mdui-list">
<ul class="mdui-list" mdui-collapse="{accordion: true}">
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="default_head.png" n-id="userHead" onerror="this.src='default_head.png'" />
</div>
<div class="mdui-list-item-content"><a n-id="helloText">早安</a>, <a n-id="userNick">Unknown</a></div>
</li>
<li class="mdui-list-item mdui-ripple" onclick="new mdui.Dialog(viewBinding.dialogSettings.get(0)).open()">
<i class="mdui-list-item-icon mdui-icon material-icons">settings</i>
<div class="mdui-list-item-content">设置</div>
</li>
<li class="mdui-list-item mdui-ripple" n-id="drawerSignOut">
<i class="mdui-list-item-icon mdui-icon material-icons">exit_to_app</i>
<div class="mdui-list-item-content">登出</div>
</li>
<div class="mdui-subheader">聊天</div>
<li class="mdui-collapse-item">
<div class="mdui-collapse-item-header mdui-list-item mdui-ripple"><i class="mdui-list-item-icon mdui-icon material-icons">contacts</i>
<div class="mdui-list-item-content">联系人</div><i
class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
</div>
<div class="mdui-collapse-item-body mdui-list" n-id="contactsList">
</div>
</li>
</ul>
<ul class="mdui-list mdui-hidden">
<li class="mdui-subheader">个人</li>
<li class="mdui-list-item mdui-ripple" onclick="new mdui.Dialog(viewBinding.dialogMyProfile.get(0)).open()">
<i class="mdui-list-item-icon mdui-icon material-icons">account_circle</i>
@@ -80,10 +101,6 @@
<i class="mdui-list-item-icon mdui-icon material-icons">cloud_circle</i>
<div class="mdui-list-item-content">更换服务器</div>
</li>
<li class="mdui-list-item mdui-ripple" n-id="drawerSignOut">
<i class="mdui-list-item-icon mdui-icon material-icons">exit_to_app</i>
<div class="mdui-list-item-content">退出登录</div>
</li>
</ul>
</div>
@@ -96,7 +113,7 @@
</a>
<a class="mdui-typo-title" n-id="appTitle"></a>
<div class="mdui-toolbar-spacer"></div>
<a onclick="ContactsList.reloadList()" n-id="contactsRefresh" class="mdui-btn mdui-btn-icon mdui-ripple">
<a onclick="refreshAll()" n-id="contactsRefresh" class="mdui-btn mdui-btn-icon mdui-ripple">
<i class="mdui-icon material-icons">refresh</i>
</a>
<a onclick="ContactsList.openAddDialog()" n-id="contactsAdd" class="mdui-btn mdui-btn-icon mdui-ripple">
@@ -120,29 +137,16 @@
<div class="mdui-tab mdui-accent-theme mdui-theme-color-auto" style="position: fixed; z-index: 114;width: 100%;"
mdui-tab n-id="chatTab">
<!-- 侧滑栏的 z-index 是2000, 在移动端会直接覆盖 -->
<a href="#page-chat-list" n-id="tabChatList" class="mdui-ripple">常用</a>
<a href="#page-contacts" n-id="tabContacts" class="mdui-ripple">通讯录</a>
<a href="#page-chat-seesion" n-id="tabChatSeesion" class="mdui-ripple" style="text-transform: none;"></a>
</div>
<div id="page-chat-list" class="mdui-p-a-2 container">
<div class="mdui-valign content" style="margin-top: 40px;">
<span class="mdui-center">欢迎回来！ （＾▽＾。）</span>
</div>
</div>
<div id="page-contacts" class="mdui-p-a-2">
<ul class="mdui-list" style="margin-top: 30px;">
<li class="mdui-subheader">好友</li>
<div n-id="contactsList">
</div>
</ul>
</div>
<!-- 滚动到底部咋这么难写... -->
<div id="page-chat-seesion" class="mdui-p-a-2" style="display: flex;flex-direction: column;">
<div class="mdui-p-a-2" style="display: flex;flex-direction: column;">
<!-- 写时间居中写到吐了 这样式表不能要了 -->
<div
style="margin-top: 30px;overflow: auto;width: 100%;max-width: 100%;height: 100%;max-height: 100%;min-height: 0;margin-bottom: 40px;flex: 1 1 auto;display: flex;flex-direction: column;">
style="margin-top: 30px;overflow: auto;width: 100%;max-width: 100%;height: 100%;max-height: 100%;min-height: 0;flex: 1 1 auto;display: flex;flex-direction: column;"
n-id="chatPager">
<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>
<div n-id="pageChatSeesion" style="flex: 1 1 auto;display: flex;flex-direction: column;position: relative;">
</div>
@@ -150,8 +154,7 @@
<!-- 妈的黑化了 私人玩意这么难整 早知道 z-index 弄死它得了 浪费我时间 我就没试过这么离谱的样式表 第三方库真难写CSS 就应该先写后端的 啊啊啊啊啊啊 -->
<!-- 不黑化了 因为 stickyfill -->
<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-bottom: -30px;bottom: 0;z-index: 101;" n-id="inputToolbar">
<ul class="mdui-menu" id="msg-input-more">
<li class="mdui-menu-item">
<a class="mdui-ripple">插入图片</a>
@@ -219,28 +222,20 @@
</div>
</div>
<!-- 资料编辑对话框 -->
<!--
<div class="mdui-dialog" n-id="dialogMyProfile">
<div class="mdui-dialog-title">
资料
</div>
<div class="mdui-dialog-content" style="margin-left:15px;margin-right:15px;">
<ul class="mdui-list">
<li class="mdui-list-item mdui-ripple" mdui-dialog-close
onclick="(async () => {viewBinding.dialogEditNickNick.val(await NickCache.getNick(localStorage.userName));new mdui.Dialog(viewBinding.dialogEditNick.get(0)).open()})()">
<i class="mdui-list-item-icon mdui-icon material-icons">edit</i>
<div class="mdui-list-item-content">修改昵称</div>
</li>
<li class="mdui-list-item mdui-ripple" onclick="User.uploadHeadImage()">
<i class="mdui-list-item-icon mdui-icon material-icons">account_circle</i>
<div class="mdui-list-item-content">上传头像</div>
</li>
</ul>
</div>
<div class="mdui-dialog-actions">
<button class="mdui-btn mdui-ripple" mdui-dialog-close>关闭</button>
</div>
</div>
</div> -->
<!-- 编辑昵称对话框 -->
<div class="mdui-dialog" n-id="dialogEditNick">
@@ -255,7 +250,7 @@
</div>
<div class="mdui-dialog-actions">
<button class="mdui-btn mdui-ripple" n-id="dialogEditNickClose" mdui-dialog-close
onclick="new mdui.Dialog(viewBinding.dialogMyProfile.get(0)).open()">关闭</button>
onclick="new mdui.Dialog(viewBinding.dialogSettings.get(0)).open()">关闭</button>
<button class="mdui-btn mdui-ripple"
onclick="User.setNick(viewBinding.dialogEditNickNick.val(), () => {mdui.snackbar('已保存, 刷新页面生效');viewBinding.dialogEditNickClose.click()})">保存</button>
</div>
@@ -293,11 +288,37 @@
</select>
</div>
<div class="mdui-dialog-actions">
<button class="mdui-btn mdui-ripple" mdui-dialog-close onclick="ContactsList.add(viewBinding.dialogNewContactID.val(), viewBinding.dialogNewContactType.val())">确认并关闭</button>
<button class="mdui-btn mdui-ripple" mdui-dialog-close
onclick="ContactsList.add(viewBinding.dialogNewContactID.val(), viewBinding.dialogNewContactType.val())">确认并关闭</button>
<button class="mdui-btn mdui-ripple" mdui-dialog-close>取消</button>
</div>
</div>
<!-- 懂得都懂 -->
<div class="mdui-dialog" n-id="dialogSettings">
<div class="mdui-dialog-title">
设置
</div>
<div class="mdui-dialog-content" style="margin-left:15px;margin-right:15px;">
<ul class="mdui-list">
<div class="mdui-subheader">我的资料</div>
<li class="mdui-list-item mdui-ripple" mdui-dialog-close
onclick="(async () => {viewBinding.dialogEditNickNick.val(await NickCache.getNick(localStorage.userName));new mdui.Dialog(viewBinding.dialogEditNick.get(0)).open()})()">
<i class="mdui-list-item-icon mdui-icon material-icons">edit</i>
<div class="mdui-list-item-content">修改昵称</div>
</li>
<li class="mdui-list-item mdui-ripple" onclick="User.uploadHeadImage()">
<i class="mdui-list-item-icon mdui-icon material-icons">account_circle</i>
<div class="mdui-list-item-content">上传头像</div>
</li>
<div class="mdui-subheader">客户端</div>
</ul>
</div>
<div class="mdui-dialog-actions">
<button class="mdui-btn mdui-ripple" mdui-dialog-close>关闭</button>
</div>
</div>
<div class="mdui-hidden">
<input type="file" n-id="uploadHeadImage" name="选择头像" onchange="User.uploadHeadImageCallback(this)"
accept="image/png, image/jpeg" />

33
ling_chair_http/index.js
View File

@@ -123,7 +123,7 @@ $.ajax({
},
})
// Toolbar 快捷按钮绑定
/* // Toolbar 快捷按钮绑定
viewBinding.contactsRefresh.hide()
viewBinding.contactsAdd.hide()
viewBinding.tabChatList.on("show.mdui.tab", () => {
@@ -137,12 +137,12 @@ viewBinding.tabContacts.on("show.mdui.tab", () => {
viewBinding.tabChatSeesion.on("show.mdui.tab", () => {
viewBinding.contactsRefresh.hide()
viewBinding.contactsAdd.hide()
})
}) */
viewBinding.tabChatSeesion.hide()
/* viewBinding.tabChatSeesion.hide() */
// 关于页面
viewBinding.menuAbout.click(() => mdui.alert('GitHub: MoonLeeeaf<br/><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: "关闭" }))
viewBinding.drawerChangeServer.click(() => {
mdui.prompt('输入服务器地址...(为空则使用当前页面地址)', (value) => {
@@ -335,6 +335,19 @@ class ContactsList {
// 第一次写前端的消息加载, 代码很乱, 还请原谅~
// v0.7.0 大改UI 畏惧了 太庞大了
class ChatPage {
static cached = {}
constructor(name, type) {
}
static switchTo(name, type) {
if (!this.cached[name])
this.cached[name] = new ChatPage(name, type)
}
}
class ChatMsgAdapter {
static type
static target
@@ -504,10 +517,10 @@ class ChatMsgAdapter {
} */
static scrollToBottom() {
// 吐了啊 原来这样就行了 我何必在子element去整啊
window.scrollBy({
viewBinding.chatPager.get(0).scrollBy({
top: 1145141919810,
behavior: 'smooth'
});
})
}
// 从本地加载
/*static loadMsgsFromLocal(target) {
@@ -523,7 +536,7 @@ class ChatMsgAdapter {
}*/
// 自动调整使输入框置底 CSS真tm靠不住啊
static initInputResizer() {
let resize = () => viewBinding.pageChatSeesion.height(window.innerHeight - viewBinding.inputToolbar.height() - $("header.mdui-appbar").height() - viewBinding.chatTab.height() - 90)
let resize = () => viewBinding.pageChatSeesion.height(window.innerHeight - viewBinding.inputToolbar.height() - $("header.mdui-appbar").height() - viewBinding.chatTab.height() - 50)
window.addEventListener("resize", resize)
resize()
}
@@ -768,3 +781,9 @@ Stickyfill.add($("*").filter((a, b) => $(b).css('position') === 'sticky'))
ChatMsgAdapter.initMsgElementEvents()
ChatMsgAdapter.initInputResizer()
function refreshAll() {
ContactsList.reloadList()
delete NickCache.data
NickCache.data = {}
}