From 803f6851800b99ba6e36ebaccb7bd9bf0111ccfc Mon Sep 17 00:00:00 2001 From: grabic21 Date: Fri, 22 Aug 2025 14:26:53 +0400 Subject: [PATCH] Make a settings template --- frontend/index.html | 93 ++++++++++++++++++++++++- frontend/src/css/_panelchat.scss | 1 - frontend/src/css/_settings.scss | 99 +++++++++++++++++++++++++++ frontend/src/css/style.scss | 1 + frontend/src/main.ts | 1 + frontend/src/material.ts | 3 + frontend/src/profile.ts | 114 +++++++++++++++---------------- frontend/src/settings.ts | 74 ++++++++++++++++++++ 8 files changed, 327 insertions(+), 59 deletions(-) create mode 100644 frontend/src/css/_settings.scss create mode 100644 frontend/src/settings.ts diff --git a/frontend/index.html b/frontend/index.html index 625ca33..dc6280e 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -152,7 +152,7 @@ - +
@@ -206,6 +206,97 @@ Закрыть

+ +
+
+
+ + Настройки +
+
+ + Профиль + Уведомления + Внешний вид + Безопасность + Язык + Хранилище + Помощь + О приложении + +
+
+

Профиль

+ + + + Сохранить изменения +
+ +
+

Уведомления

+ Новые сообщения + Звуковые уведомления + Уведомления о статусе + Email уведомления +
+ +
+

Внешний вид

+ + Тёмная + Светлая + Авто + + + Маленький + Средний + Большой + +
+ +
+

Безопасность

+ Изменить пароль + Двухфакторная аутентификация + Автоматический выход +
+ +
+

Язык

+ + Русский + English + Español + +
+ +
+

Хранилище

+

Использовано: 2.5 ГБ из 10 ГБ

+ + Очистить кэш +
+ +
+

Помощь

+ Руководство пользователя + Связаться с поддержкой + FAQ +
+ +
+

О приложении

+

Версия: 1.0.0

+

© 2024 Boost Chat. Все права защищены.

+ Политика конфиденциальности + Условия использования +
+
+
+
+
+ \ No newline at end of file diff --git a/frontend/src/css/_panelchat.scss b/frontend/src/css/_panelchat.scss index d9811d2..a151459 100644 --- a/frontend/src/css/_panelchat.scss +++ b/frontend/src/css/_panelchat.scss @@ -89,7 +89,6 @@ img { $size: 45px; - display: flex; border-radius: 50%; width: $size; diff --git a/frontend/src/css/_settings.scss b/frontend/src/css/_settings.scss new file mode 100644 index 0000000..4607769 --- /dev/null +++ b/frontend/src/css/_settings.scss @@ -0,0 +1,99 @@ +@use "common/colors" as *; +@use "common/material" as *; + +#settings-dialog { + .fullscreen-wrapper { + display: flex; + align-items: center; + justify-content: center; + height: calc(100vh - (1.5rem * 2)); + width: 100%; + position: relative; + + #settings-dialog-inner { + max-width: 1200px; + max-height: 1000px; + width: 100%; + height: 100%; + + .header { + display: flex; + flex-direction: row; + gap: 10px; + margin-bottom: 16px; + } + + #settings-menu { + display: flex; + flex-direction: row; + gap: 16px; + + mdui-list { + max-width: 280px; + padding-right: 16px; + overflow-y: auto; + } + + .screen { + flex: 1; + overflow-y: auto; + position: relative; + + .settings-panel { + display: flex; + flex-direction: column; + gap: 16px; + opacity: 0; + visibility: hidden; + transform: translateY(20px); + transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; + position: absolute; + top: 0; + left: 0; + width: 100%; + + &.active { + opacity: 1; + visibility: visible; + transform: translateY(0); + position: relative; + } + + h3 { + margin: 0 0 16px 0; + color: $color-dark-on-surface; + } + + mdui-text-field, + mdui-select, + mdui-switch, + mdui-button { + margin-bottom: 8px; + } + + mdui-switch { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 0; + border-bottom: 1px solid $color-dark-outline; + + &:last-child { + border-bottom: none; + } + } + + p { + margin: 8px 0; + color: $color-dark-on-surface-variant; + } + + mdui-linear-progress { + margin: 16px 0; + } + } + } + } + } + } +} \ No newline at end of file diff --git a/frontend/src/css/style.scss b/frontend/src/css/style.scss index 682b0ef..3906aeb 100644 --- a/frontend/src/css/style.scss +++ b/frontend/src/css/style.scss @@ -1,6 +1,7 @@ @use "auth"; @use "chat"; @use "profile"; +@use "settings"; @use "panelchat"; @use "common/animations"; @use "common/components"; diff --git a/frontend/src/main.ts b/frontend/src/main.ts index 14357ba..0a92896 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -4,6 +4,7 @@ import "mdui/mdui.css"; import "./links"; import "./material"; import "./chat"; +import "./settings"; import "./leftpanel"; import "./init"; import "./profile"; \ No newline at end of file diff --git a/frontend/src/material.ts b/frontend/src/material.ts index 59d9a91..a8dd8e1 100644 --- a/frontend/src/material.ts +++ b/frontend/src/material.ts @@ -9,6 +9,9 @@ import 'mdui/components/fab'; import 'mdui/components/dialog'; import 'mdui/components/button'; import 'mdui/components/text-field'; +import 'mdui/components/button-icon'; +import 'mdui/components/top-app-bar'; +import 'mdui/components/top-app-bar-title'; import { setColorScheme } from 'mdui/functions/setColorScheme.js'; diff --git a/frontend/src/profile.ts b/frontend/src/profile.ts index 946d004..0377d9e 100644 --- a/frontend/src/profile.ts +++ b/frontend/src/profile.ts @@ -1,63 +1,63 @@ -const fileInput = document.getElementById('fileInput') as HTMLInputElement; -const preview = document.getElementById('preview') as HTMLImageElement; -const preview1 = document.getElementById('preview1') as HTMLImageElement; -const button = document.getElementById('uploadButton')!; +// const fileInput = document.getElementById('fileInput') as HTMLInputElement; +// const preview = document.getElementById('preview') as HTMLImageElement; +// const preview1 = document.getElementById('preview1') as HTMLImageElement; +// const button = document.getElementById('uploadButton')!; -if (fileInput && preview && button) { - // при клике по кнопке откроем диалог выбора файла - button.addEventListener('click', () => { - fileInput.click(); - }); +// if (fileInput && preview && button) { +// // при клике по кнопке откроем диалог выбора файла +// button.addEventListener('click', () => { +// fileInput.click(); +// }); - // при выборе файла — показываем его - fileInput.addEventListener('change', () => { - const file: File | null = fileInput.files ? fileInput.files[0] : null; - if (file) { - const reader: FileReader = new FileReader(); - reader.onload = (e: ProgressEvent) => { - if (e.target && typeof e.target.result === 'string') { - preview.src = e.target.result; - preview1.src = e.target.result; - preview.style.display = 'block'; - } - }; - reader.readAsDataURL(file); - } - }); -} +// // при выборе файла — показываем его +// fileInput.addEventListener('change', () => { +// const file: File | null = fileInput.files ? fileInput.files[0] : null; +// if (file) { +// const reader: FileReader = new FileReader(); +// reader.onload = (e: ProgressEvent) => { +// if (e.target && typeof e.target.result === 'string') { +// preview.src = e.target.result; +// preview1.src = e.target.result; +// preview.style.display = 'block'; +// } +// }; +// reader.readAsDataURL(file); +// } +// }); +// } -const textDiv = document.getElementById('text-nik')!; -const input = document.getElementById('nik') as HTMLInputElement; -const button1 = document.getElementById('change-name')!; +// const textDiv = document.getElementById('text-nik')!; +// const input = document.getElementById('nik') as HTMLInputElement; +// const button1 = document.getElementById('change-name')!; -button1.addEventListener('click', () => { - if (input.style.display === 'none') { - // Переводим в режим редактирования - input.value = textDiv.textContent || ''; - textDiv.style.display = 'none'; - input.style.display = 'flex'; - } else { - // Сохраняем изменения - textDiv.textContent = input.value; - textDiv.style.display = 'flex'; - input.style.display = 'none'; - } -}); +// button1.addEventListener('click', () => { +// if (input.style.display === 'none') { +// // Переводим в режим редактирования +// input.value = textDiv.textContent || ''; +// textDiv.style.display = 'none'; +// input.style.display = 'flex'; +// } else { +// // Сохраняем изменения +// textDiv.textContent = input.value; +// textDiv.style.display = 'flex'; +// input.style.display = 'none'; +// } +// }); -const textDiv2 = document.getElementById('text-discr')!; -const input2 = document.getElementById('discr') as HTMLInputElement; -const button2 = document.getElementById('change-discription')!; +// const textDiv2 = document.getElementById('text-discr')!; +// const input2 = document.getElementById('discr') as HTMLInputElement; +// const button2 = document.getElementById('change-discription')!; -button2.addEventListener('click', () => { - if (input2.style.display === 'none') { - // Переводим в режим редактирования - input2.value = textDiv2.textContent || ''; - textDiv2.style.display = 'none'; - input2.style.display = 'flex'; - } else { - // Сохраняем изменения - textDiv2.textContent = input2.value; - textDiv2.style.display = 'flex'; - input2.style.display = 'none'; - } -}); \ No newline at end of file +// button2.addEventListener('click', () => { +// if (input2.style.display === 'none') { +// // Переводим в режим редактирования +// input2.value = textDiv2.textContent || ''; +// textDiv2.style.display = 'none'; +// input2.style.display = 'flex'; +// } else { +// // Сохраняем изменения +// textDiv2.textContent = input2.value; +// textDiv2.style.display = 'flex'; +// input2.style.display = 'none'; +// } +// }); \ No newline at end of file diff --git a/frontend/src/settings.ts b/frontend/src/settings.ts new file mode 100644 index 0000000..c575858 --- /dev/null +++ b/frontend/src/settings.ts @@ -0,0 +1,74 @@ +import type { Dialog } from "mdui/components/dialog"; + +const dialog = document.getElementById('settings-dialog') as Dialog; +const openButton = document.getElementById('settings-open')!; +const closeButton = document.getElementById('settings-close')!; + +// Settings panel management +const settingsList = document.querySelector('#settings-menu mdui-list')!; +const settingsPanels = document.querySelectorAll('.settings-panel'); + +// Initialize settings +function initializeSettings() { + // Add click listeners to all list items + const listItems = settingsList.querySelectorAll('mdui-list-item'); + + // Create a mapping between list items and their corresponding panels + const panelMapping = { + 'Профиль': 'profile-settings', + 'Уведомления': 'notifications-settings', + 'Внешний вид': 'appearance-settings', + 'Безопасность': 'security-settings', + 'Язык': 'language-settings', + 'Хранилище': 'storage-settings', + 'Помощь': 'help-settings', + 'О приложении': 'about-settings' + }; + + listItems.forEach((item) => { + item.addEventListener('click', () => { + // Remove active class from all items and panels + listItems.forEach(li => li.removeAttribute('active')); + settingsPanels.forEach(panel => panel.classList.remove('active')); + + // Add active class to clicked item + item.setAttribute('active', ''); + + // Show corresponding panel using the mapping + const itemText = item.textContent?.trim(); + const panelId = panelMapping[itemText as keyof typeof panelMapping]; + + if (panelId) { + const targetPanel = document.getElementById(panelId); + if (targetPanel) { + targetPanel.classList.add('active'); + } + } + }); + }); +} + +// Dialog event listeners +openButton.addEventListener('click', () => { + dialog.open = true; + // Reset to first panel when opening + const firstItem = settingsList.querySelector('mdui-list-item'); + const firstPanel = document.querySelector('.settings-panel'); + if (firstItem && firstPanel) { + settingsList.querySelectorAll('mdui-list-item').forEach(li => li.removeAttribute('active')); + settingsPanels.forEach(panel => panel.classList.remove('active')); + firstItem.setAttribute('active', ''); + firstPanel.classList.add('active'); + } +}); + +closeButton.addEventListener('click', () => { + dialog.open = false; +}); + +// Initialize when DOM is loaded +if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', initializeSettings); +} else { + initializeSettings(); +}