Commit 8ae276bd authored by Daniel Windloff's avatar Daniel Windloff Committed by Christian Kuhn
Browse files

[BUGFIX] Fix minor ux issues in EXT:recycler

* 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/52662


Reviewed-by: Frank Nägler's avatarFrank Naegler <frank.naegler@typo3.org>
Tested-by: Frank Nägler's avatarFrank Naegler <frank.naegler@typo3.org>
Reviewed-by: Christian Kuhn's avatarChristian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn's avatarChristian Kuhn <lolli@schwarzbu.ch>
parent 0e892d63
<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>
......@@ -17,10 +20,11 @@
<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>
......
......@@ -25,26 +25,39 @@
<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>
......
......@@ -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']);
};
/**
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment