Skip to content

Commit a1bd86c

Browse files
octrefoctref
committed
Simple StatusBar for suggest
1 parent 38549a6 commit a1bd86c

6 files changed

Lines changed: 97 additions & 7 deletions

File tree

‎src/vs/editor/common/config/editorOptions.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2668,6 +2668,10 @@ export interface ISuggestOptions {
26682668
* Show snippet-suggestions.
26692669
*/
26702670
showSnippets?: boolean;
2671+
/**
2672+
* Controls the visibility of the status bar at the bottom of the suggest widget.
2673+
*/
2674+
hideStatusBar?: boolean;
26712675
}
26722676

26732677
export type InternalSuggestOptions = Readonly<Required<ISuggestOptions>>;
@@ -2709,6 +2713,7 @@ class EditorSuggest extends BaseEditorOption<EditorOption.suggest, InternalSugge
27092713
showFolders: true,
27102714
showTypeParameters: true,
27112715
showSnippets: true,
2716+
hideStatusBar: true
27122717
};
27132718
super(
27142719
EditorOption.suggest, 'suggest', defaults,
@@ -2893,6 +2898,11 @@ class EditorSuggest extends BaseEditorOption<EditorOption.suggest, InternalSugge
28932898
type: 'boolean',
28942899
default: true,
28952900
markdownDescription: nls.localize('editor.suggest.showSnippets', "When enabled IntelliSense shows `snippet`-suggestions.")
2901+
},
2902+
'editor.suggest.hideStatusBar': {
2903+
type: 'boolean',
2904+
default: true,
2905+
markdownDescription: nls.localize('editor.suggest.hideStatusBar', "Controls the visibility of the status bar at the bottom of the suggest widget.")
28962906
}
28972907
}
28982908
);
@@ -2937,6 +2947,7 @@ class EditorSuggest extends BaseEditorOption<EditorOption.suggest, InternalSugge
29372947
showFolders: EditorBooleanOption.boolean(input.showFolders, this.defaultValue.showFolders),
29382948
showTypeParameters: EditorBooleanOption.boolean(input.showTypeParameters, this.defaultValue.showTypeParameters),
29392949
showSnippets: EditorBooleanOption.boolean(input.showSnippets, this.defaultValue.showSnippets),
2950+
hideStatusBar: EditorBooleanOption.boolean(input.hideStatusBar, this.defaultValue.hideStatusBar),
29402951
};
29412952
}
29422953
}

‎src/vs/editor/contrib/suggest/media/suggest.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,49 @@
111111
font-weight: bold;
112112
}
113113

114+
/** Status Bar **/
115+
116+
.monaco-editor .suggest-widget > .tree {
117+
margin-bottom: 18px;
118+
}
119+
.monaco-editor .suggest-widget > .suggest-status-bar {
120+
visibility: hidden;
121+
122+
position: absolute;
123+
left: 0;
124+
125+
box-sizing: border-box;
126+
127+
display: flex;
128+
flex-flow: row nowrap;
129+
justify-content: space-between;
130+
131+
width: 100%;
132+
133+
font-size: 80%;
134+
135+
border-left-width: 1px;
136+
border-left-style: solid;
137+
border-right-width: 1px;
138+
border-right-style: solid;
139+
border-bottom-width: 1px;
140+
border-bottom-style: solid;
141+
142+
padding: 1px 8px 1px 4px;
143+
144+
box-shadow: 0 -.5px 3px #ddd;
145+
}
146+
.monaco-editor .suggest-widget > .suggest-status-bar span {
147+
opacity: 0.7;
148+
}
149+
.monaco-editor .suggest-widget.list-right.docs-side > .suggest-status-bar {
150+
left: auto;
151+
right: 0;
152+
}
153+
.monaco-editor .suggest-widget.docs-side > .suggest-status-bar {
154+
width: 50%;
155+
}
156+
114157
/** ReadMore Icon styles **/
115158

116159
.monaco-editor .suggest-widget .details > .monaco-scrollable-element > .body > .header > .codicon-close,

‎src/vs/editor/contrib/suggest/media/suggestStatusBar.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/*---------------------------------------------------------------------------------------------
2+
* Copyright (c) Microsoft Corporation. All rights reserved.
3+
* Licensed under the MIT License. See License.txt in the project root for license information.
4+
*--------------------------------------------------------------------------------------------*/
5+
6+
/* Suggest widget*/
7+
.monaco-editor .suggest-widget.with-status-bar .suggest-status-bar {
8+
visibility: visible;
9+
}

‎src/vs/editor/contrib/suggest/suggestController.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ import { SuggestRangeHighlighter } from 'vs/editor/contrib/suggest/suggestRangeH
4343
* Stop suggest widget from disappearing when clicking into other areas
4444
* For development purpose only
4545
*/
46-
const _sticky = false;
46+
const _sticky = true;
4747

4848
class LineSuffix {
4949

‎src/vs/editor/contrib/suggest/suggestWidget.ts‎

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
*--------------------------------------------------------------------------------------------*/
55

66
import 'vs/css!./media/suggest';
7+
import 'vs/css!./media/suggestStatusBar';
78
import 'vs/base/browser/ui/codiconLabel/codiconLabel'; // The codicon symbol styles are defined here and must be loaded
89
import 'vs/editor/contrib/documentSymbols/outlineTree'; // The codicon symbol colors are defined here and must be loaded
910
import * as nls from 'vs/nls';
@@ -479,6 +480,9 @@ export class SuggestWidget implements IContentWidget, IListVirtualDelegate<Compl
479480
private element: HTMLElement;
480481
private messageElement: HTMLElement;
481482
private listElement: HTMLElement;
483+
private statusBarElement: HTMLElement;
484+
private statusBarLeftSpan: HTMLSpanElement;
485+
private statusBarRightSpan: HTMLSpanElement;
482486
private details: SuggestionDetails;
483487
private list: List<CompletionItem>;
484488
private listHeight?: number;
@@ -542,6 +546,17 @@ export class SuggestWidget implements IContentWidget, IListVirtualDelegate<Compl
542546

543547
this.messageElement = append(this.element, $('.message'));
544548
this.listElement = append(this.element, $('.tree'));
549+
550+
const applyStatusBarStyle = () => toggleClass(this.element, 'with-status-bar', !this.editor.getOption(EditorOption.suggest).hideStatusBar);
551+
applyStatusBarStyle();
552+
553+
this.statusBarElement = append(this.element, $('.suggest-status-bar'));
554+
this.statusBarLeftSpan = append(this.statusBarElement, $('span'));
555+
this.statusBarRightSpan = append(this.statusBarElement, $('span'));
556+
557+
this.statusBarLeftSpan.innerText = 'Enter to insert, Tab to replace';
558+
this.statusBarRightSpan.innerText = 'Read more... (⌃Space)';
559+
545560
this.details = instantiationService.createInstance(SuggestionDetails, this.element, this, this.editor, markdownRenderer, triggerKeybindingLabel);
546561

547562
const applyIconStyle = () => toggleClass(this.element, 'no-icons', !this.editor.getOption(EditorOption.suggest).showIcons);
@@ -582,7 +597,12 @@ export class SuggestWidget implements IContentWidget, IListVirtualDelegate<Compl
582597
this.toDispose.add(this.list.onSelectionChange(e => this.onListSelection(e)));
583598
this.toDispose.add(this.list.onFocusChange(e => this.onListFocus(e)));
584599
this.toDispose.add(this.editor.onDidChangeCursorSelection(() => this.onCursorSelectionChanged()));
585-
this.toDispose.add(this.editor.onDidChangeConfiguration(e => { if (e.hasChanged(EditorOption.suggest)) { applyIconStyle(); } }));
600+
this.toDispose.add(this.editor.onDidChangeConfiguration(e => {
601+
if (e.hasChanged(EditorOption.suggest)) {
602+
applyStatusBarStyle();
603+
applyIconStyle();
604+
}
605+
}));
586606

587607
this.suggestWidgetVisible = SuggestContext.Visible.bindTo(contextKeyService);
588608
this.suggestWidgetMultipleSuggestions = SuggestContext.MultipleSuggestions.bindTo(contextKeyService);
@@ -661,12 +681,14 @@ export class SuggestWidget implements IContentWidget, IListVirtualDelegate<Compl
661681
const backgroundColor = theme.getColor(editorSuggestWidgetBackground);
662682
if (backgroundColor) {
663683
this.listElement.style.backgroundColor = backgroundColor.toString();
684+
this.statusBarElement.style.backgroundColor = backgroundColor.toString();
664685
this.details.element.style.backgroundColor = backgroundColor.toString();
665686
this.messageElement.style.backgroundColor = backgroundColor.toString();
666687
}
667688
const borderColor = theme.getColor(editorSuggestWidgetBorder);
668689
if (borderColor) {
669690
this.listElement.style.borderColor = borderColor.toString();
691+
this.statusBarElement.style.borderColor = borderColor.toString();
670692
this.details.element.style.borderColor = borderColor.toString();
671693
this.messageElement.style.borderColor = borderColor.toString();
672694
this.detailsBorderColor = borderColor.toString();
@@ -759,7 +781,7 @@ export class SuggestWidget implements IContentWidget, IListVirtualDelegate<Compl
759781

760782
switch (state) {
761783
case State.Hidden:
762-
hide(this.messageElement, this.details.element, this.listElement);
784+
hide(this.messageElement, this.details.element, this.listElement, this.statusBarElement);
763785
this.hide();
764786
this.listHeight = 0;
765787
if (stateChanged) {
@@ -769,23 +791,23 @@ export class SuggestWidget implements IContentWidget, IListVirtualDelegate<Compl
769791
break;
770792
case State.Loading:
771793
this.messageElement.textContent = SuggestWidget.LOADING_MESSAGE;
772-
hide(this.listElement, this.details.element);
794+
hide(this.listElement, this.details.element, this.statusBarElement);
773795
show(this.messageElement);
774796
removeClass(this.element, 'docs-side');
775797
this.show();
776798
this.focusedItem = null;
777799
break;
778800
case State.Empty:
779801
this.messageElement.textContent = SuggestWidget.NO_SUGGESTIONS_MESSAGE;
780-
hide(this.listElement, this.details.element);
802+
hide(this.listElement, this.details.element, this.statusBarElement);
781803
show(this.messageElement);
782804
removeClass(this.element, 'docs-side');
783805
this.show();
784806
this.focusedItem = null;
785807
break;
786808
case State.Open:
787809
hide(this.messageElement);
788-
show(this.listElement);
810+
show(this.listElement, this.statusBarElement);
789811
this.show();
790812
break;
791813
case State.Frozen:
@@ -795,7 +817,7 @@ export class SuggestWidget implements IContentWidget, IListVirtualDelegate<Compl
795817
break;
796818
case State.Details:
797819
hide(this.messageElement);
798-
show(this.details.element, this.listElement);
820+
show(this.details.element, this.listElement, this.statusBarElement);
799821
this.show();
800822
break;
801823
}
@@ -1119,6 +1141,7 @@ export class SuggestWidget implements IContentWidget, IListVirtualDelegate<Compl
11191141

11201142
this.element.style.lineHeight = `${this.unfocusedHeight}px`;
11211143
this.listElement.style.height = `${height}px`;
1144+
this.statusBarElement.style.top = `${height}px`;
11221145
this.list.layout(height);
11231146
return height;
11241147
}

‎src/vs/monaco.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3657,6 +3657,10 @@ declare namespace monaco.editor {
36573657
* Show snippet-suggestions.
36583658
*/
36593659
showSnippets?: boolean;
3660+
/**
3661+
* Controls the visibility of the status bar at the bottom of the suggest widget.
3662+
*/
3663+
hideStatusBar?: boolean;
36603664
}
36613665

36623666
export type InternalSuggestOptions = Readonly<Required<ISuggestOptions>>;

0 commit comments

Comments
 (0)