Fix cursor line highlight style

This commit is contained in:
Nathan Sobo
2012-11-02 12:16:03 -06:00
parent 4539977800
commit 045cdda41d
4 changed files with 19 additions and 16 deletions

View File

@@ -10,7 +10,7 @@ You can change the background color using the following CSS:
```css
.editor.focused .line.cursor-line,
.editor.focused .line-number.cursor-line-number-background {
.editor.focused .line-number.cursor-line {
background-color: green;
}
```
@@ -18,7 +18,7 @@ You can change the background color using the following CSS:
You can change the line number foreground color using the following CSS:
```css
.editor.focused .line-number.cursor-line-number {
.editor.focused .line-number.cursor-line {
color: blue;
}
```

View File

@@ -1666,14 +1666,14 @@ describe "Editor", ->
describe "when there is no wrapping", ->
it "highlights the line where the initial cursor position is", ->
expect(editor.getCursorBufferPosition().row).toBe 0
expect(editor.find('.line-number.cursor-line-number').length).toBe 1
expect(editor.find('.line-number.cursor-line-number').text()).toBe "1"
expect(editor.find('.line-number.cursor-line').length).toBe 1
expect(editor.find('.line-number.cursor-line').text()).toBe "1"
it "updates the highlighted line when the cursor position changes", ->
editor.setCursorBufferPosition([1,0])
expect(editor.getCursorBufferPosition().row).toBe 1
expect(editor.find('.line-number.cursor-line-number').length).toBe 1
expect(editor.find('.line-number.cursor-line-number').text()).toBe "2"
expect(editor.find('.line-number.cursor-line').length).toBe 1
expect(editor.find('.line-number.cursor-line').text()).toBe "2"
describe "when there is wrapping", ->
beforeEach ->
@@ -1683,14 +1683,14 @@ describe "Editor", ->
it "highlights the line where the initial cursor position is", ->
expect(editor.getCursorBufferPosition().row).toBe 0
expect(editor.find('.line-number.cursor-line-number').length).toBe 1
expect(editor.find('.line-number.cursor-line-number').text()).toBe "1"
expect(editor.find('.line-number.cursor-line').length).toBe 1
expect(editor.find('.line-number.cursor-line').text()).toBe "1"
it "updates the highlighted line when the cursor position changes", ->
editor.setCursorBufferPosition([1,0])
expect(editor.getCursorBufferPosition().row).toBe 1
expect(editor.find('.line-number.cursor-line-number').length).toBe 1
expect(editor.find('.line-number.cursor-line-number').text()).toBe "2"
expect(editor.find('.line-number.cursor-line').length).toBe 1
expect(editor.find('.line-number.cursor-line').text()).toBe "2"
describe "when the selection spans multiple lines", ->
beforeEach ->
@@ -1699,13 +1699,13 @@ describe "Editor", ->
it "doesn't highlight the background or the gutter", ->
editor.getSelection().setBufferRange(new Range([0,0],[2,0]))
expect(editor.getSelection().isSingleScreenLine()).toBe false
expect(editor.find('.line-number.cursor-line-number').length).toBe 0
expect(editor.find('.line-number.cursor-line').length).toBe 0
it "when a newline is deleted with backspace, the line number of the new cursor position is highlighted", ->
editor.setCursorScreenPosition([1,0])
editor.backspace()
expect(editor.find('.line-number.cursor-line-number').length).toBe 1
expect(editor.find('.line-number.cursor-line-number').text()).toBe "1"
expect(editor.find('.line-number.cursor-line').length).toBe 1
expect(editor.find('.line-number.cursor-line').text()).toBe "1"
describe "line highlighting", ->
beforeEach ->

View File

@@ -60,10 +60,10 @@ class Gutter extends View
highlightCursorLine: ->
screenRowIndex = @editor().getCursorScreenPosition().row - @firstScreenRow
@highlightedLineNumber?.classList.remove('cursor-line-number')
@highlightedLineNumber?.classList.remove('cursor-line')
if screenRowIndex >= 0 and @editor().getSelection().isSingleScreenLine()
@highlightedLineNumber = @lineNumbers[0].children[screenRowIndex]
@highlightedLineNumber?.classList.add('cursor-line-number')
@highlightedLineNumber?.classList.add('cursor-line')
else
@highlightedLineNumber = null

View File

@@ -29,8 +29,11 @@
padding-right: 0.8em;
}
.editor.focused .line-number.cursor-line-number {
.editor.focused .line-number.cursor-line {
color: rgba(255, 255, 255, .6);
}
.editor.focused .cursor-line {
background-color: rgba(255, 255, 255, .12);
}