Rosanne DiMesio : Make versions page sections into collapsible panels

[Jeremy Newman]

Module: appdb
Branch: master
Commit: e03fadcbf2d1e7b333960fd8c65d19ad193d5aec
URL:    http://source.winehq.org/git/appdb.git/?a=commit;h=e03fadcbf2d1e7b333960fd8c...

Author: Rosanne DiMesio <dimesio(a)earthlink.net>
Date:   Sun Jul  2 14:49:18 2017 -0500

Make versions page sections into collapsible panels

Makes the test results, known bugs, howtos/notes, and comments sections into
collapsible panels. Sections are collapsed by default, giving users a clear
overview of all sections available when they first access the page.
Hide/show behavior is per panel, so users can have as many or as few open
as they want.

Signed-off-by: Rosanne DiMesio <dimesio(a)earthlink.net>
Signed-off-by: Jeremy Newman <jnewman(a)codeweavers.com>

---

 css/styles.css      |  4 ++++
 include/version.php | 40 ++++++++++++++++++++++++++++++++--------
 js/utils.js         | 20 +++++++++++++++++++-
 3 files changed, 55 insertions(+), 9 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index ee66a10..eaf2822 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -340,6 +340,10 @@ DIV.newsblock       { margin: 0 5px 25px 10px; padding: 0; }
 .inline             { display: inline-block; }
 .small              { font-size: 8pt; }
 .cursor-pointer     { cursor: pointer; }
+.no-text-decoration { 
+    text-decoration: none !important; 
+    
+}
 
 /* IMG options */
 IMG                 { border: 0; text-decoration: none !important; }
diff --git a/include/version.php b/include/version.php
index f75b711..db38601 100644
--- a/include/version.php
+++ b/include/version.php
@@ -1057,7 +1057,12 @@ EOT;
 
 
         // Show test data
-        echo "<h2 class=\"whq-app-title\">Test Results</h2>\n";
+        echo '<div id="collapse-tests">';
+        echo '<a data-toggle="collapse" data-parent="collapse-tests" class="no-text-decoration" href="#testdata">';
+        echo '<h2 class="whq-app-title">Test Results <span class = "fa fa-plus-square-o"></span></h2>';
+        echo '</a>';
+        echo '<div id="testdata" class="panel-collapse collapse">';
+        echo '<div class="panel-body">';
         $iNewestId = 0;
         $oTest = null;
 
@@ -1153,17 +1158,35 @@ EOT;
             echo '<button type="submit" value="" class="btn btn-default">Log in to add test data</button>'."\n";
             echo '</form>'."\n";
         }
-
-        // bugs table
-        echo "<h2 id=\"viewBugs\" class=\"whq-app-title\">Known Bugs</h2>\n";
+        echo '</div></div></div>';
+      
+        // bugs table 
+        echo '<div id="collapse-bugs">';
+        echo '<a data-toggle="collapse" data-parent="collapse-bugs" class="no-text-decoration" href="#knownbugs">';
+        echo '<h2 id="viewBugs" class="whq-app-title">Known Bugs <span class = "fa fa-plus-square-o"></span></h2>';
+        echo '</a>';
+        echo '<div id="knownbugs" class="panel-collapse collapse">';
+        echo '<div class="panel-body">';
         view_version_bugs($this->iVersionId, $this->get_buglink_ids());
-
+        echo '</div></div></div>';
+  
         // notes / how-to
-        echo "<h2 id=\"viewHowTo\" class=\"whq-app-title\">HowTo / Notes</h2>\n";
+        echo '<div id="collapse-notes">';
+        echo '<a data-toggle="collapse" data-parent="collapse-notes" class="no-text-decoration" href="#notes">';
+        echo '<h2 id="viewHowTo" class="whq-app-title">HowTo / Notes <span class = "fa fa-plus-square-o"></span></h2>';
+        echo '</a>';
+        echo '<div id="notes" class="panel-collapse collapse">';
+        echo '<div class="panel-body">';
         echo note::displayNotesForEntry($this->iVersionId);
-
+        echo '</div></div></div>';
+     
         // Comments Section
-        echo "<h2 id=\"viewComments\" class=\"whq-app-title\">Comments</h2>\n";
+        echo '<div id="collapse-comments">';
+        echo '<a data-toggle="collapse" data-parent="collapse-comments" class="no-text-decoration" href="#comments">';
+        echo '<h2 id="viewComments" class="whq-app-title">Comments <span class = "fa fa-plus-square-o"></span></h2>';
+        echo '</a>';
+        echo '<div id="comments" class="panel-collapse collapse">';
+        echo '<div class="panel-body">';
         if((sizeof($aMaintainers)>0) || ($_SESSION['current']->hasPriv("admin")))
         {
             if($this->iVersionId)
@@ -1175,6 +1198,7 @@ EOT;
                            'Comments for this application have been disabled because there are no maintainers.',
                            "","","warning");
         }
+        echo '</div></div></div>'; 
     }
 
     public static function lookup_name($versionId)
diff --git a/js/utils.js b/js/utils.js
index d23e964..33befa8 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -203,9 +203,27 @@ $(document).ready(function()
         $('div#dlogp').slideUp();
     });
 
+    /* Collapsible panel tweaks. Toggles the plus/minus icon 
+     and enables open panels to stay open on page refresh. */
+    $('.collapse').on('shown.bs.collapse', function() {
+        if (this.id) {
+          localStorage[this.id] = 'true';          
+    }
+      $(this).parent().find(".fa-plus-square-o").removeClass("fa-plus-square-o").addClass("fa-minus-square-o");
+      }).on('hidden.bs.collapse', function() {
+        if (this.id) {
+          localStorage.removeItem(this.id);
+      }
+      $(this).parent().find(".fa-minus-square-o").removeClass("fa-minus-square-o").addClass("fa-plus-square-o")
+      }).each(function() {
+        if (this.id && localStorage[this.id] === 'true' ) {
+          $(this).collapse('show');
+      }
+    });
+        
     // HTML editor (redactor loader)
 
 
 });
 
-// done
\ No newline at end of file
+// done