[TASK] file_list: use t3-table & semantic HTML in localization 12/27512/4
authorFelix Kopp <felix-source@phorax.com>
Sun, 9 Feb 2014 13:17:28 +0000 (14:17 +0100)
committerChristian Kuhn <lolli@schwarzbu.ch>
Sun, 9 Feb 2014 13:48:34 +0000 (14:48 +0100)
Brings the central table mark-up and style definition "t3-table"
to file_list backend module. Thanks to the unification few lines
of duplicated css definitions can be tossed.

Also moves the localization icons into the html table row. This
is a semantic clean-up and gives every file entry one table row.
-> Buttons can be added to title cell since cell is always visible.

Note: RequireJS module is moved to EXT: file_list.

By hiding the flag icons from within html right away there
is no flashing between render & ready (JS hide()).

Change-Id: Ic84450b8327c9533037ea21054799d6ad9d8d74b
Resolves: #55810
Releases: 6.2
Reviewed-on: https://review.typo3.org/27512
Reviewed-by: Anja Leichsenring
Tested-by: Anja Leichsenring
Reviewed-by: Christian Kuhn
Tested-by: Christian Kuhn
typo3/sysext/backend/Resources/Public/JavaScript/FileListLocalisation.js [deleted file]
typo3/sysext/filelist/Classes/Controller/FileListController.php
typo3/sysext/filelist/Classes/FileList.php
typo3/sysext/filelist/Resources/Public/JavaScript/FileListLocalisation.js [new file with mode: 0644]
typo3/sysext/t3skin/Resources/Public/Css/structure/module_file_list.css
typo3/sysext/t3skin/Resources/Public/Css/visual/module_file_list.css

diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/FileListLocalisation.js b/typo3/sysext/backend/Resources/Public/JavaScript/FileListLocalisation.js
deleted file mode 100644 (file)
index 286f878..0000000
+++ /dev/null
@@ -1,31 +0,0 @@
-/***************************************************************
- *
- *  Copyright notice
- *
- *  (c) 2013 Steffen Ritter <steffen.ritter@typo3.org>
- *  All rights reserved
- *
- *  Released under GNU/GPL2+ (see license file in the main directory)
- *
- *  This script is distributed in the hope that it will be useful,
- *  but WITHOUT ANY WARRANTY; without even the implied warranty of
- *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
- *
- *  This copyright notice MUST APPEAR in all copies of this script
- *
- ***************************************************************/
-/**
- * JavaScript RequireJS module called "TYPO3/CMS/Backend/FileListLocalisation"
- *
- */
-define('TYPO3/CMS/Backend/FileListLocalisation', ['jquery'], function($) {
-
-
-       $('a.filelist-translationToggler').click(function(event) {
-               var id = $(this).attr('data-fileid');
-               $('tr[data-fileid="' + id + '"]').toggle();
-       });
-       $('tr.localisationData').hide();
-
-       return null;
-});
\ No newline at end of file
index ce2bbc4..37e963b 100644 (file)
@@ -229,16 +229,18 @@ class FileListController {
                $this->doc = GeneralUtility::makeInstance('TYPO3\\CMS\\Backend\\Template\\DocumentTemplate');
                $this->doc->backPath = $GLOBALS['BACK_PATH'];
                $this->doc->setModuleTemplate('EXT:filelist/Resources/Private/Templates/file_list.html');
+
                /** @var $pageRenderer \TYPO3\CMS\Core\Page\PageRenderer */
                $pageRenderer = $this->doc->getPageRenderer();
                $pageRenderer->loadPrototype();
                $pageRenderer->loadJQuery();
                $pageRenderer->loadRequireJsModule('TYPO3/CMS/Backend/DragUploader');
-               $pageRenderer->loadRequireJsModule('TYPO3/CMS/Backend/FileListLocalisation');
+               $pageRenderer->loadRequireJsModule('TYPO3/CMS/Filelist/FileListLocalisation');
                $pageRenderer->addInlineLanguagelabelFile(
                        \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::extPath('lang') . 'locallang_core.xlf',
                        'file_upload'
                );
+
                // There there was access to this file path, continue, make the list
                if ($this->folderObject) {
 
index ee3c076..2a4a937 100644 (file)
@@ -372,7 +372,7 @@ class FileList extends \TYPO3\CMS\Backend\RecordList\AbstractRecordList {
                                }
                        }
 
-                       $out .= '<thead>' . $this->addelement(1, '&nbsp;', $theData, ' class="t3-row-header"', '') . '</thead>';
+                       $out .= '<thead>' . $this->addelement(1, '&nbsp;', $theData) . '</thead>';
                        $out .= '<tbody>' . $iOut . '</tbody>';
                        // half line is drawn
                        // finish
@@ -380,7 +380,7 @@ class FileList extends \TYPO3\CMS\Backend\RecordList\AbstractRecordList {
                <!--
                        File list table:
                -->
-                       <table cellpadding="0" cellspacing="0" id="typo3-filelist">
+                       <table class="t3-table" id="typo3-filelist">
                                ' . $out . '
                        </table>';
 
@@ -515,7 +515,7 @@ class FileList extends \TYPO3\CMS\Backend\RecordList\AbstractRecordList {
                                                }
                                        }
                                }
-                               $out .= $this->addelement(1, $theIcon, $theData, ' class="file_list_normal"');
+                               $out .= $this->addelement(1, $theIcon, $theData);
                        }
                        $this->eCounter++;
                        $this->dirCounter = $this->eCounter;
@@ -670,9 +670,46 @@ class FileList extends \TYPO3\CMS\Backend\RecordList\AbstractRecordList {
                                                                $processedFile = $fileObject->process(\TYPO3\CMS\Core\Resource\ProcessedFile::CONTEXT_IMAGEPREVIEW, array());
                                                                if ($processedFile) {
                                                                        $thumbUrl = $processedFile->getPublicUrl(TRUE);
-                                                                       $theData[$field] .= '<br /><img src="' . $thumbUrl . '" hspace="2" title="' . htmlspecialchars($fileName) . '" alt="" />';
+                                                                       $theData[$field] .= '<br /><img src="' . $thumbUrl . '" title="' . htmlspecialchars($fileName) . '" alt="" />';
                                                                }
                                                        }
+
+                                                       if (!empty($systemLanguages)) {
+                                                               $metaDataRecord = $fileObject->_getMetaData();
+                                                               $translations = $this->getTranslationsForMetaData($metaDataRecord);
+                                                               $languageCode = '';
+
+                                                               foreach ($systemLanguages as $language) {
+                                                                       $languageId = $language['uid'];
+                                                                       $flagIcon = $language['flagIcon'];
+
+                                                                       if (array_key_exists($languageId, $translations)) {
+                                                                               $flagButtonIcon = IconUtility::getSpriteIcon(
+                                                                                       'actions-document-open',
+                                                                                       array('title' => $fileName),
+                                                                                       array($flagIcon . '-overlay' => array()));
+                                                                               $data = array(
+                                                                                       'sys_file_metadata' => array($translations[$languageId]['uid'] => 'edit')
+                                                                               );
+                                                                               $editOnClick = BackendUtility::editOnClick(GeneralUtility::implodeArrayForUrl('edit', $data), $GLOBALS['BACK_PATH'], $this->listUrl());
+                                                                               $languageCode .= sprintf('<a href="#" onclick="%s">%s</a>', htmlspecialchars($editOnClick), $flagButtonIcon);
+
+                                                                       } else {
+                                                                               $href = $GLOBALS['SOBE']->doc->issueCommand(
+                                                                                       '&cmd[sys_file_metadata][' . $metaDataRecord['uid'] . '][localize]=' . $languageId,
+                                                                                       $this->backPath . 'alt_doc.php?justLocalized=' . rawurlencode(('sys_file_metadata:' . $metaDataRecord['uid'] . ':' . $languageId)) .
+                                                                                       '&returnUrl=' . rawurlencode($this->listURL()) . BackendUtility::getUrlToken('editRecord')
+                                                                               );
+                                                                               $flagButtonIcon = IconUtility::getSpriteIcon($flagIcon);
+                                                                               $languageCode .= sprintf('<a href="%s">%s</a> ', htmlspecialchars($href), $flagButtonIcon);
+                                                                       }
+                                                               }
+
+                                                               // Hide flag button bar when not translated yet
+                                                               $theData[$field] .= '<div class="localisationData" data-fileid="' . $fileObject->getUid() . '"' .
+                                                                               (empty($translations) ? ' style="display: none;"' : '') . '>' . $languageCode . '</div>';
+                                                       }
+
                                                        break;
                                                default:
                                                        $theData[$field] = '';
@@ -681,41 +718,8 @@ class FileList extends \TYPO3\CMS\Backend\RecordList\AbstractRecordList {
                                                        }
                                        }
                                }
-                               $out .= $this->addelement(1, $theIcon, $theData, ' class="file_list_normal"');
-
-                               if (!empty($systemLanguages)) {
-                                       $metaDataRecord = $fileObject->_getMetaData();
-                                       $translations = $this->getTranslationsForMetaData($metaDataRecord);
-                                       $code = IconUtility::getSpriteIcon('empty-empty');
-                                       foreach ($systemLanguages as $language) {
-                                               $languageId = $language['uid'];
-
-                                               $flagIcon = $language['flagIcon'];
-                                               if (array_key_exists($languageId, $translations)) {
-
-                                                       $theIcon = IconUtility::getSpriteIcon(
-                                                               'actions-document-open',
-                                                               array('title' => $fileName),
-                                                               array($flagIcon . '-overlay' => array()));
-                                                       $data = array(
-                                                               'sys_file_metadata' => array($translations[$languageId]['uid'] => 'edit')
-                                                       );
-                                                       $editOnClick = BackendUtility::editOnClick(GeneralUtility::implodeArrayForUrl('edit', $data), $GLOBALS['BACK_PATH'], $this->listUrl());
-                                                       $code .= sprintf('<a href="#" onclick="%s">%s</a>', htmlspecialchars($editOnClick), $theIcon);
-
-                                               } else {
-                                                       $href = $GLOBALS['SOBE']->doc->issueCommand(
-                                                               '&cmd[sys_file_metadata][' . $metaDataRecord['uid'] . '][localize]=' . $languageId,
-                                                               $this->backPath . 'alt_doc.php?justLocalized=' . rawurlencode(('sys_file_metadata:' . $metaDataRecord['uid'] . ':' . $languageId)) .
-                                                               '&returnUrl=' . rawurlencode($this->listURL()) . BackendUtility::getUrlToken('editRecord')
-                                                       );
-                                                       $theIcon = IconUtility::getSpriteIcon($flagIcon);
-
-                                                       $code .= sprintf('<a href="%s">%s</a>', htmlspecialchars($href), $theIcon);
-                                               }
-                                       }
-                                       $out .= '<tr class="file_list_normal localisationData" data-fileid="' . $fileObject->getUid() . '"><td></td><td colspan="' . count($this->fieldArray) . '">' . $code . '</td></tr>';
-                               }
+                               $out .= $this->addelement(1, $theIcon, $theData);
+
                        }
                        $this->eCounter++;
                }
diff --git a/typo3/sysext/filelist/Resources/Public/JavaScript/FileListLocalisation.js b/typo3/sysext/filelist/Resources/Public/JavaScript/FileListLocalisation.js
new file mode 100644 (file)
index 0000000..6ad55a0
--- /dev/null
@@ -0,0 +1,29 @@
+/***************************************************************
+ *
+ *  Copyright notice
+ *
+ *  (c) 2013 Steffen Ritter <steffen.ritter@typo3.org>
+ *  All rights reserved
+ *
+ *  Released under GNU/GPL2+ (see license file in the main directory)
+ *
+ *  This script is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ *
+ *  This copyright notice MUST APPEAR in all copies of this script
+ *
+ ***************************************************************/
+/**
+ * JavaScript RequireJS module called "TYPO3/CMS/Backend/FileListLocalisation"
+ *
+ */
+define('TYPO3/CMS/Filelist/FileListLocalisation', ['jquery'], function($) {
+
+       $('a.filelist-translationToggler').click(function(event) {
+               var id = $(this).attr('data-fileid');
+               $('div[data-fileid="' + id + '"]').toggle();
+       });
+
+       return null;
+});
\ No newline at end of file
index 58fd775..842241b 100644 (file)
@@ -2,26 +2,6 @@
 File > List
 - - - - - - - - - - - - - - - - - - - - - */
 
-table#typo3-filelist {
-       width: 100%;
-}
-
-table#typo3-filelist img {
-       vertical-align: middle;
-}
-
-table#typo3-filelist tr td {
-       padding: 5px 3px;
-}
-
-table#typo3-filelist tr.t3-row-header td {
-       padding: 3px;
-}
-
-table#typo3-filelist tr.c-headLine td {
-       height: 16px;
-}
-
 table#typo3-filelist tr td div.typo3-clipCtrl {
        float: left;
 }
@@ -31,10 +11,6 @@ table#typo3-filelist tr td div.typo3-editCtrl {
        padding-right: 10px;
 }
 
-table#typo3-filelist-top tr {
-       vertical-align: bottom;
-}
-
 /* - - - - - - - - - - - - - - - - - - - - -
 File scripts
 - - - - - - - - - - - - - - - - - - - - - */
index cfede77..58cece5 100644 (file)
@@ -3,45 +3,11 @@ File > List
 
 - - - - - - - - - - - - - - - - - - - - - */
 
-table#typo3-filelist {
-       background: #fff;
-       border: 1px solid #a2aab8;
-}
-
-table#typo3-filelist tr td.c-headLine {
-       background-color: #b8bec9;
-       background-image: url('../../../../icons/gfx/alt_menu_mainitem_bg.gif');
-       background-repeat: repeat-x;
-       font-weight: bold;
-}
-
-table#typo3-filelist tr td.c-headLine a {
-       color: #fff;
-}
-
-table#typo3-filelist tr.file_list_normal:nth-child(even) td {
-       background-color: #f7f7f7;
-}
-
-table#typo3-filelist tr.file_list_normal:nth-child(odd) td {
-       background-color: #ffffff;
-}
-
-table#typo3-filelist tbody tr.file_list_normal:hover td {
-       background-color: #dedede;
-}
-
-table#typo3-filelist tr td img {
-       text-align: center;
-}
-
-
 table#typo3-filelist tr td div.typo3-clipCtrl,
 table#typo3-filelist tr td div.typo3-editCtrl {
        text-align: center;
 }
 
-
 #typo3-inner-docbody {
        -webkit-transition:border 0.2s ease;
        -moz-transition:border 0.2s ease;