提交 a7aa9e08 编写于 作者: D Daniel Imms

Terminal tabs progress

上级 6b38eb5b
...@@ -3,18 +3,22 @@ ...@@ -3,18 +3,22 @@
* Licensed under the MIT License. See License.txt in the project root for license information. * Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/ *--------------------------------------------------------------------------------------------*/
.monaco-workbench .integrated-terminal .tabs-container { .monaco-workbench .panel.integrated-terminal .tabs-outer-container {
flex-grow: 1;
}
.monaco-workbench .panel.integrated-terminal .tabs-container {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex; display: flex;
background-color: rgba(128, 128, 128, 0.2);
} }
.monaco-workbench .integrated-terminal .tab { .monaco-workbench .panel.integrated-terminal .tab {
display: flex; display: flex;
width: 120px; width: 120px;
min-width: fit-content; min-width: fit-content;
overflow: hidden;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
border-left: 1px solid hsla(0,0%,50%,.2); border-left: 1px solid hsla(0,0%,50%,.2);
......
...@@ -3,35 +3,24 @@ ...@@ -3,35 +3,24 @@
* Licensed under the MIT License. See License.txt in the project root for license information. * Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/ *--------------------------------------------------------------------------------------------*/
.monaco-workbench .integrated-terminal { .monaco-workbench .panel.integrated-terminal {
align-items: flex-start; align-items: flex-start;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
}
.monaco-workbench .integrated-terminal {
background-color: transparent!important; background-color: transparent!important;
color: #333; color: #333;
-webkit-user-select: initial; -webkit-user-select: initial;
overflow: hidden; /* prevents the terminal output being incorrectly placed over the title */ overflow: hidden; /* prevents the terminal output being incorrectly placed over the title */
padding: 0 20px; padding: 0 20px;
} }
.vs-dark .monaco-workbench .panel.integrated-terminal { color: #CCC; }
.hc-black .monaco-workbench .panel.integrated-terminal { color: #FFF; }
.vs-dark .monaco-workbench .integrated-terminal { .monaco-workbench .panel.integrated-terminal .terminal-wrapper {
color: #CCC;
}
.hc-black .monaco-workbench .integrated-terminal {
color: #FFF;
}
.monaco-workbench .integrated-terminal .terminal-wrapper {
display: none; display: none;
} }
.monaco-workbench .panel.integrated-terminal .terminal-wrapper.active {
.monaco-workbench .integrated-terminal .terminal-wrapper.active { display: block;
align-items: flex-end;
display: flex;
} }
/* Terminal actions */ /* Terminal actions */
......
...@@ -41,7 +41,6 @@ export class TerminalInstance { ...@@ -41,7 +41,6 @@ export class TerminalInstance {
this.wrapperElement.classList.add('terminal-wrapper'); this.wrapperElement.classList.add('terminal-wrapper');
this.ptyProcess = this.createTerminalProcess(); this.ptyProcess = this.createTerminalProcess();
this.terminalDomElement = document.createElement('div'); this.terminalDomElement = document.createElement('div');
this.parentDomElement.classList.add('integrated-terminal');
let terminalScrollbar = new DomScrollableElement(this.terminalDomElement, { let terminalScrollbar = new DomScrollableElement(this.terminalDomElement, {
canUseTranslate3d: false, canUseTranslate3d: false,
horizontal: ScrollbarVisibility.Hidden, horizontal: ScrollbarVisibility.Hidden,
...@@ -105,6 +104,9 @@ export class TerminalInstance { ...@@ -105,6 +104,9 @@ export class TerminalInstance {
let cols = Math.floor(dimension.width / this.font.charWidth); let cols = Math.floor(dimension.width / this.font.charWidth);
let rows = Math.floor(dimension.height / this.font.charHeight); let rows = Math.floor(dimension.height / this.font.charHeight);
if (this.terminal) { if (this.terminal) {
console.log('this.font', this.font);
console.log('cols: ' + cols);
console.log('rows: ' + rows);
this.terminal.resize(cols, rows); this.terminal.resize(cols, rows);
} }
if (this.ptyProcess.connected) { if (this.ptyProcess.connected) {
......
...@@ -29,9 +29,10 @@ export class TerminalPanel extends Panel { ...@@ -29,9 +29,10 @@ export class TerminalPanel extends Panel {
private actions: IAction[]; private actions: IAction[];
private parentDomElement: HTMLElement; private parentDomElement: HTMLElement;
private tabsOuterContainer: HTMLElement;
private tabsContainer: HTMLElement; private tabsContainer: HTMLElement;
private tabScrollbar: ScrollableElement; private tabScrollbar: ScrollableElement;
private terminalContainerElement: HTMLElement; private terminalContainer: HTMLElement;
private themeStyleElement: HTMLElement; private themeStyleElement: HTMLElement;
private configurationHelper: TerminalConfigHelper; private configurationHelper: TerminalConfigHelper;
private activeTerminalIndex: number; private activeTerminalIndex: number;
...@@ -53,10 +54,7 @@ export class TerminalPanel extends Panel { ...@@ -53,10 +54,7 @@ export class TerminalPanel extends Panel {
} }
if (this.terminalInstances.length > 0) { if (this.terminalInstances.length > 0) {
let computedStyle = window.getComputedStyle(this.tabsContainer); let computedStyle = window.getComputedStyle(this.tabsContainer);
console.log(computedStyle.height);
let height = dimension.height - parseInt(computedStyle.height.replace(/px/, ''), 10); let height = dimension.height - parseInt(computedStyle.height.replace(/px/, ''), 10);
console.log('dimension.height: ' + dimension.height);
console.log('height: ' + height);
let terminalContainerDimension = new Dimension(dimension.width, height); let terminalContainerDimension = new Dimension(dimension.width, height);
this.terminalInstances[this.activeTerminalIndex].layout(terminalContainerDimension); this.terminalInstances[this.activeTerminalIndex].layout(terminalContainerDimension);
} }
...@@ -82,7 +80,10 @@ export class TerminalPanel extends Panel { ...@@ -82,7 +80,10 @@ export class TerminalPanel extends Panel {
public create(parent: Builder): TPromise<void> { public create(parent: Builder): TPromise<void> {
super.create(parent); super.create(parent);
this.parentDomElement = parent.getHTMLElement(); this.parentDomElement = parent.getHTMLElement();
DOM.addClass(this.parentDomElement, 'integrated-terminal');
this.themeStyleElement = document.createElement('style'); this.themeStyleElement = document.createElement('style');
this.tabsOuterContainer = document.createElement('div');
DOM.addClass(this.tabsOuterContainer, 'tabs-outer-container');
this.tabsContainer = document.createElement('ul'); this.tabsContainer = document.createElement('ul');
DOM.addClass(this.tabsContainer, 'tabs-container'); DOM.addClass(this.tabsContainer, 'tabs-container');
...@@ -95,20 +96,21 @@ export class TerminalPanel extends Panel { ...@@ -95,20 +96,21 @@ export class TerminalPanel extends Panel {
canUseTranslate3d: true, canUseTranslate3d: true,
horizontalScrollbarSize: 3 horizontalScrollbarSize: 3
}); });
this.tabsContainer.style.overflow = 'scroll'; // custom scrollbar is eager on removing this style but we want it for DND scroll feedback
this.tabScrollbar.onScroll(e => { this.tabScrollbar.onScroll(e => {
this.tabsContainer.scrollLeft = e.scrollLeft; this.tabsContainer.scrollLeft = e.scrollLeft;
}); });
this.parentDomElement.appendChild(this.tabScrollbar.getDomNode()); this.tabsOuterContainer.appendChild(this.tabScrollbar.getDomNode());
this.terminalContainerElement = document.createElement('div'); // TODO: Move tabs to bottom
this.terminalContainer = document.createElement('div');
this.parentDomElement.appendChild(this.tabsOuterContainer);
this.parentDomElement.appendChild(this.themeStyleElement); this.parentDomElement.appendChild(this.themeStyleElement);
this.parentDomElement.appendChild(this.tabsContainer); this.parentDomElement.appendChild(this.terminalContainer);
this.parentDomElement.appendChild(this.terminalContainerElement);
this.configurationHelper = new TerminalConfigHelper(platform.platform, this.configurationService, this.parentDomElement); this.configurationHelper = new TerminalConfigHelper(platform.platform, this.configurationService, this.parentDomElement);
this.toDispose.push(DOM.addDisposableListener(this.parentDomElement, 'wheel', (event: WheelEvent) => { this.toDispose.push(DOM.addDisposableListener(this.terminalContainer, 'wheel', (event: WheelEvent) => {
this.terminalInstances[this.activeTerminalIndex].dispatchEvent(new WheelEvent(event.type, event)); this.terminalInstances[this.activeTerminalIndex].dispatchEvent(new WheelEvent(event.type, event));
})); }));
...@@ -146,7 +148,7 @@ export class TerminalPanel extends Panel { ...@@ -146,7 +148,7 @@ export class TerminalPanel extends Panel {
private createTerminal(): TPromise<TerminalInstance> { private createTerminal(): TPromise<TerminalInstance> {
return new TPromise<TerminalInstance>(resolve => { return new TPromise<TerminalInstance>(resolve => {
var terminalInstance = new TerminalInstance(this.configurationHelper.getShell(), this.parentDomElement, this.contextService, this.terminalService, this.onTerminalInstanceExit.bind(this)); var terminalInstance = new TerminalInstance(this.configurationHelper.getShell(), this.terminalContainer, this.contextService, this.terminalService, this.onTerminalInstanceExit.bind(this));
this.terminalInstances.push(terminalInstance); this.terminalInstances.push(terminalInstance);
this.setActiveTerminal(this.terminalInstances.length - 1); this.setActiveTerminal(this.terminalInstances.length - 1);
this.toDispose.push(this.themeService.onDidThemeChange(this.updateTheme.bind(this))); this.toDispose.push(this.themeService.onDidThemeChange(this.updateTheme.bind(this)));
...@@ -191,10 +193,10 @@ export class TerminalPanel extends Panel { ...@@ -191,10 +193,10 @@ export class TerminalPanel extends Panel {
theme.forEach((color: string, index: number) => { theme.forEach((color: string, index: number) => {
// TODO: The classes could probably be reduced, it's so long to beat the specificity of the general rule. // TODO: The classes could probably be reduced, it's so long to beat the specificity of the general rule.
let rgba = this.convertHexCssColorToRgba(color, 0.996); let rgba = this.convertHexCssColorToRgba(color, 0.996);
css += `.monaco-workbench .integrated-terminal .terminal .xterm-color-${index} { color: ${color}; }` + css += `.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-${index} { color: ${color}; }` +
`.monaco-workbench .integrated-terminal .terminal .xterm-color-${index}::selection { background-color: ${rgba}; }` + `.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-${index}::selection { background-color: ${rgba}; }` +
`.monaco-workbench .integrated-terminal .terminal .xterm-bg-color-${index} { background-color: ${color}; }` + `.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-${index} { background-color: ${color}; }` +
`.monaco-workbench .integrated-terminal .terminal .xterm-bg-color-${index}::selection { color: ${color}; }`; `.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-${index}::selection { color: ${color}; }`;
}); });
this.themeStyleElement.innerHTML = css; this.themeStyleElement.innerHTML = css;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册