Fovway/NoteJS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Улучшена поддержка цветового акцента пользователя на страницах заметок и профиля

Browse Source 
- Реализовано динамическое изменение цвета акцента на основе данных пользователя для предотвращения FOUC.
- Добавлен inline CSS для корректного отображения цвета акцента в HTML.
- Обновлены стили для тегов, чтобы использовать белый фон вместо светло-голубого.
This commit is contained in:
Fovway 2025-10-21 00:00:35 +07:00
parent 8354e64ae7
commit b831dcc52c
3 changed files with 78 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
public/app.js
View File

@ -1503,14 +1503,14 @@ async function loadUserInfo() {
userAvatarContainer.style.display = "none"; userAvatarContainer.style.display = "none";
} }
// Применяем цветовой акцент пользователя // Применяем цветовой акцент пользователя (только если отличается от текущего)
if (user.accent_color) { const currentColor = getComputedStyle(document.documentElement)
document.documentElement.style.setProperty( .getPropertyValue("--accent-color")
"--accent-color", .trim();
user.accent_color const newColor = user.accent_color || "#007bff";
);
} else { if (currentColor !== newColor) {
document.documentElement.style.setProperty("--accent-color", "#007bff"); document.documentElement.style.setProperty("--accent-color", newColor);
} }
} }
} catch (error) { } catch (error) {

4
public/style.css
View File

@ -883,7 +883,7 @@ textarea:focus {
.tag { .tag {
display: inline-block; display: inline-block;
padding: 4px 8px; padding: 4px 8px;
background-color: #e7f3ff; background-color: #ffffff;
color: var(--accent-color, #007bff); color: var(--accent-color, #007bff);
border: 1px solid var(--accent-color, #007bff); border: 1px solid var(--accent-color, #007bff);
border-radius: 12px; border-radius: 12px;
@ -915,7 +915,7 @@ textarea:focus {
.textNote .tag-in-note { .textNote .tag-in-note {
display: inline-block; display: inline-block;
padding: 2px 6px; padding: 2px 6px;
background-color: #e7f3ff; background-color: #ffffff;
color: var(--accent-color, #007bff); color: var(--accent-color, #007bff);
border: 1px solid var(--accent-color, #007bff); border: 1px solid var(--accent-color, #007bff);
border-radius: 8px; border-radius: 8px;

70
server.js
View File

@ -468,7 +468,40 @@ app.get("/api/user", requireAuth, (req, res) => {
// Страница с заметками (требует аутентификации) // Страница с заметками (требует аутентификации)
app.get("/notes", requireAuth, (req, res) => { app.get("/notes", requireAuth, (req, res) => {
res.sendFile(path.join(__dirname, "public", "notes.html")); // Получаем цвет пользователя для предотвращения FOUC
const sql = "SELECT accent_color FROM users WHERE id = ?";
db.get(sql, [req.session.userId], (err, user) => {
if (err) {
console.error("Ошибка получения цвета пользователя:", err.message);
return res.sendFile(path.join(__dirname, "public", "notes.html"));
}
const accentColor = user?.accent_color || "#007bff";
// Читаем HTML файл
fs.readFile(
path.join(__dirname, "public", "notes.html"),
"utf8",
(err, html) => {
if (err) {
console.error("Ошибка чтения файла notes.html:", err.message);
return res.sendFile(path.join(__dirname, "public", "notes.html"));
}
// Вставляем inline CSS с правильным цветом в самое начало head для предотвращения FOUC
const inlineCSS = `<style>
:root, html { --accent-color: ${accentColor} !important; }
* { --accent-color: ${accentColor} !important; }
</style>`;
const modifiedHtml = html.replace(
/<head>/i,
`<head>\n ${inlineCSS}`
);
res.send(modifiedHtml);
}
);
});
}); });
// API для поиска заметок с изображениями (должен быть ПЕРЕД /api/notes/:id) // API для поиска заметок с изображениями (должен быть ПЕРЕД /api/notes/:id)
@ -885,7 +918,40 @@ app.delete("/api/notes/:noteId/images/:imageId", requireAuth, (req, res) => {
// Страница личного кабинета // Страница личного кабинета
app.get("/profile", requireAuth, (req, res) => { app.get("/profile", requireAuth, (req, res) => {
res.sendFile(path.join(__dirname, "public", "profile.html")); // Получаем цвет пользователя для предотвращения FOUC
const sql = "SELECT accent_color FROM users WHERE id = ?";
db.get(sql, [req.session.userId], (err, user) => {
if (err) {
console.error("Ошибка получения цвета пользователя:", err.message);
return res.sendFile(path.join(__dirname, "public", "profile.html"));
}
const accentColor = user?.accent_color || "#007bff";
// Читаем HTML файл
fs.readFile(
path.join(__dirname, "public", "profile.html"),
"utf8",
(err, html) => {
if (err) {
console.error("Ошибка чтения файла profile.html:", err.message);
return res.sendFile(path.join(__dirname, "public", "profile.html"));
}
// Вставляем inline CSS с правильным цветом в самое начало head для предотвращения FOUC
const inlineCSS = `<style>
:root, html { --accent-color: ${accentColor} !important; }
* { --accent-color: ${accentColor} !important; }
</style>`;
const modifiedHtml = html.replace(
/<head>/i,
`<head>\n ${inlineCSS}`
);
res.send(modifiedHtml);
}
);
});
}); });
// API для обновления профиля // API для обновления профиля