fix layout

This commit is contained in:
Red Adaya 2024-04-29 13:34:02 +08:00
parent 30b9453bcd
commit e40f93b858
4 changed files with 33 additions and 34 deletions

View File

@ -7,7 +7,7 @@
.titlebar { .titlebar {
background-color: var(--app-panel-bg-color); background-color: var(--app-panel-bg-color);
color: var(--term-blue); color: var(--term-blue);
padding: 6px 10px 6px 10px; padding: 6px 15px;
display: flex; display: flex;
flex: 0 0 auto; flex: 0 0 auto;
flex-direction: row; flex-direction: row;
@ -28,7 +28,8 @@
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
flex: 1; flex: 1;
padding: var(--termpad) calc(var(--termpad) * 2) var(--termpad) calc(var(--termpad) * 3 - 1px); padding: 0 15px;
margin-bottom: 0;
.chat-window { .chat-window {
display: flex; display: flex;

View File

@ -250,15 +250,13 @@ class AIChat extends React.Component<{}, {}> {
<div className="title-string">Wave AI</div> <div className="title-string">Wave AI</div>
</div> </div>
<OverlayScrollbarsComponent className="auxview-content" options={{ scrollbars: { autoHide: "leave" } }}> <OverlayScrollbarsComponent className="content" options={{ scrollbars: { autoHide: "leave" } }}>
<div className="content">
<div className="chat-window" ref={this.chatWindowScrollRef}> <div className="chat-window" ref={this.chatWindowScrollRef}>
<div className="filler"></div> <div className="filler"></div>
<For each="chitem" index="idx" of={chatMessageItems}> <For each="chitem" index="idx" of={chatMessageItems}>
{this.renderChatMessage(chitem)} {this.renderChatMessage(chitem)}
</For> </For>
</div> </div>
</div>
</OverlayScrollbarsComponent> </OverlayScrollbarsComponent>
<div className="chat-input"> <div className="chat-input">

View File

@ -23,7 +23,7 @@
height: 39px; height: 39px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: space-between;
padding: 0 5px; padding: 0 5px;
border-bottom: 1px solid var(--app-border-color); border-bottom: 1px solid var(--app-border-color);
} }

View File

@ -78,11 +78,14 @@ class RightSideBar extends React.Component<RightSideBarProps, {}> {
{(toggleCollapse) => ( {(toggleCollapse) => (
<React.Fragment> <React.Fragment>
<div className="header"> <div className="header">
<Button className="secondary ghost" onClick={toggleCollapse}>
<i className="fa-sharp fa-regular fa-xmark"></i>
</Button>
</div>
<div className="rsb-modes"> <div className="rsb-modes">
<div
className="icon-container"
title="Show Keybinding Debugger"
onClick={() => this.setMode("ai")}
>
<i className="fa-sharp fa-regular fa-sparkles fa-fw" />
</div>
<div className="flex-spacer" /> <div className="flex-spacer" />
<If condition={GlobalModel.isDev}> <If condition={GlobalModel.isDev}>
<div <div
@ -100,13 +103,10 @@ class RightSideBar extends React.Component<RightSideBarProps, {}> {
> >
<i className="fa-sharp fa-solid fa-book-sparkles"></i> <i className="fa-sharp fa-solid fa-book-sparkles"></i>
</div> </div>
<div
className="icon-container"
title="Show Keybinding Debugger"
onClick={() => this.setMode("ai")}
>
<i className="fa-sharp fa-regular fa-sparkles fa-fw" />
</div> </div>
<Button className="secondary ghost" onClick={toggleCollapse}>
<i className="fa-sharp fa-regular fa-xmark"></i>
</Button>
</div> </div>
<If condition={this.mode.get() == "keybind"}> <If condition={this.mode.get() == "keybind"}>
<KeybindDevPane></KeybindDevPane> <KeybindDevPane></KeybindDevPane>