From 01cde54b767c380a058aab26306cc38c9fc6ebdd Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Mon, 24 Dec 2012 11:22:56 -0800 Subject: [PATCH 1/8] 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 2/8] 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 3/8] 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 4/8] 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 5/8] 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 6/8] 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 7/8] 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 8/8] 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;