Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-08-19 14:22:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

header / footer

Browse Source
This commit is contained in:
BeniBenj
2024-03-06 12:49:26 +01:00
parent bb71ca5a59
commit ab3fbb5baa
6 changed files with 157 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/vs/workbench/browser/media/part.css
+4 -4
View File
@@ -23,12 +23,12 @@
}
.monaco-workbench .part > .title,
.monaco-workbench .part > .composite-bar-area {
display: none; /* Parts have to opt in to show and composite bar area */
.monaco-workbench .part > .header-or-footer {
display: none; /* Parts have to opt in to show area */
}
.monaco-workbench .part > .title,
.monaco-workbench .part > .composite-bar-area {
.monaco-workbench .part > .header-or-footer {
height: 35px;
display: flex;
box-sizing: border-box;
@@ -36,7 +36,7 @@
}
.monaco-workbench .part > .title,
.monaco-workbench .part > .composite-bar-area {
.monaco-workbench .part > .header-or-footer {
padding-left: 8px;
padding-right: 8px;
}
src/vs/workbench/browser/part.ts
+79 -31
View File
@@ -20,9 +20,10 @@ export interface IPartOptions {
}
export interface ILayoutContentResult {
readonly headerSize: IDimension;
readonly titleSize: IDimension;
readonly contentSize: IDimension;
readonly compositeBarSize: IDimension;
readonly footerSize: IDimension;
}
/**
@@ -41,9 +42,10 @@ export abstract class Part extends Component implements ISerializableView {
readonly onDidVisibilityChange = this._onDidVisibilityChange.event;
private parent: HTMLElement | undefined;
private headerArea: HTMLElement | undefined;
private titleArea: HTMLElement | undefined;
private contentArea: HTMLElement | undefined;
private compositeBarArea: HTMLElement | undefined;
private footerArea: HTMLElement | undefined;
private partLayout: PartLayout | undefined;
constructor(
@@ -122,35 +124,67 @@ export abstract class Part extends Component implements ISerializableView {
}
/**
* Creates the composite bar and sets the proper position.
* Sets the header area
*/
protected setCompositeBarArea(compositeBarContainer: HTMLElement, position: 'top' | 'bottom'): void {
if (this.compositeBarArea) {
throw new Error('Composite bar already exists');
protected setHeaderArea(headerContainer: HTMLElement): void {
if (this.headerArea) {
throw new Error('Header already exists');
}
if (!this.parent || !this.titleArea) {
return;
}
if (position === 'top') {
prepend(this.parent, compositeBarContainer);
compositeBarContainer.classList.add('top');
} else {
this.parent.appendChild(compositeBarContainer);
compositeBarContainer.classList.add('bottom');
}
prepend(this.parent, headerContainer);
headerContainer.classList.add('header-or-footer');
headerContainer.classList.add('header');
this.compositeBarArea = compositeBarContainer;
this.partLayout?.setCompositeBarVisibility(true);
this.headerArea = headerContainer;
this.partLayout?.setHeaderVisibility(true);
this.relayout();
}
protected removeCompositeBarArea(): void {
if (this.compositeBarArea) {
this.compositeBarArea.remove();
this.compositeBarArea = undefined;
this.partLayout?.setCompositeBarVisibility(false);
/**
* Sets the footer area
*/
protected setFooterArea(footerContainer: HTMLElement): void {
if (this.footerArea) {
throw new Error('Footer already exists');
}
if (!this.parent || !this.titleArea) {
return;
}
this.parent.appendChild(footerContainer);
footerContainer.classList.add('header-or-footer');
footerContainer.classList.add('footer');
this.footerArea = footerContainer;
this.partLayout?.setFooterVisibility(true);
this.relayout();
}
/**
* removes the header area
*/
protected removeHeaderArea(): void {
if (this.headerArea) {
this.headerArea.remove();
this.headerArea = undefined;
this.partLayout?.setHeaderVisibility(false);
this.relayout();
}
}
/**
* removes the footer area
*/
protected removeFooterArea(): void {
if (this.footerArea) {
this.footerArea.remove();
this.footerArea = undefined;
this.partLayout?.setFooterVisibility(false);
this.relayout();
}
}
@@ -197,10 +231,12 @@ export abstract class Part extends Component implements ISerializableView {
class PartLayout {
private static readonly HEADER_HEIGHT = 35;
private static readonly TITLE_HEIGHT = 35;
private static readonly COMPOSITE_BAR_HEIGHT = 35;
private static readonly Footer_HEIGHT = 35;
private compositeBarAreaVisible: boolean = false;
private headerVisible: boolean = false;
private footerVisible: boolean = false;
constructor(private options: IPartOptions, private contentArea: HTMLElement | undefined) { }
@@ -214,12 +250,20 @@ class PartLayout {
titleSize = Dimension.None;
}
// Footer Size: Width (Fill), Height (Variable)
let compositeBarSize: Dimension;
if (this.compositeBarAreaVisible) {
compositeBarSize = new Dimension(width, Math.min(height, PartLayout.COMPOSITE_BAR_HEIGHT));
// Header Size: Width (Fill), Height (Variable)
let headerSize: Dimension;
if (this.headerVisible) {
headerSize = new Dimension(width, Math.min(height, PartLayout.HEADER_HEIGHT));
} else {
compositeBarSize = Dimension.None;
headerSize = Dimension.None;
}
// Footer Size: Width (Fill), Height (Variable)
let footerSize: Dimension;
if (this.footerVisible) {
footerSize = new Dimension(width, Math.min(height, PartLayout.Footer_HEIGHT));
} else {
footerSize = Dimension.None;
}
let contentWidth = width;
@@ -228,18 +272,22 @@ class PartLayout {
}
// Content Size: Width (Fill), Height (Variable)
const contentSize = new Dimension(contentWidth, height - titleSize.height - compositeBarSize.height);
const contentSize = new Dimension(contentWidth, height - titleSize.height - headerSize.height - footerSize.height);
// Content
if (this.contentArea) {
size(this.contentArea, contentSize.width, contentSize.height);
}
return { titleSize, contentSize, compositeBarSize };
return { headerSize, titleSize, contentSize, footerSize };
}
setCompositeBarVisibility(visible: boolean): void {
this.compositeBarAreaVisible = visible;
setFooterVisibility(visible: boolean): void {
this.footerVisible = visible;
}
setHeaderVisibility(visible: boolean): void {
this.headerVisible = visible;
}
}
src/vs/workbench/browser/parts/compositePart.ts
+1 -1
View File
@@ -438,7 +438,7 @@ export abstract class CompositePart<T extends Composite> extends Part {
};
}
protected createCompositeBarArea(): HTMLElement {
protected createHeaderFooterCompositeBarArea(): HTMLElement {
return $('.composite.composite-bar-area');
}
src/vs/workbench/browser/parts/media/compositepart.css
+1 -1
View File
@@ -7,7 +7,7 @@
height: 100%;
}
.monaco-workbench .part > .composite.composite-bar-area,
.monaco-workbench .part > .composite.header-or-footer,
.monaco-workbench .part > .composite.title {
display: flex;
}
src/vs/workbench/browser/parts/media/paneCompositePart.css
+46 -46
View File
@@ -20,18 +20,18 @@
display: none;
}
.monaco-workbench .pane-composite-part > .composite-bar-area.bottom {
.monaco-workbench .pane-composite-part > .header-or-footer.bottom {
border-top: 1px solid var(--vscode-sideBarSectionHeader-border);
}
.monaco-workbench .pane-composite-part > .title > .composite-bar-container,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container {
display: flex;
}
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-label.codicon-more,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-label.codicon-more {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-label.codicon-more {
display: flex;
align-items: center;
justify-content: center;
@@ -41,13 +41,13 @@
}
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar {
line-height: 27px; /* matches panel titles in settings */
height: 35px;
}
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item {
text-transform: uppercase;
padding-left: 10px;
padding-right: 10px;
@@ -58,26 +58,26 @@
}
.monaco-workbench .pane-composite-part > .title > .composite-bar-container >.composite-bar > .monaco-action-bar .action-item.icon,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container >.composite-bar > .monaco-action-bar .action-item.icon {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container >.composite-bar > .monaco-action-bar .action-item.icon {
height: 24px;
padding: 0 5px;
}
.monaco-workbench .pane-composite-part > .title > .composite-bar-container >.composite-bar .monaco-action-bar .action-label.codicon,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container >.composite-bar .monaco-action-bar .action-label.codicon {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container >.composite-bar .monaco-action-bar .action-label.codicon {
font-size: 18px;
}
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .action-label:not(.codicon),
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .action-label:not(.codicon) {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .action-label:not(.codicon) {
width: 16px;
height: 16px;
}
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::before,
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::after,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::before,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::after {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::before,
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::after {
content: '';
width: 2px;
height: 24px;
@@ -92,32 +92,32 @@
.monaco-workbench .pane-composite-part > .title > .composite-bar-container.dragged-over > .composite-bar > .monaco-action-bar .action-item::before,
.monaco-workbench .pane-composite-part > .title > .composite-bar-container.dragged-over > .composite-bar > .monaco-action-bar .action-item::after,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container.dragged-over > .composite-bar > .monaco-action-bar .action-item::before,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container.dragged-over > .composite-bar > .monaco-action-bar .action-item::after {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container.dragged-over > .composite-bar > .monaco-action-bar .action-item::before,
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container.dragged-over > .composite-bar > .monaco-action-bar .action-item::after {
display: block;
}
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::before,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::before {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::before {
left: 1px;
margin-left: -2px;
}
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::after,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::after {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item::after {
right: 1px;
margin-right: -2px;
}
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:first-of-type::before,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:first-of-type::before {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:first-of-type::before {
left: 2px;
margin-left: -2px;
}
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:last-of-type::after,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:last-of-type::after {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:last-of-type::after {
right: 2px;
margin-right: -2px;
}
@@ -126,10 +126,10 @@
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.left::after,
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.left::before,
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.right::after,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.right::before,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.left::after,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.left::before,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.right::after {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.right::before,
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.left::after,
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.left::before,
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.right::after {
transition-delay: 0s;
}
@@ -138,51 +138,51 @@
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:last-of-type.right::after,
.monaco-workbench .pane-composite-part > .title > .composite-bar-container.dragged-over-head > .composite-bar > .monaco-action-bar .action-item:first-of-type::before,
.monaco-workbench .pane-composite-part > .title > .composite-bar-container.dragged-over-tail > .composite-bar > .monaco-action-bar .action-item:last-of-type::after,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.right + .action-item::before,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.left::before,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:last-of-type.right::after,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container.dragged-over-head > .composite-bar > .monaco-action-bar .action-item:first-of-type::before,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container.dragged-over-tail > .composite-bar > .monaco-action-bar .action-item:last-of-type::after {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.right + .action-item::before,
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.left::before,
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:last-of-type.right::after,
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container.dragged-over-head > .composite-bar > .monaco-action-bar .action-item:first-of-type::before,
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container.dragged-over-tail > .composite-bar > .monaco-action-bar .action-item:last-of-type::after {
opacity: 1;
}
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .action-label,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .action-label {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .action-label {
margin-right: 0;
padding: 2px;
}
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .action-label,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .action-label {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .action-label {
border-radius: 0;
}
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.icon) .action-label,
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .action-label.codicon,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.icon) .action-label,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .action-label.codicon {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.icon) .action-label,
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .action-label.codicon {
background: none !important;
}
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label {
margin-right: 0;
}
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .badge,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .badge {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .badge {
margin-left: 8px;
display: flex;
align-items: center;
}
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge {
margin-left: 0px;
}
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .badge .badge-content,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .badge .badge-content {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .badge .badge-content {
padding: 3px 5px;
border-radius: 11px;
font-size: 11px;
@@ -197,7 +197,7 @@
}
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact {
position: absolute;
top: 0;
bottom: 0;
@@ -210,7 +210,7 @@
}
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact .badge-content,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact .badge-content {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact .badge-content {
position: absolute;
top: 11px;
right: 0px;
@@ -225,7 +225,7 @@
}
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact.progress-badge .badge-content::before,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact.progress-badge .badge-content::before {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .badge.compact.progress-badge .badge-content::before {
mask-size: 11px;
-webkit-mask-size: 11px;
top: 3px;
@@ -234,7 +234,7 @@
/* active item indicator */
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .active-item-indicator,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .active-item-indicator {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .active-item-indicator {
position: absolute;
z-index: 1;
bottom: 0;
@@ -244,14 +244,14 @@
}
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .active-item-indicator,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .active-item-indicator {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .active-item-indicator {
top: -4px;
left: 10px;
width: calc(100% - 20px);
}
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .active-item-indicator,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .active-item-indicator {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .active-item-indicator {
top: 1px;
left: 2px;
width: calc(100% - 4px);
@@ -259,8 +259,8 @@
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .active-item-indicator:before,
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus .active-item-indicator:before,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .active-item-indicator:before,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus .active-item-indicator:before {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .active-item-indicator:before,
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus .active-item-indicator:before {
content: "";
position: absolute;
z-index: 1;
@@ -272,24 +272,24 @@
}
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.clicked:not(.checked):focus .active-item-indicator:before,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.clicked:not(.checked):focus .active-item-indicator:before {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.clicked:not(.checked):focus .active-item-indicator:before {
border-top-color: transparent !important; /* hides border on clicked state */
}
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus .active-item-indicator:before,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus .active-item-indicator:before {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus .active-item-indicator:before {
border-top-color: var(--vscode-focusBorder) !important;
}
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label,
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label,
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label {
outline: var(--vscode-contrastActiveBorder, unset) solid 1px !important;
}
.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.checked):hover .action-label,
.monaco-workbench .pane-composite-part > .composite-bar-area > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.checked):hover .action-label {
.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.checked):hover .action-label {
outline: var(--vscode-contrastActiveBorder, unset) dashed 1px !important;
}
src/vs/workbench/browser/parts/paneCompositePart.ts
+26 -18
View File
@@ -114,8 +114,8 @@ export abstract class AbstractPaneCompositePart extends CompositePart<PaneCompos
private readonly location: ViewContainerLocation;
private titleContainer: HTMLElement | undefined;
private separateCompositeBarContainer: HTMLElement | undefined;
private separateCompositeBarDispoables = this._register(new DisposableStore());
private headerFooterCompositeBarContainer: HTMLElement | undefined;
private headerFooterCompositeBarDispoables = this._register(new DisposableStore());
private paneCompositeBarContainer: HTMLElement | undefined;
private paneCompositeBar = this._register(new MutableDisposable<PaneCompositeBar>());
private compositeBarPosition: CompositeBarPosition | undefined = undefined;
@@ -353,7 +353,7 @@ export abstract class AbstractPaneCompositePart extends CompositePart<PaneCompos
// Remove old composite bar
if (wasCompositeBarVisible) {
const previousCompositeBarContainer = previousPosition === CompositeBarPosition.TITLE ? this.titleContainer : this.separateCompositeBarContainer;
const previousCompositeBarContainer = previousPosition === CompositeBarPosition.TITLE ? this.titleContainer : this.headerFooterCompositeBarContainer;
if (!this.paneCompositeBarContainer || !this.paneCompositeBar.value || !previousCompositeBarContainer) {
throw new Error('Composite bar containers should exist when removing the previous composite bar');
}
@@ -364,13 +364,15 @@ export abstract class AbstractPaneCompositePart extends CompositePart<PaneCompos
previousCompositeBarContainer.classList.remove('has-composite-bar');
if (previousPosition !== CompositeBarPosition.TITLE) {
this.removeCompositeBarArea();
if (previousPosition === CompositeBarPosition.TOP) {
this.removeFooterHeaderArea(true);
} else if (previousPosition === CompositeBarPosition.BOTTOM) {
this.removeFooterHeaderArea(false);
}
}
// Create new composite bar
const newCompositeBarContainer = newPosition === CompositeBarPosition.TITLE ? this.titleContainer : this.createCompositeBarArea();
const newCompositeBarContainer = newPosition === CompositeBarPosition.TITLE ? this.titleContainer : this.createHeaderFooterCompositeBarArea();
if (isCompositeBarVisible) {
if (this.paneCompositeBarContainer || this.paneCompositeBar.value || !newCompositeBarContainer) {
@@ -382,33 +384,39 @@ export abstract class AbstractPaneCompositePart extends CompositePart<PaneCompos
this.paneCompositeBar.value = this.createCompositeBar();
this.paneCompositeBar.value.create(this.paneCompositeBarContainer);
if (newPosition !== CompositeBarPosition.TITLE) {
this.setCompositeBarArea(newCompositeBarContainer, newPosition === CompositeBarPosition.BOTTOM ? 'bottom' : 'top');
if (newPosition === CompositeBarPosition.TOP) {
this.setHeaderArea(newCompositeBarContainer);
} else if (newPosition === CompositeBarPosition.BOTTOM) {
this.setFooterArea(newCompositeBarContainer);
}
}
this.compositeBarPosition = newPosition;
}
protected override createCompositeBarArea(): HTMLElement {
const compositeBarArea = super.createCompositeBarArea();
this.separateCompositeBarContainer = compositeBarArea;
protected override createHeaderFooterCompositeBarArea(): HTMLElement {
const compositeBarArea = super.createHeaderFooterCompositeBarArea();
this.headerFooterCompositeBarContainer = compositeBarArea;
this.separateCompositeBarDispoables.add(addDisposableListener(compositeBarArea, EventType.CONTEXT_MENU, e => {
this.headerFooterCompositeBarDispoables.add(addDisposableListener(compositeBarArea, EventType.CONTEXT_MENU, e => {
this.onCompositeBarAreaContextMenu(new StandardMouseEvent(getWindow(compositeBarArea), e));
}));
this.separateCompositeBarDispoables.add(Gesture.addTarget(compositeBarArea));
this.separateCompositeBarDispoables.add(addDisposableListener(compositeBarArea, GestureEventType.Contextmenu, e => {
this.headerFooterCompositeBarDispoables.add(Gesture.addTarget(compositeBarArea));
this.headerFooterCompositeBarDispoables.add(addDisposableListener(compositeBarArea, GestureEventType.Contextmenu, e => {
this.onCompositeBarAreaContextMenu(new StandardMouseEvent(getWindow(compositeBarArea), e));
}));
return compositeBarArea;
}
protected override removeCompositeBarArea(): void {
this.separateCompositeBarContainer = undefined;
this.separateCompositeBarDispoables.clear();
super.removeCompositeBarArea();
private removeFooterHeaderArea(header: boolean): void {
this.headerFooterCompositeBarContainer = undefined;
this.headerFooterCompositeBarDispoables.clear();
if (header) {
this.removeHeaderArea();
} else {
this.removeFooterArea();
}
}
protected createCompositeBar(): PaneCompositeBar {