0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-03 23:00:14 -05:00

Added theme docs link to the design settings (#16014)

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"
This commit is contained in:
Sodbileg Gansukh 2022-12-15 20:06:08 +08:00 committed by GitHub
parent ce53c76fdf
commit 74cb362f87
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 4 deletions

View file

@ -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>

View file

@ -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);
}
}