From 1b0ccfd243f80b7d4b9c06ec322fa1fb880aebbe Mon Sep 17 00:00:00 2001
From: Gustaf-C <106698658+Gustaf-C@users.noreply.github.com>
Date: Wed, 13 Dec 2023 07:03:05 +0800
Subject: [PATCH] Change link to manual in help screen from icon to text
 (#2886)

* Change help screen link to manual from icon to text

* Fix auto advance manual link (dae)
---
 ftl/core/help.ftl                  | 13 +++---
 ts/components/HelpModal.svelte     | 64 +++++++++++++++++-------------
 ts/components/icons.ts             |  1 -
 ts/deck-options/AutoAdvance.svelte |  2 +-
 ts/lib/help-page.ts                |  1 +
 5 files changed, 44 insertions(+), 37 deletions(-)

diff --git a/ftl/core/help.ftl b/ftl/core/help.ftl
index ddb362e48..80a08703e 100644
--- a/ftl/core/help.ftl
+++ b/ftl/core/help.ftl
@@ -1,11 +1,15 @@
 ### Text shown in Help pages
 
+## Header/footer
 
-## Header
+# Link to more detailed information in the manual
+help-for-more-info = For more information, see { $link } in the manual.
 
 # Tooltip for links to the manual
 help-open-manual-chapter = Open { $name } in the manual
 
+help-ok = OK
+
 ## Body
 
 # Newly introduced settings may not have an explanation yet
@@ -13,10 +17,3 @@ help-no-explanation =
     Whoops! There doesn't seem to be an explanation for this setting yet.
     
     You can help us complete this help page on { $link }.
-
-## Footer
-
-# Link to more detailed information in the manual
-help-for-more-info = For more information, see { $link } in the manual.
-
-help-ok = OK
diff --git a/ts/components/HelpModal.svelte b/ts/components/HelpModal.svelte
index ac840a11d..27d0dac65 100644
--- a/ts/components/HelpModal.svelte
+++ b/ts/components/HelpModal.svelte
@@ -4,6 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import * as tr from "@tslib/ftl";
+    import { renderMarkdown } from "@tslib/helpers";
     import Carousel from "bootstrap/js/dist/carousel";
     import Modal from "bootstrap/js/dist/modal";
     import { createEventDispatcher, getContext, onMount } from "svelte";
@@ -13,7 +14,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import Col from "./Col.svelte";
     import { modalsKey } from "./context-keys";
     import HelpSection from "./HelpSection.svelte";
-    import { infoCircle, manualIcon } from "./icons";
+    import { infoCircle } from "./icons";
     import Row from "./Row.svelte";
     import { type HelpItem, HelpItemScheduler } from "./types";
 
@@ -67,26 +68,31 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
-                <h1 class="modal-title" id="modalLabel">
-                    {title}
-                </h1>
+                <div style="display: flex;">
+                    <h1 class="modal-title" id="modalLabel">
+                        {title}
+                    </h1>
+                    <button
+                        type="button"
+                        class="btn-close"
+                        class:invert={$pageTheme.isDark}
+                        data-bs-dismiss="modal"
+                        aria-label="Close"
+                    />
+                </div>
                 {#if url}
-                    <a class="manual-badge" href={url}>
-                        <Badge
-                            iconSize={120}
-                            tooltip={tr.helpOpenManualChapter({ name: title })}
-                        >
-                            {@html manualIcon}
-                        </Badge>
-                    </a>
+                    <div class="chapter-redirect">
+                        {@html renderMarkdown(
+                            tr.helpForMoreInfo({
+                                link: `<a href="${url}" title="${tr.helpOpenManualChapter(
+                                    {
+                                        name: title,
+                                    },
+                                )}">${title}</a>`,
+                            }),
+                        )}
+                    </div>
                 {/if}
-                <button
-                    type="button"
-                    class="btn-close"
-                    class:invert={$pageTheme.isDark}
-                    data-bs-dismiss="modal"
-                    aria-label="Close"
-                />
             </div>
             <div class="modal-body">
                 <Row --cols={4}>
@@ -157,14 +163,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         margin-inline-end: 0.75rem;
     }
 
-    .manual-badge {
-        text-decoration: none;
-        color: var(--fg-subtle);
-        &:hover {
-            color: var(--fg);
-        }
-    }
-
     .modal-content {
         background-color: var(--canvas);
         color: var(--fg);
@@ -198,4 +196,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             border-inline-start: 4px solid var(--border-focus);
         }
     }
+
+    .modal-header {
+        flex-direction: column;
+        align-items: normal;
+        padding-bottom: 0;
+    }
+
+    .chapter-redirect {
+        width: 100%;
+        color: var(--fg-subtle);
+        font-size: small;
+    }
 </style>
diff --git a/ts/components/icons.ts b/ts/components/icons.ts
index b8795b306..ca1fe413d 100644
--- a/ts/components/icons.ts
+++ b/ts/components/icons.ts
@@ -5,7 +5,6 @@
 
 export { default as hsplitIcon } from "@mdi/svg/svg/arrow-split-horizontal.svg";
 export { default as vsplitIcon } from "@mdi/svg/svg/arrow-split-vertical.svg";
-export { default as manualIcon } from "@mdi/svg/svg/book-open-variant.svg";
 export { default as chevronDown } from "@mdi/svg/svg/chevron-down.svg";
 export { default as chevronLeft } from "@mdi/svg/svg/chevron-left.svg";
 export { default as chevronRight } from "@mdi/svg/svg/chevron-right.svg";
diff --git a/ts/deck-options/AutoAdvance.svelte b/ts/deck-options/AutoAdvance.svelte
index d44bcaddd..a13044649 100644
--- a/ts/deck-options/AutoAdvance.svelte
+++ b/ts/deck-options/AutoAdvance.svelte
@@ -58,7 +58,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <TitledContainer title={tr.actionsAutoAdvance()}>
     <HelpModal
         title={tr.deckConfigTimerTitle()}
-        url={HelpPage.DeckOptions.timer}
+        url={HelpPage.DeckOptions.autoAdvance}
         slot="tooltip"
         {helpSections}
         on:mount={(e) => {
diff --git a/ts/lib/help-page.ts b/ts/lib/help-page.ts
index 7a9a7ea08..e1aa921df 100644
--- a/ts/lib/help-page.ts
+++ b/ts/lib/help-page.ts
@@ -12,6 +12,7 @@ export const HelpPage = {
         newInterval: "https://docs.ankiweb.net/deck-options.html#new-interval",
         advanced: "https://docs.ankiweb.net/deck-options.html#advanced",
         timer: "https://docs.ankiweb.net/deck-options.html#timer",
+        autoAdvance: "https://docs.ankiweb.net/deck-options.html#auto-advance",
         learningSteps: "https://docs.ankiweb.net/deck-options.html#learning-steps",
         graduatingInterval: "https://docs.ankiweb.net/deck-options.html#graduating-interval",
         easyInterval: "https://docs.ankiweb.net/deck-options.html#easy-interval",