Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-19 21:11:32 +01:00
Code Issues Packages Projects Releases Wiki Activity

sidebar styles

Browse Source
This commit is contained in:
sawka 2024-02-23 15:39:16 -08:00
parent c7774f3261
commit 82496389ed
2 changed files with 25 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/app/workspace/screen/screenview.less
View File

@ -4,6 +4,7 @@
.screen-view {
flex-grow: 1;
position: relative;
border-top: 1px solid @thin-border-color;
}
.screen-sidebar,
@ -19,8 +20,6 @@
flex-direction: column;
height: 100%;
overflow: hidden;
margin-left: 5px;
padding-left: 5px;
overflow-y: auto;
border-left: 1px solid @thin-border-color;
@ -28,9 +27,27 @@
/* sidebar-header height linked to MagicLayout.ScreenSidebarHeaderHeight */
display: flex;
flex-direction: row;
padding: 3px 5px;
border-radius: 3px;
margin: 3px 5px 0 5px;
padding: 3px 0;
margin: 0;
border-bottom: 1px solid @thin-border-color;
font-size: var(--termfontsize);
font-family: var(--termfontfamily);
font-weight: normal;
line-height: var(--termlineheight);
color: @text-caption;
&:hover {
color: white;
}
div.pane-name {
visibility: hidden;
margin-left: calc(var(--termpad) * 2);
}
&:hover div.pane-name {
visibility: visible;
}
i {
padding: 3px;

5
src/app/workspace/screen/screenview.tsx
View File

@ -300,6 +300,7 @@ class ScreenSidebar extends React.Component<{ screen: Screen; width: string }, {
return (
<div className="screen-sidebar" style={{ width: width }} ref={this.sidebarRef}>
<div className="sidebar-header">
<div className="pane-name">sidebar</div>
<div className="flex-spacer" />
<div onClick={this.sidebarOpenHalf} title="Set Sidebar Width to 50%">
<i className="fa-sharp fa-solid fa-table-columns" />
@ -307,8 +308,8 @@ class ScreenSidebar extends React.Component<{ screen: Screen; width: string }, {
<div onClick={this.sidebarOpenPartial} title="Set Sidebar Width to 500px">
<i className="fa-sharp fa-solid fa-sidebar-flip" />
</div>
<div onClick={this.sidebarClose} style={{ marginLeft: 5 }}>
<i className="fa-sharp fa-solid fa-xmark" />
<div onClick={this.sidebarClose} style={{ marginLeft: 5, marginRight: 10 }}>
<i className="fa-sharp fa-solid fa-xmark-large" />
</div>
</div>
<If condition={!sidebarOk}>