flex-tool-bar

Easily Customizable ToolBar for Atom

cakecatz

84,548

191

2.2.7

MIT

GitHub

Flex Tool Bar

Build Status

About

This is a plugin for the Atom Tool Bar package.

You can configure your toolbar buttons with a CSON, JSON, JSON5, js, coffee file to perform specific actions in Atom or to open web sites in your default browser.

screenshot

To edit your config file, type Flex Tool Bar: Edit Config File in the Atom command palette.

Configuration

Flex Tool Bar has five types you can configure: button, file, function, url and spacer.

Features

Button Icon

The default iconset is Octicons (Atom's flavor).

Example:

{
  type: "button"
  tooltip: "New File"
  callback: "application:new-file"
  icon: "file-add"
}

But you can specify the following iconsets:

Example:

{
  type: "button"
  tooltip: "Save File"
  callback: "core:save"
  icon: "floppy-o"
  iconset: "fa"
}

Button text

You can add text or html to the button.

Example:

{
  type: "button"
  text: "M"
  callback: "minimap:toggle"
}

Set html to true to render the text as html. You may combine text with an icon.

Example:

{
  type: "button"
  icon: "list-unordered"
  text: "Toggle <b>Minimap</b>"
  html: true
  callback: "minimap:toggle"
}

Button style

You can use CSS styles per button.

style: {
  color: "red"
  background: "green"
  border: "1px solid blue"
}

You can specify color and background directly as well.

color: "red"
background: "green"

Button hover

you can use CSS styles for button hover per button.

hover: {
  color: "green"
  background: "red"
}

Button class

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.

class: ["fa-rotate-90", "custom-class"]

Multiple callback

callback: ["callback1", "callback2"]

Function callback

callback: target ->
  console.log target

Hide(Show), Disable(Enable) button

You can hide or disable buttons when a certain grammar is used in the active file, a specified file is matched, a package is active, or based on a function.

If you don't know what language to use, see this issue.

If you set disable (show, hide or enable) this way:

disable: {
  grammar: "coffee"
}

It will disable the button if a CoffeeScript file is open.

You can also look for a specific file using globs:

show: {
  pattern: "*.js"
}

You can also look for a specific package using:

show: {
  package: "context-git"
}

or a specific setting using:

show: {
  setting: "tree-view.autoReveal"
}

or pass a function that is given the current editor using:

show: {
  function: (editor) -> editor.isModified()
}

🚨 Functions are polled every 300ms by default (this can be changed in the settings) to check for changes. This could affect performance in Atom if long running operations are handled in the function.

Of course, you can set it as an array.

disable: {
  grammar: [
    "json"
    "less"
  ]
}

You can use ! in grammar and package 😆

hide: {
  grammar: "!Markdown"
}

This will hide button when opened any file except Markdown.

show: {
  grammar: "Markdown"
}

This is same above.

Examples

.cson Example

[
  {
    type: "url"
    icon: "octoface"
    url: "https://github.com/"
    tooltip: "Github Page"
  }
  {
    type: "spacer"
  }
  {
    type: "button"
    icon: "document"
    callback: "application:new-file"
    tooltip: "New File"
    iconset: "ion"
    mode: "dev"
  }
  {
    type: "button"
    icon: "columns"
    iconset: "fa"
    callback: ["pane:split-right", "pane:split-right"]
  }
  {
    type: "button"
    icon: "circuit-board"
    callback: "git-diff:toggle-diff-list"
    style:
      color: "#FA4F28"
    hover:
      color: "#FA8F28"
  }
  {
    type: "button"
    icon: "markdown"
    callback: "markdown-preview:toggle"
    disable: "!markdown"
  }
  {
    type: "button"
    icon: "sitemap"
    iconset: "fa"
    class: "fa-rotate-180"
    color: "red"
    background: "green"
    tooltip: "This is just an example it does nothing"
  }
  {
    type: "file"
    iconset: "fa"
    icon: "book"
    file: "README.md"
    tooltip: "View Documentation"
  }
  {
    type: "button"
    icon: "list-unordered"
    text: "Toggle <b>Minimap</b>"
    html: true
    callback: "minimap:toggle"
    show: {
      package: "minimap"
    }
  }
]

.coffee Example

module.exports = [
  {
    type: "function"
    icon: "bug"
    callback: (target) ->
      console.dir target
    tooltip: "Debug Target"
  }
  {
    type: "spacer"
  }
  {
    type: "url"
    icon: "octoface"
    url: "https://github.com/"
    tooltip: "Github Page"
  }
  {
    type: "spacer"
  }
  {
    type: "button"
    icon: "document"
    callback: "application:new-file"
    tooltip: "New File"
    iconset: "ion"
    mode: "dev"
  }
  {
    type: "button"
    icon: "columns"
    iconset: "fa"
    callback: ["pane:split-right", "pane:split-right"]
  }
  {
    type: "button"
    icon: "circuit-board"
    callback: "git-diff:toggle-diff-list"
    style:
      color: "#FA4F28"
    hover:
      color: "#FA8F28"
  }
  {
    type: "button"
    icon: "markdown"
    callback: "markdown-preview:toggle"
    disable: "!markdown"
  }
  {
    type: "button"
    icon: "sitemap"
    iconset: "fa"
    class: "fa-rotate-180"
    color: "red"
    background: "green"
    tooltip: "This is just an example it does nothing"
  }
  {
    type: "file"
    iconset: "fa"
    icon: "book"
    file: "README.md"
    tooltip: "View Documentation"
  }
  {
    type: "button"
    icon: "list-unordered"
    text: "Toggle <b>Minimap</b>"
    html: true
    callback: "minimap:toggle"
    show: {
      package: "minimap"
    }
  }
]

Per Project Configuration

If you want buttons that are only for a specific project. Create a toolbar configuration file at the root of your project directory that is listed in the Atom Tree View. All buttons added to the project toolbar will append to the global toolbar buttons.

See more examples on Wiki

Authors

Ryo Narita Jeroen van Warmerdam Tony Brix
Ryo Narita Jeroen van Warmerdam Tony Brix

License

MIT © Ryo Narita