Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2026-02-23 07:01:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor: add icons to selected/all

Browse Source 
fix truncation on category select in composer header
This commit is contained in:
Barış Soner Uşaklı
2026-02-21 12:26:45 -05:00
parent c84a86e4df
commit 970a420433
4 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/src/client/unread.js
View File

@@ -88,12 +88,14 @@ define('forum/unread', [
{
cid: 'selected',
name: '[[unread:selected]]',
icon: '',
icon: 'fa-regular fa-square-check',
color: 'var(--bs-secondary)',
},
{
cid: 'all',
name: '[[unread:all]]',
icon: '',
icon: 'fa-list',
color: 'var(--bs-secondary)',
},
],
defaultCategories,

4
public/src/modules/categoryFilter.js
View File

@@ -82,10 +82,10 @@ define('categoryFilter', ['categorySearch', 'api', 'hooks'], function (categoryS
return a - b;
});
icon.toggleClass('invisible');
listEl.find('[data-cid="all"] i').toggleClass('invisible', !!selectedCids.length);
listEl.find('[data-cid="all"] [component="category/select/icon"]').toggleClass('invisible', !!selectedCids.length);
} else {
el.find('[component="category/select/icon"]').addClass('invisible');
listEl.find('[data-cid="all"] i').removeClass('invisible');
listEl.find('[data-cid="all"] [component="category/select/icon"]').removeClass('invisible');
selectedCids = [];
}

7
src/views/partials/category/filter-dropdown-content.tpl
View File

@@ -19,7 +19,10 @@
{{{ if !hideAll }}}
<li role="presentation" class="category" data-cid="all">
<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="{{{ if allCategoriesUrl }}}{config.relative_path}/{allCategoriesUrl}{{{ else }}}#{{{ end }}}">
<div class="flex-grow-1">[[unread:all-categories]]</div>
<div class="flex-grow-1 d-flex gap-1 align-items-center">
<span class="icon d-inline-flex justify-content-center align-items-center align-middle rounded" style="width:24px; height: 24px; font-size: 12px;"><i class="fa fa-fw fa-list text-secondary"></i></span>
<span>[[unread:all-categories]]</span>
</div>
<i component="category/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{if selectedCategory}}}invisible{{{end}}}"></i>
</a>
</li>
@@ -33,7 +36,7 @@
{{{ if ./icon }}}
{buildCategoryIcon(@value, "24px", "rounded-circle")}
{{{ end }}}
{./name}
<span class="category-name">{./name}</span>
</div>
</span>
<i component="category/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{ if !./selected }}}invisible{{{ end }}}"></i>

12
src/views/partials/category/selector-dropdown-content.tpl
View File

@@ -1,13 +1,13 @@
<button type="button" class="btn btn-ghost btn-sm ff-secondary d-flex align-items-center gap-2 dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span component="category-selector-selected">
<span component="category-selector-selected" class="fw-semibold">
{{{ if (selectedCategory && !showCategorySelectLabel) }}}
<span class="category-item d-inline-flex align-items-center gap-1">
{buildCategoryIcon(selectedCategory, "24px", "rounded-circle")}
<span class="fw-semibold">{selectedCategory.name}</span>
<span class="category-name">{selectedCategory.name}</span>
</span>
{{{ else }}}
<i class="fa fa-fw {{{ if selectCategoryIcon }}}{selectCategoryIcon}{{{ else }}}fa-list{{{ end }}} text-primary"></i>
<span class="visible-md-inline visible-lg-inline fw-semibold">{{{ if selectCategoryLabel }}}{selectCategoryLabel}{{{ else }}}[[topic:thread-tools.select-category]]{{{ end }}}</span>
<span class="d-none d-md-inline">{{{ if selectCategoryLabel }}}{selectCategoryLabel}{{{ else }}}[[topic:thread-tools.select-category]]{{{ end }}}</span>
{{{ end }}}
</span>
</button>
@@ -25,12 +25,12 @@
<li role="presentation" class="category {{{ if ./disabledClass }}}disabled {{{ end }}}" data-cid="{./cid}" data-name="{./name}" data-parent-cid="{./parentCid}">
<a class="dropdown-item rounded-1 {{{ if ./disabledClass }}}disabled{{{ end }}}" role="menuitem" href="#">{./level}
<span component="category-markup" style="{{{ if ./match }}}font-weight: bold;{{{end}}}">
<div class="category-item d-inline-flex align-items-center gap-1">
<span class="category-item d-inline-flex align-items-center gap-1">
{{{ if ./icon }}}
{buildCategoryIcon(@value, "24px", "rounded-circle")}
{{{ end }}}
{./name}
</div>
<span class="category-name">{./name}</span>
</span>
</span>
</a>
</li>