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
Copyright (c) 2014 Dylan Greene, contributors.
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.