Flex Tool Bar

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.

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.

• button creates default buttons for your toolbar.

  You can use it to set actions like application:new-file.

• file creates buttons pointing to specific files that will be opened in Atom.

  You can use it to open files of nearly any kind that Atom supports, such as logs, configs or simply a project's README.md.

• function creates buttons that can call a function with the previous target as a parameter

  This requires the config file to be a .js or .coffee file that exports the array of buttons

• url creates buttons pointing to specific web pages.

  Use this to open any web site, such as your GitHub notifications, in your default browser. See this feature in action in this screencast.

  If you have the package browser-plus installed, you can use it to open your links. Just check the box in Flex Tool Bar's settings.

  Also Atom URI are allowed. For example atom://config/packages/flex-tool-bar will open Flex Tool Bar's settings.

  You can also create dynamic urls with the following placeholders:

  • {repo-name} The repo name for the current repo
  • {repo-owner} The GitHub user for the current repo
  • {atom-version} The current version of Atom

  e.g. https://github.com/{repo-owner}/{repo-name}

• spacer adds separators between toolbar buttons.

Features

• multiple callbacks
• function callback
• button icons
• button text
• inline button styles
• add class(s) to buttons
• hide/disable a button in certain cases

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:

• Ionicons (ion)
• FontAwesome (fa)
• Foundation (fi)
• IcoMoon (icomoon)
• Devicon (devicon)
• MaterialDesignIcons (mdi)

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

License

MIT © Ryo Narita