From 8c0740fa12b2ca37cf5409915044d3f2612fbe8c Mon Sep 17 00:00:00 2001 From: Eric Cornelisesn Date: Thu, 12 Mar 2020 18:06:18 +0200 Subject: [PATCH 1/3] feat: add `background`, `color`, and `class` options Following: https://github.com/suda/tool-bar/pull/278 and: https://github.com/suda/tool-bar/pull/285 Released with v1.2.1 and v1.2.2 of tool-bar respectively --- lib/types/button.js | 3 +++ lib/types/file.js | 3 +++ lib/types/function.js | 3 +++ lib/types/url.js | 3 +++ 4 files changed, 12 insertions(+) diff --git a/lib/types/button.js b/lib/types/button.js index f13533f..c12cbc6 100644 --- a/lib/types/button.js +++ b/lib/types/button.js @@ -8,6 +8,9 @@ export default function (toolBar, button) { html: button.html, tooltip: button.tooltip, priority: button.priority || 45, + background: button.background, + color: button.color, + class: button.class, callback: button.callback, }; diff --git a/lib/types/file.js b/lib/types/file.js index 4931a75..0ff0416 100644 --- a/lib/types/file.js +++ b/lib/types/file.js @@ -9,6 +9,9 @@ export default function (toolBar, button) { tooltip: button.tooltip, priority: button.priority || 45, data: button.file, + background: button.background, + color: button.color, + class: button.class, callback: (file) => { atom.workspace.open(file); } diff --git a/lib/types/function.js b/lib/types/function.js index 51708ec..f63fa84 100644 --- a/lib/types/function.js +++ b/lib/types/function.js @@ -9,6 +9,9 @@ export default function (toolBar, button, getActiveItem) { tooltip: button.tooltip, priority: button.priority || 45, data: button.callback, + background: button.background, + color: button.color, + class: button.class, callback(data) { return data.call(this, getActiveItem().item); }, diff --git a/lib/types/url.js b/lib/types/url.js index c85563f..77f8ea6 100644 --- a/lib/types/url.js +++ b/lib/types/url.js @@ -12,6 +12,9 @@ export default function (toolBar, button) { tooltip: button.tooltip, priority: button.priority || 45, data: button.url, + background: button.background, + color: button.color, + class: button.class, callback(url) { const urlReplace = new UrlReplace(); // eslint-disable-next-line no-param-reassign From 52702f736a878a3256cc0fb6a5e211a9be3ab470 Mon Sep 17 00:00:00 2001 From: Eric Cornelisesn Date: Thu, 12 Mar 2020 18:06:33 +0200 Subject: [PATCH 2/3] test: `background`, `color`, and `class` options --- spec/flex-tool-bar-spec.js | 51 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) diff --git a/spec/flex-tool-bar-spec.js b/spec/flex-tool-bar-spec.js index ad7d96a..47edd2e 100644 --- a/spec/flex-tool-bar-spec.js +++ b/spec/flex-tool-bar-spec.js @@ -216,6 +216,57 @@ describe('FlexToolBar', function () { }); }); + describe('styling options', function () { + beforeEach(function () { + spyOn(flexToolBar.toolBar, 'addButton'); + this.obj = { + background: 'red', + color: 'purple', + class: 'my-awesome-class' + }; + }); + it('should allow background, color, and class options on button', function () { + flexToolBar.addButtons([{ + type: 'button', + background: this.obj.background, + color: this.obj.color, + class: this.obj.class, + }]); + + expect(flexToolBar.toolBar.addButton).toHaveBeenCalledWith(jasmine.objectContaining(this.obj)); + }); + it('should allow background, color, and class options on file', function () { + flexToolBar.addButtons([{ + type: 'file', + background: this.obj.background, + color: this.obj.color, + class: this.obj.class, + }]); + + expect(flexToolBar.toolBar.addButton).toHaveBeenCalledWith(jasmine.objectContaining(this.obj)); + }); + it('should allow background, color, and class options on function', function () { + flexToolBar.addButtons([{ + type: 'function', + background: this.obj.background, + color: this.obj.color, + class: this.obj.class, + }]); + + expect(flexToolBar.toolBar.addButton).toHaveBeenCalledWith(jasmine.objectContaining(this.obj)); + }); + it('should allow background, color, and class options on url', function () { + flexToolBar.addButtons([{ + type: 'url', + background: this.obj.background, + color: this.obj.color, + class: this.obj.class, + }]); + + expect(flexToolBar.toolBar.addButton).toHaveBeenCalledWith(jasmine.objectContaining(this.obj)); + }); + }); + describe('observed events', function () { it('should observe grammar change', async function () { await atom.packages.activatePackage('language-javascript'); From d29b902433a57ba187b07b4170bf8d0afebff501 Mon Sep 17 00:00:00 2001 From: Eric Cornelisesn Date: Thu, 12 Mar 2020 19:16:39 +0200 Subject: [PATCH 3/3] docs: include `background`, `color and `class` in README --- README.md | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 8e3fb0d..eca50dd 100644 --- a/README.md +++ b/README.md @@ -142,6 +142,13 @@ style: { } ``` +You can specify `color` and `background` directly as well. + +```coffeescript +color: "red" +background: "green" +``` + ### Button hover you can use CSS styles for button hover per button. @@ -154,12 +161,12 @@ hover: { ### Button class -Using a comma separated list you can add your own class names to buttons. +Using an array you can add your own class names to buttons. This is great if you want to take advantage of native styles like Font Awesome or if you have your own styles you prefer to keep in a stylesheet. ```coffeescript -className: "fa-rotate-90, custom-class" +class: ["fa-rotate-90", "custom-class"] ``` ### Multiple callback @@ -305,7 +312,9 @@ This is same above. type: "button" icon: "sitemap" iconset: "fa" - className: "fa-rotate-180" + class: "fa-rotate-180" + color: "red" + background: "green" tooltip: "This is just an example it does nothing" } { @@ -384,7 +393,9 @@ module.exports = [ type: "button" icon: "sitemap" iconset: "fa" - className: "fa-rotate-180" + class: "fa-rotate-180" + color: "red" + background: "green" tooltip: "This is just an example it does nothing" } {