power analysis page MVP created

Author: dmitrkozlovsk

src/nicegui_ui/layout/sections/header.py

@@ -3,7 +3,7 @@
 
 def create_header(on_assist_btn_click: Callable[[], None]) -> None:
 
-    header = ui.header(bordered=True).classes('bg-surface text-black shadow-sm q-pa-xs')
+    header = ui.header(bordered=True).classes('bg-surface text-black q-pa-xs') #shadow-[0_8px_8px_-12px_rgba(0,0,0,0.25)]
     header.classes.remove('nicegui-header')
 
     with header:

src/nicegui_ui/layout/sections/left_drawer.py

@@ -3,55 +3,52 @@
 from functools import partial
 from dataclasses import dataclass
 
-async def expand_left_drawer(left_drawer: LeftDrawer):
-    if 'mini' in left_drawer._props:
-        left_drawer.props(remove='mini')
-
-async def collapse_left_drawer(left_drawer: LeftDrawer):
-    if 'mini' not in left_drawer._props:
-        left_drawer.props('mini')
-
 @dataclass(slots=True)
 class NavigationElement:
     text: str
     icon: str
     link: str
 
-
-def create_nav_element(element: NavigationElement):
-    with ui.item(on_click=lambda: ui.navigate.to(element.link)):
-        with ui.item_section().props('avatar'):
-            ui.icon(element.icon, color='black')
-        with ui.item_section():
-            ui.item_label(element.text)
-
-nav_element_list = [
+navigation_element_list = [
     NavigationElement('Home', 'sym_r_home', '/home'),
     NavigationElement('Experiments', 'sym_r_experiment', '/experiments'),
-    NavigationElement('Planner', 'query_stats', '/planner'),
+    NavigationElement('Power Analysis', 'sym_r_calculate', '/planner'),
     NavigationElement('Data and Metrics', 'sym_r_database', '/data'),
     NavigationElement('Jobs', 'sym_r_developer_board', '/jobs'),
     NavigationElement('Documentation', 'sym_r_article', '/documents'),
     NavigationElement('Settings', 'sym_r_settings', '/settings'),
 ]
 
-def create_navigation_list():
-    with ui.list().classes('q-px-none'):
+def expand_left_drawer(left_drawer: LeftDrawer):
+    if 'mini' in left_drawer._props:
+        left_drawer.props(remove='mini')
+
+def collapse_left_drawer(left_drawer: LeftDrawer):
+    if 'mini' not in left_drawer._props:
+        left_drawer.props('mini')
+
+def create_navigation_list(nav_element_list: list[NavigationElement]):
+    with ui.list().classes('q-pa-none'):
         for element in nav_element_list:
-            create_nav_element(element)
+            with ui.item(on_click=partial(ui.navigate.to, element.link)).classes('q-pa-none') as item:
+                #todo: create if active -> item.props('active active-class=bg-grey-3')
+                with ui.item_section().props('avatar').classes('content-center q-pr-none'):
+                    ui.icon(element.icon, color='black').classes('q-pa-none')
+                with ui.item_section():
+                    ui.item_label(element.text)
 
 def create_left_drawer() -> LeftDrawer:
     left_drawer = (
-        ui.left_drawer(value=False, top_corner=False, bordered=True)
+        ui.left_drawer(value=True, top_corner=False, bordered=True)
         .props('show-if-above mini mini-to-overlay width=200')
-        .classes('q-pa-none')
+        .classes('q-pa-none') #shadow-[8px_0_8px_-12px_rgba(0,0,0,0.25)]
     )
     left_drawer.classes.remove('nicegui-drawer')
 
     left_drawer.on('mouseenter', partial(expand_left_drawer, left_drawer))
     left_drawer.on('mouseleave', partial(collapse_left_drawer, left_drawer))
 
     with left_drawer:
-        create_navigation_list()
+        create_navigation_list(navigation_element_list)
 
     return left_drawer

src/nicegui_ui/layout/sections/right_drawer.py

@@ -4,7 +4,7 @@
 def create_right_drawer() -> RightDrawer:
     right_drawer = (
         ui.right_drawer(value=False, top_corner=True, bordered=True, fixed=False)
-        .props('width=450 bordered')
-        .classes('h-full q-pa-sm')
+        .props('width=400 bordered')
+        .classes('height-full')
     )
     return right_drawer

src/nicegui_ui/layout/shell.py

@@ -4,13 +4,12 @@
 from src.nicegui_ui.layout.sections.right_drawer import create_right_drawer
 from src.nicegui_ui.layout.sections.left_drawer import create_left_drawer
 from src.nicegui_ui.layout.sections.header import create_header
-from src.nicegui_ui.layout.styling import apply_colors_theme
+from src.nicegui_ui.layout.styling import apply_colors_theme, apply_styles_theme
 
 
 async def create_shell():
     """Create the shell for the application."""
-    
-    apply_colors_theme()
+    apply_styles_theme()
     left_drawer = create_left_drawer()
     right_drawer = create_right_drawer()
     create_header(right_drawer.toggle)

src/nicegui_ui/layout/styling.py

@@ -1,16 +1,29 @@
 from nicegui import ui
 
+COLORS = {
+    "primary":   '#1C1C1C',   # primary emphasis (buttons, active tabs)
+    "secondary": '#ECEBE4',   # soft neutral
+    "accent":    '#1C1C1C',   # keep it monochrome
+        # custom named colors
+    "ink":        '#1C1C1C',
+    "bg":         '#FAFAFF',
+    "surface":    '#FFFFFF',
+    "surface2":   '#EEF0F2',
+    "surfacewarm":'#ECEBE4',
+    "border":     '#E7E9EC',
+}
+
 def apply_colors_theme():
     ui.colors(
-        # brand colors (Quasar)
-        primary   ='#1C1C1C',   # primary emphasis (buttons, active tabs)
-        secondary ='#ECEBE4',   # soft neutral
-        accent    ='#1C1C1C',   # keep it monochrome
-        # custom named colors
-        ink        ='#1C1C1C',
-        bg         ='#FAFAFF',
-        surface    ='#FFFFFF',
-        surface2   ='#EEF0F2',
-        surfacewarm='#ECEBE4',
-        border     ='#E7E9EC',
-    )
+        **COLORS
+    )
+    ui.query('body').style('background-color: var(--q-surfacewarm);')
+
+def apply_styles_theme():
+    ui.add_css('''
+    :root {
+        --nicegui-default-padding: 0rem;
+        --nicegui-default-gap: 0rem;
+        }
+    ''')
+    apply_colors_theme()

src/nicegui_ui/main.py

@@ -1,5 +1,6 @@
 from nicegui import ui
 from src.nicegui_ui.layout.shell import create_shell
+from src.nicegui_ui.pages.power_analysis import render_power_analysis_page
 
 async def home_page():
     ui.label('Home')
@@ -31,11 +32,12 @@ async def main():
         '/': home_page,
         '/home': home_page,
         '/experiments': experiments_page,
-        '/planner': planner_page,
+        '/planner': render_power_analysis_page,
         '/data': data_page,
         '/jobs': jobs_page,
         '/documents': documents_page,
         '/settings': settings_page,
-})
+    }).classes('full-width', remove='')
+
 
 ui.run()