mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-03-11 02:12:21 -05:00
Restructured Audit log IA
refs. https://github.com/TryGhost/Toolbox/issues/356 - renamed page to “History” now to make it less technical - moved the history page out to the Advanced section in Settings to increase discoverability - moved the About section from General settings to a modal because that technical data was not connected to General settings
This commit is contained in:
Peter Zimon
parent
e0f86cb1cb
commit
cb644b3fd7
9 changed files with 672 additions and 591 deletions
79
ghost/admin/app/components/modals/settings/about.hbs
Normal file
79
ghost/admin/app/components/modals/settings/about.hbs
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
<div class="modal-content gh-about-modal">
|
||||
<header class="modal-header">
|
||||
<div class="gh-about-logo">
|
||||
{{svg-jar "ghost-logo-orb" alt="Ghost"}}
|
||||
</div>
|
||||
</header>
|
||||
<button type="button" class="close" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="gh-about-box">
|
||||
{{#if this.upgradeStatus.message}}
|
||||
<section class="gh-upgrade-notification">
|
||||
<strong>Update available!</strong>
|
||||
<div>
|
||||
{{this.upgradeStatus.message}}
|
||||
</div>
|
||||
</section>
|
||||
{{/if}}
|
||||
<section class="gh-env-details gh-about-box grey">
|
||||
<ul class="gh-env-list">
|
||||
{{#if this.linkToGitHubReleases}}
|
||||
<li><strong>Version:</strong> <a href="https://github.com/TryGhost/Ghost/releases/tag/v{{this.config.version}}" target="_blank" rel="noopener noreferrer">{{this.config.version}}</a></li>
|
||||
{{else}}
|
||||
<li><strong>Version:</strong> {{this.config.version}}</li>
|
||||
{{/if}}
|
||||
{{#if this.showSystemInfo}}
|
||||
<li><strong>Environment:</strong> <span class="ttc">{{this.config.environment}}</span></li>
|
||||
<li class="gh-env-list-database-type"><strong>Database:</strong> {{this.config.database}}</li>
|
||||
<li><strong>Mail:</strong> {{#if this.config.mail}}{{this.config.mail}}{{else}}Native{{/if}}</li>
|
||||
{{/if}}
|
||||
{{#if (enable-developer-experiments)}}
|
||||
<li><strong>Developer experiments:</strong> <span class="gh-badge">Enabled</span></li>
|
||||
{{/if}}
|
||||
</ul>
|
||||
|
||||
{{#if (and this.showSystemInfo this.showDatabaseWarning)}}
|
||||
<div class="gh-env-error">
|
||||
You are running an unsupported database in production. Please <a href="https://ghost.org/docs/faq/supported-databases/" target="_blank" rel="noopener noreferrer">upgrade to MySQL 8</a>.
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<ul class="gh-about-links">
|
||||
<li>
|
||||
<a href="https://ghost.org/docs/" target="_blank" rel="noopener noreferrer">
|
||||
<span>
|
||||
{{svg-jar "book-open" class="fill-middarkgrey hover-fill"}}
|
||||
User documentation
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://forum.ghost.org/" target="_blank" rel="noopener noreferrer">
|
||||
<span>
|
||||
{{svg-jar "help" class="stroke-middarkgrey hover-stroke"}}
|
||||
Get help with Ghost
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://ghost.org/docs/contributing/" target="_blank" rel="noopener noreferrer">
|
||||
<span>
|
||||
{{svg-jar "brackets" class="stroke-middarkgrey hover-stroke"}}
|
||||
Get involved
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<div class="gh-copyright-info">
|
||||
<div>
|
||||
Copyright © 2013 – {{this.copyrightYear}} Ghost Foundation, released under the <a href="https://github.com/TryGhost/Ghost/blob/master/LICENSE" target="_blank" rel="noopener noreferrer">MIT license</a>.
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://ghost.org/" target="_blank" rel="noopener noreferrer">Ghost</a> is a registered trademark of <a href="https://ghost.org/trademark/" target="_blank" rel="noopener noreferrer">Ghost Foundation Ltd</a>.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
15
ghost/admin/app/components/modals/settings/about.js
Normal file
15
ghost/admin/app/components/modals/settings/about.js
Normal file
|
|
@ -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';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3002,3 +3002,158 @@ p.theme-validation-details {
|
|||
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;
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -803,3 +803,22 @@ Usage: CTA buttons grouped together horizontally.
|
|||
.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);
|
||||
}
|
||||
|
|
@ -3,6 +3,20 @@
|
|||
<h2 class="gh-canvas-title" data-test-screen-title>
|
||||
Settings
|
||||
</h2>
|
||||
{{#if (feature 'auditLog')}}
|
||||
<section class="view-actions">
|
||||
{{#if this.upgradeStatus.message}}
|
||||
<button type="button" class="gh-btn gh-btn-with-notification" {{on "click" (fn this.openAbout)}} data-tooltip="Update available!">
|
||||
<span>About Ghost</span>
|
||||
<span class="gh-btn-notification-dot green"></span>
|
||||
</button>
|
||||
{{else}}
|
||||
<button type="button" class="gh-btn gh-btn-with-notification" {{on "click" (fn this.openAbout)}}>
|
||||
<span>About Ghost</span>
|
||||
</button>
|
||||
{{/if}}
|
||||
</section>
|
||||
{{/if}}
|
||||
</GhCanvasHeader>
|
||||
|
||||
<section class="view-container">
|
||||
|
|
@ -76,12 +90,22 @@
|
|||
</LinkTo>
|
||||
|
||||
<LinkTo class="gh-setting-group" @route="settings.labs" data-test-nav="labs">
|
||||
<span class="pink">{{svg-jar "labs"}}</span>
|
||||
<span class="{{if (feature 'auditLog') "blue" "pink"}}">{{svg-jar "labs"}}</span>
|
||||
<div>
|
||||
<h4>Labs</h4>
|
||||
<p>Testing ground for new features</p>
|
||||
</div>
|
||||
</LinkTo>
|
||||
|
||||
{{#if (feature 'auditLog')}}
|
||||
<LinkTo class="gh-setting-group" @route="settings.audit-log" data-test-nav="labs">
|
||||
<span class="pink">{{svg-jar "calendar-stroke"}}</span>
|
||||
<div>
|
||||
<h4>History</h4>
|
||||
<p>View system event log</p>
|
||||
</div>
|
||||
</LinkTo>
|
||||
{{/if}}
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
<section class="gh-canvas gh-members-activity">
|
||||
<GhCanvasHeader class="gh-canvas-header">
|
||||
<h2 class="gh-canvas-title" data-test-screen-title>
|
||||
<LinkTo @route="settings.audit-log" @query={{reset-query-params "settings.audit-log"}} data-test-link="audit-log-back">Audit log</LinkTo>
|
||||
<LinkTo @route="settings">Settings</LinkTo>
|
||||
<span>{{svg-jar "arrow-right"}}</span>
|
||||
<LinkTo @route="settings.audit-log" @query={{reset-query-params "settings.audit-log"}} data-test-link="audit-log-back">History</LinkTo>
|
||||
{{#if this.userRecord}}
|
||||
<span>{{svg-jar "arrow-right"}}</span>
|
||||
<span class="truncate">{{or this.userRecord.name this.userRecord.email}}</span>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@
|
|||
@modifier="action wide" />
|
||||
{{/if}}
|
||||
|
||||
<div class="{{if (feature 'auditLog') "gh-general-settings"}}">
|
||||
<div>
|
||||
<div class="gh-main-section">
|
||||
<h4 class="gh-main-section-header small bn">Publication info</h4>
|
||||
|
|
@ -443,87 +442,5 @@
|
|||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if (feature 'auditLog')}}
|
||||
<div class="gh-about-box">
|
||||
<section class="gh-env-details gh-about-box grey">
|
||||
<div class="gh-about-logo">
|
||||
{{svg-jar "ghost-logo-orb" alt="Ghost"}}
|
||||
</div>
|
||||
|
||||
{{#if this.upgradeStatus.message}}
|
||||
<section class="gh-upgrade-notification">
|
||||
<p>
|
||||
<strong>Update available!</strong> {{this.upgradeStatus.message}}
|
||||
</p>
|
||||
</section>
|
||||
{{/if}}
|
||||
|
||||
<ul class="gh-env-list">
|
||||
{{#if this.linkToGitHubReleases}}
|
||||
<li><strong>Version:</strong> <a href="https://github.com/TryGhost/Ghost/releases/tag/v{{this.config.version}}" target="_blank" rel="noopener noreferrer">{{this.config.version}}</a></li>
|
||||
{{else}}
|
||||
<li><strong>Version:</strong> {{this.config.version}}</li>
|
||||
{{/if}}
|
||||
{{#if this.showSystemInfo}}
|
||||
<li><strong>Environment:</strong> <span class="ttc">{{this.config.environment}}</span></li>
|
||||
<li class="gh-env-list-database-type"><strong>Database:</strong> {{this.config.database}}</li>
|
||||
<li><strong>Mail:</strong> {{#if this.config.mail}}{{this.config.mail}}{{else}}Native{{/if}}</li>
|
||||
{{/if}}
|
||||
{{#if (enable-developer-experiments)}}
|
||||
<li><strong>Developer experiments:</strong> <span class="gh-badge">Enabled</span></li>
|
||||
{{/if}}
|
||||
</ul>
|
||||
|
||||
{{#if (and this.showSystemInfo this.showDatabaseWarning)}}
|
||||
<div class="gh-env-error">
|
||||
You are running an unsupported database in production. Please <a href="https://ghost.org/docs/faq/supported-databases/" target="_blank" rel="noopener noreferrer">upgrade to MySQL 8</a>.
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<ul class="gh-about-links">
|
||||
<li>
|
||||
<a href="https://ghost.org/docs/" target="_blank" rel="noopener noreferrer">
|
||||
<span>
|
||||
{{svg-jar "book-open" class="fill-middarkgrey hover-fill"}}
|
||||
User documentation
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://forum.ghost.org/" target="_blank" rel="noopener noreferrer">
|
||||
<span>
|
||||
{{svg-jar "help" class="stroke-middarkgrey hover-stroke"}}
|
||||
Get help with Ghost
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://ghost.org/docs/contributing/" target="_blank" rel="noopener noreferrer">
|
||||
<span>
|
||||
{{svg-jar "brackets" class="stroke-middarkgrey hover-stroke"}}
|
||||
Get involved
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="gh-about-links">
|
||||
<li>
|
||||
<LinkTo @route="settings.audit-log" data-test-nav="audit-log">
|
||||
<span>
|
||||
{{svg-jar "calendar-stroke" class="calendar-icon stroke-middarkgrey hover-stroke"}}
|
||||
Audit log
|
||||
</span>
|
||||
</LinkTo>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<div class="gh-copyright-info">
|
||||
Copyright © 2013 – {{this.copyrightYear}} Ghost Foundation, released under the <a href="https://github.com/TryGhost/Ghost/blob/master/LICENSE" target="_blank" rel="noopener noreferrer">MIT license</a>. <a href="https://ghost.org/" target="_blank" rel="noopener noreferrer">Ghost</a> is a registered trademark of <a href="https://ghost.org/trademark/" target="_blank" rel="noopener noreferrer">Ghost Foundation Ltd</a>.
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</section>
|
||||
{{outlet}}
|
||||
Loading…
Add table
Reference in a new issue