CrescentLeaf/LingChair
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

ui: AppMobile 界面長寬修正

Browse Source
This commit is contained in:
CrescentLeaf
2025-09-13 23:50:38 +08:00
parent 125938b8be
commit 124879f11f
1 changed files with 53 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
client/ui/AppMobile.tsx
View File

@@ -100,7 +100,7 @@ export default function AppMobile() {
<div style={{ <div style={{
display: "flex", display: "flex",
position: 'relative', position: 'relative',
width: '100%', width: 'var(--whitesilk-window-width)',
height: 'var(--whitesilk-window-height)', height: 'var(--whitesilk-window-height)',
}}> }}>
<LoginDialog <LoginDialog
@@ -121,61 +121,65 @@ export default function AppMobile() {
userProfileDialogRef={userProfileDialogRef} userProfileDialogRef={userProfileDialogRef}
user={myUserProfileCache} /> user={myUserProfileCache} />
<mdui-navigation-bar label-visibility="selected" value="Recents" ref={navigationBarRef}> <mdui-navigation-bar scroll-target="#SideBar" label-visibility="selected" value="Recents" ref={navigationBarRef}>
<mdui-navigation-bar-item icon="watch_later--outlined" value="Recents">最近</mdui-navigation-bar-item> <mdui-navigation-bar-item icon="watch_later--outlined" value="Recents">最近</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="contacts--outlined" value="Contacts">聯絡人</mdui-navigation-bar-item> <mdui-navigation-bar-item icon="contacts--outlined" value="Contacts">聯絡人</mdui-navigation-bar-item>
</mdui-navigation-bar> </mdui-navigation-bar>
{ <div style={{
// 最近聊天 display: 'flex',
<mdui-list style={{ height: 'calc(100% - 80px)',
height: 'calc(var(--whitesilk-window-height) - 80px)', width: '100%',
overflowY: 'auto', }} id="SideBar">
marginLeft: '10px', {
marginRight: '10px', // 最近聊天
width: '100%', <mdui-list style={{
display: navigationItemSelected == "Recents" ? undefined : 'none' overflowY: 'auto',
}}> marginLeft: '10px',
{ marginRight: '10px',
recentsList.map((v) => width: '100%',
<RecentsListItem display: navigationItemSelected == "Recents" ? undefined : 'none'
key={v.id} }}>
nickName={v.title}
avatar={v.avatar}
content={v.content} />
)
}
</mdui-list>
}
{
// 联系人列表
<mdui-list style={{
height: 'calc(var(--whitesilk-window-height) - 80px)',
overflowY: 'auto',
marginLeft: '10px',
marginRight: '10px',
width: '100%',
display: navigationItemSelected == "Contacts" ? undefined : 'none'
}}>
<mdui-collapse accordion value={Object.keys(contactsMap)[0]}>
{ {
Object.keys(contactsMap).map((v) => recentsList.map((v) =>
<mdui-collapse-item key={v} value={v}> <RecentsListItem
<mdui-list-subheader slot="header">{v}</mdui-list-subheader> key={v.id}
{ nickName={v.title}
contactsMap[v].map((v2) => avatar={v.avatar}
<ContactsListItem content={v.content} />
key={v2.id}
nickName={v2.nickname}
avatar={v2.avatar} />
)
}
</mdui-collapse-item>
) )
} }
</mdui-collapse> </mdui-list>
</mdui-list> }
} {
// 联系人列表
<mdui-list style={{
overflowY: 'auto',
marginLeft: '10px',
marginRight: '10px',
width: '100%',
display: navigationItemSelected == "Contacts" ? undefined : 'none'
}}>
<mdui-collapse accordion value={Object.keys(contactsMap)[0]}>
{
Object.keys(contactsMap).map((v) =>
<mdui-collapse-item key={v} value={v}>
<mdui-list-subheader slot="header">{v}</mdui-list-subheader>
{
contactsMap[v].map((v2) =>
<ContactsListItem
key={v2.id}
nickName={v2.nickname}
avatar={v2.avatar} />
)
}
</mdui-collapse-item>
)
}
</mdui-collapse>
</mdui-list>
}
</div>
</div> </div>
) )
} }