From cce936c19068e84b76e45d0cb435a82d401ea859 Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Wed, 26 Oct 2022 03:32:18 +0200
Subject: [PATCH] Use badge to link manual chapter (#2143)

---
 ftl/core/help.ftl                  |  2 --
 ts/deck-options/HelpModal.svelte   | 43 ++++++++++++++++--------------
 ts/deck-options/HelpSection.svelte | 16 +----------
 ts/deck-options/icons.ts           |  1 +
 4 files changed, 25 insertions(+), 37 deletions(-)

diff --git a/ftl/core/help.ftl b/ftl/core/help.ftl
index 9b34523c8..77094e3f8 100644
--- a/ftl/core/help.ftl
+++ b/ftl/core/help.ftl
@@ -9,8 +9,6 @@ help-chapter = chapter
 
 # Tooltip for links to the manual
 help-open-manual-chapter = Open chapter { $name } in Anki manual
-# Displayed underneath chapter title
-help-view-chapter-in-manual = View the { $chapter } on this topic in the official manual.
 
 ## Body
 
diff --git a/ts/deck-options/HelpModal.svelte b/ts/deck-options/HelpModal.svelte
index 77fc508c2..fe5b809da 100644
--- a/ts/deck-options/HelpModal.svelte
+++ b/ts/deck-options/HelpModal.svelte
@@ -14,7 +14,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "../lib/ftl";
     import { pageTheme } from "../sveltelib/theme";
     import HelpSection from "./HelpSection.svelte";
-    import { infoCircle } from "./icons";
+    import { infoCircle, manualIcon } from "./icons";
     import type { DeckOption } from "./types";
 
     export let title: string;
@@ -69,6 +69,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 <h1 class="modal-title" id="modalLabel">
                     {title}
                 </h1>
+                {#if url}
+                    <a class="manual-badge" href={url}>
+                        <Badge
+                            iconSize={120}
+                            tooltip={tr.helpOpenManualChapter({ name: title })}
+                        >
+                            {@html manualIcon}
+                        </Badge>
+                    </a>
+                {/if}
                 <button
                     type="button"
                     class="btn-close"
@@ -76,15 +86,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     data-bs-dismiss="modal"
                     aria-label="Close"
                 />
-                {#if url}
-                    <div class="chapter-redirect">
-                        {@html tr.helpViewChapterInManual({
-                            chapter: `<a href="${url}" title="${tr.helpOpenManualChapter(
-                                { name: title },
-                            )}">${tr.helpChapter()}</a>`,
-                        })}
-                    </div>
-                {/if}
             </div>
             <div class="modal-body">
                 <Row --cols={4}>
@@ -138,21 +139,23 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </div>
 
 <style lang="scss">
-    .modal-header {
-        align-items: unset;
-        flex-wrap: wrap;
-    }
-    .chapter-redirect {
-        width: 100%;
-        color: var(--fg-subtle);
-        font-size: small;
-    }
     #nav {
         margin-bottom: 1.5rem;
     }
 
+    .modal-title {
+        margin-right: 0.75rem;
+    }
+
+    .manual-badge {
+        text-decoration: none;
+        color: var(--fg-subtle);
+        &:hover {
+            color: var(--fg);
+        }
+    }
+
     .modal-content {
-        padding-top: 0.5rem;
         background-color: var(--canvas);
         color: var(--fg);
         border-radius: var(--border-radius-large, 10px);
diff --git a/ts/deck-options/HelpSection.svelte b/ts/deck-options/HelpSection.svelte
index dad287c1e..47ff91c9e 100644
--- a/ts/deck-options/HelpSection.svelte
+++ b/ts/deck-options/HelpSection.svelte
@@ -15,12 +15,7 @@
 <Row>
     <h2>
         {#if section.url}
-            <a
-                href={section.url}
-                title={tr.helpOpenManualChapter({ name: section.title })}
-            >
-                {@html section.title}
-            </a>
+            {@html section.title}
         {:else}
             {@html section.title}
         {/if}
@@ -51,15 +46,6 @@
 <style lang="scss">
     h2 {
         margin-bottom: 1em;
-        a {
-            cursor: pointer;
-            border-bottom: 1px solid var(--border);
-            text-decoration: none;
-            color: var(--fg);
-            &:hover {
-                border-color: var(--fg);
-            }
-        }
     }
 
     .chapter-redirect {
diff --git a/ts/deck-options/icons.ts b/ts/deck-options/icons.ts
index cddcf5cd8..eb89db7f1 100644
--- a/ts/deck-options/icons.ts
+++ b/ts/deck-options/icons.ts
@@ -3,6 +3,7 @@
 
 /// <reference types="../lib/image-import" />
 
+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 revertIcon } from "bootstrap-icons/icons/arrow-counterclockwise.svg";
 export { default as gearIcon } from "bootstrap-icons/icons/gear.svg";