mirror of
https://github.com/fromchat-messenger/web.git
synced 2026-09-22 19:15:08 +03:00
Make a settings template
This commit is contained in:
grabic21
+92
-1
@@ -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>
|
||||
@@ -89,7 +89,6 @@
|
||||
|
||||
img {
|
||||
$size: 45px;
|
||||
|
||||
display: flex;
|
||||
border-radius: 50%;
|
||||
width: $size;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
@use "auth";
|
||||
@use "chat";
|
||||
@use "profile";
|
||||
@use "settings";
|
||||
@use "panelchat";
|
||||
@use "common/animations";
|
||||
@use "common/components";
|
||||
|
||||
@@ -4,6 +4,7 @@ import "mdui/mdui.css";
|
||||
import "./links";
|
||||
import "./material";
|
||||
import "./chat";
|
||||
import "./settings";
|
||||
import "./leftpanel";
|
||||
import "./init";
|
||||
import "./profile";
|
||||
@@ -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';
|
||||
|
||||
|
||||
+57
-57
@@ -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<FileReader>) => {
|
||||
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<FileReader>) => {
|
||||
// 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';
|
||||
}
|
||||
});
|
||||
// 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';
|
||||
// }
|
||||
// });
|
||||
@@ -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();
|
||||
}
|
||||
Reference in New Issue
Block a user