Remove step-progressbar and move the header to different column container to keep it attachted to the top

Author: tsterbak

openandroidinstaller/app_state.py

@@ -27,22 +27,15 @@ def __init__(
         platform: str,
         config_path: Path,
         bin_path: Path,
-        progressbar: ProgressBar,
-        num_steps: int,
         test: bool = False,
         test_config: str = None,
     ):
         self.platform = platform
         self.config_path = config_path
         self.bin_path = bin_path
-        self.progressbar = progressbar
-        self.num_steps = num_steps  # keep track of the steps already taken
         self.test = test
         self.test_config = test_config
 
-        # initialize the progress bar at 0
-        self.progressbar.value = 0
-
         # placeholders
         self.advanced = False
         self.config = None
@@ -60,12 +53,4 @@ def load_config(self, device_code: str):
                 self.config.unlock_bootloader
                 + self.config.flash_recovery
                 + self.config.install_os
-            )
-            self.num_total_steps = len(self.steps)
-
-    def increment_progressbar(self):
-        """Increment the progressbar and step counter."""
-        self.progressbar.value = (self.num_steps - 1) / (
-            self.num_total_steps + 3
-        )  # don't show on the first step
-        self.num_steps += 1  # increase the step counter
+            )

openandroidinstaller/openandroidinstaller.py

@@ -71,10 +71,6 @@ def __init__(self):
             platform=PLATFORM,
             config_path=CONFIG_PATH,
             bin_path=BIN_PATH,
-            progressbar=ProgressBar(
-                width=600, color="#00d886", bgcolor="#eeeeee", bar_height=16
-            ),
-            num_steps=2,
             test=DEVELOPMENT,
             test_config=DEVELOPMENT_CONFIG,
         )
@@ -119,9 +115,6 @@ def confirm(self, e):
         """Confirmation event handler to use in views."""
         # remove all elements from column view
         self.view.controls = []
-        # if a config is loaded, display a progress bar
-        if self.state.config:
-            self.state.increment_progressbar()
         # if there are default views left, display them first
         if self.default_views:
             self.view.controls.append(self.default_views.pop())
@@ -160,8 +153,8 @@ def main(page: Page):
     logger.info(100 * "-")
     # Configure the application base page
     page.title = "OpenAndroidInstaller"
-    page.window_height = 820
-    page.window_width = int(1.77 * page.window_height)
+    page.window_height = 900
+    page.window_width = int(1.5 * page.window_height)
     page.window_top = 100
     page.window_left = 120
     page.scroll = "adaptive"

openandroidinstaller/views/base.py

@@ -28,17 +28,21 @@ class BaseView(UserControl):
     def __init__(self, state: AppState, image: str = "placeholder.png"):
         super().__init__()
         self.state = state
+
+        # configs
+        column_width = 600
         # right part of the display, add content here.
-        self.right_view = Column(expand=True)
+        self.right_view_header = Column(width=column_width, height=100, spacing=30)
+        self.right_view = Column(alignment="center", width=column_width, height=650)
         # left part of the display: used for displaying the images
         self.left_view = Column(
-            width=600,
+            width=column_width,
             controls=[Image(src=f"/assets/imgs/{image}", height=600)],
             expand=True,
             horizontal_alignment="center",
         )
         # main view row
         self.view = Row(
-            [self.left_view, VerticalDivider(), self.right_view],
+            [self.left_view, VerticalDivider(), Column(expand=True, controls=[self.right_view_header, self.right_view])],
             alignment="spaceEvenly",
         )

openandroidinstaller/views/requirements_view.py

@@ -105,12 +105,14 @@ def build(self):
         )
 
         # build up the main view
+        self.right_view_header.controls = [
+            get_title(
+                "Check the Requirements",
+                step_indicator_img="steps-header-requirements.png",
+            ),
+        ]
         self.right_view.controls.extend(
             [
-                get_title(
-                    "Check the Requirements",
-                    step_indicator_img="steps-header-requirements.png",
-                ),
                 Text(
                     "Before continuing you need to check some requirements to progress. Please read the instructions and check the boxes if everything is fine."
                 ),

openandroidinstaller/views/select_view.py

@@ -113,22 +113,15 @@ def build(self):
             icon_color=colors.DEEP_ORANGE_500,
             tooltip="Get more details on custom operating system images and recoveries.",
         )
-        # info_button = IconButton(
-        #    icon=icons.HELP_OUTLINE_OUTLINED,
-        #    icon_color=colors.DEEP_ORANGE_500,
-        #    icon_size=30,
-        #    on_click=self.open_explain_images_dlg,
-        #    tooltip="What is an OS image and a recovery file?",
-        # )
-        # add title and progressbar
-        self.right_view.controls.append(
+
+        # add title
+        self.right_view_header.controls.append(
             get_title(
                 "Now pick an OS image and a recovery file:",
                 info_button=info_button,
                 step_indicator_img="steps-header-select.png",
             )
         )
-        self.right_view.controls.append(self.state.progressbar)
 
         # text row to show infos during the process
         self.info_field = Row()

openandroidinstaller/views/start_view.py

@@ -110,12 +110,16 @@ def check_bootloader_unlocked(e):
         )
 
         # build up the main view
-        self.right_view.controls.extend(
+        self.right_view_header.controls.extend(
             [
                 get_title(
                     "Get the phone ready",
                     step_indicator_img="steps-header-get-ready.png",
-                ),
+                )
+            ]
+        )
+        self.right_view.controls.extend(
+            [
                 Markdown(
                     """
 To get started you need to 

openandroidinstaller/views/step_view.py

@@ -106,12 +106,13 @@ def check_advanced_switch(e):
             "Flash custom recovery": "steps-header-recovery.png",
             "Install OS": "steps-header-install.png",
         }
-        self.right_view.controls = [
+        self.right_view_header.controls = [
             get_title(
                 f"{self.step.title}",
                 step_indicator_img=steps_indictor_img_lookup.get(self.step.title),
-            ),
-            self.state.progressbar,
+            )
+        ]
+        self.right_view.controls = [
             Text(f"{self.step.content}"),
         ]
         # basic view depending on step.type
@@ -191,12 +192,6 @@ def call_to_phone(self, e, command: str):
         # reset terminal output
         if self.state.advanced:
             self.terminal_box.clear()
-        # display a progress bar to show something is happening
-        progress_bar = Row(
-            [ProgressBar(width=600, color="#00d886", bgcolor="#eeeeee", bar_height=16)],
-            alignment="center",
-        )
-        self.right_view.controls.append(progress_bar)
         self.right_view.update()
 
         # get the appropriate function to run for every possible command.
@@ -243,15 +238,11 @@ def call_to_phone(self, e, command: str):
         if not success:
             # enable call button to retry
             self.call_button.disabled = False
-            # pop the progress bar
-            self.right_view.controls.remove(progress_bar)
             # also remove the last error text if it happened
             self.error_text.value = f"Command {command} failed! Try again or make sure everything is setup correctly."
         else:
             sleep(5)  # wait to make sure everything is fine
             logger.success(f"Command {command} run successfully. Allow to continue.")
-            # pop the progress bar
-            self.right_view.controls.remove(progress_bar)
             # emable the confirm buton and disable the call button
             self.confirm_button.disabled = False
             self.call_button.disabled = True

openandroidinstaller/views/success_view.py

@@ -36,9 +36,10 @@ def close_window(e):
             logger.success("Success! Close the window.")
             self.page.window_close()
 
-        self.right_view.controls = [
+        self.right_view_header.controls = [
             get_title("Installation completed successfully!"),
-            self.state.progressbar,
+        ]
+        self.right_view.controls = [
             Text("Now your devices boots into the new OS. Have fun with it!"),
             Row(
                 [

openandroidinstaller/views/welcome_view.py

@@ -48,9 +48,9 @@ def build(self):
         )
 
         # build up the main view
+        self.right_view_header.controls.extend([get_title("Welcome to the OpenAndroidInstaller!")])
         self.right_view.controls.extend(
             [
-                get_title("Welcome to the OpenAndroidInstaller!"),
                 Text(
                     "We will walk you through the installation process nice and easy."
                 ),