feat(nicegui): add about section

anvil/nicegui/main.py

@@ -1,5 +1,4 @@
 import pages
-import pages.about
 import pages.ansible
 import pages.home
 import pages.registry
@@ -26,10 +25,4 @@ def registry_page() -> None:
         pages.registry.content()
 
 
-@ui.page("/about")
-def about_page() -> None:
-    with theme.frame("About"):
-        pages.about.content()
-
-
 ui.run(title="uBlue Forge", port=3000)

anvil/nicegui/menu.py

@@ -1,8 +1,55 @@
+import pandas
+import toml
 from nicegui import ui
+from importlib.metadata import version
+from utils.helper import get_project_root
+
+
+def load_pyproject_toml() -> str:
+    project_root = get_project_root().parent
+    pyproject_file = toml.load(f"{project_root}/pyproject.toml")
+    return pyproject_file
+
+
+def get_project_version() -> str:
+    pyproject_file = load_pyproject_toml()
+    project_version = pyproject_file["tool"]["poetry"]["version"]
+    return project_version
+
+
+def get_python_package_version() -> pandas.DataFrame:
+    pyproject_file = load_pyproject_toml()
+    python_packages = pyproject_file["tool"]["poetry"]["dependencies"]
+    python_packages_data = []
+    for key, value in python_packages.items():
+        # Skip python itself
+        if key == "python":
+            continue
+        get_version = version(key)
+        python_packages_data.append({"Package": key, "Version": get_version})
+    python_packages_version = pandas.DataFrame(data=python_packages_data).sort_values(
+        by="Package"
+    )
+    return python_packages_version
+
+
+def get_about(dialog) -> None:
+    project_version = get_project_version()
+    python_packages_versions = get_python_package_version()
+    with ui.column().classes("items-center"):
+        ui.label("uBlue-OS Forge").classes("text-h5")
+        ui.label(f"v{project_version}").classes("text-h6")
+        ui.table.from_pandas(df=python_packages_versions)
+        ui.button("Close", on_click=dialog.close)
 
 
 def menu() -> None:
-    ui.link("Home", "/").classes(replace="text-white")
-    ui.link("Ansible", "/ansible").classes(replace="text-white")
-    ui.link("Registry", "/registry").classes(replace="text-white")
-    ui.link("About", "/about").classes(replace="text-white")
+    with ui.button(icon="menu"):
+        with ui.menu().props("auto-close"):
+            ui.menu_item("Home", lambda: ui.navigate.to(target="/"))
+            ui.menu_item("Ansible", lambda: ui.navigate.to(target="/ansible"))
+            ui.menu_item("Registry", lambda: ui.navigate.to(target="/registry"))
+            ui.menu_item("About", lambda: dialog.open())
+
+    with ui.dialog() as dialog, ui.card():
+        get_about(dialog)

anvil/nicegui/pages/about.py

@@ -1,10 +0,0 @@
-from nicegui import ui
-import os
-
-
-def content() -> None:
-    project_root = os.environ['NICEGUI_DIR']
-    ui.label("Work in progress...").classes("text-h6")
-    ui.image(project_root + "/pages/assets/work-in-progress.png").classes(
-        "w-[200%]"
-    )

anvil/nicegui/theme.py

@@ -10,7 +10,7 @@ class GuiProgressSpinner(ui.spinner):
         type: str = "dots",
         size: str = "lg",
         color: str | None = "red",
-        thickness: float = 5
+        thickness: float = 5,
     ) -> None:
         super().__init__(type, size=size, color=color, thickness=thickness)
         with self, ui.spinner():
@@ -24,21 +24,26 @@ class GuiProgressSpinner(ui.spinner):
 
 
 @contextmanager
-def frame(navigation_title: str, enable_right_drawer: bool = False):
+def frame(
+    navigation_title: str,
+):
     """Custom page frame to share the same styling and behavior across all pages"""
     ui.colors(primary="#4051b5", secondary="#dddbff", accent="#171d9a")
     with ui.header():
-        with ui.row():
-            menu()
-        ui.space()
-        with ui.link(target="https://github.com/ublue-os/forge", new_tab=True):
-            ui.icon("eva-github").classes("text-2xl")
+        with ui.grid(columns=3).classes("w-full gap-0"):
+            with ui.row(wrap=False).classes("col-span-1 justify-start"):
+                menu()
+                ui.label(text="uBlue-OS Forge").classes("text-h5")
+            with ui.row(wrap=False).classes("col-span-1 justify-center"):
+                ui.label(text=navigation_title).classes("text-h5")
+            with ui.row(wrap=False).classes("col-span-1 justify-end"):
+                with ui.link(target="https://github.com/ublue-os/forge", new_tab=True):
+                    ui.icon("eva-github").classes("text-2xl")
 
     with ui.column().classes():
-        ui.label(navigation_title).classes("text-h4")
         yield
 
     with ui.footer(value=False):
         ui.add_head_html(
-            '<link href="https://unpkg.com/eva-icons@1.1.3/style/eva-icons.css" rel="stylesheet" />'
+            '<link href="https://unpkg.com/eva-icons@1.1.3/style/eva-icons.css" rel="stylesheet"/>'
         )

anvil/nicegui/utils/helper.py

@@ -0,0 +1,5 @@
+from pathlib import Path
+
+
+def get_project_root() -> Path:
+    return Path(__file__).parent.parent