Browse files

initial commit

  • Loading branch information...
0 parents commit f36c2205d3ee14154ea7275f43f4fd1157b84294 Jens Arps committed Dec 2, 2011
Showing with 160 additions and 0 deletions.
  1. +1 −0 .gitignore
  2. +76 −0 Flowdock Enhancements.user.js
  3. +27 −0 Readme.md
  4. +1 −0 flowdock-bookmarklet.js
  5. +55 −0 index.html
  6. BIN screenie.png
1 .gitignore
@@ -0,0 +1 @@
+.idea
76 Flowdock Enhancements.user.js
@@ -0,0 +1,76 @@
+// ==UserScript==
+// @name Flowdock Enhancements
+// @namespace http://fluidapp.com
+// @description Some Enhancements for Flowdock
+// @include *
+// @author Jens Arps http://jensarps.de
+// ==/UserScript==
+
+(function () {
+
+ var styleSheetId = 0;
+
+ var slice = Function.prototype.call.bind(Array.prototype.slice);
+
+ var enhancements = {
+
+ applyUserImages: function(){
+ // generic styles:
+ var cssString = '#flowdock-chat .chat_line .chat_line_content { padding-left: 70px; } \
+ #flowdock-chat .chat_line .nick { left: 70px; text-align: left; color: #A8A8A8; } \
+ #flowdock-chat .chat_line .chat_line_header { padding: 10px 0 20px 0; } \
+ #flowdock-chat .chat_line.hide_header .chat_line_header { padding-bottom: 0; } \
+ #flowdock-chat #chat_app_lines .chat_line { padding-bottom: 5px; }';
+ this.createStylesheet(cssString);
+
+ // add images:
+ slice(document.querySelectorAll('#userlist_button div')).forEach(function(node){
+ var id = node.id.split('_').pop();
+ var img = (node && node.style.backgroundImage) || '';
+
+ cssString = '.chat_line_header .nick.user_' + id + ':after { \
+ content: ""; \
+ background: ' + img + ' no-repeat center; \
+ width: 30px; \
+ height: 30px; \
+ display: inline-block; \
+ position: absolute; \
+ left: -50px; \
+ padding: 1px; \
+ border: solid 1px #BFBFBF; \
+ }';
+ this.createStylesheet(cssString);
+ }, this);
+ },
+
+ makeTimestampVisible: function(){
+ var cssString = '#flowdock-chat .chat_line .timestamp span.time { display: block !important; }';
+ this.createStylesheet(cssString);
+ },
+
+ createStylesheet: function(cssText){
+ var head = document.getElementsByTagName('head')[0],
+ style = document.createElement('style'),
+ rules = document.createTextNode(cssText);
+
+ style.type = 'text/css';
+ style.id="flowdockEnhancements_" + styleSheetId++;
+ if(style.styleSheet){
+ style.styleSheet.cssText = rules.nodeValue;
+ }else{
+ style.appendChild(rules);
+ }
+ head.appendChild(style);
+ },
+
+ runAll: function(){
+ this.makeTimestampVisible();
+ this.applyUserImages();
+ }
+ };
+
+ if (window.fluid) {
+ enhancements.runAll();
+ }
+})();
+
27 Readme.md
@@ -0,0 +1,27 @@
+About
+===
+
+These are some enhancements I use for Flowdock. They make it look more like
+a popular chat client, which really helps in readability.
+
+It will do the following:
+
+ * Always display the message time
+ * Show a user's avatar next to her message
+
+See the screenshot for an example.
+
+You can have it as a Fluid.app user script, or as a bookmarklet. For the
+bookmarklet, see:
+
+https://jensarps.github.com/flowdock-enhancements/
+
+Fluid App User Script
+====
+
+Flowdock Enhancements.user.js
+
+Bookmarklet Code
+===
+
+flowdock-bookmarklet.js
1 flowdock-bookmarklet.js
@@ -0,0 +1 @@
+(function(){var a=0,b=Function.prototype.call.bind(Array.prototype.slice),c={applyUserImages:function(){var a="#flowdock-chat .chat_line .chat_line_content { padding-left: 70px; } #flowdock-chat .chat_line .nick { left: 70px; text-align: left; color: #A8A8A8; } #flowdock-chat .chat_line .chat_line_header { padding: 10px 0 20px 0; } #flowdock-chat .chat_line.hide_header .chat_line_header { padding-bottom: 0; } #flowdock-chat #chat_app_lines .chat_line { padding-bottom: 5px; }";this.createStylesheet(a),b(document.querySelectorAll("#userlist_button div")).forEach(function(b){var c=b.id.split("_").pop(),d=b&&b.style.backgroundImage||"";a=".chat_line_header .nick.user_"+c+':after { content: ""; background: '+d+" no-repeat center; width: 30px; height: 30px; display: inline-block; position: absolute; left: -50px; padding: 1px; border: solid 1px #BFBFBF; }",this.createStylesheet(a)},this)},makeTimestampVisible:function(){var a="#flowdock-chat .chat_line .timestamp span.time { display: block !important; }";this.createStylesheet(a)},createStylesheet:function(b){var c=document.getElementsByTagName("head")[0],d=document.createElement("style"),e=document.createTextNode(b);d.type="text/css",d.id="flowdockEnhancements_"+a++,d.styleSheet?d.styleSheet.cssText=e.nodeValue:d.appendChild(e),c.appendChild(d)},runAll:function(){this.makeTimestampVisible(),this.applyUserImages()}};c.runAll()})()
55 index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset='utf-8'>
+
+ <title>IDBWrapper</title>
+ <link rel="stylesheet" href="/css/style.css" />
+ <script type="text/javascript">
+
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-10931011-2']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+
+ </script>
+</head>
+
+<body>
+
+ <a href="https://github.com/jensarps/flowdock-enhancements"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
+
+ <div id="container">
+
+ <h1><a href="https://github.com/jensarps/flowdock-enhancements">Flowdock Enhancements</a></h1>
+
+ <p>These are some enhancements I use for Flowdock. They make it look more like
+ a popular chat client, which really helps in readability.</p>
+
+ <p>It will do the following:</p>
+
+ <ul>
+ <li>Always display the message time</li>
+ <li>Show a user's avatar next to her message</li>
+ </ul>
+
+ <p>
+ See the screenshot for an example:<br>
+ <img src="screenie.png">
+ </p>
+ <p>
+ Drag the link below to your bookmarks:
+ </p>
+ <p>
+ <a href="javascript:(function(){var s=document.createElement('script');s.type='text/javascript';s.src='';document.getElementsByTagName('head')[0].appendChild(s);})();">Skypify Flowdock</a>
+ </p>
+
+ </div>
+
+</body>
+</html>
BIN screenie.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit f36c220

Please sign in to comment.