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 93811b37e..6dedc2e04 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 914538db0..dedd3be98 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 4f296c2e0..30c5ea4f2 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 c70e2241c..d28815745 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; } }