Style non-shadow DOM editor with it’s own style sheet

Trying to style both modes of the text editor with the same style sheet
is proving to be more trouble than it’s worth. This prepares the shadow
DOM style sheet to diverge more radically to enable the background color
to be overridden from the outside more easily.
This commit is contained in:
Nathan Sobo 2014-11-12 13:56:51 -07:00 committed by Ben Ogle
parent 417e00b938
commit 99b08826dd
3 changed files with 210 additions and 8 deletions

View File

@ -1,11 +1,14 @@
{View, $, callRemoveHooks} = require 'space-pen'
React = require 'react-atom-fork'
Path = require 'path'
{defaults} = require 'underscore-plus'
TextBuffer = require 'text-buffer'
TextEditor = require './text-editor'
TextEditorComponent = require './text-editor-component'
TextEditorView = null
ShadowStyleSheet = null
class TextEditorElement extends HTMLElement
model: null
componentDescriptor: null
@ -25,8 +28,13 @@ class TextEditorElement extends HTMLElement
@setAttribute('tabindex', -1)
if atom.config.get('editor.useShadowDOM')
unless ShadowStyleSheet?
ShadowStyleSheet = document.createElement('style')
ShadowStyleSheet.textContent = atom.themes.loadLessStylesheet(require.resolve('../static/text-editor-shadow.less'))
@createShadowRoot()
@shadowRoot.appendChild(ShadowStyleSheet.cloneNode(true))
@stylesElement = document.createElement('atom-styles')
@stylesElement.setAttribute('context', 'atom-text-editor')
@stylesElement.initialize()
@ -42,7 +50,6 @@ class TextEditorElement extends HTMLElement
@rootElement.classList.add('editor', 'editor-colors')
createSpacePenShim: ->
TextEditorView ?= require './text-editor-view'
@__spacePenView = new TextEditorView(this)

View File

@ -249,9 +249,6 @@ class ThemeManager
if nativeStylesheetPath = fs.resolveOnLoadPath(process.platform, ['css', 'less'])
@requireStylesheet(nativeStylesheetPath)
textEditorStylesPath = path.join(@resourcePath, 'static', 'text-editor-shadow.less')
atom.styles.addStyleSheet(@loadLessStylesheet(textEditorStylesPath), sourcePath: textEditorStylesPath, context: 'atom-text-editor')
stylesheetElementForId: (id) ->
document.head.querySelector("atom-styles style[source-path=\"#{id}\"]")

View File

@ -18,8 +18,206 @@ atom-overlay {
z-index: 4;
}
// TODO: remove this when the shadow DOM is the default
atom-text-editor .highlight {
background: none;
padding: 0;
// TODO: Remove the following styles when the editor shadow DOM can no longer be disabled
atom-text-editor {
display: -webkit-flex;
.editor-contents {
width: 100%;
overflow: hidden;
cursor: text;
display: -webkit-flex;
-webkit-user-select: none;
position: relative;
}
.gutter {
overflow: hidden;
text-align: right;
cursor: default;
min-width: 1em;
box-sizing: border-box;
}
.line-numbers {
position: relative;
}
.line-number {
white-space: nowrap;
padding-left: .5em;
opacity: 0.6;
&.cursor-line {
opacity: 1;
}
.icon-right {
.octicon(chevron-down, 0.8em);
display: inline-block;
visibility: hidden;
opacity: .6;
padding: 0 .4em;
&:before {
text-align: center;
}
}
}
.gutter:hover {
.line-number.foldable .icon-right {
visibility: visible;
&:hover {
opacity: 1;
}
}
}
.gutter, .gutter:hover {
.line-number.folded .icon-right {
.octicon(chevron-right, 0.8em);
visibility: visible;
&:before {
position: relative;
left: -.1em;
}
}
}
.scroll-view {
position: relative;
z-index: 0;
overflow: hidden;
-webkit-flex: 1;
min-width: 0;
}
.underlayer {
position: absolute;
z-index: -2;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.highlight {
background: none;
padding: 0;
}
.highlight .region {
position: absolute;
pointer-events: none;
z-index: -1;
}
.lines {
min-width: 100%;
position: relative;
z-index: 1;
}
.line {
white-space: pre;
&.cursor-line .fold-marker:after {
opacity: 1;
}
}
.fold-marker {
cursor: default;
&:after {
.icon(0.8em, inline);
content: @ellipsis;
padding-left: 0.2em;
}
}
.placeholder-text {
position: absolute;
color: @text-color-subtle;
}
.invisible-character {
font-weight: normal !important;
font-style: normal !important;
}
.indent-guide {
box-shadow: inset 1px 0;
}
.hidden-input {
padding: 0;
border: 0;
position: absolute;
z-index: -1;
top: 0;
left: 0;
opacity: 0;
width: 1px;
}
.cursor {
z-index: 4;
pointer-events: none;
box-sizing: border-box;
position: absolute;
border-left: 1px solid;
opacity: 0;
}
&.is-focused .cursor {
opacity: 1;
}
.cursors.blink-off .cursor {
opacity: 0;
}
.horizontal-scrollbar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 15px;
overflow-x: auto;
overflow-y: hidden;
z-index: 3;
cursor: default;
.scrollbar-content {
height: 15px;
}
}
.vertical-scrollbar {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 15px;
overflow-x: hidden;
overflow-y: auto;
z-index: 3;
cursor: default;
}
.scrollbar-corner {
position: absolute;
overflow: auto;
bottom: 0;
right: 0;
}
}