From eebbb99fc886f7861e5396342d30c42edfb7aedb Mon Sep 17 00:00:00 2001 From: Nathan Sobo Date: Mon, 28 Jul 2014 11:23:36 -0600 Subject: [PATCH] Handle editor font config options with a global stylesheet Previously, each editor observed font-related config values on its own and applied inline styles to honor them. This made it difficult to style the editor like a normal element with CSS. Moving this to a global stylesheet that targets editors via the .editor selector means that the font size setting can be overridden in specific contexts, such as when using mini editors. --- spec/editor-component-spec.coffee | 4 ++-- spec/spec-helper.coffee | 2 ++ spec/workspace-view-spec.coffee | 22 +++++++++++++++++++++- src/editor-component.coffee | 3 --- src/workspace-view.coffee | 23 +++++++++++++++++++++++ 5 files changed, 48 insertions(+), 6 deletions(-) diff --git a/spec/editor-component-spec.coffee b/spec/editor-component-spec.coffee index 2e60f3aec..0cffc74da 100644 --- a/spec/editor-component-spec.coffee +++ b/spec/editor-component-spec.coffee @@ -40,6 +40,7 @@ describe "EditorComponent", -> {component} = wrapperView component.performSyncUpdates = false + component.setFontFamily('monospace') component.setLineHeight(1.3) component.setFontSize(20) @@ -1975,7 +1976,7 @@ describe "EditorComponent", -> afterEach -> atom.themes.removeStylesheet('test') - it "does not re-measure character widths until the editor is shown again", -> + fit "does not re-measure character widths until the editor is shown again", -> atom.config.set('editor.fontFamily', 'sans-serif') wrapperView.hide() @@ -1984,7 +1985,6 @@ describe "EditorComponent", -> font-weight: bold; } """ - nextAnimationFrame() wrapperView.show() editor.setCursorBufferPosition([0, Infinity]) diff --git a/spec/spec-helper.coffee b/spec/spec-helper.coffee index 407cbb8a9..80207c952 100644 --- a/spec/spec-helper.coffee +++ b/spec/spec-helper.coffee @@ -130,6 +130,8 @@ afterEach -> atom.project?.destroy() atom.project = null + atom.themes.removeStylesheet('global-editor-styles') + delete atom.state.packageStates $('#jasmine-content').empty() unless window.debugContent diff --git a/spec/workspace-view-spec.coffee b/spec/workspace-view-spec.coffee index 082244f83..92092cc90 100644 --- a/spec/workspace-view-spec.coffee +++ b/spec/workspace-view-spec.coffee @@ -20,7 +20,6 @@ describe "WorkspaceView", -> waitsForPromise -> atom.workspace.open(pathToOpen) - describe "@deserialize()", -> viewState = null @@ -294,3 +293,24 @@ describe "WorkspaceView", -> expect(atom.workspaceView).toHaveClass 'scrollbars-visible-always' scrollbarStyle.emitValue 'overlay' expect(atom.workspaceView).toHaveClass 'scrollbars-visible-when-scrolling' + + describe "editor font styling", -> + editorNode = null + + beforeEach -> + atom.workspaceView.attachToDom() + editorNode = atom.workspaceView.find('.editor')[0] + + it "updates the font-size based on the 'editor.fontSize' config value", -> + expect(getComputedStyle(editorNode).fontSize).toBe atom.config.get('editor.fontSize') + 'px' + atom.config.set('editor.fontSize', atom.config.get('editor.fontSize') + 5) + expect(getComputedStyle(editorNode).fontSize).toBe atom.config.get('editor.fontSize') + 'px' + + it "updates the font-family based on the 'editor.fontFamily' config value", -> + expect(getComputedStyle(editorNode).fontFamily).toBe atom.config.get('editor.fontFamily') + atom.config.set('editor.fontFamily', 'sans-serif') + expect(getComputedStyle(editorNode).fontFamily).toBe atom.config.get('editor.fontFamily') + + it "updates the line-height based on the 'editor.lineHeight' config value", -> + atom.config.set('editor.lineHeight', '20px') + expect(getComputedStyle(editorNode).lineHeight).toBe atom.config.get('editor.lineHeight') diff --git a/src/editor-component.coffee b/src/editor-component.coffee index 7eea4a516..22e3c1ab5 100644 --- a/src/editor-component.coffee +++ b/src/editor-component.coffee @@ -513,9 +513,6 @@ EditorComponent = React.createClass parentView.command command, listener observeConfig: -> - @subscribe atom.config.observe 'editor.fontFamily', @setFontFamily - @subscribe atom.config.observe 'editor.fontSize', @setFontSize - @subscribe atom.config.observe 'editor.lineHeight', @setLineHeight @subscribe atom.config.observe 'editor.showIndentGuide', @setShowIndentGuide @subscribe atom.config.observe 'editor.invisibles', @setInvisibles @subscribe atom.config.observe 'editor.showInvisibles', @setShowInvisibles diff --git a/src/workspace-view.coffee b/src/workspace-view.coffee index f055a0d45..8ad7511aa 100644 --- a/src/workspace-view.coffee +++ b/src/workspace-view.coffee @@ -96,6 +96,11 @@ class WorkspaceView extends View when 'overlay' @addClass("scrollbars-visible-when-scrolling") + + @subscribe atom.config.observe 'editor.fontSize', @setEditorFontSize + @subscribe atom.config.observe 'editor.fontFamily', @setEditorFontFamily + @subscribe atom.config.observe 'editor.lineHeight', @setEditorLineHeight + @updateTitle() @on 'focus', (e) => @handleFocus(e) @@ -340,6 +345,24 @@ class WorkspaceView extends View beforeRemove: -> @model.destroy() + setEditorFontSize: (fontSize) => + @setEditorStyle('font-size', fontSize + 'px') + + setEditorFontFamily: (fontFamily) => + @setEditorStyle('font-family', fontFamily) + + setEditorLineHeight: (lineHeight) => + @setEditorStyle('line-height', lineHeight) + + setEditorStyle: (property, value) -> + unless styleNode = atom.themes.stylesheetElementForId('global-editor-styles')[0] + atom.themes.applyStylesheet('global-editor-styles', '.editor {}') + styleNode = atom.themes.stylesheetElementForId('global-editor-styles')[0] + + editorRule = styleNode.sheet.cssRules[0] + editorRule.style[property] = value + atom.themes.emit 'stylesheets-changed' + # Deprecated eachPane: (callback) -> deprecate("Use WorkspaceView::eachPaneView instead")