[TASK] EM: Improve appearance of "get extensions"
authorHans Christian Reinl <info@drublic.de>
Tue, 23 Oct 2012 19:48:22 +0000 (21:48 +0200)
committerHelmut Hummel <helmut.hummel@typo3.org>
Mon, 5 Nov 2012 20:01:59 +0000 (21:01 +0100)
* Change order of table-heads to reflect scribble better
* Include link to all version of extensions as arrow
* Move details of author into description and hide for now
* Move loading mask on extension table

Resolves: #42327
Releases: 6.0

Change-Id: I9e042f972a77e09482a5eeab429214bb13108f71
Reviewed-on: http://review.typo3.org/15916
Reviewed-by: Helmut Hummel
Tested-by: Helmut Hummel
14 files changed:
typo3/sysext/extensionmanager/Classes/ViewHelpers/Be/ContainerViewHelper.php
typo3/sysext/extensionmanager/Classes/ViewHelpers/DownloadExtensionViewHelper.php
typo3/sysext/extensionmanager/Classes/ViewHelpers/ShowExtensionVersionsViewHelper.php
typo3/sysext/extensionmanager/Classes/ViewHelpers/UpdateFromTerViewHelper.php
typo3/sysext/extensionmanager/Resources/Private/Language/locallang.xlf
typo3/sysext/extensionmanager/Resources/Private/Partials/List/TerPaginator.html
typo3/sysext/extensionmanager/Resources/Private/Partials/List/TerShowVersionsSingleLine.html
typo3/sysext/extensionmanager/Resources/Private/Partials/List/TerShowVersionsTable.html
typo3/sysext/extensionmanager/Resources/Private/Partials/List/TerSingleLine.html
typo3/sysext/extensionmanager/Resources/Private/Partials/List/TerTable.html
typo3/sysext/extensionmanager/Resources/Private/Scss/page/_get.scss
typo3/sysext/extensionmanager/Resources/Private/Templates/List/Ter.html
typo3/sysext/extensionmanager/Resources/Public/Css/main.css
typo3/sysext/extensionmanager/Resources/Public/JavaScript/update.js

index d4ed92c..1700128 100644 (file)
@@ -70,7 +70,7 @@ class ContainerViewHelper extends \TYPO3\CMS\Fluid\ViewHelpers\Be\AbstractBacken
         * @see template
         * @see t3lib_PageRenderer
         */
-       public function render($pageTitle = '', $enableJumpToUrl = TRUE, $enableClickMenu = TRUE, $loadPrototype = TRUE, $loadScriptaculous = FALSE, $scriptaculousModule = '', $loadExtJs = FALSE, $loadExtJsTheme = TRUE, $extJsAdapter = '', $enableExtJsDebug = FALSE, $addCssFiles = array(), $addJsFiles = array(), array $triggers = array()) {
+       public function render($pageTitle = '', $enableJumpToUrl = TRUE, $enableClickMenu = TRUE, $loadPrototype = TRUE, $loadScriptaculous = FALSE, $scriptaculousModule = '', $loadExtJs = FALSE, $loadExtJsTheme = TRUE, $extJsAdapter = '', $enableExtJsDebug = FALSE, $addCssFiles = array(), $addJsFiles = array(), $triggers = array()) {
                $doc = $this->getDocInstance();
                $pageRenderer = $doc->getPageRenderer();
                if ($enableJumpToUrl) {
index be35b82..bc75436 100644 (file)
@@ -48,7 +48,7 @@ class DownloadExtensionViewHelper extends \TYPO3\CMS\Fluid\ViewHelpers\FormViewH
         */
        public function render(\TYPO3\CMS\Extensionmanager\Domain\Model\Extension $extension) {
                $installPaths = \TYPO3\CMS\Extensionmanager\Domain\Model\Extension::returnAllowedInstallPaths();
-               $pathSelector = '<ul>';
+               $pathSelector = '<ul class="is-hidden">';
                foreach ($installPaths as $installPathType => $installPath) {
                        $pathSelector .= '<li>
                                <input type="radio" id="' . htmlspecialchars($extension->getExtensionKey()) . '-downloadPath-' . htmlspecialchars($installPathType) . '" name="' . htmlspecialchars($this->getFieldNamePrefix('downloadPath')) . '[downloadPath]" class="downloadPath" value="' . htmlspecialchars($installPathType) . '"' . ($installPathType == 'Local' ? 'checked="checked"' : '') . '/>
@@ -64,7 +64,11 @@ class DownloadExtensionViewHelper extends \TYPO3\CMS\Fluid\ViewHelpers\FormViewH
                        'extension' => (int)$extension->getUid()
                ), 'Download');
                $this->tag->addAttribute('href', $uri);
-               $label = '<input type="submit" value="' . \TYPO3\CMS\Extbase\Utility\LocalizationUtility::translate('extensionList.downloadViewHelper.submit', 'extensionmanager') . '" />';
+
+               // @TODO Clean-up
+               $iconClasses = "t3-icon t3-icon-actions t3-icon-system-extension-import";
+               $label = '<input title="' . \TYPO3\CMS\Extbase\Utility\LocalizationUtility::translate('extensionList.downloadViewHelper.submit', 'extensionmanager') . '" type="submit" class="' . $iconClasses . '" value="' . \TYPO3\CMS\Extbase\Utility\LocalizationUtility::translate('extensionList.downloadViewHelper.submit', 'extensionmanager') . '">';
+
                $this->tag->setContent($label . $pathSelector);
                $this->tag->addAttribute('class', 'download');
                return '<div id="' . htmlspecialchars($extension->getExtensionKey()) . '-downloadFromTer" class="downloadFromTer">' . $this->tag->render() . '</div>';
index a6d25b3..bf7ddf0 100644 (file)
@@ -53,6 +53,10 @@ class ShowExtensionVersionsViewHelper extends \TYPO3\CMS\Fluid\ViewHelpers\Link\
                        'extensionKey' => $extension->getExtensionKey(),
                ), 'List');
                $this->tag->addAttribute('href', $uri);
+
+               // Set class
+               $this->tag->addAttribute('class', 'versions-all ui-icon ui-icon-triangle-1-s');
+
                $label = \TYPO3\CMS\Extbase\Utility\LocalizationUtility::translate('extensionList.showAllVersions.label', 'extensionmanager');
                $this->tag->setContent($label);
                return $this->tag->render();
index 6ae9a26..0640538 100644 (file)
@@ -55,7 +55,7 @@ class UpdateFromTerViewHelper extends \TYPO3\CMS\Fluid\ViewHelpers\Link\ActionVi
                $label = \TYPO3\CMS\Extbase\Utility\LocalizationUtility::translate('extensionList.updateFromTer.label', 'extensionmanager');
                $this->tag->setContent($label);
                $this->tag->addAttribute('class', 'text');
-               return '<div class="updateFromTer">' . $this->tag->render() . '<span class="spinner"></span></div>';
+               return '<div class="splash-receivedata x-mask-loading is-shown"><div class="spinner"></div>' . $this->tag->render() . '</div>';
        }
 
 }
index b98ff8f..1469273 100644 (file)
                                <source>Show all versions</source>
                        </trans-unit>
                        <trans-unit id="extensionList.updateFromTer.label" xml:space="preserve">
-                               <source>Update Extension List</source>
+                               <source>Retrieving Extension-List from TYPO3 Extension Repository (TER)</source>
                        </trans-unit>
                        <trans-unit id="task.updateExtensionListTask.name" xml:space="preserve">
                                <source>Update extension list</source>
index b7ee830..5cc635c 100644 (file)
@@ -1,4 +1,3 @@
-<div id="terTableWrapper">
 <f:be.widget.paginate objects="{extensions}" as="paginatedExtensions" configuration="{itemsPerPage: 10, maximumNumberOfLinks: 2}">
        <table id="terTable" class="typo3-extension-list">
                <f:if condition="{showVersionList}">
@@ -11,4 +10,3 @@
                </f:if>
        </table>
 </f:be.widget.paginate>
-</div>
\ No newline at end of file
index 7bdc65f..24b61cb 100644 (file)
@@ -1,6 +1,12 @@
 {namespace em=TYPO3\CMS\Extensionmanager\ViewHelpers}
 <td>
-       {extension.title} ({extension.version})
+       <em:downloadExtension extension="{extension}" />
+</td>
+<td>
+       {extension.title}
+</td>
+<td>
+       {extension.version}
 </td>
 <td>
        {extension.updateComment}
@@ -10,7 +16,4 @@
 </td>
 <td class="{extension.stateString}">
        {extension.stateString}
-</td>
-<td>
-       <em:downloadExtension extension="{extension}" />
 </td>
\ No newline at end of file
index 034c1f7..5d01765 100644 (file)
@@ -1,11 +1,12 @@
 {namespace em=TYPO3\CMS\Extensionmanager\ViewHelpers}
 <thead>
 <tr>
+       <th><f:translate key="extensionList.header.extensionActions"/></th>
        <th><f:translate key="extensionList.header.extensionName"/></th>
+       <th><f:translate key="extensionList.header.version"/></th>
        <th><f:translate key="extensionList.header.uploadComment"/></th>
        <th><f:translate key="extensionList.header.lastUpdate"/></th>
        <th><f:translate key="extensionList.header.extensionState"/></th>
-       <th><f:translate key="extensionList.header.extensionActions"/></th>
 </tr>
 </thead>
 <tbody>
index 1cf15b9..656e982 100644 (file)
@@ -1,20 +1,26 @@
 {namespace em=TYPO3\CMS\Extensionmanager\ViewHelpers}
+
 <td>
-       {extension.title} ({extension.version})
+       <em:downloadExtension extension="{extension}" />
+</td>
+<td>
+       {extension.title}
 </td>
 <td>
        {extension.extensionKey}
 </td>
 <td>
-       {extension.description}
+       {extension.version}
+       <em:showExtensionVersions extension="{extension}" />
 </td>
 <td>
-       {extension.authorName} {extension.authorEmail}
+       {extension.description}
+
+       <div class="author">
+               <div class="author-name">{extension.authorName}</div>
+               <div class="author-email">{extension.authorEmail}</div>
+       </div>
 </td>
 <td class="{extension.stateString}">
        {extension.stateString}
 </td>
-<td>
-       <em:downloadExtension extension="{extension}" />
-       <em:showExtensionVersions extension="{extension}" />
-</td>
\ No newline at end of file
index ee47553..7493a73 100644 (file)
@@ -1,20 +1,18 @@
 {namespace em=TYPO3\CMS\Extensionmanager\ViewHelpers}
 <thead>
        <tr>
+               <th><f:translate key="extensionList.header.extensionActions"/></th>
                <th><f:translate key="extensionList.header.extensionName"/></th>
                <th><f:translate key="extensionList.header.extensionKey"/></th>
+               <th><f:translate key="extensionList.header.version"/></th>
                <th><f:translate key="extensionList.header.description"/></th>
-               <th><f:translate key="extensionList.header.author"/></th>
                <th><f:translate key="extensionList.header.extensionState"/></th>
-               <th><f:translate key="extensionList.header.extensionActions"/></th>
        </tr>
 </thead>
 <tbody>
 <f:for each="{paginatedExtensions}" as="extension">
-       <f:cycle values="{0: 'odd', 1: 'even'}" as="zebraClass">
-               <tr class="{zebraClass} {em:installationStateCssClass(needle:extension.extensionKey, haystack:availableAndInstalled)}">
-       </f:cycle>
+       <tr class="{em:installationStateCssClass(needle:extension.extensionKey, haystack:availableAndInstalled)}">
        <f:render partial="List/TerSingleLine.html" arguments="{extension:extension}" />
        </tr>
 </f:for>
-</tbody>
\ No newline at end of file
+</tbody>
index 01f2dcc..9fa36fd 100644 (file)
@@ -1,4 +1,79 @@
-.typo3-extension-list-ter {
 
 
+
+// Loader
+#terTableWrapper {
+       position: relative;
+
+       .splash-receivedata {
+               display: none;
+
+               position: absolute;
+               top: 50%;
+               left: 50%;
+               margin: -20px 0 0 -150px;
+
+               a {
+                       display: inline-block;
+                       width: 200px;
+                       vertical-align: top;
+                       padding: 3px 20px;
+               }
+
+               &.is-shown {
+                       display: block;
+               }
+       }
+
+       .spinner {
+               display: inline-block;
+       }
+}
+
+
+.is-loading {
+       opacity: 0;
+}
+
+
+// In header
+.typo3-extensionmanager-headerRowRight {
+
+       .splash-receivedata {
+               position: relative;
+
+               .spinner {
+                       display: none;
+               }
+       }
+}
+
+// If something is hidden
+.is-hidden {
+       display: none;
+}
+
+
+.typo3-extension-list {
+
+       // Import extension
+       .t3-icon,
+       .t3-icon:hover {
+               border: none;
+               background-color: transparent;
+       }
+
+       // Hide author for now
+       .author {
+               display: none;
+       }
+}
+
+
+// Show all versions
+.versions-all {
+       display: inline-block;
+       width: 20px;
+       text-indent: -200px;
+       overflow: hidden;
 }
index 461712f..91cf143 100644 (file)
                                        <em:updateFromTer />
                                </div>
                        </div>
-                       <f:render partial="List/TerPaginator" arguments="{extensions:extensions, showVersionList:showVersionList,  availableAndInstalled:availableAndInstalled}" />
+                       <div id="terTableWrapper">
+                               <f:render partial="List/TerPaginator" arguments="{extensions:extensions, showVersionList:showVersionList,  availableAndInstalled:availableAndInstalled}" />
+                               <div class="splash-receivedata x-mask-loading"><div class="spinner"><f:translate key="extensionList.updateFromTer.label"/></div></div>
+                       </div>
+
                </f:else>
        </f:if>
 
index 49065da..3cee8d1 100644 (file)
@@ -1725,3 +1725,44 @@ button.ui-button::-moz-focus-inner {
 .dataTables_paginate {
   float: left;
   margin: 10px 0 0; }
+
+#terTableWrapper {
+  position: relative; }
+#terTableWrapper .splash-receivedata {
+  display: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -20px 0 0 -150px; }
+#terTableWrapper .splash-receivedata a {
+  display: inline-block;
+  width: 200px;
+  vertical-align: top;
+  padding: 3px 20px; }
+#terTableWrapper .splash-receivedata.is-shown {
+  display: block; }
+#terTableWrapper .spinner {
+  display: inline-block; }
+
+.is-loading {
+  opacity: 0; }
+
+.typo3-extensionmanager-headerRowRight .splash-receivedata {
+  position: relative; }
+.typo3-extensionmanager-headerRowRight .splash-receivedata .spinner {
+  display: none; }
+
+.is-hidden {
+  display: none; }
+
+.typo3-extension-list .t3-icon, .typo3-extension-list .t3-icon:hover {
+  border: none;
+  background-color: transparent; }
+.typo3-extension-list .author {
+  display: none; }
+
+.versions-all {
+  display: inline-block;
+  width: 20px;
+  text-indent: -200px;
+  overflow: hidden; }
index 57d0bad..c2a33a4 100644 (file)
@@ -2,7 +2,7 @@
 (function ($) {
 
        $(document).ready(function() {
-               $('.updateFromTer a').each(function() {
+               $('.splash-receivedata a').each(function() {
                        $(this).data('href', $(this).attr('href'));
                        $(this).attr('href', '#');
                        $(this).click(function() {
                if (forceUpdate == 1) {
                        url = url + '&tx_extensionmanager_tools_extensionmanagerextensionmanager%5BforceUpdateCheck%5D=1';
                }
-               $('.updateFromTer .spinner').show();
-               $('#terTableWrapper').mask();
+               $('.splash-receivedata').addClass('is-shown');
+               $('.typo3-extensionmanager-headerRowRight .splash-receivedata').addClass('is-hidden');
+
+               $('#terTable_wrapper').addClass('is-loading');
+
                $.ajax({
                        url: url,
                        dataType: 'json',
                        success: function(data) {
-                               $('.updateFromTer .spinner').hide();
 
+                               // Hide loader
+                               $('.splash-receivedata').removeClass('is-shown');
+
+                               // Something went wrong, show message
                                if (data.errorMessage.length) {
                                        TYPO3.Flashmessage.display(TYPO3.Severity.warning, TYPO3.l10n.localize('extensionList.updateFromTerFlashMessage.title'), data.errorMessage, 10);
                                }
-                               $('.updateFromTer .text').html(
+
+                               // Message with latest updates
+                               $('.typo3-extensionmanager-headerRowRight .splash-receivedata .text').html(
                                        data.message
                                );
+
+                               // Show content
+                               $('#terTable_wrapper').removeClass('is-loading');
+
+                               // Header: Show message
+                               $('.typo3-extensionmanager-headerRowRight .splash-receivedata').removeClass('is-hidden');
+
                                if (data.updated) {
                                        $.ajax({
                                                url: window.location.href + '&tx_extensionmanager_tools_extensionmanagerextensionmanager%5Bformat%5D=json',
@@ -43,7 +58,6 @@
                                                }
                                        });
                                }
-                               $('#terTableWrapper').unmask();
                        }
                });
        }