Merge pull request #1481 from PopulateTools/add-telegram

Add telegram

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/fonts/icons.svg

@@ -56,6 +56,9 @@
 <glyph glyph-name="arrow-right" unicode="&#85;" d="M329 256c0-5-2-9-5-13l-128-128c-4-3-8-5-13-5-5 0-9 2-13 5-4 4-5 8-5 13l0 256c0 5 1 9 5 13 4 3 8 5 13 5 5 0 9-2 13-5l128-128c3-4 5-8 5-13z"/>
 <glyph glyph-name="check-circle" unicode="&#86;" d="M256 480c-124 0-224-100-224-224 0-124 100-224 224-224 124 0 224 100 224 224 0 124-100 224-224 224z m115-149l-139-179c-1-1-3-3-5-3-3 0-4 1-5 3-2 1-79 76-79 76l-2 1c0 1-1 2-1 3 0 2 1 3 1 4 1 0 1 0 1 1 8 8 24 24 25 25 1 2 2 3 4 3 3 0 5-2 6-3 1-1 45-43 45-43l111 143c1 0 2 1 4 1 1 0 2 0 3-1l31-24c0-1 1-3 1-4 0-1 0-2-1-3z"/>
 <glyph glyph-name="arrow-top" unicode="&#87;" d="M402 165c0-5-2-10-5-13-4-4-8-6-13-6l-256 0c-5 0-9 2-13 6-3 3-5 8-5 13 0 5 2 9 5 12l128 128c4 4 8 6 13 6 5 0 9-2 13-6l128-128c3-3 5-7 5-12z"/>
-<glyph glyph-name="help-1" unicode="&#88;" d="M345 435c-27 21-58 28-98 28-29 0-55-6-75-20-30-20-44-54-44-108l77 0c0 14-2 30 7 43 8 13 20 24 40 24 20 0 31-6 41-18 8-11 11-23 11-36 0-12-5-22-12-32-4-5-9-10-15-15 0 0-42-25-56-48-11-18-15-40-16-66 0-2 0-5 7-5 7 0 56 0 62 0 6 0 7 4 7 6 0 9 2 24 3 29 4 11 10 20 20 28l21 14c18 15 33 26 40 36 11 15 19 34 19 57 0 36-13 64-39 83z m-103-293c-26 1-47-17-48-46-1-28 19-46 45-47 27-1 48 17 49 45 1 28-19 47-46 48z"/>
 <glyph glyph-name="checkmark-circle" unicode="&#89;" d="M171 296l-29-30 93-93 208 208-29 29-179-178z m251-40c0-92-74-166-166-166-92 0-166 74-166 166 0 92 74 166 166 166 16 0 31-2 46-6l32 32c-24 11-50 16-78 16-114 0-208-94-208-208 0-114 94-208 208-208 114 0 208 94 208 208z"/>
+<glyph glyph-name="minus-square" unicode="&#88;" d="M357 402c17 0 32-6 45-18 12-13 19-28 19-46l0-201c0-17-7-32-19-45-13-13-28-19-45-19l-202 0c-17 0-32 6-45 19-12 13-19 28-19 45l0 201c0 18 7 33 19 46 13 12 28 18 45 18z m27-265l0 201c0 8-3 14-8 20-5 5-12 8-19 8l-202 0c-7 0-14-3-19-8-5-6-8-12-8-20l0-201c0-7 3-14 8-19 5-6 12-8 19-8l202 0c7 0 14 2 19 8 5 5 8 12 8 19z m-46 119c3 0 5-1 7-3 2-1 2-3 2-6l0-18c0-3 0-5-2-7-2-2-4-3-7-3l-164 0c-3 0-5 1-7 3-2 2-2 4-2 7l0 18c0 3 0 5 2 6 2 2 4 3 7 3z"/>
+<glyph glyph-name="plus-square" unicode="&#90;" d="M347 247l0-18c0-3 0-5-2-7-2-2-4-3-7-3l-64 0 0-64c0-2-1-4-2-6-2-2-4-3-7-3l-18 0c-3 0-5 1-7 3-1 2-2 4-2 6l0 64-64 0c-3 0-5 1-7 3-2 2-2 4-2 7l0 18c0 3 0 5 2 6 2 2 4 3 7 3l64 0 0 64c0 3 1 5 2 7 2 1 4 2 7 2l18 0c3 0 5-1 7-2 1-2 2-4 2-7l0-64 64 0c3 0 5-1 7-3 2-1 2-3 2-6z m37-110l0 201c0 8-3 14-8 20-5 5-12 8-19 8l-202 0c-7 0-14-3-19-8-5-6-8-12-8-20l0-201c0-7 3-14 8-19 5-6 12-8 19-8l202 0c7 0 14 2 19 8 5 5 8 12 8 19z m37 201l0-201c0-17-7-32-19-45-13-13-28-19-45-19l-202 0c-17 0-32 6-45 19-12 13-19 28-19 45l0 201c0 18 7 33 19 46 13 12 28 18 45 18l202 0c17 0 32-6 45-18 12-13 19-28 19-46z"/>
+<glyph glyph-name="expand" unicode="&#48;" d="M26 168l-26-158c0-2 1-5 3-7 0 0 0 0 0 0 2-2 5-3 7-3l158 27c3 0 6 3 7 6 1 3 0 7-3 9l-30 31 82 82c4 4 4 9 0 13l-57 57c-3 3-9 3-12 0l-83-83-31 31c-2 2-5 3-9 2-3-1-5-4-6-7z m460 176l26 158c0 2-1 5-3 7 0 0 0 0 0 0-2 2-5 3-7 3l-158-27c-3 0-6-3-7-6-1-3 0-7 3-9l30-31-82-82c-4-4-4-9 0-13l57-57c3-3 9-3 12 0l83 83 31-31c2-2 5-3 9-2 3 1 5 4 6 7z"/>
+<glyph glyph-name="telegram" unicode="&#49;" d="M504 509c6-5 9-11 8-18l-73-439c-1-6-4-10-10-13-2-2-5-2-8-2-3 0-5 0-7 1l-130 53-69-84c-3-5-8-7-14-7-2 0-4 0-6 1-4 1-7 4-9 7-2 3-3 6-3 10l0 100 247 303-306-265-113 47c-7 2-10 7-11 15 0 8 3 14 9 17l476 274c2 2 5 3 9 3 4 0 7-1 10-3z"/>
 </font></defs></svg>

app/assets/stylesheets/icons.scss

@@ -184,3 +184,6 @@
 .icon-checkmark-circle:before {
   content: "\59";
 }
+.icon-telegram:before {
+  content: "\31";
+}

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 #0088cc;
+
+  &:before {
+    color: #0088cc;
+    content: "1";
+    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: #0088cc;
+  background-image: none !important;
+  color: white;
+  height: $line-height*2 !important;
+  position: relative;
+  width: $line-height*2 !important;
+
+  &:before {
+    content: "1";
+    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: #0088cc;
+    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

@@ -16,4 +16,5 @@ en:
     tumblr: "Tumblr"
     plurk: "Plurk"
     pinterest: "Pinterest"
-    email: "Email"
+    email: "Email"
+    telegram: "Telegram"

config/locales/social_share_button.es.yml

@@ -16,4 +16,5 @@ es:
     tumblr: "Tumblr"
     plurk: "Plurk"
     pinterest: "Pinterest"
-    email: "Correo electrónico"
+    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