diff --git a/spec/app/editor-spec.coffee b/spec/app/editor-spec.coffee index 1ee20fa91..a04731bc5 100644 --- a/spec/app/editor-spec.coffee +++ b/spec/app/editor-spec.coffee @@ -1992,13 +1992,36 @@ describe "Editor", -> expect(editor.getText()).toBe(originalPathText) describe "when clicking a gutter line", -> - it "moves the cursor to the start of the selected line", -> + beforeEach -> rootView.attachToDom() + + it "moves the cursor to the start of the selected line", -> expect(editor.getCursorScreenPosition()).toEqual [0,0] editor.gutter.find(".line-number:eq(1)").trigger 'click' expect(editor.getCursorScreenPosition()).toEqual [1,0] it "selects to the start of the selected line when shift is pressed", -> - expect(editor.getSelection().getScreenRange()).toEqual [0,0], [0,0] - editor.gutter.find(".line-number:eq(1)").trigger 'click', {shiftKey: true} - expect(editor.getSelection().getScreenRange()).toEqual [0,0], [1,0] + expect(editor.getSelection().getScreenRange()).toEqual [[0,0], [0,0]] + event = $.Event("click") + event.shiftKey = true + editor.gutter.find(".line-number:eq(1)").trigger event + expect(editor.getSelection().getScreenRange()).toEqual [[0,0], [1,0]] + + describe "when clicking below the last line", -> + beforeEach -> + rootView.attachToDom() + + it "move the cursor to the end of the file", -> + expect(editor.getCursorScreenPosition()).toEqual [0,0] + event = $.Event("click") + event.offsetY = Infinity + editor.scrollView.trigger event + expect(editor.getCursorScreenPosition()).toEqual [12,2] + + it "selects to the end of the files when shift is pressed", -> + expect(editor.getSelection().getScreenRange()).toEqual [[0,0], [0,0]] + event = $.Event("click") + event.offsetY = Infinity + event.shiftKey = true + editor.scrollView.trigger event + expect(editor.getSelection().getScreenRange()).toEqual [[0,0], [12,2]] diff --git a/src/app/editor.coffee b/src/app/editor.coffee index 774a3142a..4e9e97cb0 100644 --- a/src/app/editor.coffee +++ b/src/app/editor.coffee @@ -326,6 +326,14 @@ class Editor extends View @removeClass 'focused' @autosave() if config.get "editor.autosave" + @scrollView.on 'click', (e) => + return unless e.target is @scrollView[0] + return unless e.offsetY > @overlayer.height() + if e.shiftKey + @selectToBottom() + else + @moveCursorToBottom() + @overlayer.on 'mousedown', (e) => @overlayer.hide() clickedElement = document.elementFromPoint(e.pageX, e.pageY) diff --git a/src/packages/tabs/src/tabs.css b/src/packages/tabs/src/tabs.css index 03388f65c..34f154e13 100644 --- a/src/packages/tabs/src/tabs.css +++ b/src/packages/tabs/src/tabs.css @@ -1,34 +1,78 @@ .tabs { - background: #222; - border-bottom: 4px solid #555; + background: #333333; + border-bottom: 4px solid #424242; + font: caption !important; } .tab { cursor: default; - float: left; - margin: 4px; - margin-bottom: 0; - margin-right: 0; - padding-left: 4px; - padding-right: 4px; - background: #3a3a3a; - color: #d0d0d0; - -webkit-border-top-left-radius: 4px; - -webkit-border-top-right-radius: 4px; - font-size: 90%; + padding: 2px 21px 2px 9px; + background-image: -webkit-linear-gradient(#444, #3d3d3d); + color: #a5aaaa; + display: table-cell; + position: relative; + width:175px; + border-top: 1px solid #383838; + border-right: 1px solid #2e2e2e; + border-bottom: 1px solid #2e2e2e; + box-shadow: inset 0 0 5px #383838, 0 1px 0 #585858, inset -1px 0 0 #4a4a4a, inset 1px 0 0 #4a4a4a; + min-width: 40px; + box-sizing: border-box; + height: 24px; } -.tab.active { - background: #555; - color: white; +.tab.active, +.tab.active:hover { + color: #dae6e6; + border-top: 1px solid #4a4a4a; + box-shadow: inset -1px 0 0 #595959, inset 1px 0 0 #595959; + border-bottom: 0 none; + background-image: -webkit-linear-gradient(#555555, #424242); } -.tab:last-child { - margin-right: 4px; +.tab.active:before, +.tab.active:after { + position: absolute; + bottom: -1px; + width: 4px; + height: 4px; + content: " "; + z-index: 3; + border: 1px solid #595959; +} +.tab.active:before { + border-bottom-right-radius: 4px; + border-width: 0 1px 1px 0; + box-shadow: 2px 2px 0 #424242; + left: -4px; +} +.tab.active:after { + right: -4px; + border-bottom-left-radius: 4px; + border-width: 0 0 1px 1px; + box-shadow: -2px 2px 0 #424242; +} +.tab.active:first-child:before { + display: none; +} + +.tab:hover { + color: #c8c8c5; + background-image: -webkit-linear-gradient(#474747, #444444); } .tab .file-name { - margin-right: 5px; + font-size: 11px !important; + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + text-shadow: 0 -1px 1px black; + position: absolute; + left: 9px; + top:4px; + bottom:4px; + right: 21px; } .tab .close-icon { @@ -36,12 +80,17 @@ font-size: 14px; width: 14px; height: 14px; + display: block; color: #777; cursor: pointer; + position: absolute; + right: 4px; + top: -1px; + -webkit-font-smoothing: antialiased; } .tab .close-icon:before { - content: "\f050"; + content: "\f081"; } .tab .close-icon:hover { diff --git a/static/atom.css b/static/atom.css index 3daa50629..974e85cb5 100644 --- a/static/atom.css +++ b/static/atom.css @@ -8,6 +8,7 @@ html, body { #root-view { height: 100%; overflow-y: auto; + overflow-x: hidden; position: relative; background-image: url(images/linen.png); } diff --git a/static/editor.css b/static/editor.css index 6a5cfc18b..f95816056 100644 --- a/static/editor.css +++ b/static/editor.css @@ -6,7 +6,7 @@ -webkit-box-flex: 1; position: relative; z-index: 0; - font: 16px Inconsolata, Monaco, Courier !important; + font-family: Inconsolata, Monaco, Courier !important; } .editor.mini {