Merge branch '54-make-the-compact-theme-the-default-for-new-applications' into 'main'

Make the compact theme the default for new applications

Closes #54

See merge request ndip/project-templates/nova-application-template!45

Author: evilkermit

template_sources/{% if application_type != 'Minimal' %}src{% endif %}/{% include 'package_folder_slug.j2' %}/{% if application_type in ['Nova Application', 'Tutorial'] %}app{% endif %}/view_models/main_view_model.py

@@ -3,22 +3,31 @@
 from typing import Any, Dict
 
 from nova.mvvm.interface import BindingInterface
+from pydantic import BaseModel, Field
 
 from ..models.main_model import MainModel
 
 
+class ViewState(BaseModel):
+    """View state for the application."""
+
+    active_tab: str = Field(default="0")
+
+
 class MainViewModel:
     """Viewmodel class, used to create data<->view binding and react on changes from GUI."""
 
     def __init__(self, model: MainModel, binding: BindingInterface):
         self.model = model
+        self.view_state = ViewState()
 
         # here we create a bind that connects ViewModel with View. It returns a communicator object,
         # that allows to update View from ViewModel (by calling update_view).
         # self.model will be updated automatically on changes of connected fields in View,
         # but one also can provide a callback function if they want to react to those events
         # and/or process errors.
         self.config_bind = binding.new_bind(self.model, callback_after_update=self.change_callback)
+        self.view_state_bind = binding.new_bind(self.view_state)
 
     def change_callback(self, results: Dict[str, Any]) -> None:
         if results["error"]:

template_sources/{% if application_type != 'Minimal' %}src{% endif %}/{% include 'package_folder_slug.j2' %}/{% if application_type in ['Nova Application', 'Tutorial'] %}app{% endif %}/views/{% if framework=="Trame" %}main_view.py{% endif %}.j2

@@ -25,7 +25,7 @@ class MainApp(ThemedApp):
 {%- if multitabs %}
     """Main application view class. Calls rendering of nested UI elements."""
 {%- else %}
-    """Main application view class. Renders all UI elements on the mainn page."""
+    """Main application view class. Renders all UI elements on the main page."""
 {%- endif %}
 
     def __init__(self) -> None:
@@ -41,6 +41,7 @@ class MainApp(ThemedApp):
         self.create_ui()
 
     def create_ui(self) -> None:
+        self.set_theme("CompactTheme")
         self.state.trame__title = "{{ project_name }}"
 
         with super().create_ui() as layout:

template_sources/{% if application_type != 'Minimal' %}src{% endif %}/{% include 'package_folder_slug.j2' %}/{% if application_type in ['Nova Application', 'Tutorial'] %}app{% endif %}/views/{% if multitabs %}sample_tab_1.py{% endif %}

@@ -1,6 +1,7 @@
 """Module for the Sample Tab 1."""
 
 from nova.trame.view.components import InputField
+from nova.trame.view.layouts import VBoxLayout
 
 
 class SampleTab1:
@@ -10,4 +11,5 @@ class SampleTab1:
         self.create_ui()
 
     def create_ui(self) -> None:
-        InputField(v_model="config.username")
+        with VBoxLayout():
+            InputField(v_model="config.username")

template_sources/{% if application_type != 'Minimal' %}src{% endif %}/{% include 'package_folder_slug.j2' %}/{% if application_type in ['Nova Application', 'Tutorial'] %}app{% endif %}/views/{% if multitabs %}sample_tab_2.py{% endif %}

@@ -1,6 +1,7 @@
 """Module for the Sample Tab 2."""
 
 from nova.trame.view.components import InputField
+from nova.trame.view.layouts import VBoxLayout
 
 
 class SampleTab2:
@@ -10,4 +11,5 @@ class SampleTab2:
         self.create_ui()
 
     def create_ui(self) -> None:
-        InputField(v_model="config.password")
+        with VBoxLayout():
+            InputField(v_model="config.password")

template_sources/{% if application_type != 'Minimal' %}src{% endif %}/{% include 'package_folder_slug.j2' %}/{% if application_type in ['Nova Application', 'Tutorial'] %}app{% endif %}/views/{% if multitabs %}tab_content_panel.py{% endif %}

@@ -1,6 +1,6 @@
 """Module for the Tab Content panel."""
 
-from trame.widgets import vuetify3 as vuetify
+from nova.trame.view.layouts import VBoxLayout
 from trame_server import Server
 
 from ..view_models.main_view_model import MainViewModel
@@ -18,8 +18,7 @@ class TabContentPanel:
         self.create_ui()
 
     def create_ui(self) -> None:
-        with vuetify.VWindow(v_model="active_tab"):
-            with vuetify.VWindowItem(value=1):
-                SampleTab1()
-            with vuetify.VWindowItem(value=2):
-                SampleTab2()
+        with VBoxLayout(v_show="view_state.active_tab == 0", stretch=True):
+            SampleTab1()
+        with VBoxLayout(v_show="view_state.active_tab == 1", stretch=True):
+            SampleTab2()

template_sources/{% if application_type != 'Minimal' %}src{% endif %}/{% include 'package_folder_slug.j2' %}/{% if application_type in ['Nova Application', 'Tutorial'] %}app{% endif %}/views/{% if multitabs %}tabs_panel.py{% endif %}

@@ -1,5 +1,6 @@
 """Module for the Tab panel."""
 
+from trame.widgets import client
 from trame.widgets import vuetify3 as vuetify
 
 from ..view_models.main_view_model import MainViewModel
@@ -11,9 +12,11 @@ class TabsPanel:
     def __init__(self, view_model: MainViewModel):
         self.view_model = view_model
         self.view_model.config_bind.connect("config")
+        self.view_model.view_state_bind.connect("view_state")
         self.create_ui()
 
     def create_ui(self) -> None:
-        with vuetify.VTabs(v_model=("active_tab", 0), classes="pl-5"):
-            vuetify.VTab("Sample Tab 1", value=1)
-            vuetify.VTab("Sample Tab 2", value=2)
+        with client.DeepReactive("view_state"):
+            with vuetify.VTabs(v_model="view_state.active_tab", classes="pl-5"):
+                vuetify.VTab("Sample Tab 1", value=0)
+                vuetify.VTab("Sample Tab 2", value=1)