waveterm/xterm.js
0
0
Fork 0
mirror of https://github.com/wavetermdev/xterm.js.git synced 2026-08-05 13:43:48 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fix fit addon to get the scroll bar working in the demo

Browse Source
This commit is contained in:
Daniel Imms
2024-07-09 13:34:51 -07:00
parent c33ed46161
commit 381200bce1
3 changed files with 80 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/addon-fit/src/FitAddon.ts
+3 -2
View File
@@ -64,8 +64,9 @@ export class FitAddon implements ITerminalAddon , IFitApi {
return undefined;
}
const scrollbarWidth = this._terminal.options.scrollback === 0 ?
0 : core.viewport.scrollBarWidth;
const scrollbarWidth = (this._terminal.options.scrollback === 0
? 0
: (this._terminal.options.overviewRulerWidth || 14));
const parentElementStyle = window.getComputedStyle(this._terminal.element.parentElement);
const parentElementHeight = parseInt(parentElementStyle.getPropertyValue('height'));
bin/esbuild.mjs
-2
View File
@@ -188,8 +188,6 @@ if (config.addon) {
};
}
console.log('Building bundle with config:', JSON.stringify(bundleConfig, undefined, 2));
if (config.isWatch) {
context(bundleConfig).then(e => e.watch());
if (!skipOut) {
css/xterm.css
+77
View File
@@ -218,3 +218,80 @@
z-index: 2;
position: relative;
}
/* Derived from vs/base/browser/ui/scrollbar/media/scrollbar.css */
/* xterm.js customization: Override xterm's cursor style */
.xterm .monaco-scrollable-element > .scrollbar {
cursor: default;
}
/* Arrows */
.xterm .monaco-scrollable-element > .scrollbar > .scra {
cursor: pointer;
font-size: 11px !important;
}
.xterm .monaco-scrollable-element > .visible {
opacity: 1;
/* Background rule added for IE9 - to allow clicks on dom node */
background:rgba(0,0,0,0);
transition: opacity 100ms linear;
/* In front of peek view */
z-index: 11;
}
.xterm .monaco-scrollable-element > .invisible {
opacity: 0;
pointer-events: none;
}
.xterm .monaco-scrollable-element > .invisible.fade {
transition: opacity 800ms linear;
}
/* Scrollable Content Inset Shadow */
.xterm .monaco-scrollable-element > .shadow {
position: absolute;
display: none;
}
.xterm .monaco-scrollable-element > .shadow.top {
display: block;
top: 0;
left: 3px;
height: 3px;
width: 100%;
box-shadow: var(--vscode-scrollbar-shadow, #000) 0 6px 6px -6px inset;
}
.xterm .monaco-scrollable-element > .shadow.left {
display: block;
top: 3px;
left: 0;
height: 100%;
width: 3px;
box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset;
}
.xterm .monaco-scrollable-element > .shadow.top-left-corner {
display: block;
top: 0;
left: 0;
height: 3px;
width: 3px;
}
.xterm .monaco-scrollable-element > .shadow.top.left {
box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset;
}
.xterm .monaco-scrollable-element > .scrollbar > .slider {
background: var(--vscode-scrollbarSlider-background, #79797966);
}
.xterm .monaco-scrollable-element > .scrollbar > .slider:hover {
background: var(--vscode-scrollbarSlider-hoverBackground, #646464b3);
}
.xterm .monaco-scrollable-element > .scrollbar > .slider.active {
background: var(--vscode-scrollbarSlider-activeBackground, #bfbfbf66);
}