From 65ce0f359f4a4766d19b0ad7747d9e0771757414 Mon Sep 17 00:00:00 2001
From: 18870 <a20110123@163.com>
Date: Thu, 6 Jan 2022 03:39:38 +0800
Subject: [PATCH] Add: Navigation bar

---
 assets/gui/css/alas-mobile.css |  6 +++++-
 assets/gui/css/alas.css        | 23 +++++++++++++++++++++++
 assets/gui/css/dark-alas.css   | 13 +++++++++++++
 assets/gui/css/light-alas.css  | 14 +++++++++++++-
 gui.py                         | 15 +++++++++++++++
 5 files changed, 69 insertions(+), 2 deletions(-)

diff --git a/assets/gui/css/alas-mobile.css b/assets/gui/css/alas-mobile.css
index 8e93b647e..644bda5c7 100644
--- a/assets/gui/css/alas-mobile.css
+++ b/assets/gui/css/alas-mobile.css
@@ -15,13 +15,17 @@
     margin: 0
 }
 
+#pywebio-scope-navigator {
+    display: none;
+}
+
 *[style*="container-args-row"],
 *[style*="container-large.args"] {
     grid-template-columns: 1fr 8rem !important;
 }
 
 #pywebio-scope-_groups {
-    grid-template-columns: 0fr 1fr 0fr;
+    grid-template-columns: 0fr 1fr;
 }
 
 #pywebio-scope-overview {
diff --git a/assets/gui/css/alas.css b/assets/gui/css/alas.css
index 965687fbe..a32488b53 100644
--- a/assets/gui/css/alas.css
+++ b/assets/gui/css/alas.css
@@ -73,6 +73,18 @@ footer {
     margin: 0;
 }
 
+.btn-navigator {
+    border-radius: 0;
+    margin: 0 !important;
+    width: 100%;
+    text-align: left;
+    transition: color 0s ease-in-out;
+}
+
+.btn-navigator:hover {
+    font-weight: bold;
+}
+
 .toastify-center,
 .toastify-right,
 .toastify-left {
@@ -275,6 +287,7 @@ button.btn.dropdown-toggle {
 }
 
 #pywebio-scope-_groups {
+    height: 100%;
     display: grid;
     grid-auto-flow: column;
 
@@ -298,6 +311,16 @@ button.btn.dropdown-toggle {
     margin: .2rem .25rem .1rem .25rem !important;
 }
 
+#pywebio-scope-groups {
+    overflow-y: auto;
+}
+
+#pywebio-scope-navigator {
+    margin: .5rem 1rem .5rem;
+    height: min-content;
+    max-width: 15rem;
+}
+
 #pywebio-scope-overview {
     height: 100%;
     overflow: auto;
diff --git a/assets/gui/css/dark-alas.css b/assets/gui/css/dark-alas.css
index 387163e6c..cf393b09f 100644
--- a/assets/gui/css/dark-alas.css
+++ b/assets/gui/css/dark-alas.css
@@ -24,6 +24,14 @@
     border: 1px solid #202225;
 }
 
+.btn-navigator {
+    background-color: #2f3136;
+}
+
+.btn-navigator:hover {
+    color: #7a77bb;
+}
+
 .hr-group {
     background-color: #40444b !important;
 }
@@ -83,6 +91,11 @@ textarea {
     border-right: 1px solid #21262d;
 }
 
+#pywebio-scope-navigator {
+    border: 1px solid #21262d;
+    color: #c9d1d9;
+}
+
 #pywebio-scope-scheduler-bar,
 #pywebio-scope-log-bar,
 #pywebio-scope-running,
diff --git a/assets/gui/css/light-alas.css b/assets/gui/css/light-alas.css
index b39e1a65e..3230dca46 100644
--- a/assets/gui/css/light-alas.css
+++ b/assets/gui/css/light-alas.css
@@ -21,10 +21,18 @@
     color: white;
 }
 
-.btn-scheduler-off:hover {
+.btn-off:hover {
     color: white;
 }
 
+.btn-navigator {
+    background-color: white;
+}
+
+.btn-navigator:hover {
+    color: #4e4c97;
+}
+
 .hr-group {
     background-color: #eaecef !important;
 }
@@ -84,6 +92,10 @@ textarea {
     background-color: white;
 }
 
+#pywebio-scope-navigator {
+    border: 1px solid lightgrey;
+}
+
 #pywebio-scope-scheduler-bar,
 #pywebio-scope-log-bar,
 #pywebio-scope-running,
diff --git a/gui.py b/gui.py
index 56f2028ab..1bfab73ef 100644
--- a/gui.py
+++ b/gui.py
@@ -283,6 +283,7 @@ class AlasGUI(Frame):
         config = config_updater.update_config(self.alas_name)
         for group, arg_dict in deep_iter(self.ALAS_ARGS[task], depth=1):
             self.set_group(group, arg_dict, config, task)
+            self.set_navigator(group)
 
     @use_scope('groups')
     def set_group(self, group, arg_dict, config, task):
@@ -335,6 +336,20 @@ class AlasGUI(Frame):
                     invalid_feedback=invalid_feedback,
                 ).show()
 
+    @use_scope('navigator')
+    def set_navigator(self, group):
+        js = f'''
+            $("#pywebio-scope-groups").scrollTop(
+                $("#pywebio-scope-group_{group[0]}").position().top
+                + $("#pywebio-scope-groups").scrollTop() - 59
+            )
+        '''
+        put_button(
+            label=t(f"{group[0]}._info.name"),
+            onclick=lambda: run_js(js),
+            color='navigator'
+        )
+
     @use_scope('content', clear=True)
     def alas_overview(self) -> None:
         self.init_menu(name="Overview")