Skip to content

Commit e8e454c

Browse files
bhlindemannbhlindemann
committed
fix: update icon sets table layout and enhance bulk actions functionality
1 parent 8a5136d commit e8e454c

File tree

1 file changed

+46
-31
lines changed

1 file changed

+46
-31
lines changed

‎src/templates/icon-sets/index.twig‎

Lines changed: 46 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -155,30 +155,30 @@
155155
<th class="checkbox-cell selectallcontainer">
156156
<div class="checkbox" role="checkbox" tabindex="0" aria-checked="false" aria-label="Select all"></div>
157157
</th>
158-
<th scope="col" data-attribute="name" class="orderable {{ sort == 'name' ? 'ordered ' ~ dir : '' }}" style="width: 25%;">
158+
<th scope="col" data-attribute="name" class="orderable {{ sort == 'name' ? 'ordered ' ~ dir : '' }}">
159159
<button type="button" data-sort="name">
160160
{{ 'Name'|t('icon-manager') }}
161161
</button>
162162
</th>
163-
<th scope="col" style="width: 15%;">{{ 'Handle'|t('icon-manager') }}</th>
164-
<th scope="col" data-attribute="type" class="orderable {{ sort == 'type' ? 'ordered ' ~ dir : '' }}" style="width: 15%;">
163+
<th scope="col">{{ 'Handle'|t('icon-manager') }}</th>
164+
<th scope="col" data-attribute="type" class="orderable {{ sort == 'type' ? 'ordered ' ~ dir : '' }}">
165165
<button type="button" data-sort="type">
166166
{{ 'Type'|t('icon-manager') }}
167167
</button>
168168
</th>
169-
<th scope="col" data-attribute="iconCount" class="orderable {{ sort == 'iconCount' ? 'ordered ' ~ dir : '' }}" style="width: 10%;">
169+
<th scope="col" data-attribute="iconCount" class="orderable {{ sort == 'iconCount' ? 'ordered ' ~ dir : '' }}">
170170
<button type="button" data-sort="iconCount">
171171
{{ 'Icons'|t('icon-manager') }}
172172
</button>
173173
</th>
174174
{% if plugin.settings.enableOptimization %}
175-
<th scope="col" data-attribute="optimizationIssueCount" class="orderable {{ sort == 'optimizationIssueCount' ? 'ordered ' ~ dir : '' }}" style="width: 10%;">
175+
<th scope="col" data-attribute="optimizationIssueCount" class="orderable {{ sort == 'optimizationIssueCount' ? 'ordered ' ~ dir : '' }}">
176176
<button type="button" data-sort="optimizationIssueCount">
177177
{{ 'Optimize'|t('icon-manager') }}
178178
</button>
179179
</th>
180180
{% endif %}
181-
<th scope="col" style="width: 10%;">{{ 'Enabled'|t('icon-manager') }}</th>
181+
<th scope="col">{{ 'Enabled'|t('icon-manager') }}</th>
182182
<th class="thin" style="width: 60px;">{{ 'Actions'|t('icon-manager') }}</th>
183183
</tr>
184184
</thead>
@@ -239,9 +239,9 @@
239239
</div>
240240
</div>
241241

242-
<div id="footer" class="flex-justify flex">
242+
<div id="footer" class="flex flex-justify">
243243
<div class="light">
244-
<div class="pagination flex">
244+
<div class="flex pagination">
245245
<nav class="flex" aria-label="icon set pagination">
246246
<button type="button" class="page-link prev-page {{ page <= 1 ? 'disabled' : '' }}" {{ page <= 1 ? 'disabled' : '' }} title="Previous Page"></button>
247247
<button type="button" class="page-link next-page {{ page >= totalPages ? 'disabled' : '' }}" {{ page >= totalPages ? 'disabled' : '' }} title="Next Page"></button>
@@ -256,15 +256,20 @@
256256
</div>
257257
</div>
258258
</div>
259-
<div class="flex flex-nowrap">
260-
<button type="button" class="btn secondary" id="bulk-enable-btn" style="display: none;">
261-
{{ 'Enable Selected'|t('icon-manager') }}
262-
</button>
263-
<button type="button" class="btn secondary" id="bulk-disable-btn" style="display: none;">
264-
{{ 'Disable Selected'|t('icon-manager') }}
265-
</button>
266-
<button type="button" class="btn secondary" id="bulk-delete-btn" style="display: none;">
267-
{{ 'Delete Selected'|t('icon-manager') }}
259+
<div id="actions-container" class="flex" style="display: none;">
260+
<div>
261+
<button type="button" class="btn menubtn secondary" id="bulk-actions-btn" aria-label="Set status">
262+
{{ 'Set status'|t('app') }}
263+
</button>
264+
<div class="menu">
265+
<ul>
266+
<li><a id="bulk-enable-action">{{ 'Enable'|t('icon-manager') }}</a></li>
267+
<li><a id="bulk-disable-action">{{ 'Disable'|t('icon-manager') }}</a></li>
268+
</ul>
269+
</div>
270+
</div>
271+
<button type="button" class="btn secondary" id="bulk-delete-btn">
272+
<span id="delete-label">{{ 'Delete'|t('icon-manager') }}</span>
268273
</button>
269274
</div>
270275
</div>
@@ -341,18 +346,16 @@
341346
342347
function updateBulkButtons() {
343348
const hasSelection = selectedIds.size > 0;
344-
const enableBtn = document.getElementById('bulk-enable-btn');
345-
const disableBtn = document.getElementById('bulk-disable-btn');
346-
const deleteBtn = document.getElementById('bulk-delete-btn');
347-
348-
[enableBtn, disableBtn, deleteBtn].forEach(btn => {
349-
if (hasSelection) {
350-
btn.style.display = '';
351-
btn.removeAttribute('style');
352-
} else {
353-
btn.style.display = 'none';
354-
}
355-
});
349+
const actionsContainer = document.getElementById('actions-container');
350+
const deleteLabel = document.getElementById('delete-label');
351+
352+
if (hasSelection) {
353+
actionsContainer.style.display = '';
354+
const count = selectedIds.size;
355+
deleteLabel.textContent = `{{ 'Delete'|t('icon-manager') }} (${count})`;
356+
} else {
357+
actionsContainer.style.display = 'none';
358+
}
356359
}
357360
358361
// Select all
@@ -390,8 +393,19 @@
390393
});
391394
});
392395
396+
// Initialize bulk actions menu button
397+
const bulkActionsBtn = document.getElementById('bulk-actions-btn');
398+
if (bulkActionsBtn) {
399+
if (typeof Craft !== 'undefined' && Craft.MenuBtn) {
400+
new Craft.MenuBtn(bulkActionsBtn);
401+
} else if (typeof Garnish !== 'undefined' && Garnish.MenuBtn) {
402+
new Garnish.MenuBtn(bulkActionsBtn);
403+
}
404+
}
405+
393406
// Bulk enable
394-
document.getElementById('bulk-enable-btn')?.addEventListener('click', function() {
407+
document.getElementById('bulk-enable-action')?.addEventListener('click', function(e) {
408+
e.preventDefault();
395409
const ids = Array.from(selectedIds);
396410
397411
Craft.sendActionRequest('POST', 'icon-manager/icon-sets/bulk-enable', {
@@ -407,7 +421,8 @@
407421
});
408422
409423
// Bulk disable
410-
document.getElementById('bulk-disable-btn')?.addEventListener('click', function() {
424+
document.getElementById('bulk-disable-action')?.addEventListener('click', function(e) {
425+
e.preventDefault();
411426
const ids = Array.from(selectedIds);
412427
413428
Craft.sendActionRequest('POST', 'icon-manager/icon-sets/bulk-disable', {

0 commit comments

Comments
 (0)