diff --git a/ghost/admin/app/components/modals/settings/about.hbs b/ghost/admin/app/components/modals/settings/about.hbs new file mode 100644 index 0000000000..549cd3cae8 --- /dev/null +++ b/ghost/admin/app/components/modals/settings/about.hbs @@ -0,0 +1,79 @@ +
+
+ +
+ + +
+
+ {{#if this.upgradeStatus.message}} +
+ Update available! +
+ {{this.upgradeStatus.message}} +
+
+ {{/if}} +
+
    + {{#if this.linkToGitHubReleases}} +
  • Version: {{this.config.version}}
    • + {{else}} +
  • Version: {{this.config.version}}
    • + {{/if}} + {{#if this.showSystemInfo}} +
  • Environment: {{this.config.environment}}
    • +
  • Database: {{this.config.database}}
    • +
  • Mail: {{#if this.config.mail}}{{this.config.mail}}{{else}}Native{{/if}}
    • + {{/if}} + {{#if (enable-developer-experiments)}} +
  • Developer experiments: Enabled
    • + {{/if}} +
+ + {{#if (and this.showSystemInfo this.showDatabaseWarning)}} +
+ You are running an unsupported database in production. Please upgrade to MySQL 8. +
+ {{/if}} + + +
+
+
+ Copyright © 2013 – {{this.copyrightYear}} Ghost Foundation, released under the MIT license. +
+
+ Ghost is a registered trademark of Ghost Foundation Ltd. +
+
+
+
+
diff --git a/ghost/admin/app/components/modals/settings/about.js b/ghost/admin/app/components/modals/settings/about.js new file mode 100644 index 0000000000..b209d51dd9 --- /dev/null +++ b/ghost/admin/app/components/modals/settings/about.js @@ -0,0 +1,15 @@ +import Component from '@glimmer/component'; +import config from 'ghost-admin/config/environment'; +import {inject as service} from '@ember/service'; + +export default class AboutModal extends Component { + @service config; + @service upgradeStatus; + + constructor() { + super(...arguments); + if (this.isTesting === undefined) { + this.isTesting = config.environment === 'test'; + } + } +} diff --git a/ghost/admin/app/controllers/settings.js b/ghost/admin/app/controllers/settings.js index 2f0d6b7f90..db906a9a40 100644 --- a/ghost/admin/app/controllers/settings.js +++ b/ghost/admin/app/controllers/settings.js @@ -1,3 +1,4 @@ +import AboutModal from '../components/modals/settings/about'; import classic from 'ember-classic-decorator'; import {action} from '@ember/object'; import {inject as service} from '@ember/service'; @@ -8,6 +9,8 @@ import Controller from '@ember/controller'; export default class SettingsController extends Controller { @service settings; @service session; + @service modals; + @service upgradeStatus; showLeaveSettingsModal = false; @@ -21,4 +24,9 @@ export default class SettingsController extends Controller { this.settings.rollbackAttributes(); this.set('showLeaveSettingsModal', false); } + + @action + openAbout() { + this.advancedModal = this.modals.open(AboutModal); + } } diff --git a/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css index c40792f29a..d46d01c5da 100644 --- a/ghost/admin/app/styles/layouts/settings.css +++ b/ghost/admin/app/styles/layouts/settings.css @@ -3001,4 +3001,159 @@ p.theme-validation-details { font-size: 1.4rem !important; min-width: 130px; } +} + +/* About /ghost/settings/about/ +/* ---------------------------------------------------------- */ +.gh-about-logo svg { + position: relative; + width: 120px; + height: auto; +} + +.gh-about-logo { + border-bottom: 1px solid var(--lightgrey-l2); + padding-bottom: 10px; + margin-bottom: 16px; +} + +.gh-about-modal .gh-about-logo { + margin: 4px 0 20px; + border-bottom: none; + padding-bottom: 0; +} + +.gh-about-container { + display: grid; + grid-template-columns: 2fr 1fr; + grid-gap: 80px; +} + +.gh-whats-new-canvas .gh-about-container { + display: flex; + grid-template-columns: unset; + grid-gap: unset; + margin: 0 auto; + max-width: 920px; + margin-top: 60px; +} + +.gh-about-box { + position: sticky; + top: 96px; + right: 0; + display: flex; + flex-grow: 1; + flex-direction: column; + height: max-content; + border-radius: 3px; + min-width: 300px; +} + +.gh-about-box.grey { + border: none; + background: var(--main-color-content-greybg); +} + +.gh-env-details { + display: flex; + flex-grow: 1; + flex-direction: column; + padding: 24px 28px 28px; +} + +.gh-about-container h2 { + font-size: 1.65rem; + line-height: 1.4em; + font-weight: 600; + border-bottom: 1px solid var(--lightgrey-l2); + padding-bottom: 12px; + margin-bottom: 12px; +} + +.gh-env-list { + margin: 0; + padding: 0; + list-style: none; +} + +.gh-env-list li { + margin: 0 0 4px; + font-size: 1.4rem; + line-height: 1.5em; +} + +.gh-env-error { + margin: 1.2rem 0; + padding: 16px; + line-height: 1.4em; + border: none; + background: color-mod(var(--red) a(6%)); + border-radius: 3px; +} + +.gh-env-error a { + color: var(--red); +} + +.gh-env-help { + max-width: 200px; +} + +.gh-env-help .gh-btn { + margin: 4px 0; +} + +@media (max-width: 670px) { + .gh-env-details { + flex-direction: column; + } + .gh-env-help { + margin: 1em 0; + max-width: none; + } + .gh-env-help .gh-btn { + display: inline-block; + } +} + +.gh-about-content-actions { + display: none; +} + + + +/* Upgrade +/* ---------------------------------------------------------- */ + +.gh-upgrade-notification { + padding-top: 1em; +} + +.gh-upgrade-notification a { + text-decoration: underline; +} + +.gh-about-modal .gh-upgrade-notification { + background: color-mod(var(--green) a(8%)); + padding: 24px 28px 24px; + border-radius: 3px; + margin-bottom: 28px; +} + +/* Copyright Info +/* ---------------------------------------------------------- */ + +.gh-copyright-info { + color: var(--midgrey); + font-size: 1.3rem; + border-top: 1px solid var(--lightgrey-l2); + padding-top: 16px; + margin-top: 16px; + line-height: 1.45em; +} + +.gh-about-modal .gh-copyright-info { + margin: 4px 0 8px; + border-top: none; } \ No newline at end of file diff --git a/ghost/admin/app/styles/layouts/whatsnew.css b/ghost/admin/app/styles/layouts/whatsnew.css index 1c4aa97b4c..4229598c83 100644 --- a/ghost/admin/app/styles/layouts/whatsnew.css +++ b/ghost/admin/app/styles/layouts/whatsnew.css @@ -1,141 +1,3 @@ -/* About /ghost/settings/about/ -/* ---------------------------------------------------------- */ -.gh-about-logo svg { - position: relative; - width: 120px; - height: auto; -} - -.gh-about-logo { - border-bottom: 1px solid var(--lightgrey-l2); - padding-bottom: 10px; - margin-bottom: 16px; -} - -.gh-about-container { - display: grid; - grid-template-columns: 2fr 1fr; - grid-gap: 80px; -} - -.gh-whats-new-canvas .gh-about-container { - display: flex; - grid-template-columns: unset; - grid-gap: unset; - margin: 0 auto; - max-width: 920px; - margin-top: 60px; -} - -.gh-about-box { - position: sticky; - top: 96px; - right: 0; - display: flex; - flex-grow: 1; - flex-direction: column; - height: max-content; - border-radius: 3px; - min-width: 300px; -} - -.gh-about-box.grey { - border: none; - background: var(--main-color-content-greybg); -} - -.gh-env-details { - display: flex; - flex-grow: 1; - flex-direction: column; - padding: 24px 28px 28px; -} - -.gh-about-container h2 { - font-size: 1.65rem; - line-height: 1.4em; - font-weight: 600; - border-bottom: 1px solid var(--lightgrey-l2); - padding-bottom: 12px; - margin-bottom: 12px; -} - -.gh-env-list { - margin: 0; - padding: 0; - list-style: none; -} - -.gh-env-list li { - margin: 0 0 4px; - font-size: 1.4rem; - line-height: 1.5em; -} - -.gh-env-error { - margin: 1.2rem 0; - padding: 16px; - line-height: 1.4em; - border: none; - background: color-mod(var(--red) a(6%)); - border-radius: 3px; -} - -.gh-env-error a { - color: var(--red); -} - -.gh-env-help { - max-width: 200px; -} - -.gh-env-help .gh-btn { - margin: 4px 0; -} - -@media (max-width: 670px) { - .gh-env-details { - flex-direction: column; - } - .gh-env-help { - margin: 1em 0; - max-width: none; - } - .gh-env-help .gh-btn { - display: inline-block; - } -} - -.gh-about-content-actions { - display: none; -} - - - -/* Upgrade -/* ---------------------------------------------------------- */ - -.gh-upgrade-notification { - padding-top: 1em; -} - -.gh-upgrade-notification a { - text-decoration: underline; -} - -/* Copyright Info -/* ---------------------------------------------------------- */ - -.gh-copyright-info { - color: var(--midgrey); - font-size: 1.3rem; - border-top: 1px solid var(--lightgrey-l2); - padding-top: 16px; - margin-top: 16px; - line-height: 1.45em; -} - - /* What's new */ /* ---------------------------------------------------------- */ .gh-whats-new-canvas .gh-canvas-header-content { diff --git a/ghost/admin/app/styles/patterns/buttons.css b/ghost/admin/app/styles/patterns/buttons.css index 26524f0b71..2f966e1aee 100644 --- a/ghost/admin/app/styles/patterns/buttons.css +++ b/ghost/admin/app/styles/patterns/buttons.css @@ -802,4 +802,23 @@ Usage: CTA buttons grouped together horizontally. /* Conditional wording for mobile to save space */ .gh-btn .gh-btn-text-hide-for-mobile { display: none; +} + +.gh-btn-with-notification { + position: relative; +} + +.gh-btn-notification-dot { + position: absolute; + top: -6px; + right: -6px; + display: block; + content: ""; + width: 14px !important; + height: 14px !important; + background: var(--green); + padding: 0 !important; + margin: 0 !important; + border-radius: 999px !important; + border: 1px solid var(--main-bg-color); } \ No newline at end of file diff --git a/ghost/admin/app/templates/settings.hbs b/ghost/admin/app/templates/settings.hbs index d8e2ec1cc2..7d0e492e56 100644 --- a/ghost/admin/app/templates/settings.hbs +++ b/ghost/admin/app/templates/settings.hbs @@ -3,6 +3,20 @@

Settings

+ {{#if (feature 'auditLog')}} +
+ {{#if this.upgradeStatus.message}} + + {{else}} + + {{/if}} +
+ {{/if}}
@@ -76,12 +90,22 @@ - {{svg-jar "labs"}} + {{svg-jar "labs"}}

Labs

Testing ground for new features

 + + {{#if (feature 'auditLog')}} + + {{svg-jar "calendar-stroke"}} +
+

History

+

View system event log

+
+ + {{/if}}
diff --git a/ghost/admin/app/templates/settings/audit-log.hbs b/ghost/admin/app/templates/settings/audit-log.hbs index 63e76b7a91..c9198b9b0a 100644 --- a/ghost/admin/app/templates/settings/audit-log.hbs +++ b/ghost/admin/app/templates/settings/audit-log.hbs @@ -1,7 +1,9 @@

- Audit log + Settings + {{svg-jar "arrow-right"}} + History {{#if this.userRecord}} {{svg-jar "arrow-right"}} {{or this.userRecord.name this.userRecord.email}} diff --git a/ghost/admin/app/templates/settings/general.hbs b/ghost/admin/app/templates/settings/general.hbs index 56e84932fc..149662bd35 100644 --- a/ghost/admin/app/templates/settings/general.hbs +++ b/ghost/admin/app/templates/settings/general.hbs @@ -17,513 +17,430 @@ @modifier="action wide" /> {{/if}} -
-
-
-

Publication info

-
-
-
-
-

Title & description

-

The details used to identify your publication around the web

-
- -
-
- {{#liquid-if this.pubInfoOpen}} -
- - - -

The name of your site

- - - - - -

Used in your theme, meta data and search results

- -
- {{/liquid-if}} +
+
+

Publication info

+
+
+
+
+

Title & description

+

The details used to identify your publication around the web

+
+
+ {{#liquid-if this.pubInfoOpen}} +
+ + + +

The name of your site

+ -
-
-
-

Site timezone

-

Set the time and date of your publication, used for all published posts

-
- -
-
- {{#liquid-if this.timezoneOpen}} -
- -
- {{/liquid-if}} + + + +

Used in your theme, meta data and search results

+
+ {{/liquid-if}}
+
-
-
-
-

Publication Language

-

Set the language/locale which is used on your site

-
- -
-
- {{#liquid-if this.langOpen}} -
- - - -

Default: English (en); you can add translation files to your theme for any language

- -
- {{/liquid-if}} +
+
+
+

Site timezone

+

Set the time and date of your publication, used for all published posts

+
-
-
- -
-

Site meta settings

-
-
-
-
-

Meta data

-

Extra content for search engines

-
- -
-
- {{#liquid-if this.metaDataOpen}} -
-
-
- - - - -

Recommended: 70 characters. You’ve used {{gh-count-down-characters this.settings.metaTitle 70}}

- - - - - -

Recommended: 156 characters. You’ve used {{gh-count-down-characters this.settings.metaDescription 156}}

- -
-
- -
-
-
- {{svg-jar "google"}} -
{{svg-jar "google-search"}}
-
-
{{this.config.blogDomain}}
-
{{or this.settings.metaTitle this.settings.title}}
-
- {{truncate (or this.settings.metaDescription this.settings.description) 159}} -
-
-
-
-
-
- {{/liquid-if}} +
+ {{#liquid-if this.timezoneOpen}} +
+
+ {{/liquid-if}}
+
-
-
-
-

Twitter card

-

Customize structured data of your site for Twitter

-
- +
+
+
+

Publication Language

+

Set the language/locale which is used on your site

-
- {{#liquid-if this.twitterCardOpen}} + +
+
+ {{#liquid-if this.langOpen}} +
+ + + +

Default: English (en); you can add translation files to your theme for any language

+ +
+ {{/liquid-if}} +
+
+
+
+ +
+

Site meta settings

+
+
+
+
+

Meta data

+

Extra content for search engines

+
+ +
+
+ {{#liquid-if this.metaDataOpen}}
-
-
- - - - - - +
+
+ + - + +

Recommended: 70 characters. You’ve used {{gh-count-down-characters this.settings.metaTitle 70}}

 - - + + - + +

Recommended: 156 characters. You’ve used {{gh-count-down-characters this.settings.metaDescription 156}}
- -
-
- {{svg-jar "social-twitter" class="social-icon"}} -
- {{or this.settings.metaTitle this.settings.title}} - 12 hrs -
- - -
- - + +
+
+
+ {{svg-jar "google"}} +
{{svg-jar "google-search"}}
+
+
{{this.config.blogDomain}}
+
{{or this.settings.metaTitle this.settings.title}}
+
+ {{truncate (or this.settings.metaDescription this.settings.description) 159}}
- {{/liquid-if}} -
+ {{/liquid-if}}
+
-
-
-
-

Facebook card

-

Customize structured data of your site

-
- +
+
+
+

Twitter card

+

Customize structured data of your site for Twitter

-
- {{#liquid-if this.facebookCardOpen}} -
-
-
- - - - - - - - - - - - - - -
-
- -
-
- {{svg-jar "social-facebook" class="social-icon"}} -
-
{{or this.settings.metaTitle this.settings.title}}
-
12 hrs
-
-
-
+ +
+
+ {{#liquid-if this.twitterCardOpen}} +
+
+
+ + + + + + + + + + + + + + +
+
+ +
+
+ {{svg-jar "social-twitter" class="social-icon"}} +
+ {{or this.settings.metaTitle this.settings.title}} + 12 hrs +
-
- {{#if this.settings.ogImage}} -
+
- {{/liquid-if}} -
-
- -
-
-
-

Social accounts

-

Link your social accounts for full structured data and rich card support

-
-
- {{#liquid-if this.socialOpen}} + {{/liquid-if}} +
+
+ +
+
+
+

Facebook card

+

Customize structured data of your site

+
+ +
+
+ {{#liquid-if this.facebookCardOpen}}
- - - -

URL of your publication's Facebook Page

- - - - -

URL of your publication's Twitter profile

- -
- {{/liquid-if}} -
-
- -
-
- -
-

Advanced settings

-
-
-
-
-

Make this site private

-

- Enable protection with a simple shared password. All search engine optimization and social features will be disabled. -

-
-
- -
-
-
- {{#if this.settings.isPrivate}} -
- - A private RSS feed is available at - {{this.privateRSSUrl}} - - - - -

Set the password for this site

- +
+
+ + + + + + + + + + + + + + +
+
+ +
+
+ {{svg-jar "social-facebook" class="social-icon"}} +
+
{{or this.settings.metaTitle this.settings.title}}
+
12 hrs
+
+
+
+ + +
+
+ {{#if this.settings.ogImage}} +
+ {{/if}} +
+ {{!-- Ensures description is hidden if title exceeds one line --}} +
+
+ {{this.config.blogDomain}} +
+
{{truncate (or this.settings.ogTitle this.settings.title)}}
+
{{truncate (or this.settings.ogDescription this.settings.description)}}
+
+
+
+
+ {{svg-jar "facebook-like" class="z-999"}}{{svg-jar "facebook-heart" class="nl1"}}182 + 7 comments + 2 shares +
+
+
- {{/if}} -
+
+ {{/liquid-if}}
-
-
+
+ +
+
+
+

Social accounts

+

Link your social accounts for full structured data and rich card support

+
+ +
+
+ {{#liquid-if this.socialOpen}} +
+ + + +

URL of your publication's Facebook Page

+ + + + +

URL of your publication's Twitter profile

+ +
+ {{/liquid-if}} +
+
+ +
- {{#if (feature 'auditLog')}} -
-
- - - {{#if this.upgradeStatus.message}} -
-

- Update available! {{this.upgradeStatus.message}} +

+

Advanced settings

+
+
+
+
+

Make this site private

+

+ Enable protection with a simple shared password. All search engine optimization and social features will be disabled.

-
- {{/if}} - -
    - {{#if this.linkToGitHubReleases}} -
  • Version: {{this.config.version}}
    • - {{else}} -
  • Version: {{this.config.version}}
    • - {{/if}} - {{#if this.showSystemInfo}} -
  • Environment: {{this.config.environment}}
    • -
  • Database: {{this.config.database}}
    • -
  • Mail: {{#if this.config.mail}}{{this.config.mail}}{{else}}Native{{/if}}
    • - {{/if}} - {{#if (enable-developer-experiments)}} -
  • Developer experiments: Enabled
    • - {{/if}} -
- - {{#if (and this.showSystemInfo this.showDatabaseWarning)}} -
- You are running an unsupported database in production. Please upgrade to MySQL 8.
- {{/if}} - -
+
+ {{#if this.settings.isPrivate}} +
+ + A private RSS feed is available at + {{this.privateRSSUrl}} - - -
  • - - - {{svg-jar "help" class="stroke-middarkgrey hover-stroke"}} - Get help with Ghost - - -
    • -
  • - - - {{svg-jar "brackets" class="stroke-middarkgrey hover-stroke"}} - Get involved - - -
    • - - -
      -
    • - - - {{svg-jar "calendar-stroke" class="calendar-icon stroke-middarkgrey hover-stroke"}} - Audit log - - -
      • -
    -
    -
    - Copyright © 2013 – {{this.copyrightYear}} Ghost Foundation, released under the MIT license. Ghost is a registered trademark of Ghost Foundation Ltd. + + + +

    Set the password for this site

    +     +
    + {{/if}} +
    -
    - {{/if}} +

    + {{outlet}} \ No newline at end of file