Make a settings template

frontend/index.html

@@ -152,7 +152,7 @@
                         </mdui-tabs>
                     </div>
                     <mdui-bottom-app-bar>
-                        <mdui-button-icon icon="settings--filled"></mdui-button-icon>
+                        <mdui-button-icon icon="settings--filled" id="settings-open"></mdui-button-icon>
                         <mdui-button-icon icon="group_add--filled"></mdui-button-icon>
                         <div style="flex-grow: 1"></div>
                         <mdui-fab icon="edit--filled"></mdui-fab>
@@ -206,6 +206,97 @@
                 <mdui-button id="profile-dialog-close">Закрыть</mdui-button>
             </p>
         </mdui-dialog>
+        <mdui-dialog id="settings-dialog" close-on-overlay-click close-on-esc fullscreen>
+            <div class="fullscreen-wrapper">
+                <div id="settings-dialog-inner">
+                    <div class="header">
+                        <mdui-button-icon icon="close" id="settings-close"></mdui-button-icon>
+                        <mdui-top-app-bar-title>Настройки</mdui-top-app-bar-title>
+                    </div>
+                    <div id="settings-menu">
+                        <mdui-list>
+                            <mdui-list-item icon="account_circle--filled" rounded active>Профиль</mdui-list-item>
+                            <mdui-list-item icon="notifications--filled" rounded>Уведомления</mdui-list-item>
+                            <mdui-list-item icon="palette--filled" rounded>Внешний вид</mdui-list-item>
+                            <mdui-list-item icon="security--filled" rounded>Безопасность</mdui-list-item>
+                            <mdui-list-item icon="language--filled" rounded>Язык</mdui-list-item>
+                            <mdui-list-item icon="storage--filled" rounded>Хранилище</mdui-list-item>
+                            <mdui-list-item icon="help--filled" rounded>Помощь</mdui-list-item>
+                            <mdui-list-item icon="info--filled" rounded>О приложении</mdui-list-item>
+                        </mdui-list>
+                        <div class="screen">
+                            <div id="profile-settings" class="settings-panel active">
+                                <h3>Профиль</h3>
+                                <mdui-text-field label="Имя пользователя" variant="outlined" value="user123"></mdui-text-field>
+                                <mdui-text-field label="Email" variant="outlined" type="email" value="user@example.com"></mdui-text-field>
+                                <mdui-text-field label="О себе" variant="outlined" multiline rows="3" placeholder="Расскажите о себе..."></mdui-text-field>
+                                <mdui-button>Сохранить изменения</mdui-button>
+                            </div>
+                            
+                            <div id="notifications-settings" class="settings-panel">
+                                <h3>Уведомления</h3>
+                                <mdui-switch checked>Новые сообщения</mdui-switch>
+                                <mdui-switch checked>Звуковые уведомления</mdui-switch>
+                                <mdui-switch>Уведомления о статусе</mdui-switch>
+                                <mdui-switch checked>Email уведомления</mdui-switch>
+                            </div>
+                            
+                            <div id="appearance-settings" class="settings-panel">
+                                <h3>Внешний вид</h3>
+                                <mdui-select label="Тема" variant="outlined">
+                                    <mdui-menu-item value="dark">Тёмная</mdui-menu-item>
+                                    <mdui-menu-item value="light">Светлая</mdui-menu-item>
+                                    <mdui-menu-item value="auto">Авто</mdui-menu-item>
+                                </mdui-select>
+                                <mdui-select label="Размер шрифта" variant="outlined">
+                                    <mdui-menu-item value="small">Маленький</mdui-menu-item>
+                                    <mdui-menu-item value="medium">Средний</mdui-menu-item>
+                                    <mdui-menu-item value="large">Большой</mdui-menu-item>
+                                </mdui-select>
+                            </div>
+                            
+                            <div id="security-settings" class="settings-panel">
+                                <h3>Безопасность</h3>
+                                <mdui-button variant="outlined">Изменить пароль</mdui-button>
+                                <mdui-button variant="outlined">Двухфакторная аутентификация</mdui-button>
+                                <mdui-switch>Автоматический выход</mdui-switch>
+                            </div>
+                            
+                            <div id="language-settings" class="settings-panel">
+                                <h3>Язык</h3>
+                                <mdui-select label="Выберите язык" variant="outlined">
+                                    <mdui-menu-item value="ru">Русский</mdui-menu-item>
+                                    <mdui-menu-item value="en">English</mdui-menu-item>
+                                    <mdui-menu-item value="es">Español</mdui-menu-item>
+                                </mdui-select>
+                            </div>
+                            
+                            <div id="storage-settings" class="settings-panel">
+                                <h3>Хранилище</h3>
+                                <p>Использовано: 2.5 ГБ из 10 ГБ</p>
+                                <mdui-linear-progress value="25"></mdui-linear-progress>
+                                <mdui-button variant="outlined">Очистить кэш</mdui-button>
+                            </div>
+                            
+                            <div id="help-settings" class="settings-panel">
+                                <h3>Помощь</h3>
+                                <mdui-button variant="outlined">Руководство пользователя</mdui-button>
+                                <mdui-button variant="outlined">Связаться с поддержкой</mdui-button>
+                                <mdui-button variant="outlined">FAQ</mdui-button>
+                            </div>
+                            
+                            <div id="about-settings" class="settings-panel">
+                                <h3>О приложении</h3>
+                                <p>Версия: 1.0.0</p>
+                                <p>© 2024 Boost Chat. Все права защищены.</p>
+                                <mdui-button variant="outlined">Политика конфиденциальности</mdui-button>
+                                <mdui-button variant="outlined">Условия использования</mdui-button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </mdui-dialog>
         <script src="src/main.ts" type="module"></script>
     </body>
 </html>

frontend/src/css/_panelchat.scss

@@ -89,7 +89,6 @@
 
             img {
                 $size: 45px;
-
                 display: flex;
                 border-radius: 50%;
                 width: $size;

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;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

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";

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";

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';
 

frontend/src/profile.ts

@@ -1,63 +1,63 @@
-const fileInput = document.getElementById('fileInput') as HTMLInputElement;
+// const fileInput = document.getElementById('fileInput') as HTMLInputElement;
-const preview = document.getElementById('preview') as HTMLImageElement;
+// const preview = document.getElementById('preview') as HTMLImageElement;
-const preview1 = document.getElementById('preview1') as HTMLImageElement;
+// const preview1 = document.getElementById('preview1') as HTMLImageElement;
-const button = document.getElementById('uploadButton')!;
+// const button = document.getElementById('uploadButton')!;
 
-if (fileInput && preview && button) {
+// if (fileInput && preview && button) {
-    // при клике по кнопке откроем диалог выбора файла
+//     // при клике по кнопке откроем диалог выбора файла
-    button.addEventListener('click', () => {
+//     button.addEventListener('click', () => {
-        fileInput.click();
+//         fileInput.click();
-    });
+//     });
 
-    // при выборе файла — показываем его
+//     // при выборе файла — показываем его
-    fileInput.addEventListener('change', () => {
+//     fileInput.addEventListener('change', () => {
-        const file: File | null = fileInput.files ? fileInput.files[0] : null;
+//         const file: File | null = fileInput.files ? fileInput.files[0] : null;
-        if (file) {
+//         if (file) {
-            const reader: FileReader = new FileReader();
+//             const reader: FileReader = new FileReader();
-            reader.onload = (e: ProgressEvent<FileReader>) => {
+//             reader.onload = (e: ProgressEvent<FileReader>) => {
-                if (e.target && typeof e.target.result === 'string') {
+//                 if (e.target && typeof e.target.result === 'string') {
-                    preview.src = e.target.result;
+//                     preview.src = e.target.result;
-                    preview1.src = e.target.result;
+//                     preview1.src = e.target.result;
-                    preview.style.display = 'block';
+//                     preview.style.display = 'block';
-                }
+//                 }
-            };
+//             };
-            reader.readAsDataURL(file);
+//             reader.readAsDataURL(file);
-        }
+//         }
-    });
+//     });
-}
+// }
 
-const textDiv = document.getElementById('text-nik')!;
+// const textDiv = document.getElementById('text-nik')!;
-const input = document.getElementById('nik') as HTMLInputElement;
+// const input = document.getElementById('nik') as HTMLInputElement;
-const button1 = document.getElementById('change-name')!;
+// const button1 = document.getElementById('change-name')!;
 
-button1.addEventListener('click', () => {
+// button1.addEventListener('click', () => {
-    if (input.style.display === 'none') {
+//     if (input.style.display === 'none') {
-        // Переводим в режим редактирования
+//         // Переводим в режим редактирования
-        input.value = textDiv.textContent || '';
+//         input.value = textDiv.textContent || '';
-        textDiv.style.display = 'none';
+//         textDiv.style.display = 'none';
-        input.style.display = 'flex';
+//         input.style.display = 'flex';
-    } else {
+//     } else {
-        // Сохраняем изменения
+//         // Сохраняем изменения
-        textDiv.textContent = input.value;
+//         textDiv.textContent = input.value;
-        textDiv.style.display = 'flex';
+//         textDiv.style.display = 'flex';
-        input.style.display = 'none';
+//         input.style.display = 'none';
-    }
+//     }
-});
+// });
 
-const textDiv2 = document.getElementById('text-discr')!;
+// const textDiv2 = document.getElementById('text-discr')!;
-const input2 = document.getElementById('discr') as HTMLInputElement;
+// const input2 = document.getElementById('discr') as HTMLInputElement;
-const button2 = document.getElementById('change-discription')!;
+// const button2 = document.getElementById('change-discription')!;
 
-button2.addEventListener('click', () => {
+// button2.addEventListener('click', () => {
-    if (input2.style.display === 'none') {
+//     if (input2.style.display === 'none') {
-        // Переводим в режим редактирования
+//         // Переводим в режим редактирования
-        input2.value = textDiv2.textContent || '';
+//         input2.value = textDiv2.textContent || '';
-        textDiv2.style.display = 'none';
+//         textDiv2.style.display = 'none';
-        input2.style.display = 'flex';
+//         input2.style.display = 'flex';
-    } else {
+//     } else {
-        // Сохраняем изменения
+//         // Сохраняем изменения
-        textDiv2.textContent = input2.value;
+//         textDiv2.textContent = input2.value;
-        textDiv2.style.display = 'flex';
+//         textDiv2.style.display = 'flex';
-        input2.style.display = 'none';
+//         input2.style.display = 'none';
-    }
+//     }
-});
+// });

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();
+}