diff --git a/script.js b/script.js
index 1e9c4c1..eedb201 100644
--- a/script.js
+++ b/script.js
@@ -367,6 +367,7 @@ function displayContents(contents) {
function createParentRow(parentPath) {
const row = document.createElement("tr");
+ row.className = "clickable-row";
row.innerHTML = `
@@ -377,6 +378,15 @@ function createParentRow(parentPath) {
| - |
`;
+ // Rendre toute la ligne cliquable
+ row.addEventListener("click", (e) => {
+ // Éviter le double clic si on clique sur le lien
+ if (e.target.tagName !== 'A') {
+ e.preventDefault();
+ loadBucketContents(parentPath, true);
+ }
+ });
+
const link = row.querySelector(".folder-link");
link.addEventListener("click", (e) => {
e.preventDefault();
@@ -388,6 +398,7 @@ function createParentRow(parentPath) {
function createFolderRow(folder) {
const row = document.createElement("tr");
+ row.className = "clickable-row";
row.innerHTML = `
@@ -398,6 +409,15 @@ function createFolderRow(folder) {
| - |
`;
+ // Rendre toute la ligne cliquable
+ row.addEventListener("click", (e) => {
+ // Éviter le double clic si on clique sur le lien
+ if (e.target.tagName !== 'A') {
+ e.preventDefault();
+ loadBucketContents(folder.path, true);
+ }
+ });
+
const link = row.querySelector(".folder-link");
link.addEventListener("click", (e) => {
e.preventDefault();
@@ -409,6 +429,7 @@ function createFolderRow(folder) {
function createFileRow(file) {
const row = document.createElement("tr");
+ row.className = "clickable-row";
const fileUrl = `${config.baseUrl}/${file.fullKey}`;
row.innerHTML = `
@@ -420,9 +441,19 @@ function createFileRow(file) {
${formatDate(file.modified)} |
+
|
`;
+ // Rendre toute la ligne cliquable
+ row.addEventListener("click", (e) => {
+ // Éviter le clic sur les boutons d'action et les liens
+ if (e.target.tagName !== 'BUTTON' && e.target.tagName !== 'A') {
+ e.preventDefault();
+ showPreview(fileUrl, file.name);
+ }
+ });
+
const fileLink = row.querySelector(".file-link");
fileLink.addEventListener("click", (e) => {
e.preventDefault();
@@ -430,7 +461,16 @@ function createFileRow(file) {
});
const copyBtn = row.querySelector(".copy-btn");
- copyBtn.addEventListener("click", () => copyToClipboard(fileUrl));
+ copyBtn.addEventListener("click", (e) => {
+ e.stopPropagation(); // Empêcher la propagation vers le clic sur la ligne
+ copyToClipboard(fileUrl);
+ });
+
+ const openBtn = row.querySelector(".open-btn");
+ openBtn.addEventListener("click", (e) => {
+ e.stopPropagation(); // Empêcher la propagation vers le clic sur la ligne
+ openInNewTab(fileUrl);
+ });
return row;
}
@@ -480,6 +520,10 @@ async function copyToClipboard(text) {
}
}
+function openInNewTab(fileUrl) {
+ window.open(fileUrl, '_blank', 'noopener,noreferrer');
+}
+
// Variables globales pour la prévisualisation
let currentPreviewFile = {
url: "",
diff --git a/style.css b/style.css
index c15eb59..56aa171 100644
--- a/style.css
+++ b/style.css
@@ -133,6 +133,15 @@ tr:hover {
background-color: #e6f3ff;
}
+/* Lignes cliquables */
+.clickable-row {
+ cursor: pointer;
+}
+
+.clickable-row:hover {
+ background-color: #e6f3ff !important;
+}
+
/* Liens et dossiers */
.folder-link {
color: #0066cc;
@@ -157,24 +166,41 @@ tr:hover {
font-weight: bold;
}
-/* Bouton copier lien */
-.copy-btn {
+/* Boutons d'actions */
+.copy-btn,
+.open-btn {
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 2px 6px;
font-size: 11px;
cursor: pointer;
border-radius: 2px;
+ margin-left: 2px;
}
-.copy-btn:hover {
+.copy-btn:hover,
+.open-btn:hover {
background-color: #e0e0e0;
}
-.copy-btn:active {
+.copy-btn:active,
+.open-btn:active {
background-color: #d0d0d0;
}
+.open-btn {
+ background-color: #007acc;
+ color: white;
+}
+
+.open-btn:hover {
+ background-color: #005999;
+}
+
+.open-btn:active {
+ background-color: #004d80;
+}
+
/* Tailles de fichiers */
.file-size {
text-align: right;
@@ -244,8 +270,8 @@ tr:hover {
}
#content-section {
- flex: 0 0 25%; /* Tableau prend seulement 25% de la hauteur */
- overflow-y: auto;
+ flex: none; /* Tableau prend l'espace nécessaire */
+ overflow-y: visible;
}
#files-table {
@@ -271,8 +297,8 @@ tr:hover {
}
#content-section {
- flex: 0 0 20%; /* Encore moins d'espace pour le tableau sur mobile */
- overflow-y: auto;
+ flex: none; /* Tableau prend l'espace nécessaire */
+ overflow-y: visible;
}
#files-table {