From 97b81c69190790f7da77ab89c53f7dc6f900e37c Mon Sep 17 00:00:00 2001
From: "Satur@it-depot.ru" <Saturn@it-depot.ru>
Date: Tue, 11 Mar 2025 12:09:19 +0300
Subject: [PATCH] tooltips

---
 templates/index.html | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index c1d7622..f1ac44d 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -121,7 +121,7 @@
         .install-item {
             display: flex;
             justify-content: space-between;
-            padding: 5px;
+            padding: 5px 8px; /* Увеличим внутренний отступ для большей "воздушности" */
             border-bottom: 1px solid #ddd;
             cursor: pointer;
             align-items: center;
@@ -155,7 +155,7 @@
         .protocol-icon img {
             height: 32px;
             width: 32px;
-            margin-right: 5px;
+            margin-right: 8px; /* Увеличим отступ для большей читаемости */
             vertical-align: middle;
         }
         .connection-link {
@@ -191,6 +191,7 @@
             background-color: transparent;
             border: none;
             padding: 0;
+            margin: 0 4px; /* Добавляем отступы вокруг иконок */
             cursor: pointer;
             transition: background-color 0.2s, transform 0.2s;
         }
@@ -217,6 +218,7 @@
             background-color: transparent;
             border: none;
             padding: 0;
+            margin: 0 2px; /* Небольшой отступ для папочных иконок */
             cursor: pointer;
             transition: background-color 0.2s, transform 0.2s;
         }
@@ -233,7 +235,7 @@
         .folder-delete-icon.dark-theme { background-image: url('/icons/delete-dark.png'); }
         /* Стили для кнопок удаления и заметок */
         .action-button {
-            margin: 0 2px;
+            margin: 0 4px; /* Увеличим расстояние между кнопками */
             padding: 5px 8px;
             font-size: 12px;
             border: 1px solid #ccc;
@@ -317,7 +319,7 @@
             height: 10px; 
             display: inline-block; 
             border-radius: 50%; 
-            vertical-align: middle; 
+            vertical-align: middle;
             margin-left: 5px; 
         }
         .status-offline { 
@@ -599,8 +601,8 @@
                             ].concat(sortedFolders.map(folder => ({
                                 id: folder.id,
                                 text: `${folder.name} <span class="folder-actions">` +
-                                      `<button class="folder-edit-icon" onclick="editFolder(${folder.id}, '${folder.name}')"></button>` +
-                                      `<button class="folder-delete-icon" onclick="deleteFolder(${folder.id})"></button></span>`,
+                                      `<button class="folder-edit-icon" title="Редактировать папку" onclick="editFolder(${folder.id}, '${folder.name}')"></button>` +
+                                      `<button class="folder-delete-icon" title="Удалить папку" onclick="deleteFolder(${folder.id})"></button></span>`,
                                 parent: folder.parent_id ? folder.parent_id : "root"
                             })));
                             cb(treeData);
@@ -792,10 +794,10 @@
                     const statusClass = isOnline ? 'status-online' : 'status-offline';
                     return `
                         <div class="install-item ${isDarkTheme ? 'dark-theme' : ''}" data-id="${item.id}" draggable="true">
-                            <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="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="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 class="computer-name">${item.computer_name} <button class="custom-icon edit-icon" title="Редактировать имя компьютера" 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" title="Скопировать ID подключения" onclick="copyToClipboard('${item.rust_id}')"></button> <button class="custom-icon edit-icon" title="Редактировать ID подключения" onclick="editField(${item.id}, 'rust_id', '${item.rust_id}')"></button></div>
+                            <div class="install-time">${item.install_time} <button class="custom-icon edit-icon" title="Редактировать время установки" onclick="editField(${item.id}, 'install_time', '${item.install_time}')"></button></div>
+                            <div class="actions"><span class="action-buttons"><button class="action-button delete-button ${isDarkTheme ? 'dark-theme' : ''}" title="Удалить запись" onclick="deleteInstall(${item.id})">Удалить</button> <button class="action-button note-button ${isDarkTheme ? 'dark-theme' : ''}" title="Добавить или редактировать заметку">Заметка</button></span></div>
                         </div>
                     `;
                 }).join(''));