mirror of
https://github.com/Microsoft/vscode
synced 2024-10-12 06:17:18 +00:00
status - use flex over float: right ftw
This commit is contained in:
Benjamin Pasero
parent
7af0fa1cf8
commit
c86be1a5a0
|
|
@ -58,7 +58,7 @@
|
|||
cursor: zoom-out;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.statusbar > .statusbar-item > a.zoom-statusbar-item {
|
||||
.monaco-workbench .part.statusbar > .items-container > .statusbar-item > a.zoom-statusbar-item {
|
||||
padding: 0 5px 0 5px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,20 +9,35 @@
|
|||
width: 100%;
|
||||
height: 22px;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.statusbar > .statusbar-item {
|
||||
.monaco-workbench .part.statusbar > .left-items,
|
||||
.monaco-workbench .part.statusbar > .right-items {
|
||||
display: flex;
|
||||
flex-wrap: wrap; /* individual entries should not shrink since we do not control their content */
|
||||
}
|
||||
|
||||
.monaco-workbench .part.statusbar > .right-items {
|
||||
flex-direction: row-reverse; /* ensures that the most right elements wrap last when space is little */
|
||||
}
|
||||
|
||||
.monaco-workbench .part.statusbar > .left-items {
|
||||
flex-grow: 1; /* left items push right items to the far right end */
|
||||
}
|
||||
|
||||
.monaco-workbench .part.statusbar > .items-container > .statusbar-item {
|
||||
display: inline-block;
|
||||
line-height: 22px;
|
||||
height: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.statusbar > .statusbar-item.has-beak {
|
||||
.monaco-workbench .part.statusbar > .items-container > .statusbar-item.has-beak {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.statusbar > .statusbar-item.has-beak:before {
|
||||
.monaco-workbench .part.statusbar > .items-container > .statusbar-item.has-beak:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 11px;
|
||||
|
|
@ -33,58 +48,54 @@
|
|||
border-right: 5px solid transparent;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.statusbar > .statusbar-item > :first-child {
|
||||
.monaco-workbench .part.statusbar > .items-container > .statusbar-item > :first-child {
|
||||
margin-right: 3px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.statusbar > .statusbar-item.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.statusbar > .statusbar-item.left.first-visible-item {
|
||||
.monaco-workbench .part.statusbar > .items-container > .statusbar-item.left.first-visible-item {
|
||||
padding-left: 7px; /* Add padding to the most left status bar item */
|
||||
}
|
||||
|
||||
.monaco-workbench .part.statusbar > .statusbar-item.right.last-visible-item {
|
||||
.monaco-workbench .part.statusbar > .items-container > .statusbar-item.right.last-visible-item {
|
||||
padding-right: 7px; /* Add padding to the most right status bar item */
|
||||
}
|
||||
|
||||
/* tweak appearance for items with background to improve hover feedback */
|
||||
.monaco-workbench .part.statusbar > .statusbar-item.has-background-color.left.first-visible-item,
|
||||
.monaco-workbench .part.statusbar > .statusbar-item.has-background-color.right.last-visible-item {
|
||||
.monaco-workbench .part.statusbar > .items-container > .statusbar-item.has-background-color.left.first-visible-item,
|
||||
.monaco-workbench .part.statusbar > .items-container > .statusbar-item.has-background-color.right.last-visible-item {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.statusbar > .statusbar-item.has-background-color > :first-child {
|
||||
.monaco-workbench .part.statusbar > .items-container > .statusbar-item.has-background-color > :first-child {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.statusbar > .statusbar-item a {
|
||||
.monaco-workbench .part.statusbar > .items-container > .statusbar-item a {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.statusbar > .statusbar-entry > span {
|
||||
.monaco-workbench .part.statusbar > .items-container > .statusbar-entry > span {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.statusbar > .statusbar-entry > span,
|
||||
.monaco-workbench .part.statusbar > .statusbar-entry > a {
|
||||
.monaco-workbench .part.statusbar > .items-container > .statusbar-entry > span,
|
||||
.monaco-workbench .part.statusbar > .items-container > .statusbar-entry > a {
|
||||
padding: 0 5px 0 5px;
|
||||
white-space: pre; /* gives some degree of styling */
|
||||
}
|
||||
|
||||
.monaco-workbench .part.statusbar > .statusbar-entry span.octicon {
|
||||
.monaco-workbench .part.statusbar > .items-container > .statusbar-entry span.octicon {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.statusbar > .statusbar-item a:hover {
|
||||
.monaco-workbench .part.statusbar > .items-container > .statusbar-item a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -335,6 +335,9 @@ export class StatusbarPart extends Part implements IStatusbarService {
|
|||
|
||||
private readonly viewModel: StatusbarViewModel;
|
||||
|
||||
private leftItemsContainer: HTMLElement;
|
||||
private rightItemsContainer: HTMLElement;
|
||||
|
||||
constructor(
|
||||
@IInstantiationService private readonly instantiationService: IInstantiationService,
|
||||
@IThemeService themeService: IThemeService,
|
||||
|
|
@ -436,6 +439,16 @@ export class StatusbarPart extends Part implements IStatusbarService {
|
|||
createContentArea(parent: HTMLElement): HTMLElement {
|
||||
this.element = parent;
|
||||
|
||||
// Left items container
|
||||
this.leftItemsContainer = document.createElement('div');
|
||||
addClasses(this.leftItemsContainer, 'left-items', 'items-container');
|
||||
this.element.appendChild(this.leftItemsContainer);
|
||||
|
||||
// Right items container
|
||||
this.rightItemsContainer = document.createElement('div');
|
||||
addClasses(this.rightItemsContainer, 'right-items', 'items-container');
|
||||
this.element.appendChild(this.rightItemsContainer);
|
||||
|
||||
// Context menu support
|
||||
this._register(addDisposableListener(parent, EventType.CONTEXT_MENU, e => this.showContextMenu(e)));
|
||||
|
||||
|
|
@ -461,7 +474,7 @@ export class StatusbarPart extends Part implements IStatusbarService {
|
|||
this.viewModel.add(viewModelEntry);
|
||||
}
|
||||
|
||||
// Add items in order
|
||||
// Add items in order according to alignment
|
||||
this.appendAllStatusbarEntries();
|
||||
|
||||
// Fill in pending entries if any
|
||||
|
|
@ -478,26 +491,32 @@ export class StatusbarPart extends Part implements IStatusbarService {
|
|||
// Append in order of priority
|
||||
[
|
||||
...this.viewModel.getEntries(StatusbarAlignment.LEFT),
|
||||
...this.viewModel.getEntries(StatusbarAlignment.RIGHT).reverse() // reversing due to display: float
|
||||
].forEach(entry => this.element.appendChild(entry.container));
|
||||
...this.viewModel.getEntries(StatusbarAlignment.RIGHT).reverse() // reversing due to flex: row-reverse
|
||||
].forEach(entry => {
|
||||
const target = entry.alignment === StatusbarAlignment.LEFT ? this.leftItemsContainer : this.rightItemsContainer;
|
||||
|
||||
target.appendChild(entry.container);
|
||||
});
|
||||
}
|
||||
|
||||
private appendOneStatusbarEntry(itemContainer: HTMLElement, alignment: StatusbarAlignment, priority: number): void {
|
||||
const entries = this.viewModel.getEntries(alignment);
|
||||
|
||||
if (alignment === StatusbarAlignment.RIGHT) {
|
||||
entries.reverse(); // reversing due to display: float
|
||||
entries.reverse(); // reversing due to flex: row-reverse
|
||||
}
|
||||
|
||||
const target = alignment === StatusbarAlignment.LEFT ? this.leftItemsContainer : this.rightItemsContainer;
|
||||
|
||||
// find an entry that has lower priority than the new one
|
||||
// and then insert the item before that one
|
||||
let appended = false;
|
||||
for (const entry of entries) {
|
||||
if (
|
||||
alignment === StatusbarAlignment.LEFT && entry.priority < priority ||
|
||||
alignment === StatusbarAlignment.RIGHT && entry.priority > priority
|
||||
alignment === StatusbarAlignment.RIGHT && entry.priority > priority // reversing due to flex: row-reverse
|
||||
) {
|
||||
this.element.insertBefore(itemContainer, entry.container);
|
||||
target.insertBefore(itemContainer, entry.container);
|
||||
appended = true;
|
||||
break;
|
||||
}
|
||||
|
|
@ -505,7 +524,7 @@ export class StatusbarPart extends Part implements IStatusbarService {
|
|||
|
||||
// Fallback to just appending otherwise
|
||||
if (!appended) {
|
||||
this.element.appendChild(itemContainer);
|
||||
target.appendChild(itemContainer);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -588,7 +607,7 @@ export class StatusbarPart extends Part implements IStatusbarService {
|
|||
this.styleElement = createStyleSheet(container);
|
||||
}
|
||||
|
||||
this.styleElement.innerHTML = `.monaco-workbench .part.statusbar > .statusbar-item.has-beak:before { border-bottom-color: ${backgroundColor}; }`;
|
||||
this.styleElement.innerHTML = `.monaco-workbench .part.statusbar > .items-container > .statusbar-item.has-beak:before { border-bottom-color: ${backgroundColor}; }`;
|
||||
}
|
||||
|
||||
private doCreateStatusItem(id: string, name: string, alignment: StatusbarAlignment, priority: number = 0, ...extraClasses: string[]): HTMLElement {
|
||||
|
|
@ -724,27 +743,27 @@ class StatusbarEntryItem extends Disposable {
|
|||
registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
|
||||
const statusBarItemHoverBackground = theme.getColor(STATUS_BAR_ITEM_HOVER_BACKGROUND);
|
||||
if (statusBarItemHoverBackground) {
|
||||
collector.addRule(`.monaco-workbench .part.statusbar > .statusbar-item a:hover { background-color: ${statusBarItemHoverBackground}; }`);
|
||||
collector.addRule(`.monaco-workbench .part.statusbar > .items-container > .statusbar-item a:hover { background-color: ${statusBarItemHoverBackground}; }`);
|
||||
}
|
||||
|
||||
const statusBarItemActiveBackground = theme.getColor(STATUS_BAR_ITEM_ACTIVE_BACKGROUND);
|
||||
if (statusBarItemActiveBackground) {
|
||||
collector.addRule(`.monaco-workbench .part.statusbar > .statusbar-item a:active { background-color: ${statusBarItemActiveBackground}; }`);
|
||||
collector.addRule(`.monaco-workbench .part.statusbar > .items-container > .statusbar-item a:active { background-color: ${statusBarItemActiveBackground}; }`);
|
||||
}
|
||||
|
||||
const statusBarProminentItemForeground = theme.getColor(STATUS_BAR_PROMINENT_ITEM_FOREGROUND);
|
||||
if (statusBarProminentItemForeground) {
|
||||
collector.addRule(`.monaco-workbench .part.statusbar > .statusbar-item .status-bar-info { color: ${statusBarProminentItemForeground}; }`);
|
||||
collector.addRule(`.monaco-workbench .part.statusbar > .items-container > .statusbar-item .status-bar-info { color: ${statusBarProminentItemForeground}; }`);
|
||||
}
|
||||
|
||||
const statusBarProminentItemBackground = theme.getColor(STATUS_BAR_PROMINENT_ITEM_BACKGROUND);
|
||||
if (statusBarProminentItemBackground) {
|
||||
collector.addRule(`.monaco-workbench .part.statusbar > .statusbar-item .status-bar-info { background-color: ${statusBarProminentItemBackground}; }`);
|
||||
collector.addRule(`.monaco-workbench .part.statusbar > .items-container > .statusbar-item .status-bar-info { background-color: ${statusBarProminentItemBackground}; }`);
|
||||
}
|
||||
|
||||
const statusBarProminentItemHoverBackground = theme.getColor(STATUS_BAR_PROMINENT_ITEM_HOVER_BACKGROUND);
|
||||
if (statusBarProminentItemHoverBackground) {
|
||||
collector.addRule(`.monaco-workbench .part.statusbar > .statusbar-item a.status-bar-info:hover { background-color: ${statusBarProminentItemHoverBackground}; }`);
|
||||
collector.addRule(`.monaco-workbench .part.statusbar > .items-container > .statusbar-item a.status-bar-info:hover { background-color: ${statusBarProminentItemHoverBackground}; }`);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ export class StatusBarColorProvider extends Themable implements IWorkbenchContri
|
|||
this.styleElement = createStyleSheet(container);
|
||||
}
|
||||
|
||||
this.styleElement.innerHTML = `.monaco-workbench .part.statusbar > .statusbar-item.has-beak:before { border-bottom-color: ${backgroundColor} !important; }`;
|
||||
this.styleElement.innerHTML = `.monaco-workbench .part.statusbar > .items-container > .statusbar-item.has-beak:before { border-bottom-color: ${backgroundColor} !important; }`;
|
||||
}
|
||||
|
||||
private getColorKey(noFolderColor: string, debuggingColor: string, normalColor: string): string {
|
||||
|
|
@ -115,6 +115,6 @@ export function isStatusbarInDebugMode(debugService: IDebugService): boolean {
|
|||
registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
|
||||
const statusBarItemDebuggingForeground = theme.getColor(STATUS_BAR_DEBUGGING_FOREGROUND);
|
||||
if (statusBarItemDebuggingForeground) {
|
||||
collector.addRule(`.monaco-workbench .part.statusbar.debugging > .statusbar-item .mask-icon { background-color: ${statusBarItemDebuggingForeground} !important; }`);
|
||||
collector.addRule(`.monaco-workbench .part.statusbar.debugging > .items-container > .statusbar-item .mask-icon { background-color: ${statusBarItemDebuggingForeground} !important; }`);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -116,6 +116,6 @@ export class FeedbackStatusbarItem extends Themable implements IStatusbarItem {
|
|||
registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
|
||||
const statusBarItemHoverBackground = theme.getColor(STATUS_BAR_ITEM_HOVER_BACKGROUND);
|
||||
if (statusBarItemHoverBackground) {
|
||||
collector.addRule(`.monaco-workbench .part.statusbar > .statusbar-item .monaco-dropdown.send-feedback:hover { background-color: ${statusBarItemHoverBackground}; }`);
|
||||
collector.addRule(`.monaco-workbench .part.statusbar > .items-container > .statusbar-item .monaco-dropdown.send-feedback:hover { background-color: ${statusBarItemHoverBackground}; }`);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -114,12 +114,12 @@
|
|||
}
|
||||
|
||||
/* Statusbar */
|
||||
.monaco-workbench .statusbar > .statusbar-item > .monaco-dropdown.send-feedback {
|
||||
.monaco-workbench .statusbar > .items-container > .statusbar-item > .monaco-dropdown.send-feedback {
|
||||
display: inline-block;
|
||||
padding: 0 5px 0 5px;
|
||||
}
|
||||
|
||||
.monaco-workbench .statusbar > .statusbar-item > .monaco-dropdown.send-feedback span.octicon {
|
||||
.monaco-workbench .statusbar > .items-container > .statusbar-item > .monaco-dropdown.send-feedback span.octicon {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
.monaco-workbench .part.statusbar > .statusbar-item.progress {
|
||||
.monaco-workbench .part.statusbar > .items-container > .statusbar-item.progress {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.statusbar > .statusbar-item.progress .spinner-container {
|
||||
.monaco-workbench .part.statusbar > .items-container > .statusbar-item.progress .spinner-container {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue