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.

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

Add patron action icons in book page sidebar #6575

Conversation

jimchamp
Copy link
Collaborator

@jimchamp jimchamp commented May 20, 2022

Closes #6557

Builds upon #6469

Replaces giant button that opens the share modal with a small icon with text. Creates similar icons for reviews and notes modals, and places all three icons beneath the star ratings component.

Removes review icon link from star ratings component.

Technical

A few things:

Modal link templates have been modified such that the markup for the triggering link is passed as an argument (as opposed to passing the anchor's content). This should give us more flexibility when using these templates in the future.

data-context in modal link components is now attached to the modal content (instead of the triggering <a> element, which no longer exists in modal templates).

A guard has been added in order to prevent the review component from rendering when the patron is not logged in. The review component requires a logged in user to operate properly.

Click listeners for the share modal link have been moved to models/index.js. This file contains the client-side functionality for our notes and reviews modal links. Modal triggering function in this file are now more generalized, and can be used by components that do not include data-context attributes.

If you see the old share image while testing, you may need to clear your browser's image cache. This was an issue I encountered in FF.

New Google Analytics events have been created for the icon links:

Trigger Category Action
Share icon link click ModalLinkClick ShareIcon
Notes icon link click ModalLinkClick NoteIcon
Review icon link click ModalLinkClick ReviewIcon

Testing

While logged in:

  1. Ensure that each new modal icon link opens the correct corresponding modal on a book page.
  2. Ensure that the social modal links are correct, and that they link to the correct pages.
  3. Ensure that the embed HTML link opens a dialog with the expected HTML.
  4. Click the textual "Add your community review" link, found at the bottom of the review stats component. Ensure that a review modal opens and works as expected.
  5. Navigate to the "My Reviews" view in your account page. Ensure that the review modals work properly, and that the reviews in "My Reviews" update when a change is made and the modal is closed.

While logged out:

  1. Navigate back to a book page.
  2. Click on each of the new modal icon links. Ensure that the notes and reviews modal links take you to our login page, and that the correct redirect parameter is present in the URL.
  3. Ensure that the share modal icon link opens the share modal, as it does when you are logged in.

Screenshot

modal_icons

Stakeholders

jimchamp added 6 commits May 20, 2022 17:36
- Decouple review modal link from star ratings component
- Pass link content to modal templates
- Rename `SocialShare.html` to `ShareModal.html`
- Remove old share links section from sidebar
- Place new, unstyled, modal link component beneath star ratings in
sidebar
- Add minimized SVG icons for notes and share modal links
- Moves `data-context` object to the modal content
- Generalizes some modal JS functions
- Replace `review.png` with SVG
- Add horizontal rule above links
- Adjust modal cotent styling
- Remove dead styles from shareLinks.less
@jimchamp jimchamp added the On testing.openlibrary.org This PR has been deployed to testing.openlibrary.org for testing label May 20, 2022
@jimchamp jimchamp changed the base branch from social-share-integration to master May 21, 2022 03:26
@mekarpeles mekarpeles self-assigned this May 23, 2022
@mekarpeles mekarpeles added the Priority: 1 Do this week, receiving emails, time sensitive, . [managed] label May 23, 2022
@jimchamp jimchamp changed the base branch from master to social-share-integration May 23, 2022 20:40
@jimchamp
Copy link
Collaborator Author

@mekarpeles, I've changed the base branch from master to the social-share-integration branch for this PR. Now, only my code is present in the "Files changed" tab.

@mekarpeles
Copy link
Member

looks great to me -- @jimchamp and I walked through commit by commit during 1:1

He mentioned possible issue if patrons have js disabled (share modal won't pop up)

Maybe in a future PR, if nojs enabled, then show those share icons on the page in place of / instead of the current action items which all require js.

@mekarpeles mekarpeles merged commit 884db31 into internetarchive:social-share-integration May 25, 2022
@jimchamp jimchamp removed the On testing.openlibrary.org This PR has been deployed to testing.openlibrary.org for testing label May 25, 2022
@jimchamp jimchamp deleted the 6557/feature/modal-link-icons branch July 15, 2022 23:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Priority: 1 Do this week, receiving emails, time sensitive, . [managed]
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Redesign user book actions in sidebar
2 participants