From db6b4f17e86a1f1d5feae2a6a0997eaeb0a7aeba Mon Sep 17 00:00:00 2001
From: Mateusz Wilczek <36714554+mateuszwilczek@users.noreply.github.com>
Date: Wed, 10 May 2023 22:57:15 +0200
Subject: [PATCH] Improve translink macro, fixes 4877 (#7425)

* Improve translink macro

Changes:
- Change styles to adapt colours to the current palette, instead of hard-coded white inside black box with grey borders.
- Simplify the design to a single div (inspired by the Community links on tiddlywiki.com), instead of two nested contrasting divs.

Comments:
- I found pre-border and pre-background to be the most consistently readable across the default palettes (better than relying on e.g. tiddler-border, tiddler-background, page-background, code-border, code-background). Cupertino Dark, Gruvbox Dark, Nord, Solar Flare, Spartan Day, Spartan Night, Spartan Day, and Twilight have same or very similar pre-border and pre-background colours, so if the macro is nested (translinking a tiddler that contains a translink), the inner frames are not distinguishable, but I think it's an acceptable edge case.
- Padding is defined separately for block and inline modes of the macro to make it appear consistent.

* Update translink macro

Change the `<h1>` styling so that it is only applied to the transcluded tiddler's title and not to any potential `<h1>` in its text.

* Update translink macro

Change the class-constructing filter so that the empty message is displayed with consistent padding in block mode.

* Update translink.tid

* Add styles for translink macro to vanilla/base.tid

Split `pre` element styling, to allow part of it be reused with `.tc-pre-border` (used by translink macro).
Add `.tc-big-bold` class under Other utility classes (used by translink macro).

* Update base.tid

Add `.tc-big-bold` class under Other utility classes (used by translink macro).

* Update translink.tid

Update `tc-pre-border` class name to match the one in vanilla/base.tid

* Update translink.tid

Simplify by always wrapping transclusion in `<p>` element (adjusts padding when inline mode or tiddler missing).

* Update translink.tid

Localise missing tiddler message (`$:/language/MissingTiddler/Hint`)

* Update vanilla/base.tid

- Modify class `tc-pre-background`, so that it can be applied to elements other than `pre`. The styling of `pre` remains unchanged, it is only split into two parts, for one part to be reused in the `tc-pre-background` class (used e.g. in translink macro).
- Add `tc-big-v-gap` and `tc-big-bold` in the *Other utility classes* section (used e.g. in translink macro).

* Update translink.tid

Improve styling to depend only on classes specified in vanilla/base.tid

* Update base.tid

Update class `tc-translink` and CSS selectors to make styling the translink macro easier

* Update translink.tid

Change the classes of elements, so that changing the style is possible by modifying the stylesheet only

* Update base.tid

Add selectors to support new inline mode in translink macro

* Update translink.tid

Change behaviour of the inline mode, now the whole macro is inline, not just the transcluded text.

* Update base.tid

Fix padding of tc-translink class to account for multiline inline content.

* Update base.tid

Remove pseudo-element parentheses from inline translink macro

* Update translink.tid

Add parentheses around inline macro
---
 core/wiki/macros/translink.tid     | 22 +++++++++++++++++-----
 themes/tiddlywiki/vanilla/base.tid | 26 +++++++++++++++++++++++++-
 2 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/core/wiki/macros/translink.tid b/core/wiki/macros/translink.tid
index 1a1f54c99..9cc465422 100644
--- a/core/wiki/macros/translink.tid
+++ b/core/wiki/macros/translink.tid
@@ -3,14 +3,26 @@ tags: $:/tags/Macro
 
 \define translink(title,mode:"block")
 \whitespace trim
-<div style="border:1px solid #ccc; padding: 0.5em; background: black; foreground; white;">
+<$list filter="[<__mode__>match[block]]">
+<div class="tc-translink">
+<div>
 <$link to="""$title$""">
-<$text text="""$title$"""/>
+<h1><$text text="""$title$"""/></h1>
 </$link>
-<div style="border:1px solid #ccc; padding: 0.5em; background: white; foreground; black;">
-<$transclude tiddler="""$title$""" mode="$mode$">
-"<$text text="""$title$"""/>" is missing
+<$transclude tiddler="""$title$""" mode="block">
+<$set name="currentTiddler" value="""$title$"""><$transclude tiddler="$:/language/MissingTiddler/Hint"/></$set>
 </$transclude>
 </div>
 </div>
+</$list>
+<$list filter="[<__mode__>match[inline]]">
+<span class="tc-translink">
+<$link to="""$title$""">
+<$text text="""$title$"""/>
+</$link>
+&#32;(<$transclude tiddler="""$title$""" mode="inline">
+<$set name="currentTiddler" value="""$title$"""><$transclude tiddler="$:/language/MissingTiddler/Hint"/></$set>
+</$transclude>)
+</span>
+</$list>
 \end
diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid
index f63384ee9..724d0dae9 100644
--- a/themes/tiddlywiki/vanilla/base.tid
+++ b/themes/tiddlywiki/vanilla/base.tid
@@ -3118,6 +3118,30 @@ select {
 	background: <<colour select-tag-background>>;
 }
 
+/*
+** Translink macro
+*/
+
+.tc-translink {
+	background-color: <<colour pre-background>>;
+	border: 1px solid <<colour pre-border>>;
+	padding: 0 3px;
+	border-radius: 3px;
+}
+
+div.tc-translink > div {
+	margin: 1em;
+}
+
+div.tc-translink > div > a:first-child > h1 {
+	font-size: 1.2em;
+	font-weight: bold;
+}
+
+span.tc-translink > a:first-child {
+	font-weight: bold;
+}
+
 /*
 ** Classes for displaying globals
 */
@@ -3234,4 +3258,4 @@ select {
 
 .tc-tiny-v-gap-bottom {
 	margin-bottom: 3px;
-}
\ No newline at end of file
+}