From 9a9768ba55120d3b6b7454060c1b326e0ed637c7 Mon Sep 17 00:00:00 2001
From: Taka <taka@vm-linux-dev>
Date: Wed, 18 Mar 2020 09:28:13 +0000
Subject: [PATCH] "Show a "more" marker for collapsible lists.

---
 web/src/SearchResults.css | 1 +
 web/src/utils.js          | 8 +++++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/web/src/SearchResults.css b/web/src/SearchResults.css
index 5408b29..d25251f 100644
--- a/web/src/SearchResults.css
+++ b/web/src/SearchResults.css
@@ -35,6 +35,7 @@
 .search-result .content .collapsible .caption img { height: 0.75em ; margin-left: 0.25em ; }
 .search-result .content .collapsible .count { font-size: 80% ; font-style: italic ; color: #666 ; }
 .search-result .content .collapsible ul { margin: 0 0 0 1em ; }
+.search-result .content .collapsible .more { font-size: 80% ; font-style: italic ; color: #666 ; cursor: pointer ; }
 
 .search-result .footer { clear: both ; padding: 0 5px ; font-size: 80% ; font-style: italic ; color: #666 ; }
 .search-result .footer a { color: #666 ; text-decoration: none ; }
diff --git a/web/src/utils.js b/web/src/utils.js
index 4a48815..3e8f686 100644
--- a/web/src/utils.js
+++ b/web/src/utils.js
@@ -174,7 +174,7 @@ export function makeCollapsibleList( caption, vals, maxItems, style ) {
     if ( ! vals || vals.length === 0 )
         return null ;
     let items=[], excessItems=[] ;
-    let excessItemsRef=null, flipButtonRef=null ;
+    let excessItemsRef=null, excessItemsMoreRef=null, flipButtonRef=null ;
     for ( let i=0 ; i < vals.length ; ++i ) {
         let item ;
         if ( typeof vals[i] === "string" )
@@ -188,6 +188,7 @@ export function makeCollapsibleList( caption, vals, maxItems, style ) {
         const show = flipButtonRef.src.substr( pos ) === "/collapsible-down.png" ;
         excessItemsRef.style.display = show ? "block" : "none" ;
         flipButtonRef.src = show ? "/images/collapsible-up.png" : "/images/collapsible-down.png" ;
+        excessItemsMoreRef.style.display = show ? "none" : "block" ;
     }
     if ( excessItems.length === 0 )
         caption = <span> {caption+":"} </span> ;
@@ -204,11 +205,12 @@ export function makeCollapsibleList( caption, vals, maxItems, style ) {
             { excessItems.length > 0 && <img src="/images/collapsible-down.png" ref={r => flipButtonRef=r} alt="Show/hide extra items." /> }
         </div>
         <ul> {items} </ul>
-        { excessItems.length > 0 &&
+        { excessItems.length > 0 && <div>
             <ul className="excess" ref={r => excessItemsRef=r} style={{display:"none"}}>
                 {excessItems}
             </ul>
-        }
+            <div className="more" onClick={onClick} ref={r => excessItemsMoreRef=r}> more... </div>
+        </div> }
         </div> ) ;
 }