From 74cb362f877ebdd878abc3d25fd3d62af71dc0a7 Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Thu, 15 Dec 2022 20:06:08 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Added=20theme=20docs=20link=20to=20?=
 =?UTF-8?q?the=20design=20settings=20(#16014)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

no refs

- this adds a theme documentation link to the design settings footer if there's an URL set in the package.json of the theme. An example of the package.json property: "docs": "https://example.com"
---
 .../app/components/gh-nav-menu/design.hbs     |  7 +++---
 ghost/admin/app/styles/layouts/settings.css   | 25 ++++++++++++++++++-
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/ghost/admin/app/components/gh-nav-menu/design.hbs b/ghost/admin/app/components/gh-nav-menu/design.hbs
index 84b9ff1dce..4fe2afe4cf 100644
--- a/ghost/admin/app/components/gh-nav-menu/design.hbs
+++ b/ghost/admin/app/components/gh-nav-menu/design.hbs
@@ -44,13 +44,14 @@
 
         <div class="gh-nav-bottom">
             <div class="gh-change-theme">
-                <LinkTo class="gh-nav-design-tab" @route="settings.design.change-theme" {{on "click" this.closeAllSections}} data-test-nav="change-theme">
+                <div class="gh-nav-design-tab">
+                    <LinkTo @route="settings.design.change-theme" {{on "click" this.closeAllSections}} aria-label="Change theme" data-test-nav="change-theme"></LinkTo>
                     <div>
                         <span>Change theme</span>
-                        <span class="active-theme" data-test-text="current-theme">Current: {{this.activeTheme.name}}{{#if this.activeTheme.package.version}} - v{{this.activeTheme.package.version}}{{/if}}</span>
+                        <span class="active-theme" data-test-text="current-theme">Current: {{this.activeTheme.name}}{{#if this.activeTheme.package.version}} - v{{this.activeTheme.package.version}}{{/if}}{{#if this.activeTheme.package.docs}}<a class="gh-theme-docs" href="{{this.activeTheme.package.docs}}" target="_blank" rel="noopener noreferrer">{{svg-jar "book-open" width="12" height="12"}}</a>{{/if}}</span>
                     </div>
                     <div class="gh-nav-design-tabicon">{{svg-jar "sync"}}</div>
-                </LinkTo>
+                </div>
             </div>
         </div>
     </section>
diff --git a/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css
index 2e1cf61f0e..454dde3554 100644
--- a/ghost/admin/app/styles/layouts/settings.css
+++ b/ghost/admin/app/styles/layouts/settings.css
@@ -1893,6 +1893,11 @@ p.theme-validation-details {
     background: var(--mainmenu-color-hover-bg);
 }
 
+.gh-nav-bottom .gh-nav-design-tab > a {
+    position: absolute;
+    inset: 0;
+}
+
 .gh-nav-bottom .gh-nav-design-tab .active-theme {
     color: var(--midgrey);
     font-size: 1.3rem;
@@ -1962,6 +1967,24 @@ p.theme-validation-details {
     background: var(--white);
 }
 
+.gh-theme-docs {
+    position: relative;
+    z-index: 10;
+    padding: 4px 8px;
+    line-height: 0;
+    color: var(--midgrey);
+}
+
+.gh-theme-docs:hover {
+    color: #15171a;
+}
+
+.gh-theme-docs svg {
+    width: 12px;
+    height: 12px;
+    fill: currentColor;
+}
+
 .gh-nav-design-tabicon {
     display: flex;
     align-items: center;
@@ -3485,4 +3508,4 @@ p.theme-validation-details {
     margin-top: 3px;
     margin-left: 8px;
     background: var(--whitegrey);
-}
\ No newline at end of file
+}