From ca4158b075eddd4ce0cfa75795a01b42de40be14 Mon Sep 17 00:00:00 2001
From: Jasmina Liessmann <code@frauliessmann.de>
Date: Fri, 24 Feb 2017 14:46:26 +0100
Subject: [PATCH] [TASK] Update layout of navigation in DocHeader
Use Bootstrap grid for arrangement of navigation items.
Shorten the characters of the current page title in DocHeader to
title length defined in user settings or default to '50'.
Resolves: #79849
Releases: master
Change-Id: I0825818cd961b8bb7f928cb1389537506d5ed40b
Reviewed-on: https://review.typo3.org/51831
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Joerg Kummer <service@enobe.de>
Tested-by: Joerg Kummer <service@enobe.de>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
---
.../Public/Less/Component/module.less | 21 +++++
.../Template/Components/MetaInformation.php | 91 +++++++++++++++++--
.../Resources/Private/Partials/DocHeader.html | 54 ++++++++---
.../backend/Resources/Public/Css/backend.css | 15 +++
4 files changed, 163 insertions(+), 18 deletions(-)
diff --git a/Build/Resources/Public/Less/Component/module.less b/Build/Resources/Public/Less/Component/module.less
index 45fe7c1d5efe..d3eb97604ff9 100644
--- a/Build/Resources/Public/Less/Component/module.less
+++ b/Build/Resources/Public/Less/Component/module.less
@@ -71,6 +71,12 @@
min-height: @module-docheader-bar-height;
margin: @module-docheader-bar-margin;
line-height: @module-docheader-bar-height;
+
+ &.row {
+ margin-left: -15px;
+ margin-right: -15px;
+ }
+
label {
margin-top: 0;
margin-bottom: 0;
@@ -101,6 +107,12 @@
padding: ceil(@module-docheader-padding-horizontal / 3) @module-docheader-padding-horizontal;
}
}
+
+ @media (max-width: @screen-sm) {
+ .text-right {
+ text-align: left;
+ }
+ }
}
.module-docheader-bar-search {
margin-bottom: 0;
@@ -113,6 +125,15 @@
}
}
+.module-docheader-bar-navigation {
+ .module-docheader-bar-column-left {
+ white-space: nowrap;
+ }
+ .form-group select {
+ width: 100%;
+ }
+}
+
//
// Body
diff --git a/typo3/sysext/backend/Classes/Template/Components/MetaInformation.php b/typo3/sysext/backend/Classes/Template/Components/MetaInformation.php
index 8452515bd000..a5f4e513068e 100644
--- a/typo3/sysext/backend/Classes/Template/Components/MetaInformation.php
+++ b/typo3/sysext/backend/Classes/Template/Components/MetaInformation.php
@@ -19,7 +19,6 @@ use TYPO3\CMS\Core\Imaging\Icon;
use TYPO3\CMS\Core\Imaging\IconFactory;
use TYPO3\CMS\Core\Resource\Exception\InsufficientFolderAccessPermissionsException;
use TYPO3\CMS\Core\Resource\Exception\ResourceDoesNotExistException;
-use TYPO3\CMS\Core\Resource\Folder;
use TYPO3\CMS\Core\Resource\FolderInterface;
use TYPO3\CMS\Core\Resource\ResourceFactory;
use TYPO3\CMS\Core\Utility\GeneralUtility;
@@ -95,10 +94,87 @@ class MetaInformation
* @return string Record info
*/
public function getRecordInformation()
+ {
+ $recordInformations = $this->getRecordInformations();
+ if (!empty($recordInformations)) {
+ $recordInformation = $recordInformations['icon'] .
+ ' <strong>' . htmlspecialchars($recordInformations['title']) . ($recordInformations['uid'] !== '' ? ' [' . $recordInformations['uid'] . ']' : '') . '</strong>' .
+ (!empty($recordInformations['additionalInfo']) ? ' ' . htmlspecialchars($recordInformations['additionalInfo']) : '');
+ } else {
+ $recordInformation = '';
+ }
+ return $recordInformation;
+ }
+
+ /**
+ * Setting page icon
+ *
+ * @return string Record icon
+ */
+ public function getRecordInformationIcon()
+ {
+ $recordInformations = $this->getRecordInformations();
+ if (!empty($recordInformations)) {
+ $recordInformationIcon = $recordInformations['icon'];
+ } else {
+ $recordInformationIcon = null;
+ }
+ return $recordInformationIcon;
+ }
+
+ /**
+ * Setting page title
+ *
+ * @return string Record title
+ */
+ public function getRecordInformationTitle()
+ {
+ $recordInformations = $this->getRecordInformations();
+ if (!empty($recordInformations)) {
+ $title = htmlspecialchars($recordInformations['title']);
+ } else {
+ $title = '';
+ }
+
+ // crop the title to title limit (or 50, if not defined)
+ $beUser = $this->getBackendUser();
+ $cropLength = empty($beUser->uc['titleLen']) ? 50 : $beUser->uc['titleLen'];
+ $croppedTitle = GeneralUtility::fixed_lgd_cs($title, $cropLength);
+ if ($croppedTitle !== $title) {
+ $recordInformationTitle = htmlspecialchars($croppedTitle);
+ } else {
+ $recordInformationTitle = htmlspecialchars($title);
+ }
+
+ return $recordInformationTitle;
+ }
+
+ /**
+ * Setting page uid
+ *
+ * @return null|int Record uid
+ */
+ public function getRecordInformationUid()
+ {
+ $recordInformations = $this->getRecordInformations();
+ if (!empty($recordInformations)) {
+ $recordInformationUid = $recordInformations['uid'];
+ } else {
+ $recordInformationUid = null;
+ }
+ return $recordInformationUid;
+ }
+
+ /**
+ * Setting page array
+ *
+ * @return array Record info
+ */
+ protected function getRecordInformations()
{
$pageRecord = $this->recordArray;
if (empty($pageRecord)) {
- return '';
+ return [];
}
$iconFactory = GeneralUtility::makeInstance(IconFactory::class);
@@ -153,10 +229,13 @@ class MetaInformation
$uid = '0';
$title = $GLOBALS['TYPO3_CONF_VARS']['SYS']['sitename'];
}
- // Setting icon with context menu + uid
- return $theIcon .
- ' <strong>' . htmlspecialchars($title) . ($uid !== '' ? ' [' . $uid . ']' : '') . '</strong>' .
- (!empty($additionalInfo) ? ' ' . htmlspecialchars($additionalInfo) : '');
+ // returns array for icon, title, uid and additional info
+ return [
+ 'uid' => $uid,
+ 'icon' => $theIcon,
+ 'title' => htmlspecialchars($title),
+ 'additionalInfo' => $additionalInfo
+ ];
}
/**
diff --git a/typo3/sysext/backend/Resources/Private/Partials/DocHeader.html b/typo3/sysext/backend/Resources/Private/Partials/DocHeader.html
index 2aa6a33624f1..660d485e6f65 100644
--- a/typo3/sysext/backend/Resources/Private/Partials/DocHeader.html
+++ b/typo3/sysext/backend/Resources/Private/Partials/DocHeader.html
@@ -1,18 +1,48 @@
<div class="module-loading-indicator"></div>
<div class="module-docheader t3js-module-docheader">
- <div class="module-docheader-bar module-docheader-bar-navigation t3js-module-docheader-bar t3js-module-docheader-bar-navigation">
- <div class="module-docheader-bar-column-left">
- <div class="form-inline">
- <f:for each="{docHeader.menus}" as="menu">
- <div class="form-group form-group-sm">
- <f:render partial="Menus/SelectBoxJumpMenu" arguments="{menu:menu}" />
- </div>
- </f:for>
- </div>
- </div>
- <div class="module-docheader-bar-column-right">
+ <div class="module-docheader-bar module-docheader-bar-navigation t3js-module-docheader-bar t3js-module-docheader-bar-navigation row">
+ <f:if condition="{docHeader.menus}">
+ <f:then>
+ <f:if condition="{docHeader.menus->f:count()} > 1">
+ <f:then>
+ <div class="module-docheader-bar-column-left col-xs-12 col-sm-4 col-md-3">
+ <div class="form-inline row">
+ <f:for each="{docHeader.menus}" as="menu">
+ <div class="form-group form-group-sm col-xs-6">
+ <f:render partial="Menus/SelectBoxJumpMenu" arguments="{menu:menu}"/>
+ </div>
+ </f:for>
+ </div>
+ </div>
+ <div class="module-docheader-bar-column-right col-xs-12 col-sm-8 col-md-9 text-right">
+ </f:then>
+ <f:else>
+ <div class="module-docheader-bar-column-left col-xs-12 col-sm-3">
+ <div class="form-inline">
+ <f:for each="{docHeader.menus}" as="menu">
+ <div class="form-group form-group-sm">
+ <f:render partial="Menus/SelectBoxJumpMenu" arguments="{menu:menu}"/>
+ </div>
+ </f:for>
+ </div>
+ </div>
+ <div class="module-docheader-bar-column-right col-xs-12 col-sm-9 text-right">
+ </f:else>
+ </f:if>
+ </f:then>
+ <f:else>
+ <div class="module-docheader-bar-column-left col-xs-12">
+ </f:else>
+ </f:if>
<f:if condition="{docHeader.metaInformation.recordInformation}">
- <span class="typo3-docheader-pagePath"><f:translate key="LLL:EXT:lang/Resources/Private/Language/locallang_core.xlf:labels.path" />: <f:format.raw>{docHeader.metaInformation.path}</f:format.raw></span> <f:format.raw>{docHeader.metaInformation.recordInformation}</f:format.raw>
+ <span class="typo3-docheader-pagePath">
+ <f:translate key="LLL:EXT:lang/Resources/Private/Language/locallang_core.xlf:labels.path"/>: <f:format.raw>{docHeader.metaInformation.path}</f:format.raw>
+ </span>
+ <strong>
+ <f:format.raw>
+ {docHeader.metaInformation.recordInformationIcon} {docHeader.metaInformation.recordInformationTitle} <f:if condition="docHeader.metaInformation.recordInformationUid}">[{docHeader.metaInformation.recordInformationUid}]</f:if>
+ </f:format.raw>
+ </strong>
</f:if>
</div>
</div>
diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
index d74644b2aa1f..48f2791503ba 100644
--- a/typo3/sysext/backend/Resources/Public/Css/backend.css
+++ b/typo3/sysext/backend/Resources/Public/Css/backend.css
@@ -8293,6 +8293,10 @@ div.dropdown-menu {
margin: 4px 0;
line-height: 26px;
}
+.module-docheader .module-docheader-bar.row {
+ margin-left: -15px;
+ margin-right: -15px;
+}
.module-docheader .module-docheader-bar label {
margin-top: 0;
margin-bottom: 0;
@@ -8323,6 +8327,11 @@ div.dropdown-menu {
.module-docheader .module-docheader-bar .panel .panel-body {
padding: 8px 24px;
}
+@media (max-width: 768px) {
+ .module-docheader .module-docheader-bar .text-right {
+ text-align: left;
+ }
+}
.module-docheader .module-docheader-bar-search {
margin-bottom: 0;
}
@@ -8332,6 +8341,12 @@ div.dropdown-menu {
.module-docheader .module-docheader-bar-column-right {
float: right;
}
+.module-docheader-bar-navigation .module-docheader-bar-column-left {
+ white-space: nowrap;
+}
+.module-docheader-bar-navigation .form-group select {
+ width: 100%;
+}
.module-body {
padding: 24px 24px;
}
--
GitLab