diff options
| author | (quasar) nebula <qznebula@protonmail.com> | 2024-02-06 18:40:50 -0400 |
|---|---|---|
| committer | (quasar) nebula <qznebula@protonmail.com> | 2024-02-10 13:31:05 -0400 |
| commit | 7139db9b07d049459e7f0100ba37acb495c1fdfb (patch) | |
| tree | 5cc53024c791ca032eff382998b8e8e0d8c2f398 /src/content | |
| parent | c53d9751c7a8d8687a6a27b308462c5ca77953e5 (diff) | |
content, css: generateTextWithTooltip: custom interaction cues
Diffstat (limited to 'src/content')
| -rw-r--r-- | src/content/dependencies/generateAlbumTrackListMissingDuration.js | 12 | ||||
| -rw-r--r-- | src/content/dependencies/generateTextWithTooltip.js | 19 | ||||
| -rw-r--r-- | src/content/dependencies/linkContribution.js | 8 |
3 files changed, 30 insertions, 9 deletions
diff --git a/src/content/dependencies/generateAlbumTrackListMissingDuration.js b/src/content/dependencies/generateAlbumTrackListMissingDuration.js index 40c0e353..6d4a6ec8 100644 --- a/src/content/dependencies/generateAlbumTrackListMissingDuration.js +++ b/src/content/dependencies/generateAlbumTrackListMissingDuration.js @@ -13,14 +13,14 @@ export default { generate: (relations, {html, language}) => relations.textWithTooltip.slots({ attributes: {class: 'missing-duration'}, + customInteractionCue: true, text: - html.tag('span', - language.$('trackList.item.withDuration.duration', { - duration: - html.tag('span', {class: 'duration-text'}, - language.$('trackList.item.withDuration.duration.missing')), - })), + language.$('trackList.item.withDuration.duration', { + duration: + html.tag('span', {class: 'text-with-tooltip-interaction-cue'}, + language.$('trackList.item.withDuration.duration.missing')), + }), tooltip: relations.tooltip.slots({ diff --git a/src/content/dependencies/generateTextWithTooltip.js b/src/content/dependencies/generateTextWithTooltip.js index 518e8782..462557d1 100644 --- a/src/content/dependencies/generateTextWithTooltip.js +++ b/src/content/dependencies/generateTextWithTooltip.js @@ -7,6 +7,11 @@ export default { mutable: false, }, + customInteractionCue: { + type: 'boolean', + default: false, + }, + text: { type: 'html', mutable: false, @@ -37,10 +42,20 @@ export default { }); } + const textPart = + (hasTooltip && slots.customInteractionCue + ? html.tag('span', {class: 'hoverable'}, + slots.text) + : hasTooltip + ? html.tag('span', {class: 'hoverable'}, + html.tag('span', {class: 'text-with-tooltip-interaction-cue'}, + slots.text)) + : slots.text); + const content = (hasTooltip - ? [slots.text, slots.tooltip] - : slots.text); + ? [textPart, slots.tooltip] + : textPart); return html.tag('span', attributes, content); }, diff --git a/src/content/dependencies/linkContribution.js b/src/content/dependencies/linkContribution.js index 0b0884ef..cb57aa47 100644 --- a/src/content/dependencies/linkContribution.js +++ b/src/content/dependencies/linkContribution.js @@ -58,7 +58,13 @@ export default { options.artist = (hasExternalIcons && slots.iconMode === 'tooltip' ? relations.textWithTooltip.slots({ - text: relations.artistLink, + customInteractionCue: true, + + text: + relations.artistLink.slots({ + attributes: {class: 'text-with-tooltip-interaction-cue'}, + }), + tooltip: relations.tooltip.slots({ attributes: |