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

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

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

7
ghost/admin/app/components/gh-nav-menu/design.hbs
View file

@ -44,13 +44,14 @@
<div class="gh-nav-bottom"> <div class="gh-nav-bottom">
<div class="gh-change-theme"> <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> <div>
<span>Change theme</span> <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>
<div class="gh-nav-design-tabicon">{{svg-jar "sync"}}</div> <div class="gh-nav-design-tabicon">{{svg-jar "sync"}}</div>
</LinkTo> </div>
</div> </div>
</div> </div>
</section> </section>

25
ghost/admin/app/styles/layouts/settings.css
View file

@ -1893,6 +1893,11 @@ p.theme-validation-details {
background: var(--mainmenu-color-hover-bg); 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 { .gh-nav-bottom .gh-nav-design-tab .active-theme {
color: var(--midgrey); color: var(--midgrey);
font-size: 1.3rem; font-size: 1.3rem;
@ -1962,6 +1967,24 @@ p.theme-validation-details {
background: var(--white); 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 { .gh-nav-design-tabicon {
display: flex; display: flex;
align-items: center; align-items: center;
@ -3485,4 +3508,4 @@ p.theme-validation-details {
margin-top: 3px; margin-top: 3px;
margin-left: 8px; margin-left: 8px;
background: var(--whitegrey); background: var(--whitegrey);
} }