Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-02 18:39:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

Remove 6px padding from terminal block, make scrollbar properly overlay the terminal contents (#1009)

Browse Source
This commit is contained in:
Evan Simkowitz 2024-10-10 17:42:44 -04:00 committed by GitHub
parent 3ae8d693e8
commit 23eda19ead
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 24 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/app/theme.less
View File

@ -73,6 +73,7 @@
// xterm-decoration-top-layer: 7 // xterm-decoration-top-layer: 7
// xterm-decoration-overview-ruler: 8 // xterm-decoration-overview-ruler: 8
// xterm-decoration-top: 2 // xterm-decoration-top: 2
--zindex-xterm-viewport-overlay: 5; // Viewport contains the scrollbar
// modal colors // modal colors
--modal-bg-color: #232323; --modal-bg-color: #232323;

3
frontend/app/view/term/fitaddon.ts
View File

@ -90,8 +90,7 @@ export class FitAddon implements ITerminalAddon, IFitApi {
const elementPaddingVer = elementPadding.top + elementPadding.bottom; const elementPaddingVer = elementPadding.top + elementPadding.bottom;
const elementPaddingHor = elementPadding.right + elementPadding.left; const elementPaddingHor = elementPadding.right + elementPadding.left;
const availableHeight = parentElementHeight - elementPaddingVer; const availableHeight = parentElementHeight - elementPaddingVer;
// UPDATED added 6 here (adjustment in xterm.css, right: -6px for scrollbar) const availableWidth = parentElementWidth - elementPaddingHor - scrollbarWidth;
const availableWidth = parentElementWidth - elementPaddingHor - scrollbarWidth - 6;
const geometry = { const geometry = {
cols: Math.max(MINIMUM_COLS, Math.floor(availableWidth / dims.css.cell.width)), cols: Math.max(MINIMUM_COLS, Math.floor(availableWidth / dims.css.cell.width)),
rows: Math.max(MINIMUM_ROWS, Math.floor(availableHeight / dims.css.cell.height)), rows: Math.max(MINIMUM_ROWS, Math.floor(availableHeight / dims.css.cell.height)),

41
frontend/app/view/term/term.less
View File

@ -119,29 +119,30 @@
.terminal { .terminal {
.xterm-viewport { .xterm-viewport {
right: -7px; z-index: var(--zindex-xterm-viewport-overlay);
}
.xterm-viewport::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.xterm-viewport::-webkit-scrollbar-track { &::-webkit-scrollbar {
background-color: var(--scrollbar-background-color); width: 6px;
} height: 6px;
.xterm-viewport::-webkit-scrollbar-thumb {
display: none;
background-color: var(--scrollbar-thumb-color);
border-radius: 4px;
margin: 0 1px 0 1px;
&:hover {
background-color: var(--scrollbar-thumb-hover-color);
} }
&:active { &::-webkit-scrollbar-track {
background-color: var(--scrollbar-thumb-active-color); background-color: var(--scrollbar-background-color);
}
&::-webkit-scrollbar-thumb {
display: none;
background-color: var(--scrollbar-thumb-color);
border-radius: 4px;
margin: 0 1px 0 1px;
&:hover {
background-color: var(--scrollbar-thumb-hover-color);
}
&:active {
background-color: var(--scrollbar-thumb-active-color);
}
} }
} }

2
frontend/app/view/term/xterm.css
View File

@ -96,7 +96,7 @@
overflow-y: scroll; overflow-y: scroll;
cursor: default; cursor: default;
position: absolute; position: absolute;
right: -6px; /* if this gets updated, must update fitaddon.ts */ right: 0; /* if this gets updated, must update fitaddon.ts */
left: 0; left: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;