From b2a1c9ae6e232c1c5e93c6ceaa7c558c4a5e1e33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jasmina=20Lie=C3=9Fmann?= <minapokhalo+typo3@gmail.com>
Date: Sat, 25 May 2024 16:25:42 +0200
Subject: [PATCH] [TASK] Update card layout and heading structure in "About"
module
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
The "About" backend module provides overviews of the modules available
in the system, installed external libraries, authors of installed
extensions, as well as general information about TYPO3 and its
community.
This patch standardizes the appearance of the cards in this module with
those from the "Admin Tools" area. In addition, the heading structure
has been updated and some headings have been added.
In addition, links are now colored blue, similar to those in the
"System Information" toolbar element, and email links in the extension
authors list were removed because they violated the Content Security
Policy.
Resolves: #104009
Releases: main
Change-Id: Ia3a0811e973edea579e8d66d2f0d7f01e9ded0c2
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/84400
Reviewed-by: Andreas Nedbal <andy@pixelde.su>
Tested-by: Garvin Hicking <gh@faktor-e.de>
Tested-by: Andreas Nedbal <andy@pixelde.su>
Tested-by: core-ci <typo3@b13.com>
Reviewed-by: Garvin Hicking <gh@faktor-e.de>
Tested-by: Jasmina Ließmann <minapokhalo+typo3@gmail.com>
Reviewed-by: Jasmina Ließmann <minapokhalo+typo3@gmail.com>
---
Build/Sources/Sass/backend.scss | 1 +
Build/Sources/Sass/module/_about.scss | 12 ++++
.../Private/Language/Modules/about.xlf | 20 +++++-
.../Private/Partials/About/CoreTeam.html | 6 +-
.../Private/Partials/About/Credits.html | 6 +-
.../Private/Partials/About/Donation.html | 6 +-
.../Private/Partials/About/Extensions.html | 70 ++++++++-----------
.../Partials/About/ExternalLibraries.html | 31 ++++----
.../Private/Partials/About/Modules.html | 67 +++++++++++-------
.../Private/Templates/About/Index.html | 6 +-
.../backend/Resources/Public/Css/backend.css | 2 +
11 files changed, 135 insertions(+), 92 deletions(-)
create mode 100644 Build/Sources/Sass/module/_about.scss
diff --git a/Build/Sources/Sass/backend.scss b/Build/Sources/Sass/backend.scss
index fab2147d5c7d..11a8b6cf15a8 100644
--- a/Build/Sources/Sass/backend.scss
+++ b/Build/Sources/Sass/backend.scss
@@ -90,6 +90,7 @@
//
// Modules
//
+@import "module/about";
@import "module/access";
@import "module/extensionmanager";
@import "module/help";
diff --git a/Build/Sources/Sass/module/_about.scss b/Build/Sources/Sass/module/_about.scss
new file mode 100644
index 000000000000..1b89d87f6c57
--- /dev/null
+++ b/Build/Sources/Sass/module/_about.scss
@@ -0,0 +1,12 @@
+//
+// Links
+//
+.about-module {
+ a:not([class]) {
+ color: var(--typo3-component-link-color);
+
+ &:hover {
+ color: var(--typo3-component-link-hover-color);
+ }
+ }
+}
diff --git a/typo3/sysext/backend/Resources/Private/Language/Modules/about.xlf b/typo3/sysext/backend/Resources/Private/Language/Modules/about.xlf
index d51388e3eb4b..e05ccdeee92e 100644
--- a/typo3/sysext/backend/Resources/Private/Language/Modules/about.xlf
+++ b/typo3/sysext/backend/Resources/Private/Language/Modules/about.xlf
@@ -54,6 +54,9 @@
<trans-unit id="extension_author" resname="extension_author">
<source>Author</source>
</trans-unit>
+ <trans-unit id="donation.sectionHeadline" resname="donation.sectionHeadline">
+ <source>TYPO3 Donation and community</source>
+ </trans-unit>
<trans-unit id="donation_header" resname="donation_header">
<source>TYPO3 Donation</source>
</trans-unit>
@@ -69,10 +72,19 @@
<trans-unit id="external_thanks" resname="external_thanks">
<source>TYPO3 CMS core uses and thanks these external Open Source projects:</source>
</trans-unit>
+ <trans-unit id="external_libraries.table.column.name" resname="external_libraries.table.column.name">
+ <source>Project name</source>
+ </trans-unit>
+ <trans-unit id="external_libraries.table.column.website" resname="external_libraries.table.column.website">
+ <source>Website</source>
+ </trans-unit>
<trans-unit id="introtext" resname="introtext">
<source>Web Content Management System</source>
</trans-unit>
- <trans-unit id="introtext2" resname="introtext2">
+ <trans-unit id="modules.headline" resname="modules.headline">
+ <source>Modules</source>
+ </trans-unit>
+ <trans-unit id="modules.introtext" resname="modules.introtext">
<source>This is a brief description of the available modules.</source>
</trans-unit>
<trans-unit id="endText" resname="endText">
@@ -81,6 +93,12 @@
<trans-unit id="userInfo" resname="userInfo">
<source>You're logged in as user</source>
</trans-unit>
+ <trans-unit id="link.openModule" resname="link.openModule">
+ <source>Open module</source>
+ </trans-unit>
+ <trans-unit id="link.openModuleWithTitle" resname="link.openModuleWithTitle">
+ <source>Open %1s module</source>
+ </trans-unit>
</body>
</file>
</xliff>
diff --git a/typo3/sysext/backend/Resources/Private/Partials/About/CoreTeam.html b/typo3/sysext/backend/Resources/Private/Partials/About/CoreTeam.html
index 9a13d6b626d2..2e589e88fcf5 100644
--- a/typo3/sysext/backend/Resources/Private/Partials/About/CoreTeam.html
+++ b/typo3/sysext/backend/Resources/Private/Partials/About/CoreTeam.html
@@ -1,9 +1,9 @@
<div class="card">
<div class="card-body">
- <h2 class="h4 card-title">
+ <h3 class="card-title">
<f:translate key="LLL:EXT:backend/Resources/Private/Language/Modules/about.xlf:coredevs" />
- </h2>
- <p>
+ </h3>
+ <p class="card-text">
{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/Modules/about.xlf:coredevs_detail') -> f:format.raw()}
</p>
</div>
diff --git a/typo3/sysext/backend/Resources/Private/Partials/About/Credits.html b/typo3/sysext/backend/Resources/Private/Partials/About/Credits.html
index 055d6eb62523..edf60e61c614 100644
--- a/typo3/sysext/backend/Resources/Private/Partials/About/Credits.html
+++ b/typo3/sysext/backend/Resources/Private/Partials/About/Credits.html
@@ -1,9 +1,9 @@
<div class="card">
<div class="card-body">
- <h2 class="h4 card-title">
+ <h3 class="card-title">
{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/Modules/about.xlf:community_credits')}
- </h2>
- <p>
+ </h3>
+ <p class="card-text">
{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/Modules/about.xlf:information_detail') -> f:format.raw()}
</p>
</div>
diff --git a/typo3/sysext/backend/Resources/Private/Partials/About/Donation.html b/typo3/sysext/backend/Resources/Private/Partials/About/Donation.html
index 33786dba30b5..93786e149840 100644
--- a/typo3/sysext/backend/Resources/Private/Partials/About/Donation.html
+++ b/typo3/sysext/backend/Resources/Private/Partials/About/Donation.html
@@ -1,9 +1,9 @@
<div class="card">
<div class="card-body">
- <h2 class="h4 card-title">
+ <h3 class="card-title">
<f:translate key="LLL:EXT:backend/Resources/Private/Language/Modules/about.xlf:donation_header" />
- </h2>
- <p>
+ </h3>
+ <p class="card-text">
{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/Modules/about.xlf:donation_message') -> f:format.raw()}
</p>
<a href="{donationUrl}" class="btn btn-default" title="{f:translate(key:'LLL:EXT:backend/Resources/Private/Language/Modules/about.xlf:donation_button')}" target="_blank" rel="noreferrer">
diff --git a/typo3/sysext/backend/Resources/Private/Partials/About/Extensions.html b/typo3/sysext/backend/Resources/Private/Partials/About/Extensions.html
index 0ba783accf10..d3448d42b205 100644
--- a/typo3/sysext/backend/Resources/Private/Partials/About/Extensions.html
+++ b/typo3/sysext/backend/Resources/Private/Partials/About/Extensions.html
@@ -1,50 +1,38 @@
<f:if condition="{loadedExtensions}">
- <div class="card">
- <div class="card-body">
- <h2 class="h3 card-title">
- <f:translate key="LLL:EXT:backend/Resources/Private/Language/Modules/about.xlf:extension_authors" />
- </h2>
- <p>
- <f:translate key="LLL:EXT:backend/Resources/Private/Language/Modules/about.xlf:extension_list_info" />
- </p>
- </div>
- <div class="table-fit">
- <table class="table">
- <thead>
+ <h2>
+ <f:translate key="LLL:EXT:backend/Resources/Private/Language/Modules/about.xlf:extension_authors" />
+ </h2>
+ <p>
+ <f:translate key="LLL:EXT:backend/Resources/Private/Language/Modules/about.xlf:extension_list_info" />
+ </p>
+
+ <div class="table-fit">
+ <table class="table table-striped table-hover table-vertical-top">
+ <thead>
+ <tr>
+ <th><f:translate key="LLL:EXT:backend/Resources/Private/Language/Modules/about.xlf:extension" /></th>
+ <th><f:translate key="LLL:EXT:backend/Resources/Private/Language/Modules/about.xlf:extension_author" /></th>
+ </tr>
+ </thead>
+ <tbody>
+ <f:for each="{loadedExtensions}" as="loadedExtension">
<tr>
- <th width="60%"><f:translate key="LLL:EXT:backend/Resources/Private/Language/Modules/about.xlf:extension" /></th>
- <th><f:translate key="LLL:EXT:backend/Resources/Private/Language/Modules/about.xlf:extension_author" /></th>
- </tr>
- </thead>
- <tbody>
- <f:for each="{loadedExtensions}" as="loadedExtension">
- <tr>
- <td>
- {loadedExtension.title} ({loadedExtension.key})
- </td>
- <td>
+ <td>
+ {loadedExtension.title} ({loadedExtension.key})
+ </td>
+ <td>
+ <f:if condition="{loadedExtension.authors}">
<f:for each="{loadedExtension.authors}" as="extensionAuthor" iteration="i">
- <f:if condition="{extensionAuthor.email}">
- <f:then>
- <f:link.email
- email="{extensionAuthor.email}?subject={f:format.urlencode(value:'Thanks for your {loadedExtension.title} extension')}"
- >
- {extensionAuthor.name}
- </f:link.email>
- </f:then>
- <f:else>
- {extensionAuthor.name}
- </f:else>
- </f:if>
+ {extensionAuthor.name} <f:if condition="{extensionAuthor.email}">({extensionAuthor.email})</f:if>
<f:if condition="{i.isLast} == false">
<br>
</f:if>
</f:for>
- </td>
- </tr>
- </f:for>
- </tbody>
- </table>
- </div>
+ </f:if>
+ </td>
+ </tr>
+ </f:for>
+ </tbody>
+ </table>
</div>
</f:if>
diff --git a/typo3/sysext/backend/Resources/Private/Partials/About/ExternalLibraries.html b/typo3/sysext/backend/Resources/Private/Partials/About/ExternalLibraries.html
index 64195c9730aa..0ac4cb335533 100644
--- a/typo3/sysext/backend/Resources/Private/Partials/About/ExternalLibraries.html
+++ b/typo3/sysext/backend/Resources/Private/Partials/About/ExternalLibraries.html
@@ -1,14 +1,19 @@
-<div class="card">
- <div class="card-body">
- <h2 class="h3 card-title">
- <f:translate key="LLL:EXT:backend/Resources/Private/Language/Modules/about.xlf:external_libraries" />
- </h2>
- <p>
- <f:translate key="LLL:EXT:backend/Resources/Private/Language/Modules/about.xlf:external_thanks" />
- </p>
- </div>
- <div class="table-fit">
- <table class="table">
+<h2>
+ <f:translate key="LLL:EXT:backend/Resources/Private/Language/Modules/about.xlf:external_libraries" />
+</h2>
+<p>
+ <f:translate key="LLL:EXT:backend/Resources/Private/Language/Modules/about.xlf:external_thanks" />
+</p>
+
+<div class="table-fit">
+ <table class="table table-striped table-hover">
+ <thead>
+ <tr>
+ <th><f:translate key="LLL:EXT:backend/Resources/Private/Language/Modules/about.xlf:external_libraries.table.column.name" /></th>
+ <th><f:translate key="LLL:EXT:backend/Resources/Private/Language/Modules/about.xlf:external_libraries.table.column.website" /></th>
+ </tr>
+ </thead>
+ <tbody>
<tr>
<td>Composer</td>
<td><a href="https://getcomposer.org" target="_blank" rel="noreferrer">getcomposer.org</a></td>
@@ -145,6 +150,6 @@
<td>SelectPure</td>
<td><a href="https://github.com/dudyn5ky1/select-pure" target="_blank" rel="noreferrer">github.com</a></td>
</tr>
- </table>
- </div>
+ </tbody>
+ </table>
</div>
diff --git a/typo3/sysext/backend/Resources/Private/Partials/About/Modules.html b/typo3/sysext/backend/Resources/Private/Partials/About/Modules.html
index 9a32fbda87ba..db834a1c26d3 100644
--- a/typo3/sysext/backend/Resources/Private/Partials/About/Modules.html
+++ b/typo3/sysext/backend/Resources/Private/Partials/About/Modules.html
@@ -1,49 +1,64 @@
+<h2>
+ <f:translate key="LLL:EXT:backend/Resources/Private/Language/Modules/about.xlf:modules.headline" />
+</h2>
<p>
- <f:translate key="LLL:EXT:backend/Resources/Private/Language/Modules/about.xlf:introtext2" />
+ <f:translate key="LLL:EXT:backend/Resources/Private/Language/Modules/about.xlf:modules.introtext" />
</p>
<f:for each="{modules}" as="mainModule">
<f:if condition="{mainModule.subModules}">
<f:if condition="{mainModule.title}">
- <h2><f:translate key="{mainModule.title}">{mainModule.title}</f:translate></h2>
+ <h3><f:translate key="{mainModule.title}">{mainModule.title}</f:translate></h3>
</f:if>
<section class="card-container">
<f:for each="{mainModule.subModules}" as="subModule">
- <f:variable name="titleAttribute" value="" />
- <f:if condition="{subModule.shortDescription}">
- <f:variable name="titleAttribute" value="{f:translate(key: subModule.shortDescription, default: subModule.shortDescription)}" />
- </f:if>
- <a
- href="#"
- data-dispatch-action="TYPO3.ModuleMenu.showModule"
- data-dispatch-args-list="{subModule.identifier}"
- title="{titleAttribute}"
- class="card card-size-medium"
- >
+ <div class="card card-size-small">
<div class="card-header">
<div class="card-icon">
- <core:icon identifier="{subModule.iconIdentifier}" size="medium" />
+ <core:icon identifier="{subModule.iconIdentifier}" size="large" />
</div>
- <f:if condition="{subModule.title}">
+ <f:if condition="{subModule.title} || {subModule.shortDescription}">
<div class="card-header-body">
- <h3 class="card-title">
- <f:translate key="{subModule.title}">{subModule.title}</f:translate>
- </h3>
+ <f:if condition="{subModule.title}">
+ <h4 class="card-title">
+ <f:translate key="{subModule.title}">{subModule.title}</f:translate>
+ </h4>
+ </f:if>
<f:if condition="{subModule.shortDescription}">
<span class="card-subtitle">
<f:translate key="{subModule.shortDescription}">{subModule.shortDescription}</f:translate>
</span>
</f:if>
- <f:if condition="{subModule.description}">
- <div class="card-longdesc">
- <f:sanitize.html>
- <f:translate key="{subModule.description}">{subModule.description}</f:translate>
- </f:sanitize.html>
- </div>
- </f:if>
</div>
</f:if>
</div>
- </a>
+ <f:if condition="{subModule.description}">
+ <div class="card-body">
+ <p class="card-text">
+ <f:sanitize.html>
+ <f:translate key="{subModule.description}">{subModule.description}</f:translate>
+ </f:sanitize.html>
+ </p>
+ </div>
+ </f:if>
+ <div class="card-footer">
+ <a
+ href="#"
+ data-dispatch-action="TYPO3.ModuleMenu.showModule"
+ data-dispatch-args-list="{subModule.identifier}"
+ class="btn btn-default"
+ >
+ <f:if condition="{subModule.title}">
+ <f:then>
+ <f:variable name="submoduleTitle"><f:translate key="{subModule.title}">{subModule.title}</f:translate></f:variable>
+ <f:translate key="LLL:EXT:backend/Resources/Private/Language/Modules/about.xlf:link.openModuleWithTitle" arguments="{0: submoduleTitle}" />
+ </f:then>
+ <f:else>
+ <f:translate key="LLL:EXT:backend/Resources/Private/Language/Modules/about.xlf:link.openModule" />
+ </f:else>
+ </f:if>
+ </a>
+ </div>
+ </div>
</f:for>
</section>
</f:if>
diff --git a/typo3/sysext/backend/Resources/Private/Templates/About/Index.html b/typo3/sysext/backend/Resources/Private/Templates/About/Index.html
index cb823e0fec82..2af5d41dab18 100644
--- a/typo3/sysext/backend/Resources/Private/Templates/About/Index.html
+++ b/typo3/sysext/backend/Resources/Private/Templates/About/Index.html
@@ -7,7 +7,7 @@
<f:section name="Content">
- <div class="container-small about-module">
+ <div class="container about-module">
<f:render partial="About/Logo" arguments="{_all}" />
<f:for each="{messages}" as="message">
@@ -18,6 +18,8 @@
<f:render partial="About/About" arguments="{_all}" />
<f:render partial="About/Modules" arguments="{_all}" />
+
+ <h2><f:translate key="LLL:EXT:backend/Resources/Private/Language/Modules/about.xlf:donation.sectionHeadline" /></h2>
<f:render partial="About/Donation" arguments="{_all}" />
<f:render partial="About/Credits" arguments="{_all}" />
<f:render partial="About/CoreTeam" arguments="{_all}" />
@@ -25,7 +27,7 @@
<f:render partial="About/Extensions" arguments="{_all}" />
<p>
- <em class="text-body-secondary">
+ <em>
<f:translate key="LLL:EXT:backend/Resources/Private/Language/Modules/about.xlf:endText" />
</em>
</p>
diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
index 1a52235033df..71f2530347cd 100644
--- a/typo3/sysext/backend/Resources/Public/Css/backend.css
+++ b/typo3/sysext/backend/Resources/Public/Css/backend.css
@@ -4290,6 +4290,8 @@ pre.ts-hl .ts-comment{color:#666;font-style:italic}
pre.ts-hl .ts-condition{background-color:maroon;color:#fff;font-weight:700}
pre.ts-hl .ts-error{background-color:#ff0;border:1px red dashed;font-weight:700;color:#000}
pre.ts-hl .ts-linenum{background-color:#eee;color:#212424}
+.about-module a:not([class]){color:var(--typo3-component-link-color)}
+.about-module a:not([class]):hover{color:var(--typo3-component-link-hover-color)}
td.permission-column-name{white-space:nowrap}
td.permission-column-list{white-space:nowrap;width:106px}
td.permission-column-group{padding-inline-start:0;width:200px;white-space:nowrap}
--
GitLab