From fa1bcc909cb6ce37b01ee6871cfec5ee98e12533 Mon Sep 17 00:00:00 2001 From: Alex Dima Date: Thu, 4 May 2017 12:44:03 +0200 Subject: [PATCH] Extract text area related CSS to textAreaHandler.css --- .../browser/controller/textAreaHandler.css | 42 ++++++++++++++++++ .../browser/controller/textAreaHandler.ts | 6 +-- src/vs/editor/browser/view/viewImpl.ts | 3 +- src/vs/editor/browser/widget/media/editor.css | 44 +------------------ .../editor/common/view/editorColorRegistry.ts | 2 +- 5 files changed, 49 insertions(+), 48 deletions(-) create mode 100644 src/vs/editor/browser/controller/textAreaHandler.css diff --git a/src/vs/editor/browser/controller/textAreaHandler.css b/src/vs/editor/browser/controller/textAreaHandler.css new file mode 100644 index 00000000000..e4c5188f7d3 --- /dev/null +++ b/src/vs/editor/browser/controller/textAreaHandler.css @@ -0,0 +1,42 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +.monaco-editor .inputarea { + /*Chrome cannot handle typing in a 0x0 textarea*/ + width: 1px; + height: 1px; + min-width: 0; + min-height: 0; + margin: 0; + padding: 0; + position: absolute; + outline: none !important; + resize: none; + border: none; + overflow: hidden; +} +/*.monaco-editor .inputarea { + position: fixed !important; + width: 800px !important; + height: 500px !important; + top: initial !important; + left: initial !important; + bottom: 0 !important; + right: 0 !important; +}*/ +.monaco-editor.ff .inputarea, +.monaco-editor.ie .inputarea { + width: 0; + height: 0; +} +.monaco-editor .ime-input.inputarea { + z-index: 10; +} +.monaco-editor .ime-input.inputarea { + background: rgba(255, 255, 255, 0.85); +} +.monaco-editor.vs-dark .ime-input.inputarea { + background: rgba(0, 0, 0, 0.65); +} diff --git a/src/vs/editor/browser/controller/textAreaHandler.ts b/src/vs/editor/browser/controller/textAreaHandler.ts index 90c12809f3e..22bf4288df3 100644 --- a/src/vs/editor/browser/controller/textAreaHandler.ts +++ b/src/vs/editor/browser/controller/textAreaHandler.ts @@ -4,6 +4,7 @@ *--------------------------------------------------------------------------------------------*/ 'use strict'; +import 'vs/css!./textAreaHandler'; import * as browser from 'vs/base/browser/browser'; import * as dom from 'vs/base/browser/dom'; import { TextAreaInput, ITextAreaInputHost, IPasteData, ICompositionData } from 'vs/editor/browser/controller/textAreaInput'; @@ -24,7 +25,6 @@ import { Margin } from "vs/editor/browser/viewParts/margin/margin"; import { LineNumbersOverlay } from "vs/editor/browser/viewParts/lineNumbers/lineNumbers"; export interface ITextAreaHandlerHelper { - viewDomNode: FastDomNode; visibleRangeForPositionRelativeToEditor(lineNumber: number, column: number): HorizontalRange; getVerticalOffsetForLineNumber(lineNumber: number): number; } @@ -228,7 +228,7 @@ export class TextAreaHandler extends ViewEventHandler { // Show the textarea this.textArea.setHeight(this._context.configuration.editor.lineHeight); - this._viewHelper.viewDomNode.addClassName('ime-input'); + this.textArea.setClassName('inputarea ime-input'); this._viewController.compositionStart('keyboard'); })); @@ -261,7 +261,7 @@ export class TextAreaHandler extends ViewEventHandler { this.textArea.unsetWidth(); this.textArea.setLeft(0); this.textArea.setTop(0); - this._viewHelper.viewDomNode.removeClassName('ime-input'); + this.textArea.setClassName('inputarea'); this._visiblePosition = null; diff --git a/src/vs/editor/browser/view/viewImpl.ts b/src/vs/editor/browser/view/viewImpl.ts index c2dbbd4c6ce..97f14e18708 100644 --- a/src/vs/editor/browser/view/viewImpl.ts +++ b/src/vs/editor/browser/view/viewImpl.ts @@ -83,7 +83,7 @@ export class View extends ViewEventHandler { private readonly _textAreaHandler: TextAreaHandler; private readonly pointerHandler: PointerHandler; - private outgoingEvents: ViewOutgoingEvents; + private readonly outgoingEvents: ViewOutgoingEvents; // Dom nodes private linesContent: FastDomNode; @@ -302,7 +302,6 @@ export class View extends ViewEventHandler { private createTextAreaHandlerHelper(): ITextAreaHandlerHelper { return { - viewDomNode: this.domNode, visibleRangeForPositionRelativeToEditor: (lineNumber: number, column: number) => { this._flushAccumulatedAndRenderNow(); let visibleRanges = this.viewLines.visibleRangesForRange2(new Range(lineNumber, column, lineNumber, column)); diff --git a/src/vs/editor/browser/widget/media/editor.css b/src/vs/editor/browser/widget/media/editor.css index 90a691620e8..e47af5c00c7 100644 --- a/src/vs/editor/browser/widget/media/editor.css +++ b/src/vs/editor/browser/widget/media/editor.css @@ -15,7 +15,7 @@ color: inherit; } -/* -------------------- Editor, inputarea and background -------------------- */ +/* -------------------- Editor -------------------- */ .monaco-editor { position: relative; @@ -29,40 +29,8 @@ -webkit-font-feature-settings: "liga" on, "calt" on; font-feature-settings: "liga" on, "calt" on; } -.monaco-editor .inputarea { - /*Chrome cannot handle typing in a 0x0 textarea*/ - width: 1px; - height: 1px; - min-width: 0; - min-height: 0; - margin: 0; - padding: 0; - position: absolute; - outline: none !important; - resize: none; - border: none; - overflow: hidden; -} -/*.monaco-editor .inputarea { - position: fixed !important; - width: 800px !important; - height: 200px !important; - top: initial !important; - left: initial !important; - bottom: 0 !important; - right: 0 !important; -}*/ -.monaco-editor.ff .inputarea, -.monaco-editor.ie .inputarea { - width: 0; - height: 0; -} -.monaco-editor.ime-input .inputarea { - z-index: 10; -} -.monaco-editor, -.monaco-editor .inputarea { +.monaco-editor { color: #333; /* * WORKAROUND: @@ -71,22 +39,14 @@ */ background: #fffffe; } -.monaco-editor.ime-input .inputarea { - background: rgba(255, 255, 255, 0.85); -} .monaco-editor.vs-dark, -.monaco-editor.vs-dark .inputarea, .monaco-editor.vs-dark .zone-widget .monaco-editor { color: #BBB; background: #1E1E1E; } -.monaco-editor.vs-dark.ime-input .inputarea { - background: rgba(0, 0, 0, 0.65); -} .monaco-editor.hc-black, -.monaco-editor.hc-black .inputarea, .monaco-editor.hc-black .zone-widget .monaco-editor { color: #fff; background: #000; diff --git a/src/vs/editor/common/view/editorColorRegistry.ts b/src/vs/editor/common/view/editorColorRegistry.ts index e6a96f19043..1dd21ca5506 100644 --- a/src/vs/editor/common/view/editorColorRegistry.ts +++ b/src/vs/editor/common/view/editorColorRegistry.ts @@ -25,7 +25,7 @@ registerThemingParticipant((theme, collector) => { let background = theme.getColor(editorBackground); if (background) { - collector.addRule(`.monaco-editor.${theme.selector} .monaco-editor-background { background-color: ${background}; }`); + collector.addRule(`.monaco-editor.${theme.selector} .monaco-editor-background, .monaco-editor.${theme.selector} .inputarea { background-color: ${background}; }`); } let foreground = theme.getColor(editorForeground); if (foreground) { -- GitLab