From: Paul Hänsch <paul@plutz.net>
Date: Thu, 9 Jun 2022 13:22:55 +0000 (+0200)
Subject: improved UI for attachment manipulation
X-Git-Url: https://git.plutz.net/?a=commitdiff_plain;h=7213d4e9f90acaa688a17b110f1c17b1e7ca74d3;p=shellwiki

improved UI for attachment manipulation
---

diff --git a/themes/default.css b/themes/default.css
index 91458c3..f9fdc79 100644
--- a/themes/default.css
+++ b/themes/default.css
@@ -54,7 +54,7 @@ main .pagemenu li a { color: #FFF; }
 main article,
 main > form#renamepage, main > form#movepage,
 main > form#deletepage, 
-[id$="/[attachment]"] main form.upload {
+[id$="/[attachment]"] main > form {
   margin: 1em;
   padding: .125em 1em 1em 1em;
   box-shadow: .25em .25em .75em;
@@ -62,12 +62,12 @@ main > form#deletepage,
 }
 
 [id$="/[revision]"] main .revisions,
-[id$="/[attachment]"] main .attachment.list {
+[id$="/[attachment]"] main > .attachment.list {
   margin: 1em;
   padding: 1em 2em;
 }
 [id$="/[revision]"] main .revisions:before,
-[id$="/[attachment]"] main .attachment.list:before {
+[id$="/[attachment]"] main > .attachment.list:before {
   content: '';
   position: absolute;
   top: 0; bottom: 0; left: 0; right: 0;
@@ -75,7 +75,6 @@ main > form#deletepage,
   box-shadow: .25em .25em .75em;
 }
 
-
 /* === Editor === */
 
 body[id$="/[edit]"] textarea,
@@ -113,6 +112,39 @@ body[id$="/[newpage]"] textarea {
   margin-right: 1em;
 }
 
+[id$="/[attachment]"] input[type=radio].tab ~ ul.attachment.list.tab {
+  display: block;
+  margin-left: 0;
+  padding-top: 1em;
+  list-style: none;
+}
+
+ul.attachment.list.tab li input[name=select],
+ul.attachment.list.tab li label.name,
+ul.attachment.list.tab li a.name,
+ul.attachment.list.tab li input.name {
+  display: none;
+}
+
+[id$="/[attachment]"] input[type=radio].tab#tview:checked ~ ul li a.name,
+[id$="/[attachment]"] input[type=radio].tab#tdel:checked ~ ul li input[name=select],
+[id$="/[attachment]"] input[type=radio].tab#tdel:checked ~ ul li label.name,
+[id$="/[attachment]"] input[type=radio].tab#tmove:checked ~ ul li input[name=select],
+[id$="/[attachment]"] input[type=radio].tab#tmove:checked ~ ul li label.name {
+  display: inline;
+}
+[id$="/[attachment]"] input[type=radio].tab#tren:checked ~ ul li input.name {
+  display: block;
+}
+
+[id$="/[attachment]"] button[name=action] { display: none; }
+[id$="/[attachment]"] .upload button[name=action] { display: inline-block; }
+[id$="/[attachment]"] input[type=radio].tab#tdel:checked  ~ button[name=action][value=delete],
+[id$="/[attachment]"] input[type=radio].tab#tmove:checked ~ button[name=action][value=move],
+[id$="/[attachment]"] input[type=radio].tab#tren:checked  ~ button[name=action][value=rename] {
+  display: block;
+}
+
 /* === Macros === */
 
 .macro.toc {
diff --git a/themes/default.sh b/themes/default.sh
index c99477b..6807242 100755
--- a/themes/default.sh
+++ b/themes/default.sh
@@ -99,13 +99,20 @@ theme_attachments(){
   if acl_write "$page"; then
     theme_page - "Attachments: $title" <<-EOF
 	<form class=upload method=POST enctype="multipart/form-data">
+	  <h2>Upload</h2>
 	  <input type=hidden name=session_id value="$SESSION_ID">
 	  <input type=file name=file multiple>
 	  <button type=submit name=action value=upload>Upload</button>
 	</form>
 	
-	<form method=POST><ul class="attachment list">
+	<form method=POST>
+	  <h2>Attachments</h2>
 	  <input type=hidden name=session_key value="$SESSION_KEY">
+          <input checked type=radio class=tab name=attachaction value=view id=tview><label for=tview>View</label>
+          <input         type=radio class=tab name=attachaction value=del  id=tdel ><label for=tdel >Delete</label>
+          <input         type=radio class=tab name=attachaction value=move id=tmove><label for=tmove>Move</label>
+          <input         type=radio class=tab name=attachaction value=ren  id=tren ><label for=tren >Rename</label>
+          <ul class="attachment list tab">
 	$(for file in "$_EXEC/pages/$page/#attachments"/* "$_DATA/pages/$page/#attachments"/*; do
 	  [ "$file" = "$_EXEC/pages/$page/#attachments/${file##*/}" \
 	        -a -f "$_DATA/pages/$page/#attachments/${file##*/}" ] && continue
@@ -113,11 +120,22 @@ theme_attachments(){
 	  size="${stat% *}" date="${stat#* }"
           hfile="$(HTML "${file##*/}")"
 	
-	  printf '<li><button type=submit name=delete value="%s">Delete</button><a class=name href="[attachment]/%s">%s</a>
-	          <span class=size>%s</span><span class=date>%s</span></li>' \
-	         "$hfile" "$hfile" "$hfile" "$(size_human "$size")" "$(date -d @"$date" +"%F %T")"
+	  printf '<li><input id="select_%s" type=checkbox name=select value="%s">
+	            <label class=name for="select_%s">%s</label>
+	            <input class=name name="rename_%s" value="" placeholder="%s" />
+	            <a class=name href="[attachment]/%s">%s</a>
+	            <span class=size>%s</span>
+	            <span class=date>%s</span>
+	          </li>' \
+	         "$hfile" "$hfile" "$hfile" "$hfile" \
+	         "$hfile" "$hfile" "$hfile" "$hfile" \
+	         "$(size_human "$size")" "$(date -d @"$date" +"%F %T")"
 	done)
-	</ul></form>
+	  </ul>
+	  <button type=submit name=action value=delete>Delete</button>
+	  <button type=submit name=action value=move  >Move</button>
+	  <button type=submit name=action value=rename>Rename</button>
+	</form>
 	EOF
   else
     theme_page - "Attachments: $title" <<-EOF