[TASK] Cleanup CSS and JS in documentation module 89/38289/4
authorBenjamin Kott <benjamin.kott@wfp2.com>
Fri, 27 Mar 2015 01:38:10 +0000 (02:38 +0100)
committerAndreas Fernandez <typo3@scripting-base.de>
Fri, 15 May 2015 09:19:53 +0000 (11:19 +0200)
Releases: master
Resolves: #66966

Change-Id: I18ee4c51727641d3b2ba8ce352c9622e65d31307
Reviewed-on: http://review.typo3.org/38289
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
Reviewed-by: Andreas Fernandez <typo3@scripting-base.de>
Tested-by: Andreas Fernandez <typo3@scripting-base.de>
14 files changed:
typo3/sysext/documentation/Resources/Private/Language/locallang.xlf
typo3/sysext/documentation/Resources/Private/Layouts/Default.html
typo3/sysext/documentation/Resources/Private/Scss/.gitignore [deleted file]
typo3/sysext/documentation/Resources/Private/Scss/helpers/_mixins.scss [deleted file]
typo3/sysext/documentation/Resources/Private/Scss/main.scss [deleted file]
typo3/sysext/documentation/Resources/Private/Scss/page/_base.scss [deleted file]
typo3/sysext/documentation/Resources/Private/Scss/page/_download.scss [deleted file]
typo3/sysext/documentation/Resources/Private/Templates/Document/Download.html
typo3/sysext/documentation/Resources/Private/Templates/Document/List.html
typo3/sysext/documentation/Resources/Public/Css/README.txt [deleted file]
typo3/sysext/documentation/Resources/Public/Css/main.css [deleted file]
typo3/sysext/documentation/Resources/Public/JavaScript/Main.js
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_main_content.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css

index 82b3e8e..a6b0ba9 100644 (file)
                        <trans-unit id="downloadFailedDetails">
                                <source>The documentation for "%s" could not be downloaded, because of the following error: %s (%d).</source>
                        </trans-unit>
+
+                       <trans-unit id="documentationList.search">
+                               <source>Search</source>
+                       </trans-unit>
+
                </body>
        </file>
 </xliff>
index 1104a6c..c210a5f 100644 (file)
@@ -1,10 +1,6 @@
 {namespace doc=TYPO3\CMS\Documentation\ViewHelpers}
 
 <f:be.container pageTitle="{f:translate(key: 'documentation_manager')}" enableClickMenu="false" loadPrototype="false" loadJQuery="true"
-
-       includeCssFiles="{
-               0:'{f:uri.resource(path:\'Css/main.css\')}'
-       }"
        includeRequireJsModules="{
                0: 'TYPO3/CMS/Documentation/Main'
        }">
diff --git a/typo3/sysext/documentation/Resources/Private/Scss/.gitignore b/typo3/sysext/documentation/Resources/Private/Scss/.gitignore
deleted file mode 100644 (file)
index 5df1b9b..0000000
+++ /dev/null
@@ -1 +0,0 @@
-.sass-cache
diff --git a/typo3/sysext/documentation/Resources/Private/Scss/helpers/_mixins.scss b/typo3/sysext/documentation/Resources/Private/Scss/helpers/_mixins.scss
deleted file mode 100644 (file)
index 14da817..0000000
+++ /dev/null
@@ -1,73 +0,0 @@
-// SASS MIXINS
-$useIEFilters: 0;
-
-@mixin border-radius ($values) {
-       -webkit-border-radius: $values;
-          -moz-border-radius: $values;
-               border-radius: $values;
-}
-
-@mixin box-shadow ($values) {
-       -webkit-box-shadow: $values;
-               box-shadow: $values;
-}
-
-
-@mixin linear-gradient($preset, $from, $to, $ie: $useIEFilters) {
-       background-color: $preset;
-       background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
-       background-image: -webkit-linear-gradient(top, $from, $to);
-       background-image:    -moz-linear-gradient(top, $from, $to);
-       background-image:     -ms-linear-gradient(top, $from, $to);
-       background-image:      -o-linear-gradient(top, $from, $to);
-       background-image:         linear-gradient(to bottom, $from, $to);
-
-       @if $ie == 1 {
-               filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}');
-       }
-}
-
-@mixin rotate ($deg) {
-       -webkit-transform: rotate(#{$deg}deg);
-          -moz-transform: rotate(#{$deg}deg);
-            -o-transform: rotate(#{$deg}deg);
-           -ms-transform: rotate(#{$deg}deg);
-               transform: rotate(#{$deg}deg);
-}
-
-@mixin scale ($size) {
-       -webkit-transform: scale(#{$size});
-          -moz-transform: scale(#{$size});
-            -o-transform: scale(#{$size});
-           -ms-transform: scale(#{$size});
-               transform: scale(#{$size});
-}
-
-@mixin transform ($values) {
-       -webkit-transform: #{$values};
-          -moz-transform: #{$values};
-            -o-transform: #{$values};
-           -ms-transform: #{$values};
-               transform: #{$values};
-}
-
-@mixin transition ($value) {
-       -webkit-transition: $value;
-          -moz-transition: $value;
-            -o-transition: $value;
-           -ms-transition: $value;
-               transition: $value;
-}
-
-
-// box-sizing
-@mixin box-sizing ($type: border-box) {
-       -webkit-box-sizing: $type;
-          -moz-box-sizing: $type;
-               box-sizing: $type;
-}
-
-// Hardware Xalleration
-@mixin xallerate ($values: '') {
-       @include transform(translate3d(0,0,0) #{$values});
-}
diff --git a/typo3/sysext/documentation/Resources/Private/Scss/main.scss b/typo3/sysext/documentation/Resources/Private/Scss/main.scss
deleted file mode 100644 (file)
index 88aa361..0000000
+++ /dev/null
@@ -1,15 +0,0 @@
-/*
- *  Created: 2013-07-26
- *
- *  CSS in SASS's SCSS dialect for
- *  TYPO3 Documentation Module v6.2.0
- *  Questions can be submitted to xavier@typo3.org
- *
- */
-
-// Some helpers
-@import "helpers/mixins";
-
-// Appearance of the page
-@import "page/base",
-               "page/download";
\ No newline at end of file
diff --git a/typo3/sysext/documentation/Resources/Private/Scss/page/_base.scss b/typo3/sysext/documentation/Resources/Private/Scss/page/_base.scss
deleted file mode 100644 (file)
index 84baa31..0000000
+++ /dev/null
@@ -1,72 +0,0 @@
-
-
-.ui-widget-header {
-       background: none;
-       border: none;
-       font-weight: normal;
-}
-
-.dataTables_info {
-       font-size: 10px;
-       color: #444;
-       float: left;
-}
-
-.paging_two_button .ui-button {
-       float: left;
-       cursor: pointer;
-}
-
-.paging_full_numbers .ui-button {
-       padding: 2px 6px;
-       margin: 0;
-       cursor: pointer;
-       color: #333 !important;
-}
-
-.dataTables_paginate .ui-button {
-       margin-right: -0.1em !important;
-}
-
-.paging_full_numbers {
-       float: right;
-}
-
-.dataTables_paginate {
-       width: auto;
-}
-
-.typo3-documentation-list td.title {
-       width: 280px;
-}
-
-.typo3-documentation-list td.icons {
-       width: 40px;
-}
-
-.typo3-documentation-list td.actions {
-       width: 140px;
-
-       a {
-               padding: 2px;
-       }
-}
-
-.headerTooltip,
-.tooltip {
-       @include box-shadow(2px 2px 11px #666);
-
-       display: none;
-       width: 400px;
-       background-color: #ffa;
-       border: 1px solid #cc9;
-       padding: 3px;
-       font-size: 13px;
-       z-index: 1000;
-}
-
-.headerTooltip {
-       width: 150px;
-}
-
-p { padding-bottom: 20px; }
\ No newline at end of file
diff --git a/typo3/sysext/documentation/Resources/Private/Scss/page/_download.scss b/typo3/sysext/documentation/Resources/Private/Scss/page/_download.scss
deleted file mode 100644 (file)
index 262db71..0000000
+++ /dev/null
@@ -1,62 +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 {
-       th {
-               min-width: 53px;
-
-               vertical-align: middle;
-
-               cursor: pointer;
-               white-space: nowrap;
-
-               .DataTables_sort_icon {
-                       display: inline-block;
-                       vertical-align: middle;
-                       margin-left: 5px;
-
-                       &.ui-icon-carat-2-n-s {
-                               background: none;
-                       }
-               }
-       }
-
-       tr {
-               td {
-                       img {
-                               vertical-align: middle;
-                               margin-right: 5px;
-                       }
-               }
-       }
-}
-
-
-
-// Paginator
-.dataTables_info {
-       display: none;
-}
-
-.dataTables_paginate {
-       float: left;
-       margin: 10px 0 0;
-}
index ccc19d3..0bad6d4 100644 (file)
@@ -5,14 +5,12 @@
 </f:section>
 
 <f:section name="Content">
-
-       <div class="headerRow ui-helper-clearfix">
-               <div class="typo3-documentation-headerRowLeft">
-               </div>
-               <div class="typo3-documentation-headerRowRight">
+       <form class="form-inline">
+               <div class="form-group">
+                       <f:form.textfield name="typo3-documentation-searchfield" placeholder="{f:translate(key:'documentationList.search')}" id="typo3-documentation-searchfield" value="{search}" class="form-control t3js-documentation-searchfield" />
                </div>
-       </div>
-       <table id="typo3-documentation-download" class="table table-striped table-hover typo3-documentation-list">
+       </form>
+       <table id="typo3-documentation-download" class="table table-striped table-hover typo3-documentation-list t3js-documentation-list">
                <thead>
                <tr>
                        <th><f:translate key="documentation.title" /></th>
                <tbody>
                <f:for each="{documents}" as="document">
                        <tr id="{document.key}" >
-                               <td class="title">
-                                       <img src="../{document.icon}" title="{document.title}" alt="{document.title}" />
+                               <td class="col-nowrap">
+                                       <span class="typo3-app-icon">
+                                               <span>
+                                                       <span>
+                                                               <img src="../{document.icon}" title="{document.title}" alt="{document.title}" />
+                                                       </span>
+                                               </span>
+                                       </span>
                                        {document.title}
                                </td>
                                <td class="hidden-xs">{document.shortcut}</td>
                                <td class="hidden-xs">{document.type}</td>
-                               <td class="icons">
-                                       <f:be.buttons.icon uri="{f:uri.action(action:'fetch',arguments:'{url:document.url, key:document.key, version:document.version}')}" icon="actions-system-extension-download" title="{f:translate(key:'documentation.actions.download')}"/>
+                               <td class="col-nowrap">
+                                       <f:be.buttons.icon uri="{f:uri.action(action:'fetch',arguments:'{url:document.url, key:document.key, version:document.version}')}" icon="actions-system-extension-download" title="{f:translate(key:'documentation.actions.download')}" additionalAttributes="{class: 'btn btn-default'}" />
                                </td>
                        </tr>
                </f:for>
index a9d55af..6d09fee 100644 (file)
@@ -7,15 +7,12 @@
 </f:section>
 
 <f:section name="Content">
-
-       <div class="headerRow ui-helper-clearfix">
-               <div class="typo3-documentation-headerRowLeft">
-               </div>
-               <div class="typo3-documentation-headerRowRight">
+       <form class="form-inline">
+               <div class="form-group">
+                       <f:form.textfield name="typo3-documentation-searchfield" placeholder="{f:translate(key:'documentationList.search')}" id="typo3-documentation-searchfield" value="{search}" class="form-control t3js-documentation-searchfield" />
                </div>
-       </div>
-
-       <table id="typo3-documentation-list" class="table table-striped table-hover typo3-documentation-list">
+       </form>
+       <table id="typo3-documentation-list" class="table table-striped table-hover typo3-documentation-list t3js-documentation-list">
                <thead>
                        <tr>
                                <th><f:translate key="tx_documentation_domain_model_document.title" /></th>
                        <f:for each="{documents}" as="document">
                                <f:for each="{document.translations}" as="translation">
                                        <tr id="{document.packageKey}" >
-                                               <td class="title">
-                                                       <img src="../{document.icon}" title="{translation.title}" alt="{translation.title}" />
+                                               <td class="col-nowrap">
+                                                       <span class="typo3-app-icon">
+                                                               <span>
+                                                                       <span>
+                                                                               <img src="../{document.icon}" title="{translation.title}" alt="{translation.title}" />
+                                                                       </span>
+                                                               </span>
+                                                       </span>
                                                        {translation.title}
                                                        <f:if condition="{document.extensionKey}">({document.extensionKey})</f:if>
                                                </td>
                                                <td>{translation.description}</td>
-                                               <td class="actions icons">
+                                               <td class="col-nowrap">
                                                        <div class="btn-group">
-                                                       <doc:formats documentTranslation="{translation}" />
+                                                               <doc:formats documentTranslation="{translation}" />
                                                        </div>
                                                </td>
                                        </tr>
diff --git a/typo3/sysext/documentation/Resources/Public/Css/README.txt b/typo3/sysext/documentation/Resources/Public/Css/README.txt
deleted file mode 100644 (file)
index 6b3228b..0000000
+++ /dev/null
@@ -1,7 +0,0 @@
-The main.css is generated from the SASS (in its dialect SCSS) files.
-Please do not edit the CSS-files in any case but search the correct .scss file
-and edit the according SCSS. If you are not familiar with SCSS
-you can write pure CSS which is actually valid SCSS.
-
-See http://wiki.typo3.org/Sass for details.
-
diff --git a/typo3/sysext/documentation/Resources/Public/Css/main.css b/typo3/sysext/documentation/Resources/Public/Css/main.css
deleted file mode 100644 (file)
index a98fd44..0000000
+++ /dev/null
@@ -1,110 +0,0 @@
-/*
- *  Created: 2013-07-26
- *
- *  CSS in SASS's SCSS dialect for
- *  TYPO3 Documentation Module v6.2.0
- *  Questions can be submitted to xavier@typo3.org
- *
- */
-.ui-widget-header {
-  background: none;
-  border: none;
-  font-weight: normal; }
-
-.dataTables_info {
-  font-size: 10px;
-  color: #444;
-  float: left; }
-
-.paging_two_button .ui-button {
-  float: left;
-  cursor: pointer; }
-
-.paging_full_numbers .ui-button {
-  padding: 2px 6px;
-  margin: 0;
-  cursor: pointer;
-  color: #333 !important; }
-
-.dataTables_paginate .ui-button {
-  margin-right: -0.1em !important; }
-
-.paging_full_numbers {
-  float: right; }
-
-.dataTables_paginate {
-  width: auto; }
-
-.typo3-documentation-list td.title {
-  width: 280px; }
-
-.typo3-documentation-list td.icons {
-  width: 40px; }
-
-.typo3-documentation-list td.actions {
-  width: 140px; }
-  .typo3-documentation-list td.actions a {
-    padding: 2px; }
-
-.headerTooltip,
-.tooltip {
-  -webkit-box-shadow: 2px 2px 11px #666;
-  box-shadow: 2px 2px 11px #666;
-  display: none;
-  width: 400px;
-  background-color: #ffa;
-  border: 1px solid #cc9;
-  padding: 3px;
-  font-size: 13px;
-  z-index: 1000; }
-
-.headerTooltip {
-  width: 150px; }
-
-p {
-  padding-bottom: 20px; }
-
-.headerRow {
-  overflow: auto;
-  width: 100%; }
-
-.typo3-documentation-headerRowLeft {
-  float: left; }
-
-.typo3-documentation-headerRowRight {
-  float: right; }
-
-.ui-toolbar {
-  margin-bottom: 5px; }
-  .ui-toolbar .dataTables_filter {
-    display: block; }
-
-.typo3-documentation-list th {
-  min-width: 53px;
-  vertical-align: middle;
-  cursor: pointer;
-  white-space: nowrap; }
-  .typo3-documentation-list th .DataTables_sort_icon {
-    display: inline-block;
-    vertical-align: middle;
-    margin-left: 5px; }
-    .typo3-documentation-list th .DataTables_sort_icon.ui-icon-carat-2-n-s {
-      background: none; }
-.typo3-documentation-list tr td img {
-  vertical-align: middle;
-  margin-right: 5px;
-  max-width: 16px; }
-
-.dataTables_info {
-  display: none; }
-
-.dataTables_paginate {
-  float: left;
-  margin: 10px 0 0; }
-
-.typo3-documentation-list .t3-icon,
-.typo3-documentation-list .t3-icon:hover {
-  border: none;
-  background-color: transparent; }
-
-/*# sourceMappingURL=main.css.map */
index 6012ea7..f1adf4b 100644 (file)
 define('TYPO3/CMS/Documentation/Main', ['jquery', 'datatables', 'TYPO3/CMS/Backend/jquery.clearable'], function($) {
 
        var Documentation = {
-               datatable: null
+               dataTable: null,
+               searchField: null,
+               identifier: {
+                       documentationList: '.t3js-documentation-list',
+                       searchField: '.t3js-documentation-searchfield',
+               }
        };
 
        // Initializes the data table, depending on the current view
        Documentation.initializeView = function() {
                var getVars = Documentation.getUrlVars();
-               // getVars[2] contains the name of the action key
-               // List view is the default view
-               if (getVars[getVars[2]] === 'download') {
-                       Documentation.documentationDownloadView(getVars);
-               } else {
-                       Documentation.documentationListView(getVars);
-               }
-       };
-
-       // Initializes the list view
-       Documentation.documentationListView = function(getVars) {
-               Documentation.datatable = $('#typo3-documentation-list').DataTable({
-                       'paging': false,
-                       'lengthChange': false,
-                       'pageLength': 15,
-                       'stateSave': true
+               // init datatable
+               this.dataTable = $(this.identifier.documentationList).DataTable({
+                       paging: false,
+                       dom: 'lrtip',
+                       lengthChange: false,
+                       pageLength: 15,
+                       stateSave: true,
+                       order: [[ 1, 'asc' ]]
                });
-
-               // restore filter
-               if (Documentation.datatable.length && getVars['search']) {
-                       Documentation.datatable.search(getVars['search']);
-               }
-       };
-
-       // Initializes the download view
-       Documentation.documentationDownloadView = function(getVars) {
-               Documentation.datatable = $('#typo3-documentation-download').DataTable({
-                       'paging': false,
-                       'lengthChange': false,
-                       'pageLength': 15,
-                       'stateSave': true,
-                       'order': [[ 1, 'asc' ]]
-               });
-
-               // restore filter
-               if (Documentation.datatable.length && getVars['search']) {
-                       Documentation.datatable.search(getVars['search']);
+               // search field
+               this.searchField = $(this.identifier.searchField);
+               if (this.dataTable && this.searchField.length) {
+                       this.searchField.parents('form').on('submit', function() {
+                               return false;
+                       });
+                       var currentSearch = (getVars['search'] ? getVars['search'] : this.dataTable.search());
+                       this.searchField.val(currentSearch);
+                       this.searchField.on('input', function(e) {
+                               Documentation.dataTable.search($(this).val()).draw();
+                       });
                }
        };
 
@@ -80,10 +68,11 @@ define('TYPO3/CMS/Documentation/Main', ['jquery', 'datatables', 'TYPO3/CMS/Backe
                Documentation.initializeView();
 
                // Make the data table filter react to the clearing of the filter field
-               $('.dataTables_wrapper .dataTables_filter input').clearable({
+               $(Documentation.identifier.searchField).clearable({
                        onClear: function() {
-                               Documentation.datatable.search('');
+                               Documentation.dataTable.search('').draw();
                        }
                });
+
        });
 });
\ No newline at end of file
index 5b0e75e..2658b1d 100644 (file)
@@ -130,6 +130,7 @@ em {
        overflow: hidden;
        border-radius: @app-icon-border-radius;
        background-color: @app-icon-bg;
+       vertical-align: middle;
        > span {
                display: table;
                height: 100%;
index 6e1a617..1bbf546 100644 (file)
@@ -11184,6 +11184,7 @@ em {
   overflow: hidden;
   border-radius: 2px;
   background-color: #484848;
+  vertical-align: middle;
 }
 .typo3-app-icon > span {
   display: table;