ui: Make side panels to overlay the center panel in autohide layout.

This commit makes the side panels to overlay the body which avoids
squashing and stretching of the message view which improves UX in
autohide mode.

tests/ui/test_ui.py

@@ -6,7 +6,7 @@
 
 from zulipterminal.api_types import Composition
 from zulipterminal.config.keys import keys_for_command
-from zulipterminal.ui import LEFT_WIDTH, RIGHT_WIDTH, View
+from zulipterminal.ui import LEFT_WIDTH, RIGHT_WIDTH, TAB_WIDTH, View
 from zulipterminal.urwid_types import urwid_Box
 
 

zulipterminal/ui.py

@@ -107,8 +107,8 @@ def set_footer_text(
             text = self.get_random_help()
         else:
             text = text_list
-        self._w.footer.set_text(text)
-        self._w.footer.set_attr_map({None: style})
+        self.frame.footer.set_text(text)
+        self.frame.footer.set_attr_map({None: style})
         self.controller.update_screen()
         if duration is not None:
             assert duration > 0
@@ -142,17 +142,19 @@ def main_window(self) -> Any:
         self.right_panel, self.right_tab = self.right_column_view()
         if self.controller.autohide:
             body = [
-                (LEFT_WIDTH, self.left_panel),
+                (TAB_WIDTH, self.left_tab),
                 ("weight", 10, self.center_panel),
                 (TAB_WIDTH, self.right_tab),
             ]
+            focus_column = 1
         else:
             body = [
                 (LEFT_WIDTH, self.left_panel),
                 ("weight", 10, self.center_panel),
                 (RIGHT_WIDTH, self.right_panel),
             ]
-        self.body = urwid.Columns(body, focus_column=0)
+            focus_column = 0
+        self.body = urwid.Columns(body, focus_column=focus_column)
 
         # NOTE: message_view is None, but middle_column_view is called above
         # and sets it.
@@ -177,24 +179,46 @@ def main_window(self) -> Any:
             ]
         )
 
-        w = urwid.Frame(
+        self.frame = urwid.Frame(
             self.body, title_bar, focus_part="body", footer=self.footer_view()
         )
-        return w
+
+        # Show overlayed left panel on startup in autohide mode
+        self.show_left_panel(visible=True)
+
+        return self.frame
 
     def show_left_panel(self, *, visible: bool) -> None:
         if not self.controller.autohide:
             return
-        option = ("given", LEFT_WIDTH) if visible else ("given", TAB_WIDTH)
-        widget = self.left_panel if visible else self.left_tab
-        self.body.contents[0] = (widget, self.body.options(*option))
+
+        if visible:
+            self.frame.body = urwid.Overlay(
+                urwid.Columns([self.left_panel, (1, urwid.SolidFill("▏"))]),
+                self.body,
+                align="left",
+                width=LEFT_WIDTH,
+                valign="top",
+                height=("relative", 100),
+            )
+        else:
+            self.frame.body = self.body
 
     def show_right_panel(self, *, visible: bool) -> None:
         if not self.controller.autohide:
             return
-        option = ("given", RIGHT_WIDTH) if visible else ("given", TAB_WIDTH)
-        widget = self.right_panel if visible else self.right_tab
-        self.body.contents[2] = (widget, self.body.options(*option))
+
+        if visible:
+            self.frame.body = urwid.Overlay(
+                urwid.Columns([(1, urwid.SolidFill("▕")), self.right_panel]),
+                self.body,
+                align="right",
+                width=LEFT_WIDTH,
+                valign="top",
+                height=("relative", 100),
+            )
+        else:
+            self.frame.body = self.body
 
     def keypress(self, size: urwid_Box, key: str) -> Optional[str]:
         self.model.new_user_input = True