Awesome

flowdock-refined

Flowdock desktop app custom UI

Screenshots

After


With Flowdock Refined

Before


Without Flowdock Refined

Flowdock Refined makes subtle tweaks to the Flowdock Desktop client to make it easier to see important information.

Installation

$ npm -g install flowdock-refined

This will automatically install it to the Flowdock desktop client. If you already have custom styling for Flowdock it will back up your changes first.

Chat Improvements

Highlights what you wrote with a blue background.
Larger padding between "breaks in time".
Cleaner text area for typing.
More clear when you are editing previous messages.
Smaller Send and Upload buttons, both moved to the right.
Black and white avatars when people are away.

Flow Improvements

Unifies a few different text styles and fonts used by the flow to one style.
Easy to see see Github repo names.
Hides redundant usernames.
Hides unnecessary commit hashes.
Hides unneeded times.
Hides unnecessary #-tags caused by PR (closes #37 makes Flowdock create a #37 tag).
For commits, displays inline files modified/added/removed.
Includes full commit messages and comments instead of hiding them.
Displays real urls instead of the word "Original".

Tab Improvements

Easier to see which tab is active
More modern tab style

Bonus

Larger emoji, especially :shipit:.
Round avatars, because why not.
Provides an avatar for Jenkins.
Easier to read tabs.

Make your own changes

You can make your own additional changes by modifying ~/Library/Application Support/Flowdock/custom.css. flowdock-refined will create this file for you but will never change it.

You can also make pull requests back to this repo.

Limitations

The Flowdock desktop app currently only allows custom CSS, not custom JavaScript. Please vote to enable custom JavaScript so we can make a lot more improvements.

Inspiration

Inspired by my Opower co-worker Nowell Strite and Shopify's Flowdock Styles.

Disclaimer

This is not a product of Flowdock.

About the Author

Hello fellow developer! My name is Dylan Greene. When not overwhelmed with my two kids I enjoy contributing to the open source community. I'm a tech lead at Opower. I lead a team using Grunt and Angular to build software that successfully helps people like us use less power. Not too long ago I co-created Doodle or Die, a hilarious web game with millions of doodles that won us Node Knockout for the "most fun" category. I'm dylang on Twitter and other places.

Some of my other Node projects:

Name	Description	Github Stars	Npm Installs
`grunt-notify`	Automatic desktop notifications for Grunt errors and warnings using Growl for OS X or Windows, Mountain Lion and Mavericks Notification Center, and Notify-Send.	619	52,208
`grunt-prompt`	Interactive prompt for your Grunt config using console checkboxes, text input with filtering, password fields.	142	6,885
`rss`	RSS feed generator. A really simple API to add RSS feeds to any project.	177	98,802
`shortid`	Amazingly short non-sequential url-friendly unique id generator.	129	22,984
`xml`	Fast and simple xml generator. Supports attributes, CDATA, etc. Includes tests and examples.	35	180,625
`anthology`	Module information and stats for any @npmjs user	New!	TBD
`grunt-attention`	Display attention-grabbing messages in the terminal	New!	336
`observatory`	Beautiful UI for showing tasks running on the command line.	New!	81
`changelog`	Command line tool (and Node module) that generates a changelog in color output, markdown, or json for modules in npmjs.org's registry as well as any public github.com repo.	51	2,081
`logging`	Super sexy color console logging with cluster support.	21	8,793
`grunt-cat`	Echo a file to the terminal. Works with text, figlets, ascii art, and full-color ansi.	New!	396

This list was generated using anthology.

License

Released under the MIT license.

Screenshots are CC BY-SA (Attribution-ShareAlike).

Generated using grunt-readme with grunt-templates-dylang on Tuesday, April 15, 2014.