[TASK] UX enhancement for EXT:documentation 75/25975/4
authorXavier Perseguers <xavier@typo3.org>
Fri, 6 Dec 2013 09:21:52 +0000 (10:21 +0100)
committerXavier Perseguers <xavier@typo3.org>
Fri, 20 Dec 2013 10:02:16 +0000 (11:02 +0100)
Rework the documentation module according to the
discussion with the TYPO3 Usability Team.

Resolves: #54067
Releases: 6.2
Change-Id: Ia59c9a1554080b71412b467f6621bc7270a81c72
Reviewed-on: https://review.typo3.org/25975
Reviewed-by: Markus Klein
Tested-by: Markus Klein
Reviewed-by: Xavier Perseguers
Tested-by: Xavier Perseguers
15 files changed:
typo3/sysext/documentation/Classes/Controller/DocumentController.php
typo3/sysext/documentation/Classes/ViewHelpers/FormatsViewHelper.php
typo3/sysext/documentation/README.rst
typo3/sysext/documentation/Resources/Private/Language/locallang.xlf
typo3/sysext/documentation/Resources/Private/Layouts/Default.html
typo3/sysext/documentation/Resources/Private/Scss/main.scss
typo3/sysext/documentation/Resources/Private/Scss/page/_base.scss
typo3/sysext/documentation/Resources/Private/Scss/page/_download.scss [new file with mode: 0644]
typo3/sysext/documentation/Resources/Private/Scss/page/_manage.scss [deleted file]
typo3/sysext/documentation/Resources/Private/Templates/Document/Download.html [new file with mode: 0644]
typo3/sysext/documentation/Resources/Private/Templates/Document/List.html
typo3/sysext/documentation/Resources/Private/Templates/Document/Manage.html [deleted file]
typo3/sysext/documentation/Resources/Public/Css/main.css
typo3/sysext/documentation/Resources/Public/JavaScript/main.js
typo3/sysext/documentation/ext_tables.php

index fcbb619..eb47dd5 100644 (file)
@@ -97,11 +97,11 @@ class DocumentController extends \TYPO3\CMS\Extbase\Mvc\Controller\ActionControl
        }
 
        /**
-        * Manages the documents.
+        * Shows documents to be downloaded/fetched from a remote location.
         *
         * @return void
         */
-       public function manageAction() {
+       public function downloadAction() {
                // This action is reserved for admin users. Redirect to default view if not.
                if (!$this->getBackendUser()->isAdmin()) {
                        $this->redirect('list');
@@ -118,14 +118,14 @@ class DocumentController extends \TYPO3\CMS\Extbase\Mvc\Controller\ActionControl
        }
 
        /**
-        * Downloads a document.
+        * Fetches a document from a remote URL.
         *
         * @param string $url
         * @param string $key
         * @param string $version
         * @return void
         */
-       public function downloadAction($url, $key, $version = NULL) {
+       public function fetchAction($url, $key, $version = NULL) {
                // This action is reserved for admin users. Redirect to default view if not.
                if (!$this->getBackendUser()->isAdmin()) {
                        $this->redirect('list');
@@ -187,7 +187,7 @@ class DocumentController extends \TYPO3\CMS\Extbase\Mvc\Controller\ActionControl
                                )
                        );
                }
-               $this->redirect('manage');
+               $this->redirect('download');
        }
 
        /**
index 4900d4c..2db4281 100644 (file)
@@ -44,16 +44,30 @@ class FormatsViewHelper extends \TYPO3\CMS\Fluid\Core\ViewHelper\AbstractViewHel
                $output = '';
                foreach ($documentTranslation->getFormats() as $format) {
                        /** @var \TYPO3\CMS\Documentation\Domain\Model\DocumentFormat $format */
+                       $output .= '<a ';
 
                        // TODO: Encode uri with official TYPO3 API?
                        $uri = $this->controllerContext->getRequest()->getBaseURI() . '../' . $format->getPath();
                        $extension = substr($uri, strrpos($uri, '.') + 1);
                        if (strlen($extension) < 5) {
                                // This is direct link to a file
-                               $output .= '<a href="' . $uri . '">' . htmlspecialchars($format->getFormat()) . '</a> ';
+                               $output .= 'href="' . $uri . '"';
                        } else {
-                               $output .= '<a href="#" onclick="top.TYPO3.Backend.ContentContainer.setUrl(\'' . $uri . '\')">' . htmlspecialchars($format->getFormat()) . '</a> ';
+                               $extension = $format->getFormat();
+                               if ($extension === 'json') {
+                                       $extension = 'js';
+                               }
+                               $output .= 'href="#" onclick="top.TYPO3.Backend.ContentContainer.setUrl(\'' . $uri . '\')"';
                        }
+
+                       $xliff = 'LLL:EXT:documentation/Resources/Private/Language/locallang.xlf';
+                       $title = sprintf(
+                               $GLOBALS['LANG']->sL($xliff . ':tx_documentation_domain_model_documentformat.format.title'),
+                               $format->getFormat()
+                       );
+                       $output .= ' title="' . htmlspecialchars($title) . '">';
+                       $spriteIconHtml = \TYPO3\CMS\Backend\Utility\IconUtility::getSpriteIconForFile($extension);
+                       $output .= $spriteIconHtml . '</a>';
                }
                return $output;
        }
index 2f67b9c..2fde09c 100644 (file)
@@ -16,7 +16,7 @@ documents.
 The Backend module features two actions:
 
 #. Show Documentation
-#. Manage Documentation
+#. Download Documentation
 
 
 Show Documentation
@@ -67,8 +67,8 @@ Registering Custom Documents
    ``typo3conf/Documentation/<documentation-key>/``
 
 
-Manage Documentation
-====================
+Download Documentation
+======================
 
 This view is only accessible to TYPO3 administrators. It shows a form to retrieve rendered documentation for loaded
 extensions and to fetch a copy of official TYPO3 manuals, guides and references from http://docs.typo3.org.
index 41641b2..5a4de6f 100644 (file)
@@ -55,8 +55,8 @@
                        <trans-unit id="tx_documentation_domain_model_documenttranslation.description">
                                <source>Description</source>
                        </trans-unit>
-                       <trans-unit id="tx_documentation_domain_model_documenttranslation.formats">
-                               <source>Formats</source>
+                       <trans-unit id="tx_documentation_domain_model_documenttranslation.actions">
+                               <source>Actions</source>
                        </trans-unit>
 
                        <trans-unit id="tx_documentation_domain_model_documentformat">
                        <trans-unit id="tx_documentation_domain_model_documentformat.path">
                                <source>Path</source>
                        </trans-unit>
+                       <trans-unit id="tx_documentation_domain_model_documentformat.format.title">
+                               <source>Show documentation as %s</source>
+                       </trans-unit>
 
                        <trans-unit id="showDocumentation" xml:space="preserve">
                                <source>Show Documentation</source>
                        </trans-unit>
-                       <trans-unit id="manageDocumentation" xml:space="preserve">
-                               <source>Manage Documentation</source>
+                       <trans-unit id="downloadDocumentation" xml:space="preserve">
+                               <source>Download Documentation</source>
                        </trans-unit>
                        <trans-unit id="searchTemplate.submitButton" xml:space="preserve">
                                <source>Go</source>
index f27a72d..de593b2 100644 (file)
@@ -18,7 +18,7 @@
                        <f:be.menus.actionMenu>
                                <f:be.menus.actionMenuItem label="{f:translate(key: 'showDocumentation')}" controller="Document" action="list" />
                                <doc:be.security.ifAdmin>
-                                       <f:be.menus.actionMenuItem label="{f:translate(key: 'manageDocumentation')}" controller="Document" action="manage" />
+                                       <f:be.menus.actionMenuItem label="{f:translate(key: 'downloadDocumentation')}" controller="Document" action="download" />
                                </doc:be.security.ifAdmin>
                        </f:be.menus.actionMenu>
                </div>
index 129f768..10322ab 100644 (file)
@@ -12,6 +12,6 @@
 
 // Appearance of the page
 @import "page/base",
-               "page/manage",
+               "page/download",
                "page/get";
 
index 76ea7fb..411a23e 100644 (file)
@@ -66,7 +66,7 @@
        display: inline;
 }
 
-.typo3-documentation-list td.formats {
+.typo3-documentation-list td.actions {
        width: 140px;
 
        a {
diff --git a/typo3/sysext/documentation/Resources/Private/Scss/page/_download.scss b/typo3/sysext/documentation/Resources/Private/Scss/page/_download.scss
new file mode 100644 (file)
index 0000000..ce90245
--- /dev/null
@@ -0,0 +1,127 @@
+// Upload extension
+.headerRow { overflow: auto; width: 100% }
+
+.typo3-documentation-headerRowLeft {
+       float: left;
+}
+
+.typo3-documentation-headerRowRight {
+       float: right;
+}
+
+.ui-toolbar {
+       margin-bottom: 5px;
+
+       .dataTables_filter {
+               display: block;
+       }
+}
+
+
+
+// Table
+.typo3-documentation-list {
+
+       border-spacing: 0;
+
+       // Header
+       thead {
+               background-color: #666;
+
+               tr {
+                       background: none !important;
+
+                       &:hover {
+                               background: none;
+                       }
+               }
+       }
+
+       th {
+               background: none;
+               border: 0;
+               padding: 8px 10px;
+
+               min-width: 53px;
+
+               vertical-align: middle;
+
+               font-weight: bold;
+               color: #fff;
+
+               cursor: pointer;
+               white-space: nowrap;
+
+
+               &:hover {
+                       background: rgba(200,200,200,.3);
+               }
+
+               .DataTables_sort_icon {
+                       display: inline-block;
+                       vertical-align: middle;
+                       margin-left: 5px;
+
+                       &.ui-icon-carat-2-n-s {
+                               background: none;
+                       }
+               }
+       }
+
+       // All lines
+       tr {
+
+               // Reset some values that get applied by jQuery UI styling
+               &.odd,
+               &.even {
+                       td {
+                               background: none;
+                       }
+
+                       &:hover {
+                               td {
+                                       background: none;
+                               }
+                       }
+               }
+
+               // Add some stuff to match corporate design
+               td {
+                       background: none;
+                       padding: 8px 10px;
+                       vertical-align: middle;
+
+                       img {
+                               vertical-align: middle;
+                               margin-right: 5px;
+                       }
+               }
+
+               // Zebra-look
+               &:nth-child(2n) {
+                       background: #fff;
+               }
+
+               &:nth-child(2n + 1) {
+                       background: #f7f7f7;
+               }
+
+               // Hovering lines
+               &:hover {
+                       background: #ececec;
+               }
+
+       }
+}
+
+
+
+// Paginator
+.dataTables_info {
+       display: none;
+}
+
+.dataTables_paginate {
+       float: left;
+       margin: 10px 0 0;
+}
diff --git a/typo3/sysext/documentation/Resources/Private/Scss/page/_manage.scss b/typo3/sysext/documentation/Resources/Private/Scss/page/_manage.scss
deleted file mode 100644 (file)
index ce90245..0000000
+++ /dev/null
@@ -1,127 +0,0 @@
-// Upload extension
-.headerRow { overflow: auto; width: 100% }
-
-.typo3-documentation-headerRowLeft {
-       float: left;
-}
-
-.typo3-documentation-headerRowRight {
-       float: right;
-}
-
-.ui-toolbar {
-       margin-bottom: 5px;
-
-       .dataTables_filter {
-               display: block;
-       }
-}
-
-
-
-// Table
-.typo3-documentation-list {
-
-       border-spacing: 0;
-
-       // Header
-       thead {
-               background-color: #666;
-
-               tr {
-                       background: none !important;
-
-                       &:hover {
-                               background: none;
-                       }
-               }
-       }
-
-       th {
-               background: none;
-               border: 0;
-               padding: 8px 10px;
-
-               min-width: 53px;
-
-               vertical-align: middle;
-
-               font-weight: bold;
-               color: #fff;
-
-               cursor: pointer;
-               white-space: nowrap;
-
-
-               &:hover {
-                       background: rgba(200,200,200,.3);
-               }
-
-               .DataTables_sort_icon {
-                       display: inline-block;
-                       vertical-align: middle;
-                       margin-left: 5px;
-
-                       &.ui-icon-carat-2-n-s {
-                               background: none;
-                       }
-               }
-       }
-
-       // All lines
-       tr {
-
-               // Reset some values that get applied by jQuery UI styling
-               &.odd,
-               &.even {
-                       td {
-                               background: none;
-                       }
-
-                       &:hover {
-                               td {
-                                       background: none;
-                               }
-                       }
-               }
-
-               // Add some stuff to match corporate design
-               td {
-                       background: none;
-                       padding: 8px 10px;
-                       vertical-align: middle;
-
-                       img {
-                               vertical-align: middle;
-                               margin-right: 5px;
-                       }
-               }
-
-               // Zebra-look
-               &:nth-child(2n) {
-                       background: #fff;
-               }
-
-               &:nth-child(2n + 1) {
-                       background: #f7f7f7;
-               }
-
-               // Hovering lines
-               &:hover {
-                       background: #ececec;
-               }
-
-       }
-}
-
-
-
-// Paginator
-.dataTables_info {
-       display: none;
-}
-
-.dataTables_paginate {
-       float: left;
-       margin: 10px 0 0;
-}
diff --git a/typo3/sysext/documentation/Resources/Private/Templates/Document/Download.html b/typo3/sysext/documentation/Resources/Private/Templates/Document/Download.html
new file mode 100644 (file)
index 0000000..66a8e61
--- /dev/null
@@ -0,0 +1,49 @@
+{namespace doc=TYPO3\CMS\Documentation\ViewHelpers}
+
+<f:layout name="Default"/>
+
+<f:section name="docheader-buttons">
+
+</f:section>
+
+<f:section name="module-headline">
+       <h1><f:translate key="downloadDocumentation">Download Documentation</f:translate></h1>
+</f:section>
+
+<f:section name="Content">
+
+       <div class="headerRow ui-helper-clearfix">
+               <div class="typo3-documentation-headerRowLeft">
+               </div>
+               <div class="typo3-documentation-headerRowRight">
+               </div>
+       </div>
+       <table id="typo3-documentation-download" class="typo3-documentation-list">
+               <thead>
+               <tr>
+                       <th><f:translate key="documentation.actions" /></th>
+                       <th><f:translate key="documentation.title" /></th>
+                       <th><f:translate key="documentation.shortcut" /></th>
+                       <th><f:translate key="documentation.type" /></th>
+               </tr>
+               </thead>
+               <tbody>
+               <f:for each="{documents}" as="document">
+                       <tr id="{document.key}" >
+                               <td class="icons">
+                                       <doc:link.action action="download" arguments="{url:document.url, key:document.key, version:document.version}" title="{f:translate(key:'documentation.actions.download')}">
+                                               <span class="t3-icon t3-icon-actions t3-icon-system-extension-download">&nbsp;</span>
+                                       </doc:link.action>
+                               </td>
+                               <td class="title">
+                                       <img src="../{document.icon}" title="{document.title}" alt="{document.title}" />
+                                       {document.title}
+                               </td>
+                               <td>{document.shortcut}</td>
+                               <td>{document.type}</td>
+                       </tr>
+               </f:for>
+               </tbody>
+       </table>
+
+</f:section>
\ No newline at end of file
index c7cf57d..e00ad10 100644 (file)
@@ -23,9 +23,8 @@
                <thead>
                        <tr>
                                <th><f:translate key="tx_documentation_domain_model_document.title" /></th>
-                               <th><f:translate key="tx_documentation_domain_model_document.extension_key" /></th>
                                <th><f:translate key="tx_documentation_domain_model_documenttranslation.description" /></th>
-                               <th><f:translate key="tx_documentation_domain_model_documenttranslation.formats" /></th>
+                               <th><f:translate key="tx_documentation_domain_model_documenttranslation.actions" /></th>
                        </tr>
                </thead>
                <tbody>
                                                <td class="title">
                                                        <img src="../{document.icon}" title="{translation.title}" alt="{translation.title}" />
                                                        {translation.title}
+                                                       <f:if condition="{document.extensionKey}">({document.extensionKey})</f:if>
                                                </td>
-                                               <td>{document.extensionKey}</td>
                                                <td>{translation.description}</td>
-                                               <td class="formats">
+                                               <td class="actions icons">
                                                        <doc:formats documentTranslation="{translation}" />
                                                </td>
                                        </tr>
diff --git a/typo3/sysext/documentation/Resources/Private/Templates/Document/Manage.html b/typo3/sysext/documentation/Resources/Private/Templates/Document/Manage.html
deleted file mode 100644 (file)
index 0c853e1..0000000
+++ /dev/null
@@ -1,49 +0,0 @@
-{namespace doc=TYPO3\CMS\Documentation\ViewHelpers}
-
-<f:layout name="Default"/>
-
-<f:section name="docheader-buttons">
-
-</f:section>
-
-<f:section name="module-headline">
-       <h1><f:translate key="manageDocumentation">Manage Documentation</f:translate></h1>
-</f:section>
-
-<f:section name="Content">
-
-       <div class="headerRow ui-helper-clearfix">
-               <div class="typo3-documentation-headerRowLeft">
-               </div>
-               <div class="typo3-documentation-headerRowRight">
-               </div>
-       </div>
-       <table id="typo3-documentation-manage" class="typo3-documentation-list">
-               <thead>
-               <tr>
-                       <th><f:translate key="documentation.actions" /></th>
-                       <th><f:translate key="documentation.title" /></th>
-                       <th><f:translate key="documentation.shortcut" /></th>
-                       <th><f:translate key="documentation.type" /></th>
-               </tr>
-               </thead>
-               <tbody>
-               <f:for each="{documents}" as="document">
-                       <tr id="{document.key}" >
-                               <td class="icons">
-                                       <doc:link.action action="download" arguments="{url:document.url, key:document.key, version:document.version}" title="{f:translate(key:'documentation.actions.download')}">
-                                               <span class="t3-icon t3-icon-actions t3-icon-system-extension-download">&nbsp;</span>
-                                       </doc:link.action>
-                               </td>
-                               <td class="title">
-                                       <img src="../{document.icon}" title="{document.title}" alt="{document.title}" />
-                                       {document.title}
-                               </td>
-                               <td>{document.shortcut}</td>
-                               <td>{document.type}</td>
-                       </tr>
-               </f:for>
-               </tbody>
-       </table>
-
-</f:section>
\ No newline at end of file
index f19a21d..9bfd817 100644 (file)
@@ -58,9 +58,9 @@
 .typo3-documentation-list tr:hover .icons a {
   display: inline; }
 
-.typo3-documentation-list td.formats {
+.typo3-documentation-list td.actions {
   width: 140px; }
-  .typo3-documentation-list td.formats a {
+  .typo3-documentation-list td.actions a {
     padding: 2px; }
 
 .headerTooltip,
index 3e94a8d..cf00409 100644 (file)
@@ -16,8 +16,8 @@ TYPO3.DocumentationApplication = {
                var getVars = this.getUrlVars();
                // getVars[1] contains the name of the action key
                // List view is the default view
-               if (getVars[getVars[1]] == 'manage') {
-                       this.documentationManageView(getVars);
+               if (getVars[getVars[1]] == 'download') {
+                       this.documentationDownloadView(getVars);
                } else {
                        this.documentationListView(getVars);
                }
@@ -41,9 +41,9 @@ TYPO3.DocumentationApplication = {
                        this.datatable.fnFilter(getVars['search']);
                }
        },
-       // Initializes the management view
-       documentationManageView: function(getVars) {
-               this.datatable = jQuery('#typo3-documentation-manage').dataTable({
+       // Initializes the download view
+       documentationDownloadView: function(getVars) {
+               this.datatable = jQuery('#typo3-documentation-download').dataTable({
                        'bPaginate': false,
                        'bJQueryUI': true,
                        'bLengthChange': false,
index 8db2ff0..3d6af61 100644 (file)
@@ -7,11 +7,11 @@ if (TYPO3_MODE === 'BE') {
        // Registers a Backend Module
        \TYPO3\CMS\Extbase\Utility\ExtensionUtility::registerModule(
                'TYPO3.CMS.' . $_EXTKEY,
-               'help',                         // Make module a submodule of 'help'
-               'documentation',        // Submodule key
-               'top',                          // Position
+               'help',
+               'documentation',
+               'top',
                array(
-                       'Document' => 'list, manage, download',
+                       'Document' => 'list, download, fetch',
                ),
                array(
                        'access' => 'user,group',