From 1ed6406a7d35d20ca21ff65133d1e62db701f923 Mon Sep 17 00:00:00 2001
From: Neil Lalonde <neillalonde@gmail.com>
Date: Mon, 25 Mar 2013 18:54:00 -0400
Subject: [PATCH] Add twitter, facebook, and google plus links to share dialog

---
 .../discourse/controllers/share_controller.js       | 11 +++++++++++
 .../discourse/templates/share.js.handlebars         | 13 +++++++++++--
 .../javascripts/discourse/views/share_view.js       | 12 ++++++++++++
 .../stylesheets/application/share_link.css.scss     | 11 ++++++++---
 4 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/discourse/controllers/share_controller.js b/app/assets/javascripts/discourse/controllers/share_controller.js
index 93811b37e55..6dedc2e04ec 100644
--- a/app/assets/javascripts/discourse/controllers/share_controller.js
+++ b/app/assets/javascripts/discourse/controllers/share_controller.js
@@ -27,6 +27,17 @@ Discourse.ShareController = Discourse.Controller.extend({
   close: function() {
     this.set('link', '');
     return false;
+  },
+
+  popupHeights: {
+    twitter: 265,
+    facebook: 315,
+    googlePlus: 600
+  },
+
+  sharePopup: function(target, url) {
+    window.open(url, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=600,height=' + this.popupHeights[target]);
+    return false;
   }
 });
 
diff --git a/app/assets/javascripts/discourse/templates/share.js.handlebars b/app/assets/javascripts/discourse/templates/share.js.handlebars
index 914538db04b..dedd3be98b6 100644
--- a/app/assets/javascripts/discourse/templates/share.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/share.js.handlebars
@@ -1,5 +1,14 @@
 <h3>{{view.title}}</h3>
 <div><input type='text' /></div>
-<div class='link'>
-  <a href='#' {{action close target="controller"}}>{{i18n share.close}}</a>
+<div class="social-link">
+  <a href="#" {{action sharePopup "twitter" view.twitterUrl}}><i class="icon icon-twitter"></i></a>
+</div>
+<div class="social-link">
+  <a href="#" {{action sharePopup "facebook" view.facebookUrl}}><i class="icon icon-facebook-sign"></i></a>
+</div>
+<div class="social-link">
+  <a href="#" {{action sharePopup "googlePlus" view.googlePlusUrl}}><i class="icon icon-google-plus"></i></a>
+</div>
+<div class='link'>
+  <a href='#' {{action close target="controller"}}><i class="icon icon-remove-sign"></i></a>
 </div>
diff --git a/app/assets/javascripts/discourse/views/share_view.js b/app/assets/javascripts/discourse/views/share_view.js
index 4f296c2e08e..30c5ea4f285 100644
--- a/app/assets/javascripts/discourse/views/share_view.js
+++ b/app/assets/javascripts/discourse/views/share_view.js
@@ -27,6 +27,18 @@ Discourse.ShareView = Discourse.View.extend({
     }
   }).observes('controller.link'),
 
+  facebookUrl: function() {
+    return ("http://www.facebook.com/sharer.php?u=" + this.get('controller.link'));
+  }.property('controller.link'),
+
+  twitterUrl: function() {
+    return ("http://twitter.com/home?status=" + this.get('controller.link'));
+  }.property('controller.link'),
+
+  googlePlusUrl: function() {
+    return ("https://plus.google.com/share?url=" + this.get('controller.link'));
+  }.property('controller.link'),
+
   didInsertElement: function() {
     var _this = this;
     $('html').on('click.outside-share-link', function(e) {
diff --git a/app/assets/stylesheets/application/share_link.css.scss b/app/assets/stylesheets/application/share_link.css.scss
index c70e2241c77..d28815745c1 100644
--- a/app/assets/stylesheets/application/share_link.css.scss
+++ b/app/assets/stylesheets/application/share_link.css.scss
@@ -10,7 +10,7 @@
   @include border-radius-all(3px);
   @include box-shadow(1px 1px 5px $darkish_gray);
   background-color: $light_gray;
-  padding: 3px 7px 3px 7px;
+  padding: 3px 7px 5px 7px;
   width: 300px;
   @include fades-in(0.25s);
   &.visible {
@@ -22,9 +22,14 @@
   h3 {
     font-size: 13px;
   }
+  .social-link {
+    margin-left: 2px;
+    margin-right: 8px;
+    float: left;
+    font-size: 18px;
+  }
   .link {
-    display: block;
     margin-right: 2px;
-    text-align: right;
+    float: right;
   }
 }