diff --git a/lib/main.coffee b/lib/main.coffee index 41a53af..47a8e0a 100644 --- a/lib/main.coffee +++ b/lib/main.coffee @@ -1,34 +1,41 @@ root = document.documentElement +themeName = 'solarized-one-light-ui' + module.exports = activate: (state) -> - atom.config.observe 'solarized-one-light-ui.fontSize', (value) -> + atom.config.observe "#{themeName}.fontSize", (value) -> setFontSize(value) - atom.config.observe 'solarized-one-light-ui.tabSizing', (value) -> + atom.config.observe "#{themeName}.tabSizing", (value) -> setTabSizing(value) - atom.config.observe 'solarized-one-light-ui.hideDockButtons', (value) -> + atom.config.observe "#{themeName}.tabCloseButton", (value) -> + setTabCloseButton(value) + + atom.config.observe "#{themeName}.hideDockButtons", (value) -> setHideDockButtons(value) + atom.config.observe "#{themeName}.stickyHeaders", (value) -> + setStickyHeaders(value) + # DEPRECATED: This can be removed at some point (added in Atom 1.17/1.18ish) # It removes `layoutMode` - if atom.config.get('solarized-one-light-ui.layoutMode') - atom.config.unset('solarized-one-light-ui.layoutMode') + if atom.config.get("#{themeName}.layoutMode") + atom.config.unset("#{themeName}.layoutMode") deactivate: -> unsetFontSize() unsetTabSizing() + unsetTabCloseButton() unsetHideDockButtons() + unsetStickyHeaders() # Font Size ----------------------- setFontSize = (currentFontSize) -> - if Number.isInteger(currentFontSize) - root.style.fontSize = "#{currentFontSize}px" - else if currentFontSize is 'Auto' - unsetFontSize() + root.style.fontSize = "#{currentFontSize}px" unsetFontSize = -> root.style.fontSize = '' @@ -37,19 +44,43 @@ unsetFontSize = -> # Tab Sizing ----------------------- setTabSizing = (tabSizing) -> - root.setAttribute('theme-solarized-one-light-ui-tabsizing', tabSizing.toLowerCase()) + root.setAttribute("theme-#{themeName}-tabsizing", tabSizing.toLowerCase()) unsetTabSizing = -> - root.removeAttribute('theme-solarized-one-light-ui-tabsizing') + 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) -> if hideDockButtons - root.setAttribute('theme-solarized-one-light-ui-dock-buttons', 'hidden') + root.setAttribute("theme-#{themeName}-dock-buttons", 'hidden') else unsetHideDockButtons() unsetHideDockButtons = -> - root.removeAttribute('theme-solarized-one-light-ui-dock-buttons') + root.removeAttribute("theme-#{themeName}-dock-buttons") + + +# Sticky Headers ----------------------- + +setStickyHeaders = (stickyHeaders) -> + if stickyHeaders + root.setAttribute("theme-#{themeName}-sticky-headers", 'sticky') + else + unsetStickyHeaders() + +unsetStickyHeaders = -> + root.removeAttribute("theme-#{themeName}-sticky-headers") diff --git a/package.json b/package.json index ee388c0..09d9d22 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "solarized-one-light-ui", "theme": "ui", - "version": "1.10.10", + "version": "1.12.0", "description": "Solarized One light UI Theme for Atom. A perfect companion for the Solarized Dark Syntax Theme.", "keywords": [ "light", @@ -20,14 +20,22 @@ "configSchema": { "fontSize": { "title": "Font Size", - "description": "Change the UI font size. Needs to be between 8 and 20. In Auto mode, the Font Size will automatically change based on the window size.", - "type": [ - "integer", - "string" + "description": "Change the font size for the UI.", + "type": "integer", + "default": 12, + "enum": [ + 10, + 11, + 12, + 13, + 14, + 15, + 16, + 17, + 18, + 19, + 20 ], - "minimum": 8, - "maximum": 20, - "default": "Auto", "order": 1 }, "tabSizing": { @@ -42,12 +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": 5 } } } diff --git a/spec/theme-spec.coffee b/spec/theme-spec.coffee index cc00160..cdfc829 100644 --- a/spec/theme-spec.coffee +++ b/spec/theme-spec.coffee @@ -1,25 +1,36 @@ -describe "Solarized One Light UI Theme", -> +themeName = 'solarized-one-light-ui' + +describe "#{themeName} theme", -> beforeEach -> waitsForPromise -> - atom.packages.activatePackage('solarized-one-light-ui') + atom.packages.activatePackage(themeName) it "allows the font size to be set via config", -> - expect(document.documentElement.style.fontSize).toBe '' + expect(document.documentElement.style.fontSize).toBe '12px' - atom.config.set('solarized-one-light-ui.fontSize', '10') + atom.config.set("#{themeName}.fontSize", '10') expect(document.documentElement.style.fontSize).toBe '10px' - atom.config.set('solarized-one-light-ui.fontSize', 'Auto') - expect(document.documentElement.style.fontSize).toBe '' - it "allows the tab sizing to be set via config", -> - atom.config.set('solarized-one-light-ui.tabSizing', 'Maximum') - expect(document.documentElement.getAttribute('theme-solarized-one-light-ui-tabsizing')).toBe 'maximum' + atom.config.set("#{themeName}.tabSizing", 'Maximum') + expect(document.documentElement.getAttribute("theme-#{themeName}-tabsizing")).toBe 'maximum' it "allows the tab sizing to be set via config", -> - atom.config.set('solarized-one-light-ui.tabSizing', 'Minimum') - expect(document.documentElement.getAttribute('theme-solarized-one-light-ui-tabsizing')).toBe 'minimum' + 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('solarized-one-light-ui.hideDockButtons', true) - expect(document.documentElement.getAttribute('theme-solarized-one-light-ui-dock-buttons')).toBe 'hidden' + atom.config.set("#{themeName}.hideDockButtons", true) + expect(document.documentElement.getAttribute("theme-#{themeName}-dock-buttons")).toBe 'hidden' + + it "allows the tree-view headers to be sticky via config", -> + atom.config.set("#{themeName}.stickyHeaders", true) + expect(document.documentElement.getAttribute("theme-#{themeName}-sticky-headers")).toBe 'sticky' + + it "allows the tree-view headers to not be sticky via config", -> + atom.config.set("#{themeName}.stickyHeaders", false) + expect(document.documentElement.getAttribute("theme-#{themeName}-sticky-headers")).toBe null diff --git a/styles/config.less b/styles/config.less index ef859c4..06f5e3f 100644 --- a/styles/config.less +++ b/styles/config.less @@ -1,13 +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, @@ -31,7 +36,7 @@ } -// Maximum (full width) --------------- +// Maximum (full width) [@{theme-tabsizing}="maximum"] .tab-bar { .tab, @@ -41,7 +46,7 @@ } -// Minimum (show long paths) --------------- +// Minimum (show long paths) [@{theme-tabsizing}="minimum"] .tab-bar { .tab, @@ -59,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 ------------------------------ @@ -75,3 +93,44 @@ } } + + +// Sticky Projects ------------------------------ + +[@{theme-stickyHeaders}="sticky"] { + + .tree-view { + .project-root-header { + position: sticky; + top: 0; + z-index: 1; + padding-left: 5px; + padding-right: 10px; + border-bottom: 1px solid @base-border-color; + background-color: @tree-view-background-color; + } + .project-root.project-root { + margin-left: -5px; + margin-right: -10px; + + // Disable selection + &::before { + display: none; + } + + // Add selection back + &.selected .project-root-header { + background-color: @background-color-selected; + } + } + &:focus .selected .project-root-header.project-root-header { + background: @button-background-color-selected; + } + + // Fix sticky header from covering auto-revealed items + .list-item.selected { + padding-top: @ui-tab-height; + margin-top: -@ui-tab-height; + } + } +} diff --git a/styles/docks.less b/styles/docks.less index 4c72f5d..c91681e 100644 --- a/styles/docks.less +++ b/styles/docks.less @@ -33,10 +33,10 @@ // Make toggle buttons cover ^ border .atom-dock-toggle-button.left { - margin-left: -1px; + margin-left: -2px; } .atom-dock-toggle-button.right { - margin-right: -1px; + margin-right: -2px; } .atom-dock-inner:not(.atom-dock-open) .atom-dock-toggle-button.bottom { margin-bottom: -1px; diff --git a/styles/modal.less b/styles/modal.less index c793b8f..7bc0a42 100644 --- a/styles/modal.less +++ b/styles/modal.less @@ -80,6 +80,11 @@ atom-panel.modal { position: relative; // fixes stacking order } + .command-palette { + padding: 1px; // prevents the box-shadow of the input from being cut off + background-color: @overlay-background-color; + } + // Container &:before { diff --git a/styles/status-bar.less b/styles/status-bar.less index 43aa36b..70f3a99 100644 --- a/styles/status-bar.less +++ b/styles/status-bar.less @@ -82,4 +82,15 @@ cursor: default; } } + + // Remove margin for icon without text + status-bar-launch-mode::before, // Launch mode + .about-release-notes::before, // New release squirrel + .PortalStatusBarIndicator .icon::before, // Teletype + .icon.is-icon-only::before { + margin-right: 0; + } + .github-PushPull-label.is-push:empty { // GitHub package when nothing to push + margin-right: -.25em; + } } diff --git a/styles/tabs.less b/styles/tabs.less index e7d96e1..d211d58 100644 --- a/styles/tabs.less +++ b/styles/tabs.less @@ -217,16 +217,19 @@ // Active pane marker -------------- -atom-pane.active .tab.active:before { - content: ""; - position: absolute; - pointer-events: none; - z-index: 2; - top: 0; - left: -1px; // cover left border - bottom: 0; - width: 2px; - background: @accent-color; +atom-pane-axis > atom-pane.active, +atom-pane-container > atom-pane.pane { + .tab.active:before { + content: ""; + position: absolute; + pointer-events: none; + z-index: 2; + top: 0; + left: -1px; // cover left border + bottom: 0; + width: 2px; + background: @accent-color; + } } // hide marker in docks diff --git a/styles/ui-variables-custom.less b/styles/ui-variables-custom.less index 6f068b8..10babc6 100644 --- a/styles/ui-variables-custom.less +++ b/styles/ui-variables-custom.less @@ -92,8 +92,8 @@ @input-selection-color: mix( hsv( @ui-hue, 33%, 95%), hsl( @ui-hue, 100%, 98%), @accent-luma * 2 ); // mix hsv + hsl (favor hsl for dark, hsv for light colors) @input-selection-color-focus: mix( hsv( @ui-hue, 44%, 90%), hsl( @ui-hue, 100%, 94%), @accent-luma * 2 ); // mix hsv + hsl (favor hsl for dark, hsv for light colors) -@overlay-backdrop-color: hsl(@ui-hue, @ui-saturation*0.4, @ui-lightness*0.72); -@overlay-backdrop-opacity: .8; +@overlay-backdrop-color: hsl(@ui-hue, @ui-saturation*0.4, @ui-lightness*0.8); +@overlay-backdrop-opacity: .66; @progress-background-color: @accent-color; diff --git a/styles/ui-variables.less b/styles/ui-variables.less index d232ca7..c8dc10c 100644 --- a/styles/ui-variables.less +++ b/styles/ui-variables.less @@ -94,4 +94,4 @@ // Font ----------------- -@font-family: 'BlinkMacSystemFont', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif; +@font-family: system-ui;