Skip to content

Commit

Permalink
[TASK] Slightly improve belog rendering
Browse files Browse the repository at this point in the history 
We are introducing new table columns for avatar, time and datetime
in preparation for more adoptions. The avatar column also removes the
space on the right to bring it closer to the name of the user while
having a fixed size for medium avatars.

To avoid column jumping we also limit the size of the icon column to
the width of a small icon that is normally used in the tables in the
backend. The new time and datetime column classes are utilizing the
character unit and ensuring that the value is not wrapped to ensure a
better reading experience across multiple tables.

The button sizes in the table are now aligned with the list module and
the delete actions now feature an icon in addition to the text.

- Unnecessary/meaningless table headers for actions and icons are
  removed
- Unnecessary div blocks for the grouped log entries are removed.
- Unnecessary invisible divider was removed

Resolves: #100511
Releases: main
Change-Id: I15b4e42d31fc9426cfc20de36b39478eabb0ba33
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/78519
Tested-by: Jasmina Ließmann <minapokhalo+typo3@gmail.com>
Reviewed-by: Jasmina Ließmann <minapokhalo+typo3@gmail.com>
Tested-by: core-ci <typo3@b13.com>
Reviewed-by: Andreas Fernandez <a.fernandez@scripting-base.de>
Tested-by: Andreas Fernandez <a.fernandez@scripting-base.de>
  • Loading branch information
@benjaminkott @andreaskienast
benjaminkott authored and andreaskienast committed Apr 7, 2023
1 parent 927db38 commit 39f58c1
Show file tree
Hide file tree
Showing 6 changed files with 131 additions and 132 deletions.
25 changes: 24 additions & 1 deletion Build/Sources/Sass/component/_table.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,8 @@
}

.col-icon,
.col-checkbox {
.col-checkbox,
.col-avatar {
padding-right: 0;
}

Expand All @@ -74,6 +75,28 @@
width: 99%;
}

.col-icon {
width: 16px;
box-sizing: content-box;
}

.col-time {
width: 8ch;
white-space: nowrap;
box-sizing: content-box;
}

.col-datetime {
width: 14ch;
white-space: nowrap;
box-sizing: content-box;
}

.col-avatar {
width: 32px;
box-sizing: content-box;
}

.col-state {
min-width: 120px;
}
Expand Down
2 changes: 1 addition & 1 deletion typo3/sysext/backend/Resources/Public/Css/backend.css
View file

Large diffs are not rendered by default.

3 changes: 0 additions & 3 deletions typo3/sysext/belog/Resources/Private/Language/locallang.xlf
View file
Original file line number Diff line number Diff line change
Expand Up @@ -291,9 +291,6 @@
<trans-unit id="chLog_l_user" resname="chLog_l_user">
<source>User</source>
</trans-unit>
<trans-unit id="chLog_l_error" resname="chLog_l_error">
<source>E</source>
</trans-unit>
<trans-unit id="chLog_l_action" resname="chLog_l_action">
<source>Action</source>
</trans-unit>
Expand Down
2 changes: 1 addition & 1 deletion typo3/sysext/belog/Resources/Private/Partials/Content/Filter.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
data-namespace-typo3-fluid="true">

<f:form object="{constraint}" action="list" name="constraint" class="belog-filter-form">
<div class="row row-cols-auto align-items-end g-3">
<div class="row row-cols-auto align-items-end g-3 mb-4">

<div class="col">
<label for="belog-users" class="form-label"><f:translate key="users" /></label>
Expand Down
218 changes: 103 additions & 115 deletions typo3/sysext/belog/Resources/Private/Partials/Content/LogEntries.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,130 +6,118 @@
data-namespace-typo3-fluid="true">

<f:for each="{groupedLogEntries}" as="pidEntry" key="pid">
<div>
<f:for each="{pidEntry}" as="day" key="dayTimestamp">
<h3>
<f:format.date format="{settings.dateFormat}">@{dayTimestamp}</f:format.date>
</h3>
<f:for each="{pidEntry}" as="day" key="dayTimestamp">
<h3>
<f:format.date format="{settings.dateFormat}">@{dayTimestamp}</f:format.date>
</h3>

<div class="table-fit">
<table class="table table-striped table-hover">
<thead>
<div class="table-fit">
<table class="table table-striped table-hover">
<thead>
<tr>
<th></th>
<th><f:translate key="chLog_l_time"/></th>
<th colspan="2"><f:translate key="chLog_l_user"/></th>
<th>
<f:if condition="{pageId}">
<f:then>
<f:translate key="chLog_l_table"/>
</f:then>
<f:else>
<f:translate key="chLog_l_level"/>
</f:else>
</f:if>
</th>
<th><f:translate key="chLog_l_channel"/></th>
<th><f:translate key="chLog_l_details"/></th>
<th class="col-control"></th>
</tr>
</thead>
<tbody>
<f:for each="{day}" as="logItem">
<tr>
<th>
<f:translate key="chLog_l_error"/>
</th>
<th>
<f:translate key="chLog_l_time"/>
</th>
<th colspan="2">
<f:translate key="chLog_l_user"/>
</th>
<th>
<f:if condition="{pageId}">
<td class="col-icon">
<f:if condition="{logItem.errorIconClass}">
<core:icon identifier="{logItem.errorIconClass}" />
</f:if>
</td>
<td class="col-time">
<f:format.date format="H:i:s">@{logItem.tstamp}</f:format.date>
</td>
<td class="col-avatar">
<f:if condition="{belog:username(uid:logItem.backendUserUid)}">
<be:avatar backendUser="{logItem.backendUserUid}" showIcon="true"/>
</f:if>
</td>
<td>
<f:if condition="{belog:username(uid:logItem.backendUserUid)}">
<f:then>
<f:translate key="chLog_l_table"/>
<belog:username uid="{logItem.backendUserUid}"/>
</f:then>
<f:else>
<f:translate key="chLog_l_level"/>
</f:else>
<f:else>[{logItem.backendUserUid}]</f:else>
</f:if>
</th>
<th>
<f:translate key="chLog_l_channel"/>
</th>
<th>
<f:translate key="chLog_l_details"/>
</th>
<th>
<f:translate key="actions"/>
</th>
</tr>
</thead>
<tbody>
<f:for each="{day}" as="logItem">
<tr>
<td>
<f:if condition="{logItem.errorIconClass}">
<core:icon identifier="{logItem.errorIconClass}" />
</f:if>
</td>
<td>
<f:format.date format="H:i:s">@{logItem.tstamp}</f:format.date>
</td>
<td>
<f:if condition="{belog:username(uid:logItem.backendUserUid)}">
<be:avatar backendUser="{logItem.backendUserUid}" showIcon="true"/>
</f:if>
</td>
<td>
<f:if condition="{belog:username(uid:logItem.backendUserUid)}">
<f:if condition="{logItem.logData.originalUser}">
({f:translate(key:'viaUser')}
<f:if condition="{belog:username(uid:logItem.logData.originalUser)}">
<f:then>
<belog:username uid="{logItem.backendUserUid}"/>
<belog:username uid="{logItem.logData.originalUser}"/>
</f:then>
<f:else>[{logItem.backendUserUid}]</f:else>
<f:else>[{logItem.logData.originalUser}]</f:else>
</f:if>
<f:if condition="{logItem.logData.originalUser}">
({f:translate(key:'viaUser')}
<f:if condition="{belog:username(uid:logItem.logData.originalUser)}">
<f:then>
<belog:username uid="{logItem.logData.originalUser}"/>
</f:then>
<f:else>[{logItem.logData.originalUser}]</f:else>
)
</f:if>
<f:if condition="{workspaces}">
<br>
<span class="text-muted">
<f:if condition="{belog:workspaceTitle(uid:logItem.workspaceUid)}">
<f:then><belog:workspaceTitle uid="{logItem.workspaceUid}"/></f:then>
<f:else>[{logItem.workspaceUid}]</f:else>
</f:if>
)
</f:if>
<f:if condition="{workspaces}">
<br>
<span class="text-muted">
<f:if condition="{belog:workspaceTitle(uid:logItem.workspaceUid)}">
<f:then><belog:workspaceTitle uid="{logItem.workspaceUid}"/></f:then>
<f:else>[{logItem.workspaceUid}]</f:else>
</f:if>
</span>
</f:if>
</td>
<td>
<f:if condition="{pageId}">
<f:then>
{logItem.tableName}
</f:then>
<f:else>
{logItem.level}
</f:else>
</f:if>
</td>
<td>
{logItem.channel}
</td>
<td class="col-word-break">
<belog:formatDetails logEntry="{logItem}"/>
</td>
<td>
<f:if condition="{logItem.error} == 1">
<f:link.action action="deleteMessage" arguments="{errorUid:logItem.uid}" class="btn btn-warning">
<f:translate key="actions.deleteWarnings"/>
</f:link.action>
</f:if>
<f:if condition="{logItem.error} == 2">
<f:link.action action="deleteMessage" arguments="{errorUid:logItem.uid}" class="btn btn-danger">
<f:translate key="actions.delete"/>
</f:link.action>
</f:if>
<f:if condition="{logItem.logData.history}">
<a class="btn btn-default" href="{be:moduleLink(route: 'record_history', arguments: '{historyEntry: logItem.logData.history}')}" title="{f:translate(key: 'showHistory')}">
<core:icon identifier="actions-document-history-open" />
<f:translate id="showHistory" />
</a>
</f:if>
</td>
</tr>
</f:for>
</tbody>
</table>
</div>
</f:for>
</div>
</span>
</f:if>
</td>
<td>
<f:if condition="{pageId}">
<f:then>
{logItem.tableName}
</f:then>
<f:else>
{logItem.level}
</f:else>
</f:if>
</td>
<td>
{logItem.channel}
</td>
<td class="col-word-break">
<belog:formatDetails logEntry="{logItem}"/>
</td>
<td class="col-control">
<f:if condition="{logItem.error} == 1">
<f:link.action action="deleteMessage" arguments="{errorUid:logItem.uid}" class="btn btn-sm btn-warning">
<core:icon identifier="actions-delete" size="small"/>
<f:translate key="actions.deleteWarnings"/>
</f:link.action>
</f:if>
<f:if condition="{logItem.error} == 2">
<f:link.action action="deleteMessage" arguments="{errorUid:logItem.uid}" class="btn btn-sm btn-danger">
<core:icon identifier="actions-delete" size="small"/>
<f:translate key="actions.delete"/>
</f:link.action>
</f:if>
<f:if condition="{logItem.logData.history}">
<a class="btn btn-sm btn-default" href="{be:moduleLink(route: 'record_history', arguments: '{historyEntry: logItem.logData.history}')}" title="{f:translate(key: 'showHistory')}">
<core:icon identifier="actions-document-history-open" />
<f:translate id="showHistory" />
</a>
</f:if>
</td>
</tr>
</f:for>
</tbody>
</table>
</div>
</f:for>
</f:for>

</html>
13 changes: 2 additions & 11 deletions typo3/sysext/belog/Resources/Private/Templates/BackendLog/List.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,20 +15,11 @@
<h1>
<f:translate key="adminLog" />
</h1>

<f:render
partial="Content/Filter"
arguments="{_all}"
/>
<f:render partial="Content/Filter" arguments="{_all}" />

<f:if condition="{access}">
<f:then>
<div class="divider"></div>

<f:render
partial="Content/LogEntries"
arguments="{_all}"
/>
<f:render partial="Content/LogEntries" arguments="{_all}" />
</f:then>
<f:else if="!{pageId}">
<f:be.infobox state="-1" title="{f:translate(key: 'LLL:EXT:belog/Resources/Private/Language/locallang.xlf:info.selectPage.title')}">
Expand Down

0 comments on commit 39f58c1

Please sign in to comment.