Fovway/noteJS-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Обновлен компонент TagsFilter для улучшения обработки кликов по тегам, добавлена поддержка touch-событий и сброс фокуса после клика. Изменены стили для тегов в мобильной версии, улучшена адаптивность и предотвращение "залипания" на устройствах с сенсорным экраном.

Browse Source
This commit is contained in:
Fovway 2025-11-02 23:19:15 +07:00
parent 10f7fe3556
commit feca528d1b
2 changed files with 41 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/search/TagsFilter.tsx
View File

@ -30,12 +30,15 @@ export const TagsFilter: React.FC<TagsFilterProps> = ({ notes = [] }) => {
const tagCounts = getAllTags(); const tagCounts = getAllTags();
const sortedTags = Object.keys(tagCounts).sort(); const sortedTags = Object.keys(tagCounts).sort();
const handleTagClick = (tag: string) => { const handleTagClick = (tag: string, event: React.MouseEvent<HTMLSpanElement>) => {
event.preventDefault();
if (selectedTag === tag) { if (selectedTag === tag) {
dispatch(setSelectedTag(null)); dispatch(setSelectedTag(null));
} else { } else {
dispatch(setSelectedTag(tag)); dispatch(setSelectedTag(tag));
} }
// Сбрасываем фокус после клика для предотвращения сохранения состояния :active
(event.currentTarget as HTMLElement).blur();
}; };
if (sortedTags.length === 0) { if (sortedTags.length === 0) {
@ -72,7 +75,11 @@ export const TagsFilter: React.FC<TagsFilterProps> = ({ notes = [] }) => {
key={tag} key={tag}
className={`tag ${isActive ? "active" : ""}`} className={`tag ${isActive ? "active" : ""}`}
data-tag={tag} data-tag={tag}
onClick={() => handleTagClick(tag)} onClick={(e) => handleTagClick(tag, e)}
onTouchEnd={(e) => {
// Дополнительная обработка для touch-событий
e.currentTarget.blur();
}}
> >
#{tag} #{tag}
<span className="tag-count">{count}</span> <span className="tag-count">{count}</span>

39
src/styles/style.css
View File

@ -2562,19 +2562,49 @@ textarea:focus {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
word-break: break-word; word-break: break-word;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
} }
.mobile-sidebar .tag:hover { .mobile-sidebar .tag:not(.active) {
background-color: rgba(var(--accent-color-rgb), 0.1) !important;
color: var(--accent-color) !important;
}
.mobile-sidebar .tag:not(.active):hover {
background-color: var(--accent-color, #007bff); background-color: var(--accent-color, #007bff);
color: white; color: white;
} }
/* Отключаем hover эффекты на touch-устройствах для предотвращения "залипания" */
@media (hover: none) and (pointer: coarse) {
.mobile-sidebar .tag:not(.active):hover {
background-color: rgba(var(--accent-color-rgb), 0.1) !important;
color: var(--accent-color) !important;
}
}
.mobile-sidebar .tag:not(.active):active,
.mobile-sidebar .tag:not(.active):focus,
.mobile-sidebar .tag:not(.active):focus:active {
background-color: rgba(var(--accent-color-rgb), 0.1) !important;
color: var(--accent-color) !important;
outline: none;
}
.mobile-sidebar .tag.active { .mobile-sidebar .tag.active {
background-color: var(--accent-color, #007bff); background-color: var(--accent-color, #007bff);
color: white; color: white;
font-weight: bold; font-weight: bold;
} }
.mobile-sidebar .tag.active:active,
.mobile-sidebar .tag.active:focus {
background-color: var(--accent-color, #007bff);
color: white;
outline: none;
}
.mobile-sidebar .tag-count { .mobile-sidebar .tag-count {
margin-left: 3px; margin-left: 3px;
font-size: 8px; font-size: 8px;
@ -4817,12 +4847,7 @@ textarea:focus {
} }
/* Очень маленькие экраны */ /* Очень маленькие экраны */
@media (max-width: 480px) {
.mobile-menu-btn {
top: 10px;
left: 10px;
padding: 8px 10px;
}
.mobile-menu-btn .iconify { .mobile-menu-btn .iconify {
font-size: 20px; font-size: 20px;