Merge pull request atom#130 from atom/sm-left-close-button

Add option for left tab close buttons

lib/main.coffee

@@ -10,6 +10,9 @@ module.exports =
     atom.config.observe "#{themeName}.tabSizing", (value) ->
       setTabSizing(value)
 
+    atom.config.observe "#{themeName}.tabCloseButton", (value) ->
+      setTabCloseButton(value)
+
     atom.config.observe "#{themeName}.hideDockButtons", (value) ->
       setHideDockButtons(value)
 
@@ -24,6 +27,7 @@ module.exports =
   deactivate: ->
     unsetFontSize()
     unsetTabSizing()
+    unsetTabCloseButton()
     unsetHideDockButtons()
     unsetStickyHeaders()
 
@@ -46,6 +50,18 @@ unsetTabSizing = ->
   root.removeAttribute("theme-#{themeName}-tabsizing")
 
 
+# Tab Close Button -----------------------
+
+setTabCloseButton = (tabCloseButton) ->
+  if tabCloseButton is 'Left'
+    root.setAttribute("theme-#{themeName}-tab-close-button", 'left')
+  else
+    unsetTabCloseButton()
+
+unsetTabCloseButton = ->
+  root.removeAttribute("theme-#{themeName}-tab-close-button")
+
+
 # Dock Buttons -----------------------
 
 setHideDockButtons = (hideDockButtons) ->

package.json

@@ -50,18 +50,29 @@
       ],
       "order": 2
     },
+    "tabCloseButton": {
+      "title": "Tab Close Button",
+      "description": "Choose the position of the close button shown in tabs.",
+      "type": "string",
+      "default": "Right",
+      "enum": [
+        "Left",
+        "Right"
+      ],
+      "order": 3
+    },
     "hideDockButtons": {
       "title": "Hide dock toggle buttons",
       "description": "Note: When hiding the toggle buttons, opening a dock needs to be done by using the keyboard or other alternatives.",
       "type": "boolean",
       "default": "false",
-      "order": 3
+      "order": 4
     },
     "stickyHeaders": {
       "title": "Make tree-view project headers sticky",
       "type": "boolean",
       "default": "true",
-      "order": 4
+      "order": 5
     }
   }
 }

spec/theme-spec.coffee

@@ -19,6 +19,10 @@ describe "#{themeName} theme", ->
     atom.config.set("#{themeName}.tabSizing", 'Minimum')
     expect(document.documentElement.getAttribute("theme-#{themeName}-tabsizing")).toBe 'minimum'
 
+  it "allows the tab close button to be shown on the left via config", ->
+    atom.config.set("#{themeName}.tabCloseButton", 'Left')
+    expect(document.documentElement.getAttribute("theme-#{themeName}-tab-close-button")).toBe 'left'
+
   it "allows the dock toggle buttons to be hidden via config", ->
     atom.config.set("#{themeName}.hideDockButtons", true)
     expect(document.documentElement.getAttribute("theme-#{themeName}-dock-buttons")).toBe 'hidden'

styles/config.less

@@ -1,14 +1,18 @@
 
-// Tabs ----------------------------------------------
+// Theme config
+// This gets changed from the theme settings
 
 @theme-tabsizing: ~'theme-@{ui-theme-name}-tabsizing';
 @theme-dockButtons: ~'theme-@{ui-theme-name}-dock-buttons';
 @theme-stickyHeaders: ~'theme-@{ui-theme-name}-sticky-headers';
+@theme-closeButton: ~'theme-@{ui-theme-name}-tab-close-button';
 
-@tab-min-width: 7em; // ~ icon + 6 characters
 
+// Tabs ----------------------------------------------
+
+@tab-min-width: 7em; // ~ icon + 6 characters
 
-// Even (default) ---------------
+// Even (default)
 
 .tab-bar {
   .tab,
@@ -32,7 +36,7 @@
 }
 
 
-// Maximum (full width) ---------------
+// Maximum (full width)
 
 [@{theme-tabsizing}="maximum"] .tab-bar {
   .tab,
@@ -42,7 +46,7 @@
 }
 
 
-// Minimum (show long paths) ---------------
+// Minimum (show long paths)
 
 [@{theme-tabsizing}="minimum"] .tab-bar {
   .tab,
@@ -60,6 +64,19 @@
 }
 
 
+// Tabs: close button position  ------------------------------
+
+[@{theme-closeButton}="left"] {
+
+  .tab-bar .tab {
+    .close-icon {
+      right: auto;
+      left: @icon-padding-right;
+    }
+  }
+
+}
+
 
 // Hide docks toggle buttons ------------------------------