Merge pull request #168 from github/window-focused

Atom Window Focused

docs/styling.md

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

spec/app/editor-spec.coffee

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

spec/app/window-spec.coffee

@@ -13,6 +13,14 @@ describe "Window", ->
     atom.setRootViewStateForPath(rootView.project.getPath(), null)
     $(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-focused on the window blur", ->
+      $(window).blur()
+      expect($("body").hasClass("is-focused")).toBe false
+
   describe ".close()", ->
     it "is triggered by the 'core:close' event", ->
       spyOn window, 'close'

src/app/editor.coffee

@@ -351,11 +351,11 @@ class Editor extends View
     @hiddenInput.on 'focus', =>
       @rootView()?.editorFocused(this)
       @isFocused = true
-      @addClass 'focused'
+      @addClass 'is-focused'
 
     @hiddenInput.on 'focusout', =>
       @isFocused = false
-      @removeClass 'focused'
+      @removeClass 'is-focused'
       @autosave() if config.get "editor.autosave"
 
     @underlayer.on 'click', (e) =>

src/app/text-mate-theme.coffee

@@ -44,17 +44,17 @@ class TextMateTheme extends Theme
         'color': @translateColor(foreground)
 
     @rulesets.push
-      selector: '.editor.focused .cursor'
+      selector: '.editor.is-focused .cursor'
       properties:
         'border-color': @translateColor(caret)
 
     @rulesets.push
-      selector: '.editor.focused .selection .region'
+      selector: '.editor.is-focused .selection .region'
       properties:
         'background-color': @translateColor(selection)
 
     @rulesets.push
-      selector: '.editor.focused .line-number.cursor-line-no-selection, .editor.focused .line.cursor-line'
+      selector: '.editor.is-focused .line-number.cursor-line-no-selection, .editor.is-focused .line.cursor-line'
       properties:
         'background-color': @translateColor(lineHighlight)
 

src/app/window.coffee

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

static/editor.css

@@ -85,8 +85,8 @@
   border-left: 1px solid;
 }
 
-.editor:not(.focused) .cursor,
-.editor.focused .cursor.blink-off {
+.editor:not(.is-focused) .cursor,
+.editor.is-focused .cursor.blink-off {
   visibility: hidden;
 }
 

themes/atom-dark-syntax.css

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

themes/atom-dark-ui/tabs.css

@@ -6,7 +6,7 @@
   margin-bottom: 1px;
 }
 
-.tab {
+.is-focused .tab {
   cursor: default;
   padding: 2px 21px 2px 9px;
   background-image: -webkit-linear-gradient(#444, #3d3d3d);
@@ -16,6 +16,42 @@
   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 {
+  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 {
+  cursor: default;
+  padding: 2px 21px 2px 9px;
+  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;
+}
+
 .tab,
 .tab .close-icon {
   color: #aaa;
@@ -25,9 +61,9 @@
   border-color: #aaa;
 }
 
-.tab.active,
-.tab.active:hover,
-.tab.active .close-icon {
+.is-focused .tab.active,
+.is-focused .tab.active:hover,
+.is-focused .tab.active .close-icon {
   color: #e6e6e6;
 }
 
@@ -49,23 +85,11 @@
   content: "";
 }
 
-.tab:first-child {
-  box-shadow: inset 0 0 5px #383838, 0 1px 0 #585858, inset -1px 0 0 #4a4a4a;
-}
-
-.tab.active:first-child,
-.tab.active:first-child:hover {
+.is-focused .tab.active:first-child,
+.is-focused .tab.active:first-child:hover {
   box-shadow: inset -1px 0 0 #595959;
 }
 
-.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: -webkit-linear-gradient(#555555, #424242);
-}
-
 .tab.active:before,
 .tab.active:after {
   position: absolute;
@@ -76,6 +100,19 @@
   z-index: 3;
   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;
+  left: -4px;
+}
+.is-focused .tab.active:after {
+  right: -4px;
+  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;
@@ -88,7 +125,7 @@
   border-width: 0 0 1px 1px;
   box-shadow: -2px 2px 0 #424242;
 }
-.tab.active:first-child:before {
+.is-focused .tab.active:first-child:before {
   display: none;
 }
 

themes/atom-dark-ui/tree-view.css

@@ -1,8 +1,13 @@
-.tree-view {
+.is-focused .tree-view {
   background: #1e1e1e;
   border-right: 1px solid #191919;
 }
 
+.tree-view {
+  background: #2e2e2e;
+  border-right: 1px solid #191919;
+}
+
 .tree-view .entry {
   text-shadow: 0 -1px 0 #000;
 }
@@ -20,10 +25,15 @@
   color: #d2d2d2;
 }
 
-.tree-view .selected > .highlight {
+.is-focused .tree-view .selected > .highlight {
   background-image: -webkit-linear-gradient(#4e4e4e, #434343);
 }
 
+.tree-view .selected > .highlight {
+  background-image: none;
+  background-color: #6e6e6e;
+}
+
 .tree-view:focus .selected > .highlight {
   background-image: -webkit-linear-gradient(#7e7e7e, #737373);
 }

themes/atom-light-syntax.css

@@ -3,15 +3,15 @@
   color: #555;
 }
 
-.editor.focused .cursor {
+.editor.is-focused .cursor {
   border-color: #000;
 }
 
-.editor.focused .selection .region {
+.editor.is-focused .selection .region {
   background-color: #afc4da;
 }
 
-.editor.focused .line-number.cursor-line-no-selection, .editor.focused .line.cursor-line {
+.editor.is-focused .line-number.cursor-line-no-selection, .editor.is-focused .line.cursor-line {
   background-color: rgba(255, 255, 134, 0.34);
 }
 

themes/atom-light-ui/tabs.css

@@ -6,7 +6,7 @@
   margin-bottom: 1px;
 }
 
-.tab {
+.is-focused .tab {
   cursor: default;
   padding: 2px 21px 2px 9px;
   background-image: -webkit-linear-gradient(#e0e0e0, #bfbfbf);
@@ -17,6 +17,18 @@
   color: #323232;
 }
 
+.tab {
+  cursor: default;
+  padding: 2px 21px 2px 9px;
+  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;
+}
+
 .tab:hover {
   background-image: -webkit-linear-gradient(#e2e2e2, #e0e0e0);
 }

themes/atom-light-ui/tree-view.css

@@ -1,8 +1,13 @@
-.tree-view {
+.is-focused .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;
 }
@@ -20,7 +25,7 @@
   color: #262626;
 }
 
-.tree-view .selected > .highlight {
+.is-focused .tree-view .selected > .highlight {
   box-sizing: border-box;
   border-top: 1px solid #97a4a7;
   border-bottom: 1px solid #97a4a7;
@@ -28,12 +33,27 @@
   background-image: -webkit-linear-gradient(#cad5d8, #bcccce);
 }
 
-.tree-view:focus .selected > .highlight {
+.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;
+}
+
 .tree-view:focus .directory.selected > .header > .name,
 .tree-view:focus .selected > .name,
 .tree-view:focus .directory.selected > .header > .name:before,
@@ -50,10 +70,14 @@
   color: #262626;
 }
 
-.tree-view .name:before {
+.is-focused .tree-view .name:before {
   color: #7e8692;
 }
 
+.tree-view .name:before {
+  color: #7e7e7e;
+}
+
 .tree-view .entry:hover,
 .tree-view .directory .header:hover .name,
 .tree-view .directory .header:hover .disclosure-arrow  {