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

icons fix 2

main
Satur@it-depot.ru 2025-03-11 11:58:02 +03:00
parent b844621af2
commit e958668350
1 changed files with 60 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
templates/index.html
View File

@ -181,12 +181,14 @@
color: #fff; color: #fff;
border: 1px solid #777; border: 1px solid #777;
} }
/* Стили для иконок */
.custom-icon { .custom-icon {
height: 32px; height: 32px;
width: 32px; width: 32px;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-color: transparent;
border: none; border: none;
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
@ -202,17 +204,56 @@
/* Иконки для светлой темы */ /* Иконки для светлой темы */
.edit-icon { background-image: url('/icons/edit.png'); } .edit-icon { background-image: url('/icons/edit.png'); }
.copy-icon { background-image: url('/icons/copy.png'); } .copy-icon { background-image: url('/icons/copy.png'); }
.note-icon { background-image: url('/icons/note.png'); }
.delete-icon { background-image: url('/icons/delete.png'); }
.folder-edit-icon { background-image: url('/icons/edit.png'); }
.folder-delete-icon { background-image: url('/icons/delete.png'); }
/* Иконки для темной темы */ /* Иконки для темной темы */
.edit-icon.dark-theme { background-image: url('/icons/edit-dark.png'); } .edit-icon.dark-theme { background-image: url('/icons/edit-dark.png'); }
.copy-icon.dark-theme { background-image: url('/icons/copy-dark.png'); } .copy-icon.dark-theme { background-image: url('/icons/copy-dark.png'); }
.note-icon.dark-theme { background-image: url('/icons/note-dark.png'); } /* Иконки для папок (меньший размер) */
.delete-icon.dark-theme { background-image: url('/icons/delete-dark.png'); } .folder-edit-icon, .folder-delete-icon {
height: 16px;
width: 16px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
border: none;
padding: 0;
cursor: pointer;
transition: background-color 0.2s, transform 0.2s;
}
.folder-edit-icon:hover, .folder-delete-icon:hover {
background-color: #e0e0e0;
transform: scale(1.1);
}
.folder-edit-icon.dark-theme:hover, .folder-delete-icon.dark-theme:hover {
background-color: #444;
}
.folder-edit-icon { background-image: url('/icons/edit.png'); }
.folder-delete-icon { background-image: url('/icons/delete.png'); }
.folder-edit-icon.dark-theme { background-image: url('/icons/edit-dark.png'); } .folder-edit-icon.dark-theme { background-image: url('/icons/edit-dark.png'); }
.folder-delete-icon.dark-theme { background-image: url('/icons/delete-dark.png'); } .folder-delete-icon.dark-theme { background-image: url('/icons/delete-dark.png'); }
/* Стили для кнопок удаления и заметок */
.action-button {
margin: 0 2px;
padding: 5px 8px;
font-size: 12px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f9f9f9;
color: #333;
cursor: pointer;
transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.action-button:hover {
background-color: #e0e0e0;
}
.action-button.dark-theme {
background-color: #555;
color: #fff;
border-color: #777;
}
.action-button.dark-theme:hover {
background-color: #666;
}
#notes-content { #notes-content {
padding: 10px; padding: 10px;
min-height: 200px; min-height: 200px;
@ -422,6 +463,7 @@
document.querySelector('#add-record-button').classList.add('dark-theme'); document.querySelector('#add-record-button').classList.add('dark-theme');
document.querySelector('.header').classList.add('dark-theme'); document.querySelector('.header').classList.add('dark-theme');
document.querySelectorAll('.install-item').forEach(item => item.classList.add('dark-theme')); document.querySelectorAll('.install-item').forEach(item => item.classList.add('dark-theme'));
document.querySelectorAll('.action-button').forEach(button => button.classList.add('dark-theme'));
$('#folder-tree').addClass('jstree-default-dark'); $('#folder-tree').addClass('jstree-default-dark');
document.querySelector('.theme-toggle').textContent = 'Светлая тема'; document.querySelector('.theme-toggle').textContent = 'Светлая тема';
} else { } else {
@ -429,12 +471,6 @@
} }
localStorage.setItem('theme', defaultTheme); localStorage.setItem('theme', defaultTheme);
$('#installs-list').on('click', '.note-icon', function () {
const installId = $(this).closest('.install-item').data('id');
const install = allInstalls.find(i => i.id === installId);
openNoteModal(installId, install?.note || '');
});
const splitter = document.getElementById('splitter'); const splitter = document.getElementById('splitter');
const treeContainer = document.getElementById('tree-container'); const treeContainer = document.getElementById('tree-container');
let isResizing = false; let isResizing = false;
@ -506,6 +542,7 @@
const addRecordButton = document.getElementById('add-record-button'); const addRecordButton = document.getElementById('add-record-button');
const header = document.querySelector('.header'); const header = document.querySelector('.header');
const installItems = document.querySelectorAll('.install-item'); const installItems = document.querySelectorAll('.install-item');
const actionButtons = document.querySelectorAll('.action-button');
const folderTree = $('#folder-tree'); const folderTree = $('#folder-tree');
if (body.classList.contains('dark-theme')) { if (body.classList.contains('dark-theme')) {
@ -522,6 +559,7 @@
addRecordButton.classList.remove('dark-theme'); addRecordButton.classList.remove('dark-theme');
header.classList.remove('dark-theme'); header.classList.remove('dark-theme');
installItems.forEach(item => item.classList.remove('dark-theme')); installItems.forEach(item => item.classList.remove('dark-theme'));
actionButtons.forEach(button => button.classList.remove('dark-theme'));
folderTree.removeClass('jstree-default-dark'); folderTree.removeClass('jstree-default-dark');
themeToggle.textContent = 'Темная тема'; themeToggle.textContent = 'Темная тема';
localStorage.setItem('theme', 'light'); localStorage.setItem('theme', 'light');
@ -539,6 +577,7 @@
addRecordButton.classList.add('dark-theme'); addRecordButton.classList.add('dark-theme');
header.classList.add('dark-theme'); header.classList.add('dark-theme');
installItems.forEach(item => item.classList.add('dark-theme')); installItems.forEach(item => item.classList.add('dark-theme'));
actionButtons.forEach(button => button.classList.add('dark-theme'));
folderTree.addClass('jstree-default-dark'); folderTree.addClass('jstree-default-dark');
themeToggle.textContent = 'Светлая тема'; themeToggle.textContent = 'Светлая тема';
localStorage.setItem('theme', 'dark'); localStorage.setItem('theme', 'dark');
@ -560,8 +599,8 @@
].concat(sortedFolders.map(folder => ({ ].concat(sortedFolders.map(folder => ({
id: folder.id, id: folder.id,
text: `${folder.name} <span class="folder-actions">` + text: `${folder.name} <span class="folder-actions">` +
`<button class="custom-icon folder-edit-icon" onclick="editFolder(${folder.id}, '${folder.name}')"></button>` + `<button class="folder-edit-icon" onclick="editFolder(${folder.id}, '${folder.name}')"></button>` +
`<button class="custom-icon folder-delete-icon" onclick="deleteFolder(${folder.id})"></button></span>`, `<button class="folder-delete-icon" onclick="deleteFolder(${folder.id})"></button></span>`,
parent: folder.parent_id ? folder.parent_id : "root" parent: folder.parent_id ? folder.parent_id : "root"
}))); })));
cb(treeData); cb(treeData);
@ -642,6 +681,12 @@
moveInstallToFolder(installId, targetFolderId); moveInstallToFolder(installId, targetFolderId);
} }
}); });
$('#installs-list').on('click', '.note-button', function () {
const installId = $(this).closest('.install-item').data('id');
const install = allInstalls.find(i => i.id === installId);
openNoteModal(installId, install?.note || '');
});
}); });
function connectWebSocket() { function connectWebSocket() {
@ -750,7 +795,7 @@
<div class="computer-name">${item.computer_name} <button class="custom-icon edit-icon" onclick="editField(${item.id}, 'computer_name', '${item.computer_name}')"></button></div> <div class="computer-name">${item.computer_name} <button class="custom-icon edit-icon" 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="custom-icon copy-icon" onclick="copyToClipboard('${item.rust_id}')"></button> <button class="custom-icon edit-icon" onclick="editField(${item.id}, 'rust_id', '${item.rust_id}')"></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="custom-icon copy-icon" onclick="copyToClipboard('${item.rust_id}')"></button> <button class="custom-icon edit-icon" onclick="editField(${item.id}, 'rust_id', '${item.rust_id}')"></button></div>
<div class="install-time">${item.install_time} <button class="custom-icon edit-icon" onclick="editField(${item.id}, 'install_time', '${item.install_time}')"></button></div> <div class="install-time">${item.install_time} <button class="custom-icon edit-icon" onclick="editField(${item.id}, 'install_time', '${item.install_time}')"></button></div>
<div class="actions"><span class="action-buttons"><button class="custom-icon delete-icon" onclick="deleteInstall(${item.id})"></button> <button class="custom-icon note-icon"></button></span></div> <div class="actions"><span class="action-buttons"><button class="action-button delete-button ${isDarkTheme ? 'dark-theme' : ''}" onclick="deleteInstall(${item.id})">Удалить</button> <button class="action-button note-button ${isDarkTheme ? 'dark-theme' : ''}">Заметка</button></span></div>
</div> </div>
`; `;
}).join('')); }).join(''));