Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2024-12-22 16:48:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix sidebar middle div max-height calculation (#299)

Browse Source 
* Fix sidebar middle div max-height calculation

* remove logs

* update bottom div padding
This commit is contained in:
Evan Simkowitz 2024-02-20 12:23:39 -08:00 committed by GitHub
parent 8cb449d2e7
commit 96cabeff98
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 39 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/sidebar/sidebar.less
View File

@ -119,7 +119,6 @@
}
.middle {
max-height: calc(100vh - 32em);
padding: 4px 6px 8px 6px;
border-bottom: 1px solid @base-border;
.item {
@ -142,9 +141,10 @@
.bottom {
position: absolute;
bottom: 2em;
bottom: 2rem;
left: 0;
width: 100%;
padding-top: 0.8rem;
}
.item {

43
src/app/sidebar/sidebar.tsx
View File

@ -64,7 +64,7 @@ interface MainSideBarProps {
@mobxReact.observer
class MainSideBar extends React.Component<MainSideBarProps, {}> {
sidebarRef = React.createRef<HTMLDivElement>();
middleHeightSubtractor = mobx.observable.box(404);
handleSessionClick(sessionId: string) {
GlobalCommandRunner.switchSession(sessionId);
@ -203,14 +203,37 @@ class MainSideBar extends React.Component<MainSideBarProps, {}> {
});
}
/**
* Calculate the subtractor portion for the middle div's height calculation, which should be `100vh - subtractor`.
*/
setMiddleHeightSubtractor() {
const windowHeight = window.innerHeight;
const bottomHeight = windowHeight - window.document.getElementById("sidebar-bottom")?.offsetTop;
const middleTop = document.getElementById("sidebar-middle")?.offsetTop;
const newMiddleHeightSubtractor = bottomHeight + middleTop;
if (!Number.isNaN(newMiddleHeightSubtractor)) {
mobx.action(() => {
this.middleHeightSubtractor.set(newMiddleHeightSubtractor);
})();
}
}
componentDidMount() {
this.setMiddleHeightSubtractor();
}
componentDidUpdate() {
this.setMiddleHeightSubtractor();
}
render() {
let clientData = this.props.clientData;
const clientData = this.props.clientData;
let needsUpdate = false;
if (!clientData?.clientopts.noreleasecheck && !isBlank(clientData?.releaseinfo?.latestversion)) {
needsUpdate = compareLoose(appconst.VERSION, clientData.releaseinfo.latestversion) < 0;
}
let mainSidebar = GlobalModel.mainSidebarModel;
let isCollapsed = mainSidebar.getCollapsed();
const mainSidebar = GlobalModel.mainSidebarModel;
const isCollapsed = mainSidebar.getCollapsed();
return (
<ResizableSidebar
className="main-sidebar"
@ -271,8 +294,16 @@ class MainSideBar extends React.Component<MainSideBarProps, {}> {
</CenteredIcon>,
]}
/>
<div className="middle hideScrollbarUntillHover">{this.getSessions()}</div>
<div className="bottom">
<div
className="middle hideScrollbarUntillHover"
id="sidebar-middle"
style={{
maxHeight: `calc(100vh - ${this.middleHeightSubtractor.get()}px)`,
}}
>
{this.getSessions()}
</div>
<div className="bottom" id="sidebar-bottom">
<If condition={needsUpdate}>
<SideBarItem
key="update-available"