Improved Audit log filter dropdown design

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

- the event filter list was a bit harder to parse without icons

ghost/admin/app/components/settings/audit-log/event-filter.hbs

@@ -6,38 +6,57 @@
         </span>
     </dd.Trigger>
 
-    <dd.Content class="gh-member-activity-actions-menu gh-activity-log-actions dropdown-menu dropdown-triangle-top-right">
+    <dd.Content class="gh-activity-log-actions dropdown-menu dropdown-triangle-top-right">
         {{!-- NOTE: re-using ember-power-select-options styles --}}
         <ul class="ember-power-select-options" role="listbox">
             {{#each this.eventTypes as |type idx|}}
-                <li class="form-group ember-power-select-option mb0 for-checkbox">
-                    <label class="checkbox" for="event-type-{{idx}}">
-                        <input
-                            type="checkbox"
-                            checked={{type.isSelected}}
-                            id="event-type-{{idx}}"
-                            name="eventTypes"
-                            class="gh-input post-settings-featured"
-                            {{on "input" (fn this.toggleEventType type.event)}}>
-                        <span class="input-toggle-component"></span>
-                        <p>{{type.name}}</p>
-                    </label>
+                <li class="form-group ember-power-select-option gh-audit-log-filter-li">
+                    <div class="gh-activity-log-action-switch for-switch small">
+                        <label
+                            class="switch"
+                            for="event-type-{{idx}}"
+                        >
+                            <div class="flex items-center">
+                                {{svg-jar type.icon}}
+                                <span>{{type.name}}</span>
+                            </div>
+                            <input
+                                type="checkbox"
+                                checked={{type.isSelected}}
+                                id="event-type-{{idx}}"
+                                name="eventTypes"
+                                {{on "input" (fn this.toggleEventType type.event)}}
+                            >
+                            <span class="input-toggle-component"></span>
+                        </label>
+                    </div>
                 </li>
             {{/each}}
             <hr />
             {{#each this.resourceTypes as |type idx|}}
-                <li class="form-group ember-power-select-option mb0 for-checkbox">
-                    <label class="checkbox" for="resource-type-{{idx}}">
-                        <input
-                            type="checkbox"
-                            checked={{type.isSelected}}
-                            id="resource-type-{{idx}}"
-                            name="resourceTypes"
-                            class="gh-input post-settings-featured"
-                            {{on "input" (fn this.toggleResourceType type.targets)}}>
-                        <span class="input-toggle-component"></span>
-                        <p>{{type.name}}</p>
-                    </label>
+                <li class="form-group ember-power-select-option gh-audit-log-filter-li">
+                    {{!-- <div class="flex items-center">
+                        {{svg-jar "pen"}}
+                    </div> --}}
+                    <div class="gh-activity-log-action-switch for-switch small">
+                        <label
+                            class="switch"
+                            for="resource-type-{{idx}}"
+                        >
+                            <div class="flex items-center">
+                                {{svg-jar type.icon}}
+                                <span>{{type.name}}</span>
+                            </div>
+                            <input
+                                type="checkbox"
+                                checked={{type.isSelected}}
+                                id="resource-type-{{idx}}"
+                                name="eventTypes"
+                                {{on "input" (fn this.toggleResourceType type.targets)}}
+                            >
+                            <span class="input-toggle-component"></span>
+                        </label>
+                    </div>
                 </li>
             {{/each}}
         </ul>

ghost/admin/app/components/settings/audit-log/event-filter.js

@@ -2,18 +2,18 @@ import Component from '@glimmer/component';
 import {action} from '@ember/object';
 
 const ALL_EVENT_TYPES = [
-    {event: 'added', name: 'Added'},
-    {event: 'edited', name: 'Edited'},
-    {event: 'deleted', name: 'Deleted'}
+    {event: 'added', name: 'Added', icon: 'add'},
+    {event: 'edited', name: 'Edited', icon: 'pen'},
+    {event: 'deleted', name: 'Deleted', icon: 'trash'}
 ];
 
 const ALL_RESOURCE_TYPES = [
-    {targets: 'post', name: 'Posts'},
-    {targets: 'page', name: 'Pages'},
-    {targets: 'tag', name: 'Tags'},
-    {targets: 'label,member', name: 'Members'},
-    {targets: 'offer,product', name: 'Tiers & offers'},
-    {targets: 'api_key,integration,setting,user,webhook', name: 'Settings & users'}
+    {targets: 'post', name: 'Posts', icon: 'posts'},
+    {targets: 'page', name: 'Pages', icon: 'page'},
+    {targets: 'tag', name: 'Tags', icon: 'tag'},
+    {targets: 'label,member', name: 'Members', icon: 'members'},
+    {targets: 'offer,product', name: 'Tiers & offers', icon: 'percentage'},
+    {targets: 'api_key,integration,setting,user,webhook', name: 'Settings & users', icon: 'settings'}
 ];
 
 export default class AuditLogEventFilter extends Component {
@@ -26,6 +26,7 @@ export default class AuditLogEventFilter extends Component {
         return ALL_EVENT_TYPES.map(type => ({
             event: type.event,
             name: type.name,
+            icon: type.icon,
             isSelected: !excludedEvents.includes(type.event)
         }));
     }
@@ -36,6 +37,7 @@ export default class AuditLogEventFilter extends Component {
         return ALL_RESOURCE_TYPES.map(type => ({
             targets: type.targets,
             name: type.name,
+            icon: type.icon,
             isSelected: !type.targets.split(',').every(t => excludedResources.includes(t))
         }));
     }

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

@@ -2867,6 +2867,50 @@ p.theme-validation-details {
 
 /* Audit log
 /* ---------------------------------------------------------- */
+.gh-audit-log-filter-li {
+    height: 32px;
+}
+
+.gh-audit-log-filter-li svg {
+    margin-right: 6px;
+}
+
+.gh-activity-log-actions {
+    padding-top: 12px;
+    padding-bottom: 12px;
+}
+
+.gh-activity-log-actions ul {
+    width: 240px;
+}
+
+.gh-activity-log-actions hr {
+    margin: 12px -20px;
+}
+
+.gh-activity-log-action-switch.for-switch.small label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: unset !important;
+    height: unset !important;
+}
+
+.gh-activity-log-action-switch.for-switch.small .input-toggle-component {
+    position: relative;
+    width: 30px!important;
+    height: 18px!important;
+}
+
+.gh-activity-log-action-switch.for-switch.small .input-toggle-component:before {
+    width: 14px !important;
+    height: 14px !important;
+}
+
+.gh-activity-log-action-switch.for-switch.small input:checked+.input-toggle-component:before {
+    transform: translateX(12px);
+}
+
 .gh-audit-log-container {
     display: flex;
     align-items: center;
@@ -2973,8 +3017,4 @@ p.theme-validation-details {
         font-size: 1.4rem !important;
         min-width: 130px;
     }
-}
-
-.gh-activity-log-actions ul {
-    width: 240px;
 }