Updated Activity log list design

refs. https://github.com/TryGhost/Toolbox/issues/356

- The Audit log list had a temporary (POC) design, it needed refinements

ghost/admin/app/components/settings/audit-log/table.hbs

@@ -1,9 +1,10 @@
-<table class="gh-list">
+<table class="gh-list gh-audit-log-table">
     <thead>
         <tr>
             <th>User</th>
             <th>Action</th>
-            <th>When</th>
+            <th></th>
+            <th>Time</th>
         </tr>
     </thead>
     <tbody>
@@ -15,31 +16,37 @@
                     <span class="user-list-item-figure" style={{background-image-style (or ev.actor.profileImageUrl ev.actor.iconImage)}}>
                         <span class="hidden">Photo of {{ev.actor.name}}</span>
                     </span>
-                    <h3 class="ma0 pa0 gh-members-list-name">{{ev.actor.name}}</h3>
+                    <h3 class="ma0 pa0 gh-audit-log-name">{{ev.actor.name}}</h3>
                 </div>
             </div>
-            <div class="gh-list-data gh-list-cellwidth-50">
+            <div class="gh-list-data gh-list-cellwidth-10 gh-audit-log-action">
-                <div class="gh-members-activity-container">
+                <div class="gh-audit-log-container">
-                    <div class="gh-members-activity-icon">{{svg-jar ev.actionIcon}}</div>
+                    <div class="gh-audit-log-icon">{{svg-jar ev.actionIcon}}</div>
-                    <div class="gh-members-activity-event">
+                    <div class="gh-audit-log-event">
-                        <span class="gh-members-activity-description">
+                        <span class="gh-audit-log-description">
                             {{capitalize-first-letter ev.action}}
-                            {{#if (or ev.resource.title ev.resource.name)}}
-                                {{#if ev.linkable}}
-                                    <LinkTo @route="editor.edit" @models={{array ev.resource.displayName ev.resource.id}} class="permalink">
-                                        <strong>{{or ev.resource.title ev.resource.name}}</strong>
-                                    </LinkTo>
-                                {{else}}
-                                    <strong>{{or ev.resource.title ev.resource.name}}</strong>
-                                {{/if}}
-                            {{else}}
-                                <small>(unknown)</small>
-                            {{/if}}
                         </span>
                     </div>
                 </div>
             </div>
-            <div class="gh-list-data">{{moment-format ev.original.created_at "DD MMM YYYY HH:mm:ss"}}</div>
+            <div class="gh-list-data gh-audit-log-object">
+                <div class="gh-audit-log-container">
+                    {{#if (or ev.resource.title ev.resource.name)}}
+                        {{#if ev.linkable}}
+                            <LinkTo @route="editor.edit" @models={{array ev.resource.displayName ev.resource.id}} class="permalink">
+                                <strong>{{or ev.resource.title ev.resource.name}}</strong>
+                            </LinkTo>
+                        {{else}}
+                            <span class="midgrey">
+                                <strong>{{or ev.resource.title ev.resource.name}}</strong>
+                            </span>
+                        {{/if}}
+                    {{else}}
+                        <span class="midlightgrey">(unknown)</span>
+                    {{/if}}
+                </div>
+            </div>
+            <div class="gh-list-data midgrey">{{moment-format ev.original.created_at "DD MMM YYYY HH:mm:ss"}}</div>
         </tr>
         {{/let}}
         {{/each}}

ghost/admin/app/helpers/parse-audit-log-event.js

@@ -29,11 +29,11 @@ export default class ParseAuditLogEvent extends Helper {
 function getActionIcon(ev) {
     switch (ev.event) {
     case 'added':
-        return 'add-stroke';
+        return 'add';
     case 'edited':
-        return 'content';
+        return 'pen';
     case 'deleted':
-        return 'cross-circle';
+        return 'trash';
     }
 
     return 'info';

ghost/admin/app/routes/settings/audit-log.js

@@ -13,7 +13,7 @@ export default class AuditLogRoute extends AdminRoute {
 
     buildRouteInfoMetadata() {
         return {
-            titleToken: 'Settings - Audit log'
+            titleToken: 'Audit log'
         };
     }
 }

ghost/admin/app/styles/components/lists.css

@@ -154,8 +154,10 @@ ul.nostyle li {
     width: 33%;
 }
 
+.gh-list-cellwidth-1 { width: 1%; }
 .gh-list-cellwidth-10 { width: 10%; }
 .gh-list-cellwidth-20 { width: 20%; }
+.gh-list-cellwidth-25 { width: 25%; }
 .gh-list-cellwidth-30 { width: 30%; }
 .gh-list-cellwidth-40 { width: 40%; }
 .gh-list-cellwidth-50 { width: 50%; }

ghost/admin/app/styles/layouts/member-activity.css

@@ -195,10 +195,22 @@
 .gh-member-activity-actions-menu {
     top: auto;
     left: auto;
-    padding: 2rem;
+    padding: 0;
     margin-top: 8px;
 }
 
+.gh-member-activity-actions-menu ul li {
+    margin: 0 2rem;
+}
+
+.gh-member-activity-actions-menu ul li:first-of-type {
+    margin-top: 2rem;
+}
+
+.gh-member-activity-actions-menu ul li:last-of-type {
+    margin-bottom: 2rem;
+}
+
 .gh-member-activity-actions-menu h3 {
     margin-bottom: 0.75rem;
 }
@@ -268,6 +280,10 @@
     width: 16px;
 }
 
+.gh-member-activity-actions-menu hr {
+    margin: 12px -20px;
+}
+
 .gh-member-filter-search-trigger {
     width: 240px;
 }

ghost/admin/app/styles/layouts/settings.css

@@ -2852,3 +2852,50 @@ p.theme-validation-details {
     margin: 8px 0 0;
     color: var(--midgrey);
 }
+
+/* Audit log
+/* ---------------------------------------------------------- */
+.gh-audit-log-container {
+    display: flex;
+    align-items: center;
+    padding: 7px 0;
+}
+
+.gh-audit-log-action {
+    padding-right: 6px;
+}
+
+.gh-audit-log-object {
+    padding-left: 6px;
+}
+
+.gh-audit-log-dash {
+    padding-left: 0;
+    padding-right: 0;
+    color: var(--lightgrey);
+}
+
+.gh-audit-log-icon {
+    width: 16px;
+    height: 16px;
+    margin-right: 8px;
+}
+
+.gh-audit-log-icon svg path {
+    fill: var(--middarkgrey);
+}
+
+.gh-audit-log-description {
+    font-size: 1.3rem;
+    color: var(--middarkgrey);
+    white-space: nowrap;
+}
+
+.gh-audit-log-table .user-list-item-figure {
+    height: 30px;
+    width: 30px;
+}
+
+.gh-audit-log-name {
+    margin-bottom: 0 !important;
+}

ghost/admin/app/templates/settings/audit-log.hbs

@@ -1,8 +1,6 @@
 <section class="gh-canvas gh-members-activity">
     <GhCanvasHeader class="gh-canvas-header">
     <h2 class="gh-canvas-title" data-test-screen-title>
-        <LinkTo @route="settings">Settings</LinkTo>
-        <span>{{svg-jar "arrow-right"}}</span>
         <LinkTo @route="settings.audit-log" data-test-link="audit-log-back">Audit log</LinkTo>
         {{#if this.userRecord}}
             <span>{{svg-jar "arrow-right"}}</span>