FromChat/web
1
0
Fork 0
mirror of https://github.com/fromchat-messenger/web.git synced 2026-09-22 19:15:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

Make a settings template

Browse Source
This commit is contained in:
grabic21
2025-08-22 14:26:53 +04:00
committed by denis0001-dev
Unverified
parent a47d48318f
commit 803f685180
8 changed files with 327 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/css/_panelchat.scss
-1
View File
@@ -89,7 +89,6 @@
img {
$size: 45px;
display: flex;
border-radius: 50%;
width: $size;
frontend/src/css/_settings.scss
+99
View File
@@ -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
View File
@@ -1,6 +1,7 @@
@use "auth";
@use "chat";
@use "profile";
@use "settings";
@use "panelchat";
@use "common/animations";
@use "common/components";
frontend/src/main.ts
+1
View File
@@ -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
+3
View File
@@ -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
+57 -57
View File
@@ -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';
// }
// });
frontend/src/settings.ts
+74
View File
@@ -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();
}