From: paul <paul@plutz.net>
Date: Mon, 27 Nov 2017 13:17:35 +0000 (+0000)
Subject: UI for folder modification
X-Git-Url: https://git.plutz.net/?a=commitdiff_plain;h=e6188684fac517ddb3b84c72d7d84e8ed195ec19;p=bookman

UI for folder modification

svn path=/trunk/; revision=7
---

diff --git a/bookmarks.css b/bookmarks.css
index cadf1aa..f32972d 100644
--- a/bookmarks.css
+++ b/bookmarks.css
@@ -21,8 +21,6 @@ html, body {
   margin: 1em auto;
   padding: 0;
   overflow: hidden;
-  #column-width: 16em;
-  #column-rule: 1px solid #BBB;
 }
 
 .folder > h1 {
@@ -33,16 +31,13 @@ html, body {
   background-color: #ACF;
   border-radius: .375em .375em 0 0;
   min-height: 1em;
-  #column-span: all;
 }
-
 .folder > h1 + a {
   display: block;
   position: relative;
   top: -1.5em;
   margin-left: 1em;
   color: transparent;
-  background-color: transparent;
   width: 0; height: 0;
 }
 .folder > h1 + a:before {
@@ -53,17 +48,18 @@ html, body {
 .modfolder {
   display: block;
   position: fixed;
-  left: 50%; margin: 0 -15em;
-  vertical-align: middle;
-  text-align: center;
   width: 30em;
   min-width: 240px;
+  min-height: 3em;
+  left: 50%; top: 20%;
+  margin: -3em -15em;
+  text-align: center;
   z-index: 3;
   border-radius: .5em;
   border: 1px solid black;
   padding: .125em 0;
-  min-height: 3em;
   background-color: #ACF;
+  word-spacing: -.5ex;
 }
 .modfolder:before {
   display: block;
@@ -82,29 +78,50 @@ html, body {
   top: 0; bottom: 0; left: 0; right: 0;
   background-color: rgba(0,0,0,.5);
 }
+.modfolder > * { word-spacing: 0; }
+
+.modfolder > h1 {
+  background-color: transparent;
+  text-align: left;
+  font-weight: bold;
+  padding-left: .25em;
+}
 
-.modfolder > label,
-.modfolder > a {
+.modfolder > .tab {
   display: inline-block;
   width: 33%;
   padding: .25em;
   border: 1px solid black;
   border-radius: .5em .5em 0 0;
 }
-.modfolder > label { border-bottom: 0px; }
-.modfolder > a { background-color: #EEE; }
+.modfolder > label.tab { border-bottom: 0px; }
+.modfolder > a.tab { background-color: #EEE; }
 
+.modfolder > label:nth-of-type(2),
+.modfolder > select,
 .modfolder > input {
   display: block;
+  float: left;
+  text-align: left;
+  margin: 1em 0 0 1em;
+}
+.modfolder > label:nth-of-type(2){
+  font-weight: bold;
+}
+.modfolder > select {
+  width: 10em;
+  max-width: 95%;
+}
+.modfolder > input {
   width: 28em;
   max-width: 95%;
-  margin: 1em;
 }
 .modfolder > button {
   display: inline-block;
   float: right;
-  margin: .5em;
+  margin: 1.5em .5em .5em .5em;
   padding: 0 .5em;
+  clear: left;
 }
 
 .bookmark {
@@ -114,13 +131,13 @@ html, body {
 }
 
 .bookmark > a.modify {
-  font-size: 0;
-  color: white;
+  display: inline-block;
+  color: transparent;
+  width: .75em;
 }
 .bookmark > a.modify:before {
   content: '\2699';
   color: #333;
-  font-size: initial;
 }
 
 .bookmark > a.link >  img {
diff --git a/index.cgi b/index.cgi
old mode 100644
new mode 100755
index 8129b7e..3cf7e29
--- a/index.cgi
+++ b/index.cgi
@@ -72,6 +72,13 @@ getFavicon(){
   chmod a+r "$file"
 }
 
+list_folders(){
+  head -qn1 "${BDB}"/????????????.bm \
+  | sort -nk3 \
+  | cut -f1,2
+}
+
+
 QRYID="$(GET    id |checkid)"
 COKID="$(COOKIE id |checkid)"
 BDB="users/${QRYID}"
@@ -203,64 +210,83 @@ list_bookmarks(){
   done
 }
 
-list_folders(){
+foldermod(){
   fmodify="$(GET fmodify |checkid )"
   fdelete="$(GET fdelete |checkid )"
   fmove="$(GET fmove |checkid )"
 
-  head -qn1 "${BDB}"/????????????.bm \
-  | sort -nk3 \
-  | while read fid fname order; do
+  if [ -n "$fmodify" ]; then
+    read fid fname order <"${BDB}/${fmodify}.bm"
     cat <<-EOF
-	<section class="folder" id="${fid}">
-	  <h1>${fname}</h1>
-	  <a class="modify" href="${SCRIPT_NAME}?id=${QRYID}&fmodify=${fid}">Modify</a>
-	  $(list_bookmarks "$fid")
-          <form class="newbookmark" method="POST" action="${SCRIPT_NAME}?id=${QRYID}&action=newbookmark">
-	    <input type="hidden" name="fid" value="${fid}" />
-	    <input type="text" name="name" value="" placeholder="Name" />
-	    <input type="text" name="url"  value="" placeholder="URL" />
-	    <button type="submit">New Bookmark</button>
-          </form>
-	</section>
-	EOF
-    if [ "$fid" = "$fmodify" ]; then
-      cat <<-EOF
 	<form class="modfolder rename" method="POST" action="${SCRIPT_NAME}?id=${QRYID}&action=modfolder">
+          <h1>Rename Folder: ${fname}</h1>
 	  <input type="hidden" name="fid" value="${fid}" />
-          <label>Rename</label><a
-	    href="${SCRIPT_NAME}?id=${QRYID}&fdelete=${fid}">Delete</a><a
+	  <label class="tab">Rename</label>
+	  <a class="tab"
+	    href="${SCRIPT_NAME}?id=${QRYID}&fdelete=${fid}">Delete</a>
+	  <a class="tab"
 	    href="${SCRIPT_NAME}?id=${QRYID}&fmove=${fid}">Move</a>
 	  <input type="text" name="name" value="${fname}" />
 	  <button type="submit" name="control" value="confirm">OK</button>
 	  <button type="submit" name="control" value="cancel">Cancel</button>
 	</form>
 	EOF
-    elif [ "$fid" = "$fdelete" ]; then
-      cat <<-EOF
-	<form class="modfolder delete" method="POST" action="${SCRIPT_NAME}?id=${QRYID}&action=modfolder">
+  elif [ -n "$fdelete" ]; then
+    read fid fname order <"${BDB}/${fdelete}.bm"
+    cat <<-EOF
+	<form class="modfolder delete" method="POST" action="${SCRIPT_NAME}?id=${QRYID}&action=delfolder">
+          <h1>Delete Folder: ${fname}</h1>
 	  <input type="hidden" name="fid" value="${fid}" />
-	  <a href="${SCRIPT_NAME}?id=${QRYID}&fmodify=${fid}">Rename</a><label
-            >Delete</label><a
+	  <a class="tab" href="${SCRIPT_NAME}?id=${QRYID}&fmodify=${fid}">Rename</a>
+	  <label class="tab">Delete</label>
+	  <a class="tab"
 	    href="${SCRIPT_NAME}?id=${QRYID}&fmove=${fid}">Move</a>
-	  <input type="text" name="name" value="${fname}" />
+	  <label>Pass Bookmarks on to:</label>
+	  <select name="target">
+	    $(printf '<option value="%s">%s</option>' $(list_folders |grep -v "^${fid}"))
+	    <option value="____________">(none)</option>
+	  </select>
 	  <button type="submit" name="control" value="confirm">OK</button>
 	  <button type="submit" name="control" value="cancel">Cancel</button>
 	</form>
 	EOF
-    elif [ "$fid" = "$fmove" ]; then
-      cat <<-EOF
+  elif [ -n "$fmove" ]; then
+    read fid fname order <"${BDB}/${fmove}.bm"
+    cat <<-EOF
 	<form class="modfolder move" method="POST" action="${SCRIPT_NAME}?id=${QRYID}&action=modfolder">
+          <h1>Move Folder: ${fname}</h1>
 	  <input type="hidden" name="fid" value="${fid}" />
-	  <a href="${SCRIPT_NAME}?id=${QRYID}&fmodify=${fid}">Rename</a><a
-	    href="${SCRIPT_NAME}?id=${QRYID}&fdelete=${fid}">Delete</a><label
-	    >Move</label>
-	  <input type="text" name="name" value="${fname}" />
+	  <a class="tab" href="${SCRIPT_NAME}?id=${QRYID}&fmodify=${fid}">Rename</a>
+	  <a class="tab" href="${SCRIPT_NAME}?id=${QRYID}&fdelete=${fid}">Delete</a>
+	  <label class="tab">Move</label>
+	  <label>Move before folder:</label>
+	  <select name="target">
+	    $(printf '<option value="%s">%s</option>' $(list_folders |grep -v "^${fid}"))
+	    <option value="____________">(last)</option>
+	  </select>
 	  <button type="submit" name="control" value="confirm">OK</button>
 	  <button type="submit" name="control" value="cancel">Cancel</button>
 	</form>
 	EOF
-    fi
+  fi
+}
+
+show_folders(){
+  list_folders \
+  | while read fid fname order; do
+    cat <<-EOF
+	<section class="folder" id="${fid}">
+	  <h1>${fname}</h1>
+	  <a class="modify" href="${SCRIPT_NAME}?id=${QRYID}&fmodify=${fid}">Modify</a>
+	  $(list_bookmarks "$fid")
+          <form class="newbookmark" method="POST" action="${SCRIPT_NAME}?id=${QRYID}&action=newbookmark">
+	    <input type="hidden" name="fid" value="${fid}" />
+	    <input type="text" name="name" value="" placeholder="Name" />
+	    <input type="text" name="url"  value="" placeholder="URL" />
+	    <button type="submit">New Bookmark</button>
+          </form>
+	</section>
+	EOF
   done
 }
 
@@ -271,7 +297,8 @@ cat <<EOF
   <title>Bookman - Your Collection</title>
   <link rel="stylesheet" type="text/css" href="bookmarks.css" />
 </head><body id="collection">
-  $(list_folders)
+  $(foldermod)
+  $(show_folders)
   <form class="newfolder" method="POST" action="${SCRIPT_NAME}?id=${QRYID}&action=newfolder">
     <input type="text" name="name" value="" placeholder="New Folder" />
     <button type="submit">New</button>