From 0af497625be03bea330b02738e6ba2c6f2c492e9 Mon Sep 17 00:00:00 2001
From: Aaron LI <aaronly.me@outlook.com>
Date: Thu, 17 Nov 2016 11:44:21 +0800
Subject: webui: Add panel toggle and allow expand/collapse its body

---
 fg21sim/webui/static/css/main.css | 14 +++++++++++++-
 fg21sim/webui/static/js/main.js   | 17 +++++++++++++++++
 2 files changed, 30 insertions(+), 1 deletion(-)

(limited to 'fg21sim/webui/static')

diff --git a/fg21sim/webui/static/css/main.css b/fg21sim/webui/static/css/main.css
index de40123..a0d7e1b 100644
--- a/fg21sim/webui/static/css/main.css
+++ b/fg21sim/webui/static/css/main.css
@@ -266,7 +266,7 @@ input:focus {
     background-color: #d9534f;
 }
 
-.label .icon {
+.label > .icon {
     margin-right: 0.2rem;
 }
 
@@ -374,6 +374,18 @@ button,
     font-size: 1.6rem;
     font-weight: bold;
 }
+.panel-title > .icon {
+    margin-right: 0.2rem;
+}
+.panel-title > .toggle {
+    margin-left: 0.5rem;
+    opacity: 0.5;
+    vertical-align: middle;
+    cursor: pointer;
+}
+.panel-title > .toggle:hover {
+    opacity: 1.0;
+}
 .panel-control {
     float: right;
 }
diff --git a/fg21sim/webui/static/js/main.js b/fg21sim/webui/static/js/main.js
index 25bc12d..7f5b582 100644
--- a/fg21sim/webui/static/js/main.js
+++ b/fg21sim/webui/static/js/main.js
@@ -82,4 +82,21 @@ $(document).ready(function () {
     var nav_height = $("nav.navigation").outerHeight();
     scrollTarget(nav_height);
   });
+
+  // Panel toggle control
+  $(".panel-title > .toggle").on("click", function () {
+    var toggle = $(this);
+    var body = toggle.closest(".panel").find(".panel-body");
+    if (body.is(":visible")) {
+      body.slideUp("fast");
+      toggle.removeClass("fa-chevron-circle-up")
+        .addClass("fa-chevron-circle-down")
+        .attr("title", "Expand contents");
+    } else {
+      body.slideDown("fast");
+      toggle.removeClass("fa-chevron-circle-down")
+        .addClass("fa-chevron-circle-up")
+        .attr("title", "Collapse contents");
+    }
+  });
 });
-- 
cgit v1.2.2