Repository navigation
fix(timeline): draw the signed PDF download icon - #29
Conversation
The timeline card used espresso's es-line-download, which Frappe's espresso sprite defines twice. The browser draws the first, stroke-only symbol, and with nothing on the card to stroke it the circle filled in as a black dot in both themes. Use the lucide download icon the desk itself uses, and retake the audit-trail screenshots. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SvdEeMiewirZ3ifFoUix5F
The card's open-PDF icon used espresso's es-line-link, whose path has no colour of its own and which Frappe gives no CSS for, so it was drawn black and was hard to see on the dark theme. It now uses the lucide link icon with the icon class, like the download icon, and the test checks that each icon on the card is a lucide icon Frappe colours and is defined once in the desk sprites. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SvdEeMiewirZ3ifFoUix5F
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SvdEeMiewirZ3ifFoUix5F
|
Review: the dot reproduces (the new test fails on develop with es-line-download defined twice) and lucide #icon-download fixes it. I added f18c834: the card's open-PDF icon (es-line-link with class es-icon) had the same root cause. Frappe has no CSS for es-icon and the symbol has no colour of its own, so the icon was drawn black, which is near-invisible on the dark theme. It now uses lucide #icon-link with class icon. The test now checks that every icon on the card has the icon class, is a lucide icon-* id and is defined exactly once. It also no longer dumps the whole sprite sheet when it fails. 944775a moves the helper for ssort. frappe-shots left the committed audit-trail shots as they are (the change is under its 0.1% threshold); a fresh dark render shows the link icon in the theme grey. |
Bug
The eSign timeline card (
esign_webforms/public/js/templates/esign_timeline.html:21) drew its Download Signed PDF action with<svg class="es-icon icon-sm"><use href="#es-line-download">. Frappe's espresso sprite (frappe/public/icons/espresso/icons.svg, lines 757 and 1020 on version-16) definesid="es-line-download"twice. The browser uses the first, a stroke-only circle and arrow with no fill set. Nothing on the card gives it a stroke orfill: none(Frappe has no CSS fores-icon/es-line), so it rendered as a filled black dot.How it showed up
In both desk themes the download action next to Signed was a black dot instead of a download icon. The committed audit-trail screenshots showed it.
Fix
Use the lucide
#icon-downloadwith theicon icon-smclasses, which is whatfrappe.utils.icon("download", "sm")renders in the desk and is styled by Frappe's.iconrule. The Open Signed PDF link icon (es-line-link, defined once and filled) is unchanged. The duplicate id itself is in Frappe core, not this app.Test
TestTimeline.test_timeline_icons_are_defined_once_in_the_desk_sprites(esign_webforms/tests/test_esign.py) reads every sprite in theapp_include_iconshooks and checks that each<use href="#…">in the timeline template names an id defined exactly once. Against the old template it fails withAssertionError: 2 != 1 : es-line-download; with the fix it passes.Screenshots
Retook only
audit-trail(frappe-shots --only audit-trail --recreate-site). Both themes now show the download arrow next to the link icon; the rest of each shot is unchanged (0.13% of pixels differ).Verification
frappe-test --reuse-site: 96 tests OK, coverage 98.3% (fail_under 80); the same run without the template change fails only the new test.yarn typecheck:py(ty),yarn lint:py,yarn check(oxfmt, oxlint, stylelint, tsc): clean.frappe-init --check: clean.prekis not on PATH in the frappe-nix 1.2.1 devshell, so the hooks were run individually as above.🤖 Generated with Claude Code
https://claude.ai/code/session_01SvdEeMiewirZ3ifFoUix5F