From e90791a71249e851eda823f537222243fb13987a Mon Sep 17 00:00:00 2001
From: Rohitth <rohitthc123456789@gmail.com>
Date: Sun, 25 Jul 2021 19:38:55 +0530
Subject: [PATCH] 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 |  2 +-
 zulipterminal/ui.py | 48 +++++++++++++++++++++++++++++++++------------
 2 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/tests/ui/test_ui.py b/tests/ui/test_ui.py
index 8d567facce..a97a7168cf 100644
--- a/tests/ui/test_ui.py
+++ b/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
 
 
diff --git a/zulipterminal/ui.py b/zulipterminal/ui.py
index bf4fb7bd64..c48ba029ed 100644
--- a/zulipterminal/ui.py
+++ b/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