#164878049 Disable contextmenu on H mark image (#707)

* add some code * ft(H-mark image): disable contextmenu on the H-mark image - disable contextmenu - add a tooltip on the image [Finishes #164878049] * ft(H-markt): Change CTA buttons layout - make context message show onclick only - disable contextmenu on 'proof of membership' image - Change CTA buttons layout [#164878049] * ft(H-markt): Change CTA buttons layout - make context message show onclick only - disable contextmenu on 'proof of membership' image - Change CTA buttons layout [#164878049] * Add new line * ft(H-markt): change download buttons color - create custom-menu file - fix custom context bug - update yaml files * ft(H-markt): writes tests for the functionality - add tests - add translation * Remove white space in parameter types to make tests pass * create custom context partial * ft(h-markt): implement custom contextmenu - implement copy_to_clipboard button - write logic for contextmenu actions - update test [Finishes #164878049] * Change swedish translation and add bottom margin on image action buttons * change to
AgileVentures · Oct 7, 2019 · 3af0fd1 · 3af0fd1
1 parent b62f0b5
commit 3af0fd1
Show file tree

Hide file tree

Showing 15 changed files with 314 additions and 194 deletions.
diff --git a/app/assets/javascripts/users.js b/app/assets/javascripts/users.js
@@ -1,17 +1,63 @@
 $(function() {
-  'use strict';
+  "use strict";
+  var custom_context_id;
+  var tooltipText;
 
-  $('body').on('ajax:success', '.users_pagination', function (e, data) {
-    $('#users_list').html(data);
+  $("body").on("ajax:success", ".users_pagination", function(e, data) {
+    $("#users_list").html(data);
     $('[data-toggle="tooltip"]').tooltip();
   });
 
-  $('#userStatusForm').on('ajax:success', function (e, data) {
-    $('#userMemberStatus').html(data);
+  $("#userStatusForm").on("ajax:success", function(e, data) {
+    $("#userMemberStatus").html(data);
     $('[data-toggle="tooltip"]').tooltip();
   });
 
-  $('#editUserStatusSubmit').click(function() {
-    $('#editStatusModal').modal('hide');
+  $("#editUserStatusSubmit").click(function() {
+    $("#editStatusModal").modal("hide");
+  });
+
+  $(".custom-context").on("contextmenu", e => {
+    e.preventDefault();
+    custom_context_id = e.currentTarget.id;
+    $(".custom-menu").toggle(100).css({
+      top: e.pageY + "px",
+      left: e.pageX + "px"
+    });
+  });
+
+  $(document).on("click", () => {
+    $(".custom-menu").hide(100);
+  });
+
+  $(".custom-menu li").click(function(e) {
+    const data = {
+      "company-h-brand": {
+        download: ".download_h_mark",
+        link: ".link_for_h_brand",
+        show: ".preview_h_brand"
+      }
+    };
+    const action = data[custom_context_id][$(this).attr("data-action")];
+    $(action)[0].click();
+  });
+
+  $(".copy-to-clipboard").mouseover(function() {
+    tooltipText = $(this).attr("data-original-title");
+    $(this).attr("data-original-title", "");
+  });
+  $(".copy-to-clipboard").mouseleave(function() {
+    $(this).attr("data-original-title", tooltipText);
+  });
+
+  $(".copy-to-clipboard").click(function(e) {
+    e.preventDefault();
+    var $temp = $("<input>");
+    $("body").append($temp);
+    $temp.val($(this).attr("href")).select();
+    document.execCommand("copy");
+    $temp.remove();
+    $(this).attr("data-original-title", tooltipText);
+    $(this).tooltip("show");
   });
 });
diff --git a/app/assets/stylesheets/company-h-brand.css b/app/assets/stylesheets/company-h-brand.css
@@ -1,6 +1,7 @@
 body {
-  font-family: 'Open Sans', sans-serif;
-  margin: 0; }
+  font-family: "Open Sans", sans-serif;
+  margin: 0;
+}
 
 #company-h-brand {
   background-color: #e4e3df;
@@ -14,30 +15,38 @@ body {
   line-height: 20px;
   margin: 0;
   width: 300px;
-  text-align: center; }
+  text-align: center;
+}
 
 .h-brand-logo {
-  padding: 20px 20px 0 20px; }
+  padding: 20px 20px 0 20px;
+}
 
 .current-year {
   display: block;
   font-size: 34px;
   height: 40px;
-  line-height: 40px; }
+  line-height: 40px;
+}
 
 .sweden-dog-trainers {
-  padding: 0 20px 0 20px; }
+  padding: 0 20px 0 20px;
+}
 
 .company-info-separator {
   background-color: #b9b9b5;
-  margin: 10px 5px 10px 5px; }
+  margin: 10px 5px 10px 5px;
+}
 
 .company-info {
   display: block;
   font-weight: normal;
   height: auto;
   margin: 0 10px 10px 10px;
-  text-align: center; }
+  text-align: center;
+}
 
 .company-name {
-  font-weight: bold; }
+  font-weight: bold;
+}
+
diff --git a/app/assets/stylesheets/custom-menu.css b/app/assets/stylesheets/custom-menu.css
@@ -0,0 +1,34 @@
+.custom-menu {
+  list-style-type: none;
+  padding: 0 !important;
+  display: none;
+  z-index:1000;
+  position: absolute;
+  background-color:#fff;
+  border: 1px solid #ddd;
+  overflow: hidden;
+  width: 150px;
+  white-space:nowrap;
+  font-family: sans-serif;
+-webkit-box-shadow: 2px 2px 7px 0 rgba(50, 50, 50, 0.5);
+-moz-box-shadow:    2px 2px 7px 0 rgba(50, 50, 50, 0.5);
+box-shadow:         2px 2px 7px 0 rgba(50, 50, 50, 0.5);
+}
+
+.custom-menu li {
+  padding: 2px 10px;
+}
+
+.custom-menu li:hover {
+  background-color: #013b78;
+  color: #fff;
+  cursor: pointer;
+}
+.custom-context {
+  -webkit-user-select:none;
+  -khtml-user-select:none;
+  -moz-user-select:none;
+  -ms-user-select:none;
+  -o-user-select:none;
+  user-select:none;
+}
diff --git a/app/assets/stylesheets/style.scss b/app/assets/stylesheets/style.scss
@@ -230,7 +230,7 @@ margin: 5px 0 0 0;
 }
 
 .infotext p {
-  margin-bottom: 1rem;
+  margin: 0.5rem 0 0.5rem 0;
 }
 
 .login {

diff --git a/app/assets/stylesheets/users.scss b/app/assets/stylesheets/users.scss
@@ -23,3 +23,7 @@
   }
 
 }
+
+#text {
+  margin-top: 1rem;
+}
diff --git a/app/views/companies/_company_h_brand.html.haml b/app/views/companies/_company_h_brand.html.haml
@@ -2,9 +2,10 @@
   %head
     = stylesheet_link_tag 'https://fonts.googleapis.com/css?family=Open+Sans:400,700'
     = stylesheet_link_tag 'company-h-brand', media: 'all'
+    = stylesheet_link_tag 'custom-menu', media: 'all'
   %body
 
-    #company-h-brand
+    .custom-context#company-h-brand
       - render_to = :html unless local_assigns[:render_to]
 
       - if app_config.h_brand_logo

diff --git a/app/views/companies/_custom_context_menu.html.haml b/app/views/companies/_custom_context_menu.html.haml
@@ -0,0 +1,4 @@
+%ul.custom-menu
+  %li{ "data-action" => "download" }= t('users.show.download_image')
+  %li{ "data-action" => "link" }= t('users.show.copy_image_url')
+  %li{ "data-action" => "show" }= t('users.show.show_image')
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
@@ -88,13 +88,14 @@
       .col-md-7.infotext
         %h3= t('.proof_of_membership')
         %p= t('.proof_of_membership_describe')
-        %p= t('.image_how_to_use_html',
-            download_link: link_to(t('.download_image'),
+        = link_to(t('.download_image'),
                                    proof_of_membership_path(@user, render_to: :jpg),
-                                   class: 'btn btn-sm btn-outline-secondary'),
-            show_link: link_to(t('.show_image'),
+                                   class: 'btn btn-sm btn-primary')
+        = link_to(t('.show_image'),
                                  proof_of_membership_path(@user, context: :internal),
-                                 class: 'btn btn-sm btn-outline-secondary'))
+                                 class: 'btn btn-sm btn-primary')
+        %p= t('.image_how_to_use_html')
+
         %p
           = t('.proof_of_membership_photo_needed')
           = link_to(t('devise.registrations.edit.title'), edit_user_registration_path,
@@ -116,17 +117,19 @@
         .col-md-7.infotext
           %h3= t('.company_h_brand', company: company.name)
           %p= t('.company_h_brand_describe')
-          %p= t('.image_how_to_use_html',
-              download_link: link_to(t('.download_image'),
+          = link_to(t('.download_image'),
                                      company_h_brand_path(company,
                                                            render_to: :jpg),
-                                     class: 'btn btn-sm btn-outline-secondary'),
-              show_link: link_to(t('.show_image'),
+                                     class: 'btn btn-sm btn-primary download_h_mark')
+          = link_to(t('.copy_image_url'), company_h_brand_url(company), class: 'btn btn-sm btn-primary link_for_h_brand copy-to-clipboard', "data-original-title" => t('.copied'))
+          = link_to(t('.show_image'),
                                  company_h_brand_path(company,
                                                       context: :internal),
-                                     class: 'btn btn-sm btn-outline-secondary'))
+                                     class: 'btn btn-sm btn-primary preview_h_brand')
+          %p= t('.image_how_to_use_html')
           %p= t('.image_use_guidelines_html', use_guidelines_link: link_to(t('.use_guidelines'),
               'https://hitta.sverigeshundforetagare.se/dokument/innehall/hmarket',
               class: 'underlined_link'))
 
 = render partial: 'edit_status_modal', locals: { user: @user }
+= render partial: 'companies/custom_context_menu'
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
@@ -25,3 +25,4 @@
 Rails.application.config.assets.precompile += %w( application-mailer.scss )
 Rails.application.config.assets.precompile += %w( proof-of-membership.css )
 Rails.application.config.assets.precompile += %w( company-h-brand.css )
+Rails.application.config.assets.precompile += %w( custom-menu.css )
diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -795,15 +795,16 @@ en:
       proof_of_membership_describe: This image is your proof of membership in SHF.
       proof_of_membership_photo_needed: 'If you see "Photo Unavailable" then please
                                          upload a photo of yourself here: '
-      image_how_to_use_html: You can download the image (%{download_link}),
-                        take a screenshot, or link to it from your website
-                        (%{show_link}), and use it in social media or print to use in a
-                        physical context, for example, to show a customer.
+      image_how_to_use_html: You can download the image, take a screenshot,
+                            link to it from your website and use it in social media,
+                            or print it have and show (ex. show it to a customer/client).
       image_use_guidelines_html: Please note that your use of this image is subject to
                                  these %{use_guidelines_link}.
       use_guidelines: guidelines
       download_image: Download Image
-      show_image: Show Image
+      show_image: Show image
+      copy_image_url: Copy image link
+      copied: Copied
       image_dimensions_html: "The image width is <span id='%{width_id}'></span>
                              pixels and the height is
                              <span id='%{height_id}'></span> pixels."

diff --git a/config/locales/sv.yml b/config/locales/sv.yml
@@ -805,9 +805,9 @@ sv:
       proof_of_membership_photo_needed: 'Om du saknar profilbild (ser "Photo
                                         Unavailable"), ladda upp en bild av dig
                                         själv (utan hund) här: '
-      image_how_to_use_html: Du kan ladda ner bilden (%{download_link}), ta en
+      image_how_to_use_html: Du kan ladda ner bilden, ta en
                              skärmdump eller länka till den från din webbplats
-                             (%{show_link}) och använda den i sociala medier
+                             och använda den i sociala medier
                              eller skriva ut för att använda i ett fysiskt
                              sammanhang, till exempel att visa en kund.
       image_use_guidelines_html: Observera att din användning av denna bild är föremål
@@ -821,6 +821,8 @@ sv:
                                 Använd den här länken på en extern webbplats:
                                 </span>"
       show_image: Visa bild
+      copy_image_url: Kopiera bildadress
+      copied: Kopierat
       company_h_brand: Företaget H-märke för %{company}
       company_h_brand_describe: Detta är ditt företags H-märke.
       member_packet: &member_packet pkt
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,3 +23,7 @@ @@
       }
     }
+    #text {
+      margin-top: 1rem;
+    }