Добавлено управление цветом акцента пользователя в заголовке и на странице профиля, улучшена логика отображения длинных заметок с возможностью их раскрытия, а также обновлены стили кнопки "Показать больше".
This commit is contained in:
parent
dc8f1f53fc
commit
6ed6e045fe
@ -12,6 +12,8 @@ import { authApi } from "../../api/authApi";
|
||||
import { userApi } from "../../api/userApi";
|
||||
import { ThemeToggle } from "../common/ThemeToggle";
|
||||
import { setUser, setAiSettings } from "../../store/slices/profileSlice";
|
||||
import { setAccentColor as setAccentColorAction } from "../../store/slices/uiSlice";
|
||||
import { setAccentColor } from "../../utils/colorUtils";
|
||||
|
||||
interface HeaderProps {
|
||||
onFilterChange?: (hasFilters: boolean) => void;
|
||||
@ -44,6 +46,11 @@ export const Header: React.FC<HeaderProps> = ({
|
||||
const userData = await userApi.getProfile();
|
||||
dispatch(setUser(userData));
|
||||
|
||||
// Устанавливаем цвет акцента из профиля пользователя
|
||||
const accent = userData.accent_color || "#007bff";
|
||||
dispatch(setAccentColorAction(accent));
|
||||
setAccentColor(accent);
|
||||
|
||||
// Загружаем AI настройки
|
||||
try {
|
||||
const aiSettings = await userApi.getAiSettings();
|
||||
|
||||
@ -45,10 +45,9 @@ export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
|
||||
};
|
||||
}, [showHeaderDropdown]);
|
||||
|
||||
|
||||
const handleMouseDown = (e: React.MouseEvent) => {
|
||||
// Не начинаем перетаскивание если кликнули на кнопку
|
||||
if ((e.target as HTMLElement).closest('.btnMarkdown')) return;
|
||||
if ((e.target as HTMLElement).closest(".btnMarkdown")) return;
|
||||
|
||||
if (!containerRef.current) return;
|
||||
setIsDragging(true);
|
||||
@ -71,16 +70,16 @@ export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
|
||||
// Обработчики для document чтобы отслеживать mouseMove и mouseUp даже вне элемента
|
||||
useEffect(() => {
|
||||
if (isDragging) {
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
document.addEventListener("mousemove", handleMouseMove);
|
||||
document.addEventListener("mouseup", handleMouseUp);
|
||||
} else {
|
||||
document.removeEventListener('mousemove', handleMouseMove);
|
||||
document.removeEventListener('mouseup', handleMouseUp);
|
||||
document.removeEventListener("mousemove", handleMouseMove);
|
||||
document.removeEventListener("mouseup", handleMouseUp);
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('mousemove', handleMouseMove);
|
||||
document.removeEventListener('mouseup', handleMouseUp);
|
||||
document.removeEventListener("mousemove", handleMouseMove);
|
||||
document.removeEventListener("mouseup", handleMouseUp);
|
||||
};
|
||||
}, [isDragging]);
|
||||
|
||||
@ -91,7 +90,14 @@ export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
|
||||
className="markdown-buttons"
|
||||
ref={containerRef}
|
||||
onMouseDown={handleMouseDown}
|
||||
style={{ cursor: isDragging ? 'grabbing' : (containerRef.current && containerRef.current.scrollWidth > containerRef.current.clientWidth ? 'grab' : 'default') }}
|
||||
style={{
|
||||
cursor: isDragging
|
||||
? "grabbing"
|
||||
: containerRef.current &&
|
||||
containerRef.current.scrollWidth > containerRef.current.clientWidth
|
||||
? "grab"
|
||||
: "default",
|
||||
}}
|
||||
>
|
||||
{buttons.map((btn) => (
|
||||
<button
|
||||
|
||||
@ -53,9 +53,12 @@ export const NoteItem: React.FC<NoteItemProps> = ({
|
||||
strikethrough: false,
|
||||
});
|
||||
const [localPreviewMode, setLocalPreviewMode] = useState(false);
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const [isLongNote, setIsLongNote] = useState(false);
|
||||
const editTextareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const imageInputRef = useRef<HTMLInputElement>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const textNoteRef = useRef<HTMLDivElement>(null);
|
||||
const searchQuery = useAppSelector((state) => state.notes.searchQuery);
|
||||
const isPreviewMode = useAppSelector((state) => state.ui.isPreviewMode);
|
||||
const aiEnabled = useAppSelector((state) => state.profile.aiEnabled);
|
||||
@ -964,6 +967,54 @@ export const NoteItem: React.FC<NoteItemProps> = ({
|
||||
dispatch(setSelectedTag(tag));
|
||||
};
|
||||
|
||||
const toggleExpand = () => {
|
||||
setIsExpanded(!isExpanded);
|
||||
};
|
||||
|
||||
// Проверка, является ли заметка длинной
|
||||
useEffect(() => {
|
||||
if (isEditing) {
|
||||
setIsExpanded(false);
|
||||
setIsLongNote(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!textNoteRef.current) return;
|
||||
|
||||
const checkNoteLength = () => {
|
||||
const element = textNoteRef.current;
|
||||
if (!element) return;
|
||||
|
||||
// Временно убираем класс collapsed для точного измерения
|
||||
const wasCollapsed = element.classList.contains("collapsed");
|
||||
if (wasCollapsed) {
|
||||
element.classList.remove("collapsed");
|
||||
}
|
||||
|
||||
// Получаем реальную высоту контента
|
||||
const scrollHeight = element.scrollHeight;
|
||||
|
||||
// Восстанавливаем класс если он был
|
||||
if (wasCollapsed && !isExpanded) {
|
||||
element.classList.add("collapsed");
|
||||
}
|
||||
|
||||
// Считаем заметку длинной, если она больше 300px (максимальная высота свернутой заметки)
|
||||
const isLong = scrollHeight > 300;
|
||||
setIsLongNote(isLong);
|
||||
};
|
||||
|
||||
// Небольшая задержка для того, чтобы контент успел отрендериться
|
||||
const timer = setTimeout(checkNoteLength, 100);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [note.content, isEditing, isExpanded]);
|
||||
|
||||
// Сбрасываем состояние раскрытия при изменении заметки
|
||||
useEffect(() => {
|
||||
setIsExpanded(false);
|
||||
}, [note.id]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
@ -1271,7 +1322,8 @@ export const NoteItem: React.FC<NoteItemProps> = ({
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
className="textNote"
|
||||
ref={textNoteRef}
|
||||
className={`textNote ${isLongNote && !isExpanded ? "collapsed" : ""}`}
|
||||
data-original-content={note.content}
|
||||
dangerouslySetInnerHTML={{ __html: formatContent() }}
|
||||
onClick={(e) => {
|
||||
@ -1284,6 +1336,16 @@ export const NoteItem: React.FC<NoteItemProps> = ({
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{isLongNote && (
|
||||
<button
|
||||
className="show-more-btn"
|
||||
onClick={toggleExpand}
|
||||
type="button"
|
||||
>
|
||||
<Icon icon={isExpanded ? "mdi:chevron-up" : "mdi:chevron-down"} />
|
||||
<span>{isExpanded ? "Скрыть" : "Раскрыть"}</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{note.images && note.images.length > 0 && (
|
||||
<div className="note-images-container">
|
||||
|
||||
@ -6,6 +6,8 @@ import { userApi } from "../api/userApi";
|
||||
import { authApi } from "../api/authApi";
|
||||
import { clearAuth } from "../store/slices/authSlice";
|
||||
import { setUser, setAiSettings } from "../store/slices/profileSlice";
|
||||
import { setAccentColor as setAccentColorAction } from "../store/slices/uiSlice";
|
||||
import { setAccentColor } from "../utils/colorUtils";
|
||||
import { useNotification } from "../hooks/useNotification";
|
||||
import { Modal } from "../components/common/Modal";
|
||||
import { ThemeToggle } from "../components/common/ThemeToggle";
|
||||
@ -42,6 +44,11 @@ const ProfilePage: React.FC = () => {
|
||||
setUsername(userData.username || "");
|
||||
setEmail(userData.email || "");
|
||||
|
||||
// Устанавливаем цвет акцента из профиля пользователя
|
||||
const accent = userData.accent_color || "#007bff";
|
||||
dispatch(setAccentColorAction(accent));
|
||||
setAccentColor(accent);
|
||||
|
||||
if (userData.avatar) {
|
||||
setAvatarUrl(userData.avatar);
|
||||
setHasAvatar(true);
|
||||
|
||||
@ -909,7 +909,9 @@ textarea:focus {
|
||||
}
|
||||
|
||||
.show-more-btn {
|
||||
display: block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
padding: 8px;
|
||||
@ -921,6 +923,7 @@ textarea:focus {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-align: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.show-more-btn:hover {
|
||||
@ -1656,14 +1659,13 @@ textarea:focus {
|
||||
border: none;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
color: var(--accent-color, #007bff);
|
||||
color: var(--text-secondary);
|
||||
padding: 0 3px;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.calendar-nav:hover {
|
||||
color: var(--accent-color, #007bff);
|
||||
opacity: 0.8;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.calendar-weekdays {
|
||||
@ -1733,17 +1735,17 @@ textarea:focus {
|
||||
.calendar-month-year {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.calendar-nav {
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.calendar-nav:hover {
|
||||
opacity: 0.8;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.calendar-weekdays {
|
||||
@ -2133,14 +2135,13 @@ textarea:focus {
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
color: var(--accent-color, #007bff);
|
||||
color: var(--text-secondary);
|
||||
padding: 0 3px;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.mobile-sidebar .calendar-nav:hover {
|
||||
color: var(--accent-color, #007bff);
|
||||
opacity: 0.8;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
/* Календарь дней в слайдере */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user