From 01cde54b767c380a058aab26306cc38c9fc6ebdd Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Mon, 24 Dec 2012 11:22:56 -0800 Subject: [PATCH 01/11] Changing the tab display style to a table layout. --- src/packages/tabs/src/tab.coffee | 1 + src/packages/tabs/src/tabs.css | 58 +++++++++++++++++++++----------- static/atom.css | 3 +- 3 files changed, 41 insertions(+), 21 deletions(-) diff --git a/src/packages/tabs/src/tab.coffee b/src/packages/tabs/src/tab.coffee index 67935a3d5..d4ab2451b 100644 --- a/src/packages/tabs/src/tab.coffee +++ b/src/packages/tabs/src/tab.coffee @@ -4,6 +4,7 @@ module.exports = class Tab extends View @content: (editSession) -> @div class: 'tab', => + console.log(editSession) @span class: 'file-name', outlet: 'fileName' @span class: 'close-icon' diff --git a/src/packages/tabs/src/tabs.css b/src/packages/tabs/src/tabs.css index 03388f65c..32d2d1516 100644 --- a/src/packages/tabs/src/tabs.css +++ b/src/packages/tabs/src/tabs.css @@ -1,34 +1,47 @@ .tabs { - background: #222; - border-bottom: 4px solid #555; + background: #333333; + table-layout: fixed; + display: table; + border-bottom: 4px solid #424242; } .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; + width: 1%; + position: relative; + border-top: 1px solid #4a4a4a; + border-right: 1px solid #2e2e2e; + border-bottom: 1px solid #2e2e2e; + box-shadow: 0 1px 0 #585858, inset -1px 0 0 #4a4a4a, inset 1px 0 0 #4a4a4a; + max-width: 100px; } -.tab.active { - background: #555; - color: white; +.tab.active, +.tab.active:hover { + color: #dae6e6; + 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:hover { + color: #c8c8c5; + background-image: -webkit-linear-gradient(#474747, #444444); } .tab .file-name { - margin-right: 5px; + font-size: 12px !important; + font-weight: normal !important; + display: inline-block; + max-width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + text-shadow: 0 -1px 1px black; } .tab .close-icon { @@ -36,12 +49,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 e7b073fb5..6bd459333 100644 --- a/static/atom.css +++ b/static/atom.css @@ -1,5 +1,5 @@ html, body { - font: 16px Inconsolata, Monaco, Courier !important; + font: 16px Consolas, Inconsolata, Monaco, Courier !important; width: 100%; height: 100%; overflow: hidden; @@ -8,6 +8,7 @@ html, body { #root-view { height: 100%; overflow-y: auto; + overflow-x: hidden; position: relative; background-image: url(images/linen.png); } From 4c243c5f7b61cce1abf12d820828ae9557d0fc78 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Mon, 24 Dec 2012 11:54:08 -0800 Subject: [PATCH 02/11] updating the style to have reverse rounded corners at bottom --- src/packages/tabs/src/tabs.css | 38 ++++++++++++++++++++++++++++------ 1 file changed, 32 insertions(+), 6 deletions(-) diff --git a/src/packages/tabs/src/tabs.css b/src/packages/tabs/src/tabs.css index 32d2d1516..184a62ca5 100644 --- a/src/packages/tabs/src/tabs.css +++ b/src/packages/tabs/src/tabs.css @@ -1,7 +1,5 @@ .tabs { background: #333333; - table-layout: fixed; - display: table; border-bottom: 4px solid #424242; } @@ -11,23 +9,51 @@ background-image: -webkit-linear-gradient(#444, #3d3d3d); color: #a5aaaa; display: table-cell; - width: 1%; position: relative; - border-top: 1px solid #4a4a4a; + width:1%; + border-top: 1px solid #383838; border-right: 1px solid #2e2e2e; border-bottom: 1px solid #2e2e2e; - box-shadow: 0 1px 0 #585858, inset -1px 0 0 #4a4a4a, inset 1px 0 0 #4a4a4a; - max-width: 100px; + box-shadow: inset 0 0 5px #383838, 0 1px 0 #585858, inset -1px 0 0 #4a4a4a, inset 1px 0 0 #4a4a4a; + min-width: 100px; } .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.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, +.tab.active:last-child:after { + display: none; +} + .tab:hover { color: #c8c8c5; background-image: -webkit-linear-gradient(#474747, #444444); From f62563e2320efef3fd160759dfd8e6461bf37f90 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Mon, 24 Dec 2012 12:08:21 -0800 Subject: [PATCH 03/11] fixing the min-width on the tabs --- src/packages/tabs/src/tabs.css | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/packages/tabs/src/tabs.css b/src/packages/tabs/src/tabs.css index 184a62ca5..b3f73d25e 100644 --- a/src/packages/tabs/src/tabs.css +++ b/src/packages/tabs/src/tabs.css @@ -10,12 +10,14 @@ color: #a5aaaa; display: table-cell; position: relative; - width:1%; + width:200px; 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: 100px; + min-width: 40px; + box-sizing: border-box; + height: 24px; } .tab.active, @@ -49,8 +51,7 @@ border-width: 0 0 1px 1px; box-shadow: -2px 2px 0 #424242; } -.tab.active:first-child:before, -.tab.active:last-child:after { +.tab.active:first-child:before { display: none; } @@ -62,12 +63,16 @@ .tab .file-name { font-size: 12px !important; font-weight: normal !important; - display: inline-block; - max-width: 100%; + display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 -1px 1px black; + position: absolute; + left: 9px; + top:5px; + bottom:4px; + right: 21px; } .tab .close-icon { From 7f32c7f3bb624fa76adab36d324950c449ff381d Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Mon, 24 Dec 2012 12:49:07 -0800 Subject: [PATCH 04/11] oops, doesn't belong here --- src/packages/tabs/src/tab.coffee | 1 - 1 file changed, 1 deletion(-) diff --git a/src/packages/tabs/src/tab.coffee b/src/packages/tabs/src/tab.coffee index d4ab2451b..67935a3d5 100644 --- a/src/packages/tabs/src/tab.coffee +++ b/src/packages/tabs/src/tab.coffee @@ -4,7 +4,6 @@ module.exports = class Tab extends View @content: (editSession) -> @div class: 'tab', => - console.log(editSession) @span class: 'file-name', outlet: 'fileName' @span class: 'close-icon' From d697986e3e131608e995facc95b0042269273e00 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Mon, 24 Dec 2012 13:05:27 -0800 Subject: [PATCH 05/11] updating the tab font-family --- src/packages/tabs/src/tabs.css | 2 +- static/atom.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/packages/tabs/src/tabs.css b/src/packages/tabs/src/tabs.css index b3f73d25e..87282b055 100644 --- a/src/packages/tabs/src/tabs.css +++ b/src/packages/tabs/src/tabs.css @@ -1,6 +1,7 @@ .tabs { background: #333333; border-bottom: 4px solid #424242; + font: 12px Trebuchet MS, arial, freesans, clean, sans-serif !important; } .tab { @@ -61,7 +62,6 @@ } .tab .file-name { - font-size: 12px !important; font-weight: normal !important; display: block; overflow: hidden; diff --git a/static/atom.css b/static/atom.css index 6bd459333..54bf0070e 100644 --- a/static/atom.css +++ b/static/atom.css @@ -1,5 +1,5 @@ html, body { - font: 16px Consolas, Inconsolata, Monaco, Courier !important; + font: 16px Inconsolata, Monaco, Courier !important; width: 100%; height: 100%; overflow: hidden; From 0dab956588da9c0266da257970b996d9b9288e0a Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Mon, 24 Dec 2012 13:11:51 -0800 Subject: [PATCH 06/11] system wide font --- src/packages/tabs/src/tabs.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/packages/tabs/src/tabs.css b/src/packages/tabs/src/tabs.css index 87282b055..b70ec30de 100644 --- a/src/packages/tabs/src/tabs.css +++ b/src/packages/tabs/src/tabs.css @@ -1,7 +1,7 @@ .tabs { background: #333333; border-bottom: 4px solid #424242; - font: 12px Trebuchet MS, arial, freesans, clean, sans-serif !important; + font: 11px Lucida Grande, arial, freesans, clean, sans-serif !important; } .tab { @@ -70,7 +70,7 @@ text-shadow: 0 -1px 1px black; position: absolute; left: 9px; - top:5px; + top:4px; bottom:4px; right: 21px; } From 174925be3d5b064a6e3682cf911837c27968cadd Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Mon, 24 Dec 2012 13:14:41 -0800 Subject: [PATCH 07/11] changing the max tab size --- src/packages/tabs/src/tabs.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/packages/tabs/src/tabs.css b/src/packages/tabs/src/tabs.css index b70ec30de..4bea3fa13 100644 --- a/src/packages/tabs/src/tabs.css +++ b/src/packages/tabs/src/tabs.css @@ -11,7 +11,7 @@ color: #a5aaaa; display: table-cell; position: relative; - width:200px; + width:175px; border-top: 1px solid #383838; border-right: 1px solid #2e2e2e; border-bottom: 1px solid #2e2e2e; From 9bd6883eac0133a3460207bbf5e8f26e16f12070 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Mon, 24 Dec 2012 13:19:20 -0800 Subject: [PATCH 08/11] really using the system font, determined via css2.1 --- src/packages/tabs/src/tabs.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/packages/tabs/src/tabs.css b/src/packages/tabs/src/tabs.css index 4bea3fa13..34f154e13 100644 --- a/src/packages/tabs/src/tabs.css +++ b/src/packages/tabs/src/tabs.css @@ -1,7 +1,7 @@ .tabs { background: #333333; border-bottom: 4px solid #424242; - font: 11px Lucida Grande, arial, freesans, clean, sans-serif !important; + font: caption !important; } .tab { @@ -62,7 +62,7 @@ } .tab .file-name { - font-weight: normal !important; + font-size: 11px !important; display: block; overflow: hidden; white-space: nowrap; From d6973dc24fb77b7cb20b91496b5153dcf69c3997 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 25 Dec 2012 12:40:13 -0800 Subject: [PATCH 09/11] Not overriding font-size --- static/editor.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 { From 14e5dde41806de3697090919f0164253bbab6867 Mon Sep 17 00:00:00 2001 From: Kevin Sawicki Date: Wed, 26 Dec 2012 10:53:02 -0800 Subject: [PATCH 10/11] Create custom jQuery event for shift select on gutter --- spec/app/editor-spec.coffee | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/spec/app/editor-spec.coffee b/spec/app/editor-spec.coffee index 1ee20fa91..08fb14cd4 100644 --- a/spec/app/editor-spec.coffee +++ b/spec/app/editor-spec.coffee @@ -1992,13 +1992,17 @@ 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]] From 518a71910d467f7cd3caa6ffa69072d178f6b25a Mon Sep 17 00:00:00 2001 From: Kevin Sawicki Date: Wed, 26 Dec 2012 11:04:10 -0800 Subject: [PATCH 11/11] Support clicking past last editor line Clicking below the last line of an editor now either moves the cursor to the end of the file or selects to the end of the file if shift is pressed. --- spec/app/editor-spec.coffee | 19 +++++++++++++++++++ src/app/editor.coffee | 8 ++++++++ 2 files changed, 27 insertions(+) diff --git a/spec/app/editor-spec.coffee b/spec/app/editor-spec.coffee index 08fb14cd4..a04731bc5 100644 --- a/spec/app/editor-spec.coffee +++ b/spec/app/editor-spec.coffee @@ -2006,3 +2006,22 @@ describe "Editor", -> 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)