Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#164878049 Disable contextmenu on H mark image #707

Merged
merged 13 commits into from
Oct 7, 2019
Merged

#164878049 Disable contextmenu on H mark image #707

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
13c3f97
add some code
Luleherll Aug 21, 2019
9194401
ft(H-mark image): disable contextmenu on the H-mark image
Luleherll Aug 21, 2019
863b6fd
ft(H-markt): Change CTA buttons layout
Luleherll Aug 26, 2019
4107394
ft(H-markt): Change CTA buttons layout
Luleherll Aug 26, 2019
f8b7c0f
Git pull
Luleherll Aug 26, 2019
ae56844
Add new line
Luleherll Aug 26, 2019
b9ffac1
ft(H-markt): change download buttons color
Luleherll Sep 2, 2019
991a678
ft(H-markt): writes tests for the functionality
Luleherll Sep 3, 2019
624c95f
Remove white space in parameter types to make tests pass
Luleherll Sep 5, 2019
64920da
create custom context partial
Luleherll Sep 9, 2019
196e942
ft(h-markt): implement custom contextmenu
Luleherll Sep 12, 2019
38e6940
Change swedish translation and add bottom margin on image action but…
Luleherll Sep 30, 2019
c0f8e92
change to
Luleherll Sep 30, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 16 additions & 7 deletions app/assets/javascripts/users.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,26 @@
$(function() {
'use strict';
"use strict";

$('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();
$("div.custom-menu").css({ display: "none" });
$(`#${e.currentTarget.id} .custom-menu`).css({ display: "block" });
});
$(document).bind("click", () => {
$("div.custom-menu").css({ display: "none" });
});
});
28 changes: 19 additions & 9 deletions app/assets/stylesheets/company-h-brand.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -14,30 +15,39 @@ 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;
}


16 changes: 16 additions & 0 deletions app/assets/stylesheets/custom-menu.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
.custom-menu {
background-color: #eeeeee;
border-radius: 5px;
box-sizing: border-box;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
color: #666666;
display: none;
font-size: 0.875rem;
left: 45%;
max-width: 252px;
padding: 2px;
position: absolute;
top: 40px;
transform: translate(-50%, 0);
z-index: 10000;
}
4 changes: 3 additions & 1 deletion app/views/companies/_company_h_brand.html.haml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@
%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
.custom-menu= t('users.show.custom_context_text')
- render_to = :html unless local_assigns[:render_to]

- if app_config.h_brand_logo
Expand Down
4 changes: 3 additions & 1 deletion app/views/users/_proof_of_membership.html.haml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,13 @@
%head
= stylesheet_link_tag 'https://fonts.googleapis.com/css?family=Open+Sans:400,700'
= stylesheet_link_tag 'proof-of-membership', media: 'all'
= stylesheet_link_tag 'custom-menu', media: 'all'
%body

- render_to = :html unless local_assigns[:render_to]

#proof-of-membership
.custom-context#proof-of-membership
.custom-menu= t('users.show.custom_context_text')
- if app_config.shf_logo
= image_tag(paperclip_path_str(app_config.shf_logo, :standard, render_to),
class: 'shf-logo')
Expand Down
21 changes: 11 additions & 10 deletions app/views/users/show.html.haml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We now need to change the functionality: The action of this button needs to (1) get the short url for the proof of membership, (2) copy it to the user's clipboard, and then (3) show a message to the user that the information has been copied to their clipboard and that they can now paste it where needed.

Just glancing quickly at the code (you should look more carefully at it to verify), seems that you need to use the short_proof_of_membership_url(user) method to get the url.

We'll need new text in the locale files for (3) above. See my review comments in the sv.yml file.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll need the same stuff for the Company H-markt (need to copy the URL to the clipboard instead of showing the image and add the entries to the locale files)

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,
Expand All @@ -116,15 +117,15 @@
.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')
= 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')
%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'))
Expand Down
1 change: 1 addition & 0 deletions config/initializers/assets.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 )
10 changes: 5 additions & 5 deletions config/locales/en.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -766,15 +766,15 @@ 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 you website and use it in social media,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"you" should be "your"

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: Copy link of the image
custom_context_text: Please use the links on the right for your H-Brand download.
image_dimensions_html: "The image width is <span id='%{width_id}'></span>
pixels and the height is
<span id='%{height_id}'></span> pixels."
Expand Down
7 changes: 4 additions & 3 deletions config/locales/sv.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -773,9 +773,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
Expand All @@ -788,7 +788,8 @@ sv:
use_this_image_link_html: "<span style='font-weight: bold'>
Använd den här länken på en extern webbplats:
</span>"
show_image: Visa bild
show_image: Kopiera bildadress
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't change this one because it makes the meaning of the key (show_image ) different from the meaning of the value (copy the url).

Instead, add a new entry (line) below (you'll need to ensure that the indentation is correct):

copy_image_url: Kopiera bildadress

Likewise for the English translation file (en.yml), add the same line but with the English words: copy_image_url: Copy the URL

Then you need to be sure to use the users.show.copy_image_url translation key instead of the old one (old = users.show.show_image).
(That includes places in cucumber tests.)

custom_context_text: Var god använd knapparna till höger för att ladda ner ditt H-märke.
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 medlemspaket
Expand Down
7 changes: 7 additions & 0 deletions features/user_account/company_h_brand.feature
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,3 +50,10 @@ Feature: As an user I want to be able to view and download my company h-brand
And I should see "groom, rehab"
And I click on the second t("users.show.show_image") link
And I should see t("users.show.use_this_image_link_html")

@selenium @time_adjust
Scenario: Member sees tooltip instead of context menu when right-clicking on company H-Brand image
Given I am on the "user profile" page for "emma@mutts.se"
Then I should not see t("users.show.custom_context_text")
When I right click on "#company-h-brand"
Then I should see t("users.show.custom_context_text")
7 changes: 7 additions & 0 deletions features/user_account/proof_of_membership.feature
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,3 +44,10 @@ Feature: As an user I want to be able to view and download my proof-of-membershi
And I should see "groom, rehab"
And I click on the t("users.show.show_image") link
And I should see t("users.show.use_this_image_link_html")

@selenium @time_adjust
Scenario: Member sees tooltip info about downloading image instead of normal browser context menu
Given I am on the "user profile" page for "emma@mutts.se"
Then I should not see t("users.show.custom_context_text")
When I right click on "#proof-of-membership"
Then I should see t("users.show.custom_context_text")