diff --git a/app/assets/images/favorite.png b/app/assets/images/favorite.png new file mode 100644 index 0000000..d4c53be Binary files /dev/null and b/app/assets/images/favorite.png differ diff --git a/app/assets/images/reply.png b/app/assets/images/reply.png new file mode 100644 index 0000000..5493c72 Binary files /dev/null and b/app/assets/images/reply.png differ diff --git a/app/assets/images/retweet.png b/app/assets/images/retweet.png new file mode 100644 index 0000000..94e3595 Binary files /dev/null and b/app/assets/images/retweet.png differ diff --git a/app/assets/javascripts/twitter.js b/app/assets/javascripts/twitter.js new file mode 100644 index 0000000..05993f2 --- /dev/null +++ b/app/assets/javascripts/twitter.js @@ -0,0 +1,43 @@ +(function() { + if (window.__twitterIntentHandler) return; + var intentRegex = /twitter\.com(\:\d{2,4})?\/intent\/(\w+)/, + windowOptions = 'scrollbars=yes,resizable=yes,toolbar=no,location=yes', + width = 550, + height = 420, + winHeight = screen.height, + winWidth = screen.width; + + function handleIntent(e) { + e = e || window.event; + var target = e.target || e.srcElement, + m, left, top; + + while (target && target.nodeName.toLowerCase() !== 'a') { + target = target.parentNode; + } + + if (target && target.nodeName.toLowerCase() === 'a' && target.href) { + m = target.href.match(intentRegex); + if (m) { + left = Math.round((winWidth / 2) - (width / 2)); + top = 0; + + if (winHeight > height) { + top = Math.round((winHeight / 2) - (height / 2)); + } + + window.open(target.href, 'intent', windowOptions + ',width=' + width + + ',height=' + height + ',left=' + left + ',top=' + top); + e.returnValue = false; + e.preventDefault && e.preventDefault(); + } + } + } + + if (document.addEventListener) { + document.addEventListener('click', handleIntent, false); + } else if (document.attachEvent) { + document.attachEvent('onclick', handleIntent); + } + window.__twitterIntentHandler = true; +}()); diff --git a/app/assets/stylesheets/_tweets.css.sass b/app/assets/stylesheets/_tweets.css.sass index 4d3b32d..f311a2a 100644 --- a/app/assets/stylesheets/_tweets.css.sass +++ b/app/assets/stylesheets/_tweets.css.sass @@ -8,12 +8,22 @@ :border 1px solid #c1c5cb :border-width 1px 0 :padding 15px - .avatar - :width 60px + .left :float left - img - :width 48px - :height 48px + :width 60px + .avatar + img + :width 48px + :height 48px + ul.actions + li + :padding 0 + a + :float left + img + :width 16px + :height 16px + :vertical-align bottom .tweet_content_fix :float left :width 0 diff --git a/app/views/layouts/_base.html.haml b/app/views/layouts/_base.html.haml index eab9eb2..8997bd5 100644 --- a/app/views/layouts/_base.html.haml +++ b/app/views/layouts/_base.html.haml @@ -3,6 +3,7 @@ %head %title= @title = stylesheet_link_tag "application" + = javascript_include_tag "twitter" %body .navbar.navbar-static-top .navbar-inner diff --git a/app/views/shared/_tweet.html.haml b/app/views/shared/_tweet.html.haml index 3f76f1a..97408e5 100644 --- a/app/views/shared/_tweet.html.haml +++ b/app/views/shared/_tweet.html.haml @@ -1,7 +1,13 @@ .item .tweet - .avatar - = link_to image_tag(item.user.profile_image_url, :alt => item.user.screen_name, :title => item.user.name), :controller => "users", :action => "best", :screen_name => item.user.screen_name + .left + .avatar + = link_to image_tag(item.user.profile_image_url, :alt => item.user.screen_name, :title => item.user.name), :controller => "users", :action => "best", :screen_name => item.user.screen_name + %ul.inline.actions + %li + = link_to image_tag("reply.png", :alt => "reply"), "https://twitter.com/intent/tweet?in_reply_to=#{item.id}" + = link_to image_tag("retweet.png", :alt => "retweet"), "https://twitter.com/intent/retweet?tweet_id=#{item.id}" + = link_to image_tag("favorite.png", :alt => "favorite"), "https://twitter.com/intent/favorite?tweet_id=#{item.id}" .tweet_content_fix .tweet_content .user