upgrade media rename feature

filename is a label to check media rename form replace the filename
vincent-peugnet · Oct 16, 2024 · 91d6f82 · 91d6f82
1 parent b786e75
commit 91d6f82
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 14 deletions.
diff --git a/app/view/templates/media.php b/app/view/templates/media.php
@@ -170,7 +170,6 @@
                 <?php if ($user->issupereditor()) { ?>
                 <details>
                     <summary>
-                            <span><?= $media->filename() ?></span>
                             <i class="fa fa-pencil"></i>
                     </summary>
                     <form action="<?= $this->url('mediarename') ?>" method="post">
@@ -181,6 +180,7 @@
                         <input type="submit" value="rename">
                     </form>
                 </details>
+                <label for="media_<?= $media->filename() ?>"><?= $media->filename() ?></label>
                 <?php } else { ?>
                     <span><?= $media->filename() ?></span>
                 <?php } ?>

diff --git a/assets/css/media.css b/assets/css/media.css
@@ -18,24 +18,14 @@ table#medialist .thumbnail:hover .lightbox {
     display: block;
 }
 
-table#medialist details > summary {
-    list-style: none;
-}
-
-table#medialist details i {
-    visibility: hidden;
-}
-
-table#medialist details:hover i {
-    visibility: visible;
-}
-
-table#medialist td.filename span {
+table#medialist td.filename label {
     font-family: monospace;
     white-space: pre;
     font-size: 14px;
+    width: 100%;
 }
 
+
 table code.select-all {
     max-width: 254px;
 }
@@ -95,6 +85,46 @@ nav tr.selected a, nav tr.selected td {
     color: var(--outline-color);
 }
 
+/* Renamming feature */
+
+table#medialist td.filename {
+    position: relative;
+}
+
+table#medialist td.filename label {
+     margin-right: 15px;
+}
+
+table#medialist td.filename details summary {
+    visibility: hidden;
+    display: inline;
+    position: absolute;
+    right: 0;
+}
+
+table#medialist td.filename:hover details summary {
+    visibility: visible;
+}
+
+table#medialist td.filename details[open] {
+    display: flex;
+    position: relative;
+}
+
+table#medialist td.filename details[open] ~ label {
+    display: none;
+}
+
+table#medialist td.filename details[open] form{
+    display: flex;
+     margin-right: 15px;
+}
+
+table#medialist td.filename details[open] summary {
+    visibility: visible;
+    order: 3;
+}
+
 
 @media (max-width: 550px) {
     #gallery li {