[BUGFIX] Fix minor ux issues in EXT:recycler 24/52824/2
authorDaniel Windloff <daniel.jc.windloff@googlemail.com>
Sat, 29 Apr 2017 12:51:13 +0000 (14:51 +0200)
committerChristian Kuhn <lolli@schwarzbu.ch>
Wed, 17 May 2017 12:47:48 +0000 (14:47 +0200)
* move multi selector to the left
* separate action icons
* use info icon to open more information
* move mass action actions to the left
* use btn-default for actions
* add icons to the mass action buttons

Resolves: #81086
Releases: master, 8.7
Change-Id: Ib65343043a5c5c7ae77689d95502b389bb4acb0b
Reviewed-on: https://review.typo3.org/52824
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
typo3/sysext/recycler/Resources/Private/Partials/RecordsTable/DeletedRecord.html
typo3/sysext/recycler/Resources/Private/Templates/RecyclerModule/Index.html
typo3/sysext/recycler/Resources/Public/JavaScript/Recycler.js

index 15a84b2..c42383d 100644 (file)
@@ -1,14 +1,17 @@
 <tr data-uid="{record.uid}" data-table="{record.table}" data-recordtitle="{record.title}" data-parent-deleted="{record.isParentDeleted}">
+       <td class="nowrap">
+               <label class="btn btn-default btn-checkbox">
+                       <input type="checkbox">
+                       <span class="t3-icon fa"></span>
+               </label>
+       </td>
        <td class="nowrap">{record.tableTitle}</td>
        <td class="nowrap"><f:format.raw>{record.icon}</f:format.raw> {record.title}</td>
        <td class="nowrap">{record.tstamp}</td>
        <td class="nowrap">{record.uid}</td>
        <td class="nowrap">{record.pageTitle} ({record.pid})</td>
-       <td class="text-right nowrap">
+       <td class="nowrap text-right">
                <div class="btn-group">
-                       <a class="btn btn-default" data-action="expand" data-toggle="collapse" data-target="#{record.table}_{record.uid}" title="{f:translate(key: 'LLL:EXT:recycler/Resources/Private/Language/locallang.xlf:button.expand')}">
-                               <core:icon identifier="apps-pagetree-collapse" />
-                       </a>
                        <a class="btn btn-default" data-action="undo" title="{f:translate(key: 'LLL:EXT:recycler/Resources/Private/Language/locallang.xlf:button.undo')}">
                                <core:icon identifier="actions-edit-undo" />
                        </a>
                                        <core:icon identifier="actions-edit-delete" />
                                </a>
                        </f:if>
-                       <label class="btn btn-default btn-checkbox">
-                               <input type="checkbox">
-                               <span class="t3-icon fa"></span>
-                       </label>
+               </div>
+               <div class="btn-group">
+                       <a class="btn btn-default" data-action="expand" data-toggle="collapse" data-target="#{record.table}_{record.uid}" title="{f:translate(key: 'LLL:EXT:recycler/Resources/Private/Language/locallang.xlf:button.expand')}">
+                               <core:icon identifier="actions-document-info" />
+                       </a>
                </div>
        </td>
 </tr>
index 76eaf46..053e91c 100644 (file)
                                <select name="pages" class="form-control"></select>
                        </div>
                </form>
-               <table class="table table-hover" id="itemsInRecycler">
-                       <thead>
-                               <tr>
-                                       <th><f:translate key="table.header.recordtype" /></th>
-                                       <th><f:translate key="table.header.record" /></th>
-                                       <th><f:translate key="table.header.tstamp" /></th>
-                                       <th><f:translate key="table.header.uid" /></th>
-                                       <th><f:translate key="table.header.pid" /></th>
-                                       <th class="text-right">
-                                               <button type="button" class="btn btn-default t3js-toggle-all"><core:icon identifier="actions-document-select" /></button>
-                                       </th>
-                               </tr>
-                       </thead>
-                       <tbody>
-                       </tbody>
-               </table>
-               <div class="text-right">
-                       <button class="btn btn-success disabled" data-action="massundo"><f:translate key="button.undo" /></button>
+               <div class="table-fit">
+                       <table class="table table-hover" id="itemsInRecycler">
+                               <thead>
+                                       <tr>
+                                               <th>
+                                                       <button type="button" class="btn btn-default t3js-toggle-all"><core:icon identifier="actions-document-select" /></button>
+                                               </th>
+                                               <th><f:translate key="table.header.recordtype" /></th>
+                                               <th><f:translate key="table.header.record" /></th>
+                                               <th><f:translate key="table.header.tstamp" /></th>
+                                               <th><f:translate key="table.header.uid" /></th>
+                                               <th><f:translate key="table.header.pid" /></th>
+                                               <th></th>
+                                       </tr>
+                               </thead>
+                               <tbody>
+                               </tbody>
+                       </table>
+               </div>
+               <div>
+                       <button class="btn btn-default disabled" data-action="massundo">
+                               <core:icon identifier="actions-edit-undo" />
+                               <span class="text">
+                                       <f:translate key="button.undo" />
+                               </span>
+                       </button>
                        <f:if condition="{allowDelete}">
-                               <button class="btn btn-danger disabled" data-action="massdelete"><f:translate key="button.delete" /></button>
+                               <button class="btn btn-default disabled" data-action="massdelete">
+                                       <core:icon identifier="actions-edit-delete" />
+                                       <span class="text">
+                                               <f:translate key="button.delete" />
+                                       </span>
+                               </button>
                        </f:if>
                </div>
                <nav>
index b63726f..be6021c 100644 (file)
@@ -249,8 +249,9 @@ define(['jquery',
                        var btnTextUndo = Recycler.createMessage(TYPO3.lang['button.undoselected'], [Recycler.markedRecordsForMassAction.length]),
                                btnTextDelete = Recycler.createMessage(TYPO3.lang['button.deleteselected'], [Recycler.markedRecordsForMassAction.length]);
 
-                       Recycler.elements.$massUndo.text(btnTextUndo);
-                       Recycler.elements.$massDelete.text(btnTextDelete);
+                       Recycler.elements.$massUndo.find('span.text').text(btnTextUndo);
+                       Recycler.elements.$massDelete.find('span.text').text(btnTextDelete);
+
                } else {
                        Recycler.resetMassActionButtons();
                }
@@ -261,8 +262,10 @@ define(['jquery',
         */
        Recycler.resetMassActionButtons = function() {
                Recycler.markedRecordsForMassAction = [];
-               Recycler.elements.$massUndo.addClass('disabled').text(TYPO3.lang['button.undo']);
-               Recycler.elements.$massDelete.addClass('disabled').text(TYPO3.lang['button.delete']);
+               Recycler.elements.$massUndo.addClass('disabled');
+               Recycler.elements.$massUndo.find('span.text').text(TYPO3.lang['button.undo']);
+               Recycler.elements.$massDelete.addClass('disabled');
+               Recycler.elements.$massDelete.find('span.text').text(TYPO3.lang['button.delete']);
        };
 
        /**