[FEATURE] Improve rendering of CE in page module
authorGeorg Ringer <mail@ringerge.org>
Thu, 12 Apr 2012 08:08:30 +0000 (10:08 +0200)
committerStefan Galinski <stefan.galinski@gmail.com>
Fri, 13 Apr 2012 10:03:26 +0000 (12:03 +0200)
Rendering of content elements in page module can be
improved by making it easier and streamline it. See
details in issue.

Change-Id: I7ff5ddbdf443babaa76807beb759c07b32870690
Resolves: #35887
Releases: 6.0
Reviewed-on: http://review.typo3.org/10318
Reviewed-by: Philipp Gampe
Tested-by: Philipp Gampe
Reviewed-by: Felix Kopp
Tested-by: Felix Kopp
Reviewed-by: Christian Kuhn
Tested-by: Christian Kuhn
Reviewed-by: Stefan Galinski
Tested-by: Stefan Galinski
t3lib/class.t3lib_recordlist.php
typo3/sysext/cms/layout/class.tx_cms_layout.php
typo3/sysext/cms/layout/locallang.xlf
typo3/sysext/t3skin/stylesheets/structure/module_web_page.css
typo3/sysext/t3skin/stylesheets/visual/main_content.css
typo3/sysext/t3skin/stylesheets/visual/module_web_page.css

index bd2d1f2..87adf62 100644 (file)
@@ -342,16 +342,23 @@ class t3lib_recordList {
        /**
         * Return the icon for the language
         *
-        * @param       integer         Sys language uid
-        * @return      string          Language icon
+        * @param integer Sys language uid
+        * @param boolean If set to true, only the flag is returned
+        *
+        * @return string Language icon
         */
-       function languageFlag($sys_language_uid) {
+       function languageFlag($sys_language_uid, $addAsAdditionalText = TRUE) {
                $out = '';
+               $title = htmlspecialchars($this->languageIconTitles[$sys_language_uid]['title']);
                if ($this->languageIconTitles[$sys_language_uid]['flagIcon']) {
-                       $out .= t3lib_iconWorks::getSpriteIcon($this->languageIconTitles[$sys_language_uid]['flagIcon']);
+                       $out .= t3lib_iconWorks::getSpriteIcon($this->languageIconTitles[$sys_language_uid]['flagIcon'], array('title' => $title));
+
+                       if (!$addAsAdditionalText) {
+                               return $out;
+                       }
                        $out .= '&nbsp;';
                }
-               $out .= htmlspecialchars($this->languageIconTitles[$sys_language_uid]['title']);
+               $out .= $title;
                return $out;
        }
 
index 0ff9544..9b034d6 100755 (executable)
@@ -412,10 +412,16 @@ class tx_cms_layout extends recordList {
                                                        }
 
                                                        $editUidList .= $row['uid'] . ',';
-                                                       $singleElementHTML .= $this->tt_content_drawHeader($row, $this->tt_contentConfig['showInfo'] ? 15 : 5, $this->defLangBinding && $lP > 0, TRUE);
+                                                       $disableMoveAndNewButtons = ($this->defLangBinding && $lP > 0);
+                                                       $singleElementHTML .= $this->tt_content_drawHeader($row, $this->tt_contentConfig['showInfo'] ? 15 : 5, $disableMoveAndNewButtons, TRUE);
 
                                                        $isRTE = $RTE && $this->isRTEforField('tt_content', $row, 'bodytext');
-                                                       $singleElementHTML .= '<div ' . ($row['_ORIG_uid'] ? ' class="ver-element"' : '') . '>' . $this->tt_content_drawItem($row, $isRTE) . '</div>';
+                                                       $innerContent = '<div ' . ($row['_ORIG_uid'] ? ' class="ver-element"' : '') . '>' . $this->tt_content_drawItem($row, $isRTE) . '</div>';
+
+                                                       $singleElementHTML .= '<div class="t3-page-ce-body-inner">' .
+                                                                                                               $innerContent .
+                                                                                                       '</div>' .
+                                                                                                       $this->tt_content_drawFooter($row);
 
                                                        // NOTE: this is the end tag for <div class="t3-page-ce-body">
                                                        // because of bad (historic) conception, starting tag has to be placed inside tt_content_drawHeader()
@@ -425,6 +431,20 @@ class tx_cms_layout extends recordList {
                                                        $statusHidden = ($this->isDisabled('tt_content', $row) ? ' t3-page-ce-hidden' : '');
                                                        $singleElementHTML = '<div class="t3-page-ce' . $statusHidden . '">' . $singleElementHTML . '</div>';
 
+                                                               // Add icon "new content element below"
+                                                       if (!$disableMoveAndNewButtons) {
+                                                               // New content element:
+                                                               if ($this->option_newWizard) {
+                                                                       $onClick = "window.location.href='db_new_content_el.php?id=" . $row['pid'] . '&sys_language_uid=' . $row['sys_language_uid'] . '&colPos=' . $row['colPos'] . '&uid_pid=' . (-$row['uid']) . '&returnUrl=' . rawurlencode(t3lib_div::getIndpEnv('REQUEST_URI')) . "';";
+                                                               } else {
+                                                                       $params = '&edit[tt_content][' . (-$row['uid']) . ']=new';
+                                                                       $onClick = t3lib_BEfunc::editOnClick($params, $this->backPath);
+                                                               }
+                                                               $singleElementHTML .= '<div style="margin-bottom:7px;margin-left:5px;"><a href="#" onclick="' . htmlspecialchars($onClick) . '" title="' . $GLOBALS['LANG']->getLL('newRecordHere', 1) . '">' .
+                                                                               t3lib_iconWorks::getSpriteIcon('actions-document-new') .
+                                                                               '</a></div>';
+                                                       }
+
                                                        if ($this->defLangBinding && $this->tt_contentConfig['languageMode']) {
                                                                $defLangBinding[$key][$lP][$row[($lP ? 'l18n_parent' : 'uid')]] = $singleElementHTML;
                                                        } else {
@@ -1161,6 +1181,34 @@ class tx_cms_layout extends recordList {
        }
 
        /**
+        * Draw the footer for a single tt_content element
+        *
+        * @param array Record array
+        * @return string HTML of the footer
+        */
+       protected function tt_content_drawFooter(array $row) {
+               $content = '';
+
+                       // Get processed values:
+               $info = array();
+               $this->getProcessedValue('tt_content', 'hidden,starttime,endtime,fe_group,spaceBefore,spaceAfter', $row, $info);
+
+                       // Display info from records fields:
+               if (count($info)) {
+                       $content = '<div class="t3-page-ce-info">
+                               ' . implode('<br />', $info) . '
+                               </div>';
+               }
+
+                       // Wrap it
+               if (!empty($content)) {
+                       $content = '<div class="t3-page-ce-footer">' . $content . '</div>';
+               }
+
+               return $content;
+       }
+
+       /**
         * Draw the header for a single tt_content element
         *
         * @param       array           Record array
@@ -1171,58 +1219,15 @@ class tx_cms_layout extends recordList {
         */
        function tt_content_drawHeader($row, $space = 0, $disableMoveAndNewButtons = FALSE, $langMode = FALSE) {
 
-               // Load full table description:
+                       // Load full table description:
                t3lib_div::loadTCA('tt_content');
 
-               // Get record locking status:
-               if ($lockInfo = t3lib_BEfunc::isRecordLocked('tt_content', $row['uid'])) {
-                       $lockIcon = '<a href="#" onclick="' . htmlspecialchars('alert(' . $GLOBALS['LANG']->JScharCode($lockInfo['msg']) . ');return false;') . '" title="' . htmlspecialchars($lockInfo['msg']) . '">' .
-                                       t3lib_iconWorks::getSpriteIcon('status-warning-in-use') .
-                                       '</a>';
-               } else {
-                       $lockIcon = '';
-               }
-
-               // Call stats information hook
-               $stat = '';
-               if (is_array($GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['GLOBAL']['recStatInfoHooks'])) {
-                       $_params = array('tt_content', $row['uid'], &$row);
-                       foreach ($GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['GLOBAL']['recStatInfoHooks'] as $_funcRef) {
-                               $stat .= t3lib_div::callUserFunction($_funcRef, $_params, $this);
-                       }
-               }
-
-               // Create line with type of content element and icon/lock-icon/title:
-               $ceType = $this->getIcon('tt_content', $row) . ' ' .
-                               $lockIcon . ' ' .
-                               $stat . ' ' .
-                               ($langMode ? $this->languageFlag($row['sys_language_uid']) : '') . ' ' .
-                               htmlspecialchars($this->CType_labels[$row['CType']]) .
-                               ' <strong>' . $GLOBALS['LANG']->sL(t3lib_BEfunc::getLabelFromItemlist('tt_content', 'list_type', $row['list_type']), 1) . '</strong><br />';
-
-               // If show info is set...;
+                       // If show info is set...;
                if ($this->tt_contentConfig['showInfo']) {
 
-                       // Get processed values:
-                       $info = Array();
-                       $this->getProcessedValue('tt_content', 'hidden,starttime,endtime,fe_group,spaceBefore,spaceAfter', $row, $info);
-
                        // Render control panel for the element:
                        if ($this->tt_contentConfig['showCommands'] && $this->doEdit) {
 
-                               if (!$disableMoveAndNewButtons) {
-                                       // New content element:
-                                       if ($this->option_newWizard) {
-                                               $onClick = "window.location.href='db_new_content_el.php?id=" . $row['pid'] . '&sys_language_uid=' . $row['sys_language_uid'] . '&colPos=' . $row['colPos'] . '&uid_pid=' . (-$row['uid']) . '&returnUrl=' . rawurlencode(t3lib_div::getIndpEnv('REQUEST_URI')) . "';";
-                                       } else {
-                                               $params = '&edit[tt_content][' . (-$row['uid']) . ']=new';
-                                               $onClick = t3lib_BEfunc::editOnClick($params, $this->backPath);
-                                       }
-                                       $out .= '<a href="#" onclick="' . htmlspecialchars($onClick) . '" title="' . $GLOBALS['LANG']->getLL('newAfter', 1) . '">' .
-                                                       t3lib_iconWorks::getSpriteIcon('actions-document-new') .
-                                                       '</a>';
-                               }
-
                                // Edit content element:
                                $params = '&edit[tt_content][' . $this->tt_contentData['nextThree'][$row['uid']] . ']=edit';
                                $out .= '<a href="#" onclick="' . htmlspecialchars(t3lib_BEfunc::editOnClick($params, $this->backPath)) . '" title="' .
@@ -1257,49 +1262,67 @@ class tx_cms_layout extends recordList {
                                                '</a>';
 
                                if (!$disableMoveAndNewButtons) {
-                                       $out .= '<span class="t3-page-ce-icons-move">';
-                                       // Move element up:
+                                       $moveButtonContent = '';
+                                       $displayMoveButtons = FALSE;
+
+                                               // Move element up:
                                        if ($this->tt_contentData['prev'][$row['uid']]) {
                                                $params = '&cmd[tt_content][' . $row['uid'] . '][move]=' . $this->tt_contentData['prev'][$row['uid']];
-                                               $out .= '<a href="' . htmlspecialchars($GLOBALS['SOBE']->doc->issueCommand($params)) . '" title="' . $GLOBALS['LANG']->getLL('moveUp', TRUE) . '">' .
+                                               $moveButtonContent .= '<a href="' . htmlspecialchars($GLOBALS['SOBE']->doc->issueCommand($params)) . '" title="' . $GLOBALS['LANG']->getLL('moveUp', TRUE) . '">' .
                                                                t3lib_iconWorks::getSpriteIcon('actions-move-up') .
                                                                '</a>';
+                                               $displayMoveButtons = TRUE;
                                        } else {
-                                               $out .= t3lib_iconWorks::getSpriteIcon('empty-empty');
+                                               $moveButtonContent .= t3lib_iconWorks::getSpriteIcon('empty-empty');
                                        }
-                                       // Move element down:
+                                               // Move element down:
                                        if ($this->tt_contentData['next'][$row['uid']]) {
                                                $params = '&cmd[tt_content][' . $row['uid'] . '][move]= ' . $this->tt_contentData['next'][$row['uid']];
-                                               $out .= '<a href="' . htmlspecialchars($GLOBALS['SOBE']->doc->issueCommand($params)) . '" title="' . $GLOBALS['LANG']->getLL('moveDown', TRUE) . '">' .
+                                               $moveButtonContent .= '<a href="' . htmlspecialchars($GLOBALS['SOBE']->doc->issueCommand($params)) . '" title="' . $GLOBALS['LANG']->getLL('moveDown', TRUE) . '">' .
                                                                t3lib_iconWorks::getSpriteIcon('actions-move-down') .
                                                                '</a>';
+                                               $displayMoveButtons = TRUE;
                                        } else {
-                                               $out .= t3lib_iconWorks::getSpriteIcon('empty-empty');
+                                               $moveButtonContent .= t3lib_iconWorks::getSpriteIcon('empty-empty');
+                                       }
+
+                                       if ($displayMoveButtons) {
+                                               $out .= '<span class="t3-page-ce-icons-move">' . $moveButtonContent . '</span>';
                                        }
-                                       $out .= '</span>';
                                }
                        }
 
-                       // Display info from records fields:
-                       $infoOutput = '';
-                       if (count($info)) {
-                               $infoOutput = '<div class="t3-page-ce-info">
-                                       ' . implode('<br />', $info) . '
-                                       </div>';
+               }
+
+               $additionalIcons = array();
+               $additionalIcons[] = $this->getIcon('tt_content', $row) . ' ';
+               $additionalIcons[] = ($langMode ? $this->languageFlag($row['sys_language_uid'], FALSE) : '');
+
+                       // Get record locking status:
+               if ($lockInfo = t3lib_BEfunc::isRecordLocked('tt_content', $row['uid'])) {
+                       $additionalIcons[] = '<a href="#" onclick="' . htmlspecialchars('alert(' . $GLOBALS['LANG']->JScharCode($lockInfo['msg']) . ');return false;') . '" title="' . htmlspecialchars($lockInfo['msg']) . '">' .
+                                       t3lib_iconWorks::getSpriteIcon('status-warning-in-use') .
+                                       '</a>';
+               }
+
+                       // Call stats information hook
+               if (is_array($GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['GLOBAL']['recStatInfoHooks'])) {
+                       $_params = array('tt_content', $row['uid'], &$row);
+                       foreach ($GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['GLOBAL']['recStatInfoHooks'] as $_funcRef) {
+                               $additionalIcons[] = t3lib_div::callUserFunction($_funcRef, $_params, $this);
                        }
                }
+
                // Wrap the whole header
                // NOTE: end-tag for <div class="t3-page-ce-body"> is in getTable_tt_content()
                return '<h4 class="t3-page-ce-header">
                                        <div class="t3-row-header">
+                                       <span class="ce-icons-left">' . implode('', $additionalIcons) . '</span>
+                                       <span class="ce-icons">
                                        ' . $out . '
-                                       </div>
+                                       </span></div>
                                </h4>
-                               <div class="t3-page-ce-body">
-                                       <div class="t3-page-ce-type">
-                                               ' . $ceType . '
-                                       </div>
-                                       ' . $infoOutput;
+                               <div class="t3-page-ce-body">';
        }
 
        /**
@@ -1754,21 +1777,20 @@ class tx_cms_layout extends recordList {
         * Creates processed values for all fieldnames in $fieldList based on values from $row array.
         * The result is 'returned' through $info which is passed as a reference
         *
-        * @param       string          Table name
-        * @param       string          Commalist of fields.
-        * @param       array           Record from which to take values for processing.
-        * @param       array           Array to which the processed values are added.
-        * @return      void
+        * @param string Table name
+        * @param string Commalist of fields.
+        * @param array Record from which to take values for processing.
+        * @param array Array to which the processed values are added.
+        * @return void
         */
-       function getProcessedValue($table, $fieldList, $row, &$info) {
-
-               // Splitting values from $fieldList:
+       function getProcessedValue($table, $fieldList, array $row, array &$info) {
+                       // Splitting values from $fieldList
                $fieldArr = explode(',', $fieldList);
 
-               // Traverse fields from $fieldList:
+                       // Traverse fields from $fieldList
                foreach ($fieldArr as $field) {
                        if ($row[$field]) {
-                               $info[] = htmlspecialchars($this->itemLabels[$field]) . ' ' . htmlspecialchars(t3lib_BEfunc::getProcessedValue($table, $field, $row[$field]));
+                               $info[] = '<strong>' . htmlspecialchars($this->itemLabels[$field]) . '</strong> ' . htmlspecialchars(t3lib_BEfunc::getProcessedValue($table, $field, $row[$field]));
                        }
                }
        }
@@ -2190,4 +2212,4 @@ if (defined('TYPO3_MODE') && isset($GLOBALS['TYPO3_CONF_VARS'][TYPO3_MODE]['XCLA
        include_once($GLOBALS['TYPO3_CONF_VARS'][TYPO3_MODE]['XCLASS']['ext/cms/layout/class.tx_cms_layout.php']);
 }
 
-?>
\ No newline at end of file
+?>
index d26203d..9d45bf5 100644 (file)
@@ -36,6 +36,9 @@
                        <trans-unit id="newAfter" xml:space="preserve">
                                <source>New record after this one</source>
                        </trans-unit>
+                       <trans-unit id="newRecordHere" xml:space="preserve">
+                               <source>Add a new record at this place</source>
+                       </trans-unit>
                        <trans-unit id="move_record" xml:space="preserve">
                                <source>Re-position current content element</source>
                        </trans-unit>
index 0d7fdce..9dafa6f 100644 (file)
@@ -25,22 +25,35 @@ td.t3-page-column {
 }
 
 .t3-page-ce {
-       margin-bottom: 10px;
+       margin-bottom: 5px;
 }
 
 .t3-page-ce h4 {
        margin: 0;
 }
 
-.t3-page-ce .t3-row-header {
+.t3-page-ce .t3-row-header .ce-icons{
        visibility: hidden;
 }
 
-.t3-page-ce.active .t3-row-header {
+.t3-page-ce.active .t3-row-header .ce-icons {
        visibility: visible;
 }
 
+.t3-row-header .ce-icons-left {
+       float: left;
+}
+
+.t3-row-header .ce-icons {
+       float: right;
+}
+
 .t3-page-ce-icons-move {
+       display: block;
+       padding-left: 3px;
+       padding-top: 3px;
+       padding-bottom: 3px;
+       margin-right: -4px;
        float: right;
 }
 
@@ -53,16 +66,12 @@ td.t3-page-column {
        float: left;
 }
 
-.t3-page-ce-body {
+.t3-page-ce-body-inner {
        padding: 7px;
 }
 
-.t3-page-ce-type {
-       margin-bottom: 5px;
-}
-
-.t3-page-ce-type a {
-       vertical-align: text-bottom;
+.t3-page-ce-footer .t3-page-ce-info {
+       padding:4px;
 }
 
 table.typo3-page-columnsMode img.c-divider {
index 4d54856..3c3e630 100644 (file)
@@ -145,6 +145,13 @@ table.t3-table-info {
        height: 20px;
 }
 
+.t3-page-ce-icons-move {
+       background-image: linear-gradient(center top , #878788 10%, #707070 100%);
+       background-image: -moz-linear-gradient(center top , #878788 10%, #707070 100%);
+       background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.1, #878788), color-stop(1, #707070));
+       background-repeat: repeat-x;
+}
+
 .t3-row-header a {
        color: #fff;
        float: left;
index 95f1cfb..5a1f2ae 100644 (file)
@@ -75,6 +75,10 @@ Web > Page
        background-color: #e5e5e5;
 }
 
+.t3-page-ce-footer {
+       background: #eee
+}
+
 table.typo3-page-columnsMode tr td a {
        text-decoration: none;
 }