pulsar-edit/pulsar
1
1
Fork 0
mirror of https://github.com/pulsar-edit/pulsar.git synced 2024-11-13 08:44:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #232 from github/focus-invert

Browse Source 
Focus invert
This commit is contained in:
Justin Palmer 2013-02-05 09:13:32 -08:00
commit 6f34c94014
15 changed files with 99 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/styling.md
View File

@ -9,8 +9,8 @@ gutter.
You can change the background color using the following CSS:
```css
.editor.is-focused .line.cursor-line,
.editor.is-focused .line-number.cursor-line {
.editor .line.cursor-line,
.editor .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.is-focused .line-number.cursor-line {
.editor .line-number.cursor-line {
color: blue;
}
```

2
spec/app/editor-spec.coffee
View File

@ -111,11 +111,9 @@ describe "Editor", ->
editor.isFocused = false
editor.hiddenInput.focus()
expect(editor.isFocused).toBeTruthy()
expect(editor).toHaveClass('is-focused')
editor.hiddenInput.focusout()
expect(editor.isFocused).toBeFalsy()
expect(editor).not.toHaveClass('is-focused')
describe "when the activeEditSession's file is modified on disk", ->
it "triggers an alert", ->

8
spec/app/window-spec.coffee
View File

@ -14,12 +14,12 @@ describe "Window", ->
$(window).off 'beforeunload'
describe "window is loaded", ->
it "has .is-focused on the body tag", ->
expect($("body").hasClass("is-focused")).toBe true
it "doesn't have .is-blurred on the body tag", ->
expect($("body").hasClass("is-blurred")).toBe false
it "doesn't have .is-focused on the window blur event", ->
it "does have .is-blurred on the window blur event", ->
$(window).blur()
expect($("body").hasClass("is-focused")).toBe false
expect($("body").hasClass("is-blurred")).toBe true
describe ".close()", ->
it "is triggered by the 'core:close' event", ->

2
src/app/editor.coffee
View File

@ -356,8 +356,8 @@ class Editor extends View
@hiddenInput.on 'focusout', =>
@isFocused = false
@removeClass 'is-focused'
@autosave() if config.get "editor.autosave"
@removeClass 'is-focused'
@underlayer.on 'click', (e) =>
return unless e.target is @underlayer[0]

4
src/app/window.coffee
View File

@ -28,8 +28,8 @@ windowAdditions =
$(window).on 'core:close', => @close()
$(window).command 'window:close', => @close()
$(window).on 'focus', => $("body").addClass("is-focused")
$(window).on 'blur', => $("body").removeClass("is-focused")
$(window).on 'focus', -> $("body").removeClass('is-blurred')
$(window).on 'blur', -> $("body").addClass('is-blurred')
# This method is intended only to be run when starting a normal application
# Note: RootView assigns itself on window on initialization so that

10
static/editor.css
View File

@ -76,6 +76,10 @@
opacity: 1;
}
.editor.is-blurred .line.cursor-line {
background: rgba(0, 0, 0, 0);
}
.editor .invisible {
opacity: 0.2;
}
@ -138,11 +142,15 @@
border-left: 1px solid;
}
.editor:not(.is-focused) .cursor,
.editor .cursor,
.editor.is-focused .cursor.blink-off {
visibility: hidden;
}
.editor.is-focused .cursor {
visibility: visible;
}
.editor .hidden-input {
position: absolute;
z-index: -1;

6
themes/atom-dark-syntax.css
View File

@ -3,15 +3,15 @@
color: #c5c8c6;
}
.editor.is-focused .cursor {
.editor .cursor {
border-color: #FFFFFF;
}
.editor.is-focused .selection .region {
.editor .selection .region {
background-color: #333333;
}
.editor.is-focused .line-number.cursor-line-no-selection, .editor.is-focused .line.cursor-line {
.editor .line-number.cursor-line-no-selection, .editor .line.cursor-line {
background-color: rgba(255, 255, 255, 0.14);
}

21
themes/atom-dark-ui/blurred.css Normal file
View File

@ -0,0 +1,21 @@
.is-blurred .tree-view {
background-color: #2a2a2a;
}
.is-blurred .tabs {
opacity: 0.8;
border-bottom-color: #525252;
}
.is-blurred .tab {
background-image: -webkit-linear-gradient(#444, #555);
}
.is-blurred .tab.active {
border: 1px solid #525252
}
.is-blurred .tab.active:before {
box-shadow: 2px 2px 0 #525252;
border-color: #696969;
}

1
themes/atom-dark-ui/package.json
View File

@ -9,6 +9,7 @@
"markdown-preview.css",
"command-panel.css",
"command-logger.css",
"blurred.css",
"bracket-matcher.css"
]
}

51
themes/atom-dark-ui/tabs.css
View File

@ -4,7 +4,7 @@
box-shadow: inset 0 -1px 0 #2e2e2e, 0 1px 0 #191919;
}
.is-focused .tab {
.tab {
background-image: -webkit-linear-gradient(#444, #3d3d3d);
border-top: 1px solid #383838;
border-right: 1px solid #2e2e2e;
@ -12,38 +12,16 @@
box-shadow: inset 0 0 5px #383838, 0 1px 0 #585858, inset -1px 0 0 #4a4a4a, inset 1px 0 0 #4a4a4a;
}
.is-focused .tab:first-child {
.tab:first-child {
box-shadow: inset 0 0 5px #383838, 0 1px 0 #585858, inset -1px 0 0 #4a4a4a;
}
.is-focused .tab.active,
.is-focused .tab.active:hover {
border-top: 1px solid #4a4a4a;
box-shadow: inset -1px 0 0 #595959, inset 1px 0 0 #595959;
border-bottom-color: #424242;
background-image: -webkit-linear-gradient(#555555, #424242);
}
.tab {
background-color: #555;
background-image: none;
border-top: 1px solid #383838;
border-right: 1px solid #2e2e2e;
border-bottom: 1px solid #2e2e2e;
box-shadow: inset 0 0 5px #555, 0 1px 0 #585858, inset -1px 0 0 #4a4a4a, inset 1px 0 0 #4a4a4a;
}
.tab:first-child {
box-shadow: inset 0 0 5px #555, 0 1px 0 #585858, inset -1px 0 0 #4a4a4a;
}
.tab.active,
.tab.active:hover {
border-top: 1px solid #4a4a4a;
box-shadow: inset -1px 0 0 #595959, inset 1px 0 0 #595959;
border-bottom-color: #424242;
background-image: none;
background-color: #424242;
background-image: -webkit-linear-gradient(#555555, #424242);
}
.tab,
@ -55,9 +33,9 @@
border-color: #aaa;
}
.is-focused .tab.active,
.is-focused .tab.active:hover,
.is-focused .tab.active .close-icon {
.tab.active,
.tab.active:hover,
.tab.active .close-icon {
color: #e6e6e6;
}
@ -74,8 +52,8 @@
border: 3px solid #777;
}
.is-focused .tab.active:first-child,
.is-focused .tab.active:first-child:hover {
.tab.active:first-child,
.tab.active:first-child:hover {
box-shadow: inset -1px 0 0 #595959;
}
@ -84,18 +62,6 @@
border: 1px solid #595959;
}
.is-focused .tab.active:before {
border-bottom-right-radius: 4px;
border-width: 0 1px 1px 0;
box-shadow: 2px 2px 0 #424242;
}
.is-focused .tab.active:after {
border-bottom-left-radius: 4px;
border-width: 0 0 1px 1px;
box-shadow: -2px 2px 0 #424242;
}
.tab.active:before {
border-bottom-right-radius: 4px;
border-width: 0 1px 1px 0;
@ -104,6 +70,7 @@
.tab.active:after {
border-bottom-left-radius: 4px;
border-width: 0 0 1px 1px;
box-shadow: -2px 2px 0 #424242;
}

14
themes/atom-dark-ui/tree-view.css
View File

@ -1,10 +1,5 @@
.is-focused .tree-view {
background: #1e1e1e;
border-right: 1px solid #191919;
}
.tree-view {
background: #2e2e2e;
background: #1e1e1e;
border-right: 1px solid #191919;
}
@ -17,13 +12,8 @@
color: #d2d2d2;
}
.is-focused .tree-view .selected > .highlight {
background-image: -webkit-linear-gradient(#4e4e4e, #434343);
}
.tree-view .selected > .highlight {
background-image: none;
background-color: #6e6e6e;
background-image: -webkit-linear-gradient(#4e4e4e, #434343);
}
.tree-view:focus .selected > .highlight {

38
themes/atom-light-ui/blurred.css Normal file
View File

@ -0,0 +1,38 @@
.is-blurred .tab {
background-image: none;
background-color: #e0e0e0);
border-top: none;
border-right: 1px solid #959595;
border-bottom: 1px solid #959595;
box-shadow: inset 0 0 5px #eee, 0 1px 0 #eee, inset -1px 0 0 #e0e0e0, inset 1px 0 0 #e0e0e0;
color: #323232;
}
.is-blurred .tab.active {
border-bottom: 1px solid #e5e5e5;
box-shadow: inset 0 0 5px #eee, inset -1px 0 0 #e0e0e0, inset 1px 0 0 #e0e0e0;
}
.is-blurred .tree-view {
background: #f3f3f3;
border-right: 1px solid #c5c5c5;
}
.is-blurred .tree-view:focus .selected > .highlight {
border-top: 1px solid #3D4552;
border-bottom: 1px solid #3D4552;
background-image: none;
background-color: #69717b;
}
.is-blurred .tree-view .selected > .highlight {
box-sizing: border-box;
border-top: 1px solid #97a4a7;
border-bottom: 1px solid #97a4a7;
background-image: none;
background-color: #DFDFDF;
}
.is-blurred .tree-view .name:before {
color: #7e7e7e;
}

1
themes/atom-light-ui/package.json
View File

@ -9,6 +9,7 @@
"markdown-preview.css",
"command-panel.css",
"command-logger.css",
"blurred.css",
"bracket-matcher.css"
]
}

12
themes/atom-light-ui/tabs.css
View File

@ -4,18 +4,8 @@
box-shadow: inset 0 -1px 0 #959595, 0 1px 0 #989898;
}
.is-focused .tab {
background-image: -webkit-linear-gradient(#e0e0e0, #bfbfbf);
border-top: none;
border-right: 1px solid #959595;
border-bottom: 1px solid #959595;
box-shadow: inset 0 0 5px #eee, 0 1px 0 #eee, inset -1px 0 0 #e0e0e0, inset 1px 0 0 #e0e0e0;
color: #323232;
}
.tab {
background-image: none;
background-color: #e0e0e0);
background-image: -webkit-linear-gradient(#e0e0e0, #bfbfbf);
border-top: none;
border-right: 1px solid #959595;
border-bottom: 1px solid #959595;

31
themes/atom-light-ui/tree-view.css
View File

@ -1,13 +1,8 @@
.is-focused .tree-view {
.tree-view {
background: #dde3e8;
border-right: 1px solid #989898;
}
.tree-view {
background: #f3f3f3;
border-right: 1px solid #c5c5c5;
}
.tree-view .entry {
text-shadow: 0 1px 0 #fff;
}
@ -17,7 +12,7 @@
color: #262626;
}
.is-focused .tree-view .selected > .highlight {
.tree-view .selected > .highlight {
box-sizing: border-box;
border-top: 1px solid #97a4a7;
border-bottom: 1px solid #97a4a7;
@ -25,25 +20,10 @@
background-image: -webkit-linear-gradient(#cad5d8, #bcccce);
}
.tree-view .selected > .highlight {
box-sizing: border-box;
border-top: 1px solid #97a4a7;
border-bottom: 1px solid #97a4a7;
background-image: none;
background-color: #DFDFDF;
}
.is-focused .tree-view:focus .selected > .highlight {
border-top: 1px solid #3D4552;
border-bottom: 1px solid #3D4552;
background-image: -webkit-linear-gradient(#7e868d, #69717b);
}
.tree-view:focus .selected > .highlight {
border-top: 1px solid #3D4552;
border-bottom: 1px solid #3D4552;
background-image: none;
background-color: #69717b;
background-image: -webkit-linear-gradient(#7e868d, #69717b);
}
.tree-view:focus .directory.selected > .header > .name,
@ -62,13 +42,10 @@
color: #262626;
}
.is-focused .tree-view .name:before {
.tree-view .name:before {
color: #7e8692;
}
.tree-view .name:before {
color: #7e7e7e;
}
.tree-view .entry:hover,
.tree-view .directory .header:hover .name,