Add telegram to footer and to social share button

Gemfile

@@ -41,7 +41,7 @@ gem 'acts_as_votable'
 gem 'ckeditor', '~> 4.2.2'
 gem 'invisible_captcha', '~> 0.9.2'
 gem 'cancancan', '~> 1.16.0'
-gem 'social-share-button'
+gem 'social-share-button', '~> 0.10'
 gem 'initialjs-rails', '0.2.0.4'
 gem 'unicorn', '~> 5.2.0'
 gem 'paranoia', '~> 2.2.1'

Gemfile.lock

@@ -520,7 +520,7 @@ DEPENDENCIES
   sass-rails (~> 5.0, >= 5.0.4)
   savon
   sitemap_generator (~> 5.3.1)
-  social-share-button
+  social-share-button (~> 0.10)
   spring
   spring-commands-rspec
   sprockets (~> 3.7.1)

app/assets/stylesheets/layout.scss

@@ -1167,7 +1167,8 @@ table {
 
 .button.button-twitter,
 .button.button-facebook,
-.button.button-google {
+.button.button-google,
+.button.button-telegram {
   background: white;
   color: $text;
   font-weight: bold;
@@ -1303,6 +1304,48 @@ table {
   }
 }
 
+.button.button-telegram {
+  background: #ECF7FC;
+  border-left: 3px solid #45B0E3;
+
+  &:before {
+    color: #45B0E3;
+    content: "t";
+    font-family: "icons" !important;
+    font-size: rem-calc(24);
+    left: 0;
+    line-height: $line-height*2;
+    padding: 0 rem-calc(20);
+    position: absolute;
+    top: 0;
+  }
+}
+
+.ssb-telegram {
+  background: #45B0E3;
+  background-image: none !important;
+  color: white;
+  height: $line-height*2 !important;
+  position: relative;
+  width: $line-height*2 !important;
+
+  &:before {
+    content: "t";
+    font-family: "icons" !important;
+    font-size: rem-calc(24);
+    left: 50%;
+    line-height: $line-height*2;
+    margin-left: rem-calc(-11);
+    position: absolute;
+    top: 0;
+  }
+
+  &:hover, &:focus {
+    background: white;
+    color: #40A2D1;
+  }
+}
+
 .social {
 
   a {
@@ -1394,6 +1437,30 @@ table {
       color: #CE3E26;
     }
   }
+
+  .ssb-telegram {
+    background: #45B0E3;
+    color: white;
+    height: $line-height;
+    position: relative;
+    width: $line-height*2;
+
+    &:before {
+      content: "A";
+      font-family: "icons" !important;
+      font-size: rem-calc(24);
+      left: 50%;
+      line-height: $line-height*2;
+      margin-left: rem-calc(-11);
+      position: absolute;
+      top: 0;
+    }
+
+    &:hover, &:focus {
+      background: white;
+      color: #40A2D1;
+    }
+  }
 }
 
 // 13. Pages

app/assets/stylesheets/participation.scss

@@ -974,6 +974,10 @@
     &.social-share-button-google_plus:hover {
       color: #CE3E26;
     }
+
+    &.social-share-button-telegram:hover {
+      color: #CE3E26;
+    }
   }
 }
 

app/views/layouts/_footer.html.erb

@@ -84,6 +84,14 @@
               <% end %>
             </li>
           <% end %>
+          <% if setting['telegram_handle'] %>
+            <li class="inline-block">
+              <%= link_to "https://www.telegram.me/#{setting['telegram_handle']}", target: "_blank", title: t("social.telegram") + t('shared.target_blank_html') do %>
+                <span class="sr-only"><%= t("social.telegram") %></span>
+                <span class="icon-telegram" aria-hidden="true"></span>
+              <% end %>
+            </li>
+          <% end %>
         </ul>
       </div>
     </div>

config/initializers/social_share_button.rb

@@ -1,3 +1,3 @@
 SocialShareButton.configure do |config|
-  config.allow_sites = %w(twitter facebook google_plus)
+  config.allow_sites = %w(twitter facebook google_plus telegram)
 end

config/locales/en.yml

@@ -474,6 +474,7 @@ en:
     twitter: Twitter
     youtube: YouTube
     whatsapp: WhatsApp
+    telegram: Telegram
   spending_proposals:
     form:
       association_name_label: 'If you propose in name of an assocation or collective add the name here'

config/locales/es.yml

@@ -474,6 +474,7 @@ es:
     twitter: Twitter
     youtube: YouTube
     whatsapp: WhatsApp
+    telegram: Telegram
   spending_proposals:
     form:
       association_name_label: 'Si propones en nombre de una asociación o colectivo añade el nombre aquí'

config/locales/fr.yml

@@ -1395,6 +1395,8 @@ fr:
     facebook: Facebook
     twitter: Twitter
     youtube: YouTube
+    whatsapp: WhatsApp
+    telegram: Telegram
   social_share_button:
     baidu: Baidu.com
     delicious: Delicious
@@ -1413,6 +1415,7 @@ fr:
     tumblr: Tumblr
     twitter: Twitter
     weibo: Sina Weibo
+    telegram: Telegram
   spending_proposals:
     form:
       description: Description

config/locales/social_share_button.en.yml

@@ -17,3 +17,4 @@ en:
     plurk: "Plurk"
     pinterest: "Pinterest"
     email: "Email"
+    telegram: "Telegram"

config/locales/social_share_button.es.yml

@@ -17,3 +17,4 @@ es:
     plurk: "Plurk"
     pinterest: "Pinterest"
     email: "Correo electrónico"
+    telegram: "Telegram"

db/seeds.rb

@@ -49,6 +49,7 @@ Setting["twitter_handle"] = nil
 Setting["twitter_hashtag"] = nil
 Setting["facebook_handle"] = nil
 Setting["youtube_handle"] = nil
+Setting["telegram_handle"] = nil
 Setting["blog_url"] = nil
 
 # Public-facing URL of the app.

spec/features/debates_spec.rb

@@ -54,7 +54,7 @@ feature 'Debates' do
     expect(page.html).to include "<title>#{debate.title}</title>"
 
     within('.social-share-button') do
-      expect(page.all('a').count).to be(3) # Twitter, Facebook, Google+
+      expect(page.all('a').count).to be(4) # Twitter, Facebook, Google+, Telegram
     end
   end
 

spec/features/proposals_spec.rb

@@ -63,7 +63,7 @@ feature 'Proposals' do
     expect(page.html).to include "<title>#{proposal.title}</title>"
 
     within('.social-share-button') do
-      expect(page.all('a').count).to be(3) # Twitter, Facebook, Google+
+      expect(page.all('a').count).to be(4) # Twitter, Facebook, Google+, Telegram
     end
   end