mirror of
https://github.com/Microsoft/vscode
synced 2024-10-30 01:37:20 +00:00
fadeIn/Out editor message widget
This commit is contained in:
parent
85b3aa52fa
commit
4d24398faf
2 changed files with 34 additions and 1 deletions
|
@ -7,6 +7,22 @@
|
|||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
.monaco-editor .monaco-editor-overlaymessage.fadeIn {
|
||||
animation: fadeIn 150ms ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
.monaco-editor .monaco-editor-overlaymessage.fadeOut {
|
||||
animation: fadeOut 100ms ease-out;
|
||||
}
|
||||
|
||||
.monaco-editor .monaco-editor-overlaymessage .message {
|
||||
padding: 1px 4px;
|
||||
background: #1382CE;
|
||||
|
|
|
@ -33,6 +33,7 @@ export class MessageController {
|
|||
|
||||
private _editor: ICodeEditor;
|
||||
private _visible: IContextKey<boolean>;
|
||||
private _messageWidget: MessageWidget;
|
||||
private _messageListeners: IDisposable[] = [];
|
||||
|
||||
constructor(
|
||||
|
@ -50,8 +51,9 @@ export class MessageController {
|
|||
showMessage(message: string, position: editorCommon.IPosition): void {
|
||||
|
||||
this._visible.set(true);
|
||||
dispose(this._messageWidget);
|
||||
this._messageListeners = dispose(this._messageListeners);
|
||||
this._messageListeners.push(new MessageWidget(this._editor, position, message));
|
||||
this._messageWidget = new MessageWidget(this._editor, position, message);
|
||||
|
||||
// close on blur, cursor, model change, dispose
|
||||
this._messageListeners.push(any<any>(
|
||||
|
@ -85,6 +87,7 @@ export class MessageController {
|
|||
closeMessage(): void {
|
||||
this._visible.reset();
|
||||
this._messageListeners = dispose(this._messageListeners);
|
||||
this._messageListeners.push(MessageWidget.fadeOut(this._messageWidget));
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -110,6 +113,19 @@ class MessageWidget implements IContentWidget {
|
|||
private _position: editorCommon.IPosition;
|
||||
private _domNode: HTMLDivElement;
|
||||
|
||||
static fadeOut(messageWidget: MessageWidget): IDisposable {
|
||||
let handle: number;
|
||||
const dispose = () => {
|
||||
messageWidget.dispose();
|
||||
clearTimeout(handle);
|
||||
messageWidget.getDomNode().removeEventListener('animationend', dispose);
|
||||
};
|
||||
handle = setTimeout(dispose, 110);
|
||||
messageWidget.getDomNode().addEventListener('animationend', dispose);
|
||||
messageWidget.getDomNode().classList.add('fadeOut');
|
||||
return { dispose };
|
||||
}
|
||||
|
||||
constructor(editor: ICodeEditor, { lineNumber, column }: editorCommon.IPosition, text: string) {
|
||||
|
||||
this._editor = editor;
|
||||
|
@ -130,6 +146,7 @@ class MessageWidget implements IContentWidget {
|
|||
this._domNode.appendChild(anchor);
|
||||
|
||||
this._editor.addContentWidget(this);
|
||||
this._domNode.classList.add('fadeIn');
|
||||
}
|
||||
|
||||
dispose() {
|
||||
|
|
Loading…
Reference in a new issue