Skip to content

Commit

Permalink
fix microsoft#50933 and microsoft#50677
Browse files Browse the repository at this point in the history
  • Loading branch information
@bpasero
bpasero committed Jun 13, 2018
1 parent dfeef6f commit 5946a4f
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 18 deletions.
15 changes: 11 additions & 4 deletions src/vs/workbench/browser/parts/editor/editorGroupView.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1297,9 +1297,10 @@ export class EditorGroupView extends Themable implements IEditorGroupView {
//#region Themable

protected updateStyles(): void {
const isEmpty = this.isEmpty();

// Container
if (this.isEmpty()) {
if (isEmpty) {
this.element.style.backgroundColor = this.getColor(EDITOR_GROUP_EMPTY_BACKGROUND);
} else {
this.element.style.backgroundColor = null;
Expand All @@ -1308,10 +1309,16 @@ export class EditorGroupView extends Themable implements IEditorGroupView {
// Title control
const { showTabs } = this.accessor.partOptions;
const borderColor = this.getColor(EDITOR_GROUP_HEADER_TABS_BORDER) || this.getColor(contrastBorder);

if (!isEmpty && showTabs && borderColor) {
addClass(this.titleContainer, 'title-border-bottom');
this.titleContainer.style.setProperty('--title-border-bottom-color', borderColor.toString());
} else {
removeClass(this.titleContainer, 'title-border-bottom');
this.titleContainer.style.removeProperty('--title-border-bottom-color');
}

this.titleContainer.style.backgroundColor = this.getColor(showTabs ? EDITOR_GROUP_HEADER_TABS_BACKGROUND : EDITOR_GROUP_HEADER_NO_TABS_BACKGROUND);
this.titleContainer.style.borderBottomWidth = (borderColor && showTabs) ? '1px' : null;
this.titleContainer.style.borderBottomStyle = (borderColor && showTabs) ? 'solid' : null;
this.titleContainer.style.borderBottomColor = showTabs ? borderColor : null;

// Editor container
this.editorContainer.style.backgroundColor = this.getColor(editorBackground);
Expand Down
13 changes: 13 additions & 0 deletions src/vs/workbench/browser/parts/editor/media/editorgroupview.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,12 +42,25 @@
/* Title */

.monaco-workbench > .part.editor > .content .editor-group-container > .title {
position: relative;
height: 35px;
display: flex;
box-sizing: border-box;
overflow: hidden;
}

.monaco-workbench > .part.editor > .content .editor-group-container > .title.title-border-bottom::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
z-index: 5;
pointer-events: none;
background-color: var(--title-border-bottom-color);
width: 100%;
height: 1px;
}

.monaco-workbench > .part.editor > .content .editor-group-container.empty > .title {
display: none;
}
Expand Down
29 changes: 27 additions & 2 deletions src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
/* Tab */

.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab {
position: relative;
display: flex;
white-space: nowrap;
cursor: pointer;
Expand All @@ -40,6 +41,30 @@
padding-left: 10px;
}

.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.tab-border-top::before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 5;
pointer-events: none;
background-color: var(--tab-border-top-color);
width: 100%;
height: 1px;
}

.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.tab-border-bottom::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
z-index: 5;
pointer-events: none;
background-color: var(--tab-border-bottom-color);
width: 100%;
height: 1px;
}

.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.has-icon-theme.close-button-right,
.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.has-icon-theme.close-button-off {
padding-left: 5px; /* reduce padding when we show icons and are in shrinking mode and tab close button is not left */
Expand All @@ -59,7 +84,7 @@

.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.close-button-left::after,
.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.close-button-off::after {
content: "";
content: '';
display: flex;
flex: 0;
width: 5px; /* Reserve space to hide tab fade when close button is left or off (fixes https://github.com/Microsoft/vscode/issues/45728) */
Expand Down Expand Up @@ -96,7 +121,7 @@
}

.monaco-workbench > .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink > .tab-label::after {
content: "";
content: '';
position: absolute;
right: 0;
height: 100%;
Expand Down
27 changes: 15 additions & 12 deletions src/vs/workbench/browser/parts/editor/tabsTitleControl.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import { ScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElemen
import { ScrollbarVisibility } from 'vs/base/common/scrollable';
import { getOrSet } from 'vs/base/common/map';
import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
import { TAB_INACTIVE_BACKGROUND, TAB_ACTIVE_BACKGROUND, TAB_ACTIVE_FOREGROUND, TAB_INACTIVE_FOREGROUND, TAB_BORDER, EDITOR_DRAG_AND_DROP_BACKGROUND, TAB_UNFOCUSED_ACTIVE_FOREGROUND, TAB_UNFOCUSED_INACTIVE_FOREGROUND, TAB_UNFOCUSED_ACTIVE_BORDER, TAB_ACTIVE_BORDER, TAB_HOVER_BACKGROUND, TAB_HOVER_BORDER, TAB_UNFOCUSED_HOVER_BACKGROUND, TAB_UNFOCUSED_HOVER_BORDER, EDITOR_GROUP_HEADER_TABS_BACKGROUND, WORKBENCH_BACKGROUND, TAB_ACTIVE_BORDER_TOP, TAB_UNFOCUSED_ACTIVE_BORDER_TOP, EDITOR_GROUP_HEADER_TABS_BORDER } from 'vs/workbench/common/theme';
import { TAB_INACTIVE_BACKGROUND, TAB_ACTIVE_BACKGROUND, TAB_ACTIVE_FOREGROUND, TAB_INACTIVE_FOREGROUND, TAB_BORDER, EDITOR_DRAG_AND_DROP_BACKGROUND, TAB_UNFOCUSED_ACTIVE_FOREGROUND, TAB_UNFOCUSED_INACTIVE_FOREGROUND, TAB_UNFOCUSED_ACTIVE_BORDER, TAB_ACTIVE_BORDER, TAB_HOVER_BACKGROUND, TAB_HOVER_BORDER, TAB_UNFOCUSED_HOVER_BACKGROUND, TAB_UNFOCUSED_HOVER_BORDER, EDITOR_GROUP_HEADER_TABS_BACKGROUND, WORKBENCH_BACKGROUND, TAB_ACTIVE_BORDER_TOP, TAB_UNFOCUSED_ACTIVE_BORDER_TOP } from 'vs/workbench/common/theme';
import { activeContrastBorder, contrastBorder, editorBackground } from 'vs/platform/theme/common/colorRegistry';
import { ResourcesDropHandler, fillResourceDataTransfers, DraggedEditorIdentifier, DraggedEditorGroupIdentifier, DragAndDropObserver } from 'vs/workbench/browser/dnd';
import { Color } from 'vs/base/common/color';
Expand Down Expand Up @@ -830,19 +830,22 @@ export class TabsTitleControl extends TitleControl {
tabContainer.setAttribute('aria-selected', 'true');
tabContainer.style.backgroundColor = this.getColor(TAB_ACTIVE_BACKGROUND);

const activeTabBorderColor = this.getColor(isGroupActive ? TAB_ACTIVE_BORDER : TAB_UNFOCUSED_ACTIVE_BORDER);
const activeTabBorderColorBottom = this.getColor(isGroupActive ? TAB_ACTIVE_BORDER : TAB_UNFOCUSED_ACTIVE_BORDER);
if (activeTabBorderColorBottom) {
addClass(tabContainer, 'tab-border-bottom');
tabContainer.style.setProperty('--tab-border-bottom-color', activeTabBorderColorBottom.toString());
} else {
removeClass(tabContainer, 'tab-border-bottom');
tabContainer.style.removeProperty('--tab-border-bottom-color');
}

const activeTabBorderColorTop = this.getColor(isGroupActive ? TAB_ACTIVE_BORDER_TOP : TAB_UNFOCUSED_ACTIVE_BORDER_TOP);
if (activeTabBorderColor) {
// Use boxShadow for the active tab border because if we also have a editor group header
// color, the two colors would collide and the tab border never shows up.
// see https://github.com/Microsoft/vscode/issues/33111
// In case of tabs container having a border, we need to inset -2px for the border to show up.
const hasTabsContainerBorder = !!this.getColor(EDITOR_GROUP_HEADER_TABS_BORDER);
tabContainer.style.boxShadow = `${activeTabBorderColor} 0 ${hasTabsContainerBorder ? -2 : -1}px inset`;
} else if (activeTabBorderColorTop) {
tabContainer.style.boxShadow = `${activeTabBorderColorTop} 0 2px inset`;
if (activeTabBorderColorTop) {
addClass(tabContainer, 'tab-border-top');
tabContainer.style.setProperty('--tab-border-top-color', activeTabBorderColorTop.toString());
} else {
tabContainer.style.boxShadow = null;
removeClass(tabContainer, 'tab-border-top');
tabContainer.style.removeProperty('--tab-border-top-color');
}

// Label
Expand Down

0 comments on commit 5946a4f

Please sign in to comment.