Added avatars to Audit log

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

- the list needed avatars and action icons to be able to easily scan who's doing a lot of actions and what actions have been done at the same time
This commit is contained in:
Peter Zimon 2022-08-25 15:41:26 +02:00
parent a8239bfa97
commit 5f157efcd9
2 changed files with 33 additions and 9 deletions

View File

@ -10,7 +10,11 @@
<tr>
<div class="gh-list-data">
<div class="gh-audit-log-object flex items-center ma3">
<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>
<div class="gh-audit-log-icon">{{svg-jar ev.actionIcon}}</div>
</span>
{{!-- --}}
<div>
<div class="gh-audit-log-description">
<span>

View File

@ -2896,12 +2896,6 @@ p.theme-validation-details {
color: var(--lightgrey);
}
.gh-audit-log-icon {
width: 18px;
height: 18px;
margin: 0 20px 0 4px;
}
.gh-audit-log-icon svg path {
fill: var(--midgrey-l1);
}
@ -2940,8 +2934,34 @@ p.theme-validation-details {
}
.gh-audit-log-table .user-list-item-figure {
height: 30px;
width: 30px;
position: relative;
height: 34px;
width: 34px;
margin-left: 0;
margin-right: 16px;
}
.gh-audit-log-icon {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
right: -7px;
bottom: -7px;
background: var(--white);
width: 22px;
height: 22px;
border-radius: 999px;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.12);
}
.gh-audit-log-icon svg {
width: 13px;
height: 13px;
}
.gh-audit-log-icon svg path {
fill: var(--midgrey-l1);
}
@media (max-width: 620px) {