improved UI for attachment manipulation

diff --git a/themes/default.css b/themes/default.css
index 91458c3f169e4e1576e1fc419b8305a0f9ea3357..f9fdc799be7c78736e2a65027ee25da817704a37 100644 (file)
--- 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 c99477bc4d99c54cb6b3362d04bedc1ff0dcd862..6807242cd2d6dd0445e419bd72ae62dfe5834f23 100755 (executable)
--- 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