internetarchive / internetarchive/openlibrary
Replace the Share modal with an ol-popover menu
- Dominant language
- Python
- Stars
- 6.7k
- Forks
- 2k
- Avg merge
- 2d 19h
- Merged PRs (30d)
- 138
Description
### Summary
The **Share** link opens an old jQuery colorbox modal: a row of large PNG/SVG logos with captions underneath. Replace it with an `` that shows a compact menu. Style each row like the simple links in the **Browse** popover in the site header: a small, muted icon with the label to its right.
Related: #13651 (the same change for the Wikipedia citation dialog)
### Where it's used
- **Book page:** next to the title and author (`openlibrary/templates/type/edition/title_and_author.html`), and in the sidebar links on desktop and mobile (`macros/databarWork.html` → `type/edition/modal_links.html`)
- **Public My Books pages:** reading log shelves, lists and the main My Books page (`openlibrary/templates/account/view.html`). This version passes `show_embed=False`.
### Current implementation
- **Markup:** `openlibrary/macros/ShareModal.html`
- **JS:** `initShareModal` in `openlibrary/plugins/openlibrary/js/modals/index.js` (colorbox and the Copy URL toast), wired up in `js/main.js`
- **Share URLs:** `set_share_links()` in `openlibrary/plugins/upstream/utils.py` (Facebook, Twitter, Pinterest)
- **Other menu items:** Embed (uses `prompt()` with the iframe code), Copy URL and QR Code
- **Images:** `static/images/{facebook,twitter,pinterest}.svg`, `embed.png`, `copy_url.png`, `qr_code.png`
### Reference implementation
- **Browse popover:** `openlibrary/templates/lib/browse_popover.html`. Look at `.browse-popover__links` / `.browse-popover__link`, which use `macros.icon(..., size="sm")` followed by the label.
- **Styles:** `static/css/components/header-bar.css`
- **Popover component:** `openlibrary/components/lit/OlPopover.js`. The first example under [Popover on the Components design page](https://openlibrary.org/developers/design/components#popover) is a bare `` holding a short list of links, which is the shape this menu should take.
- **Toast:** for the Copy URL feedback, use `showToast()` from `openlibrary/components/lit/OlToastRegion.js`. See the "Imperative use" example under [Toast](https://openlibrary.org/developers/design/components#toast).
- **Icon system:** see the [Icons design page](https://openlibrary.org/developers/design/icons), especially "Adding an icon".
### Icons
Use `macros.icon()` for every row instead of the current images. Lucide has generic glyphs for Copy URL (`link` or `copy`), Embed (`code`) and QR Code (`qr-code`). Lucide deliberately doesn't ship brand logos, so get the brand icons from [Tabler Icons](https://tabler.io/icons) (MIT license), e.g. `brand-facebook`, `brand-x`, `brand-pinterest`:
1. Add the SVGs to a new `static/icons/src/tabler/` folder. Tabler uses the same 24×24 `currentColor` stroke format.
2. Add a Tabler license section to `static/icons/ATTRIBUTION.md`.
3. Run `make icons`.
### Acceptance criteria
- [ ] Clicking "Share" opens an `` anchored to the trigger, and a bottom tray on mobile.
- [ ] Each item is a menu row with a small muted icon and a label, matching the Browse popover links.
- [ ] Share links still open in a new tab, and every `data-ol-link-track="Share|…"` attribute is kept.
- [ ] Copy URL still copies and shows the toast, and closes the popover.
- [ ] Embed stays hidden when `show_embed=False`.
- [ ] Brand icons are added from Tabler with attribution. The old share images and colorbox wiring are removed if nothing else uses them (check with grep first).
- [ ] Works on every surface listed above, including when both book-page triggers render on the same page.
- [ ] Keyboard works end to end: open, move through the items, Escape closes and focus returns to the trigger.
- [ ] Strings stay translatable, following `docs/ai/i18n.md`.
### Getting started
- Read `docs/ai/design.md` and `docs/ai/web-components.md` first.
- Test on a local edition page, e.g. `http://localhost:8080/books/OL6M`, and on a public reading log shelf.
Contributor guide
Assessment
This issue has not been assessed yet.