diff --git a/lib/tab-bar-view.coffee b/lib/tab-bar-view.coffee index 4b7f668d..aea71129 100644 --- a/lib/tab-bar-view.coffee +++ b/lib/tab-bar-view.coffee @@ -88,6 +88,7 @@ class TabBarView @subscriptions.add atom.config.observe 'tabs.tabScrolling', (value) => @updateTabScrolling(value) @subscriptions.add atom.config.observe 'tabs.tabScrollingThreshold', (value) => @updateTabScrollingThreshold(value) @subscriptions.add atom.config.observe 'tabs.alwaysShowTabBar', => @updateTabBarVisibility() + @subscriptions.add atom.config.observe 'tabs.wrapTabs', (value) => @element.classList.toggle "wrap-tabs", value @updateActiveTab() diff --git a/package.json b/package.json index 3287214b..efcc0b9e 100644 --- a/package.json +++ b/package.json @@ -76,6 +76,11 @@ "title": "Display MRU Tab Switching List", "default": true, "description": "When MRU Tab Switching is enabled, display the most-recently-used tab list." + }, + "wrapTabs": { + "type": "boolean", + "default": false, + "description": "Wrap overflowing tabs onto multiple rows." } }, "devDependencies": { diff --git a/spec/tabs-spec.coffee b/spec/tabs-spec.coffee index 8cf00376..4c670a97 100644 --- a/spec/tabs-spec.coffee +++ b/spec/tabs-spec.coffee @@ -1321,6 +1321,17 @@ describe "TabBarView", -> expect(tabBar.element).not.toHaveClass 'hidden' expect(tabBar2.element).toHaveClass 'hidden' + describe "when wrapTabs is true in package settings", -> + it "adds the `wrap-tabs` class to tabBar element", -> + atom.config.set("tabs.wrapTabs", true) + expect(tabBar.element).toHaveClass 'wrap-tabs' + + describe "when wrapTabs is false in package settings", -> + it "removes `wrap-tabs` class from tabBar element", -> + tabBar.element.classList.add 'wrap-tabs' + atom.config.set("tabs.wrapTabs", false) + expect(tabBar.element).not.toHaveClass 'wrap-tabs' + if atom.workspace.buildTextEditor().isPending? or atom.workspace.getActivePane().getActiveItem? isPending = (item) -> if item.isPending? diff --git a/styles/wrap-tabs.less b/styles/wrap-tabs.less new file mode 100644 index 00000000..2d86eca9 --- /dev/null +++ b/styles/wrap-tabs.less @@ -0,0 +1,27 @@ +@import "ui-variables"; + +.tab-bar.wrap-tabs { + flex-wrap: wrap; + height: auto; + box-shadow: none; + margin-top: -1px; + background: linear-gradient(180deg, @tab-border-color, transparent 75%); + background-size: 1px @tab-height+1px; + + .tab, .tab.active { + min-width: auto; + max-width: 19em; + } + + .tab.active { + box-shadow: none !important; + margin-left: 1px; + } + + .tab { + border: 1px solid @tab-border-color; + border-bottom: none; + margin: 0 -1px 0 -1px; + &:last-of-type { box-shadow: none; } + } +}