[TASK] Update layout of navigation in DocHeader 31/51831/9
authorJasmina Liessmann <code@frauliessmann.de>
Fri, 24 Feb 2017 13:46:26 +0000 (14:46 +0100)
committerChristian Kuhn <lolli@schwarzbu.ch>
Mon, 27 Feb 2017 12:15:38 +0000 (13:15 +0100)
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>
Build/Resources/Public/Less/Component/module.less
typo3/sysext/backend/Classes/Template/Components/MetaInformation.php
typo3/sysext/backend/Resources/Private/Partials/DocHeader.html
typo3/sysext/backend/Resources/Public/Css/backend.css

index 45fe7c1..d3eb976 100644 (file)
                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;
                                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;
        }
 }
 
+.module-docheader-bar-navigation {
+       .module-docheader-bar-column-left {
+               white-space: nowrap;
+       }
+       .form-group select {
+               width: 100%;
+       }
+}
+
 
 //
 // Body
index 8452515..a5f4e51 100644 (file)
@@ -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;
@@ -96,9 +95,86 @@ class MetaInformation
      */
     public function getRecordInformation()
     {
+        $recordInformations = $this->getRecordInformations();
+        if (!empty($recordInformations)) {
+            $recordInformation = $recordInformations['icon'] .
+                ' <strong>' . htmlspecialchars($recordInformations['title']) . ($recordInformations['uid'] !== '' ? '&nbsp;[' . $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 !== '' ? '&nbsp;[' . $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
+        ];
     }
 
     /**
index 2aa6a33..660d485 100644 (file)
@@ -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>
index d74644b..48f2791 100644 (file)
@@ -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;
 }