saturn
/
addressbook_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

interface fix

main
Satur@it-depot.ru 2025-03-11 11:17:17 +03:00
parent 2e1734f5ea
commit c5de24cc08
1 changed files with 35 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
templates/index.html
View File

@ -15,6 +15,7 @@
display: flex;
height: 100vh;
background-color: #f4f4f4;
transition: background-color 0.3s;
}
body.dark-theme {
background-color: #222;
@ -29,6 +30,7 @@
border-right: 1px solid #ccc;
padding: 10px;
background-color: #fff;
transition: width 0.3s;
}
#tree-container.dark-theme {
border-right-color: #444;
@ -160,6 +162,7 @@
color: #007bff;
text-decoration: none;
flex-grow: 1;
margin-right: 8px; /* Отступ перед иконками */
}
.connection-link.dark-theme {
color: #66b0ff;
@ -167,12 +170,26 @@
.action-buttons button {
margin: 0 2px;
padding: 2px 5px;
display: flex;
align-items: center;
}
.action-buttons.dark-theme button {
background-color: #555;
color: #fff;
border: 1px solid #777;
}
.edit-button, .copy-button, .note-button {
margin-left: 8px; /* Отступ слева от текста */
background: none;
border: none;
cursor: pointer;
font-size: 14px;
color: #000;
padding: 0;
}
.edit-button.dark-theme, .copy-button.dark-theme, .note-button.dark-theme {
color: #fff; /* Темные иконки становятся белыми на темной теме */
}
#notes-content {
padding: 10px;
min-height: 200px;
@ -360,8 +377,16 @@
};
document.addEventListener('DOMContentLoaded', () => {
// Восстановление ширины окна с папками из localStorage
const savedWidth = localStorage.getItem('treeContainerWidth');
if (savedWidth) {
document.getElementById('tree-container').style.width = savedWidth + 'px';
}
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const defaultTheme = savedTheme || (prefersDark ? 'dark' : 'light');
if (defaultTheme === 'dark') {
document.body.classList.add('dark-theme');
document.getElementById('installs-container').classList.add('dark-theme');
document.getElementById('tree-container').classList.add('dark-theme');
@ -373,10 +398,14 @@
document.getElementById('splitter').classList.add('dark-theme');
document.querySelector('.theme-toggle').classList.add('dark-theme');
document.querySelector('#add-record-button').classList.add('dark-theme');
document.querySelectorAll('.install-item').forEach(item => item.classList.add('dark-theme'));
document.querySelector('.header').classList.add('dark-theme');
document.querySelectorAll('.install-item').forEach(item => item.classList.add('dark-theme'));
$('#folder-tree').addClass('jstree-default-dark');
document.querySelector('.theme-toggle').textContent = 'Светлая тема';
} else {
document.querySelector('.theme-toggle').textContent = 'Темная тема';
}
localStorage.setItem('theme', defaultTheme);
$('#installs-list').on('click', '.action-buttons button:nth-child(2)', function () {
const installId = $(this).closest('.install-item').data('id');
@ -411,6 +440,9 @@
document.addEventListener('mouseup', () => {
isResizing = false;
document.body.style.cursor = 'default';
// Сохраняем ширину в localStorage
const width = treeContainer.offsetWidth;
localStorage.setItem('treeContainerWidth', width);
});
document.addEventListener('keydown', (e) => {
@ -707,7 +739,7 @@
<div class="computer-name">${item.computer_name} <button class="edit-button ${isDarkTheme ? 'dark-theme' : ''}" onclick="editField(${item.id}, 'computer_name', '${item.computer_name}')">✏️</button></div>
<div class="connection-id"><span class="protocol-icon">${protocolIcons[item.protocol]}</span><a href="${protocolLinks[item.protocol]}${item.rust_id}" class="connection-link ${isDarkTheme ? 'dark-theme' : ''}" target="_blank">${item.rust_id}</a><span class="${statusClass}"></span> <button class="copy-button ${isDarkTheme ? 'dark-theme' : ''}" onclick="copyToClipboard('${item.rust_id}')">📋</button> <button class="edit-button ${isDarkTheme ? 'dark-theme' : ''}" onclick="editField(${item.id}, 'rust_id', '${item.rust_id}')">✏️</button></div>
<div class="install-time">${item.install_time} <button class="edit-button ${isDarkTheme ? 'dark-theme' : ''}" onclick="editField(${item.id}, 'install_time', '${item.install_time}')">✏️</button></div>
<div class="actions"><span class="action-buttons"><button onclick="deleteInstall(${item.id})">Удалить</button> <button class="note-button">Заметка</button></span></div>
<div class="actions"><span class="action-buttons"><button onclick="deleteInstall(${item.id})">Удалить</button> <button class="note-button ${isDarkTheme ? 'dark-theme' : ''}">Заметка</button></span></div>
</div>
`;
}).join(''));