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.

To do this the `show_panel` functions have been updated to use
Overlay.

The focus setting in the `show_panel` functions which could be
avoided at a later point needed a reordering in the SEARCH keypress
which actually makes it the correct order, i.e.,
* first handle autohide
* then handle search

Tests updated.

Author: Rohitth007

tests/ui/test_ui.py

@@ -230,56 +230,60 @@ def just_set_message_view(self: Any) -> None:
         show_left_panel.assert_called_once_with(visible=True)
 
     @pytest.mark.parametrize("autohide", [True, False])
-    @pytest.mark.parametrize("visible, width", [(True, LEFT_WIDTH), (False, TAB_WIDTH)])
-    def test_show_left_panel(
+    @pytest.mark.parametrize("visible", [True, False])
+    @pytest.mark.parametrize("test_method", ["left_panel", "right_panel"])
+    def test_show_panel_methods(
         self,
         mocker: MockerFixture,
         view: View,
         visible: bool,
-        width: int,
         autohide: bool,
+        test_method: str,
     ) -> None:
-        view.body = mocker.Mock()
-        view.body.contents = [view.left_panel, mocker.Mock(), mocker.Mock()]
+        view.frame.body = view.body
         view.controller.autohide = autohide
+        expected_overlay_options = [
+            "",
+            None,
+            "given",
+            0,
+            None,
+            0,
+            0,
+            "top",
+            None,
+            "relative",
+            100,
+            None,
+            0,
+            0,
+        ]
+        if test_method == "left_panel":
+            expected_overlay_options[0] = "left"
+            expected_overlay_options[3] = LEFT_WIDTH + 1
+            expected_tab = view.left_tab
+            expected_panel = view.left_panel
 
-        view.show_left_panel(visible=visible)
-
-        if autohide:
-            if visible:
-                assert view.body.contents[0][0] == view.left_panel
-            else:
-                assert view.body.contents[0][0] == view.left_tab
-            view.body.options.assert_called_once_with("given", width)
+            view.show_left_panel(visible=visible)
         else:
-            view.body.options.assert_not_called()
+            expected_overlay_options[0] = "right"
+            expected_overlay_options[3] = RIGHT_WIDTH + 1
+            expected_tab = view.right_tab
+            expected_panel = view.right_panel
 
-    @pytest.mark.parametrize("autohide", [True, False])
-    @pytest.mark.parametrize(
-        "visible, width", [(True, RIGHT_WIDTH), (False, TAB_WIDTH)]
-    )
-    def test_show_right_panel(
-        self,
-        mocker: MockerFixture,
-        view: View,
-        visible: bool,
-        width: int,
-        autohide: bool,
-    ) -> None:
-        view.body = mocker.Mock()
-        view.body.contents = [mocker.Mock(), mocker.Mock(), view.right_panel]
-        view.controller.autohide = autohide
-
-        view.show_right_panel(visible=visible)
+            view.show_right_panel(visible=visible)
 
         if autohide:
             if visible:
-                assert view.body.contents[2][0] == view.right_panel
+                assert (expected_panel, mocker.ANY) in view.frame.body.top_w.contents
+                assert view.frame.body.bottom_w == view.body
+                assert view.frame.body.contents[1][1] == tuple(expected_overlay_options)
             else:
-                assert view.body.contents[2][0] == view.right_tab
-            view.body.options.assert_called_once_with("given", width)
+                assert view.frame.body.contents[0][0] == expected_tab
+                assert view.body.focus_position == 1
         else:
-            view.body.options.assert_not_called()
+            # No change
+            assert view.frame.body.contents[0][0] == expected_tab
 
     def test_keypress_normal_mode_navigation(
         self,
@@ -359,7 +363,7 @@ def test_keypress_autohide_users(
         view.right_panel = mocker.Mock()
         size = widget_size(view)
         view.controller.is_in_editor_mode = lambda: False
-        view.body.focus_position = None
+        view.body.focus_position = 1
 
         view.keypress(size, key)
 

zulipterminal/ui.py

@@ -190,17 +190,43 @@ def show_left_panel(self, *, visible: bool) -> None:
         if not self.controller.autohide:
             return
 
-        width = LEFT_WIDTH if visible else TAB_WIDTH
-        widget = self.left_panel if visible else self.left_tab
-        self.body.contents[0] = (widget, self.body.options("given", width))
+        if visible:
+            self.frame.body = urwid.Overlay(
+                urwid.Columns(
+                    [(LEFT_WIDTH, self.left_panel), (1, urwid.SolidFill("▏"))]
+                ),
+                self.body,
+                align="left",
+                width=LEFT_WIDTH + 1,
+                valign="top",
+                height=("relative", 100),
+            )
+        else:
+            self.frame.body = self.body
+            # FIXME: This can be avoided after fixing the "sacrificing 1st
+            # unread msg" issue and setting focus_column=1 when initializing.
+            self.body.focus_position = 1
 
     def show_right_panel(self, *, visible: bool) -> None:
         if not self.controller.autohide:
             return
 
-        width = RIGHT_WIDTH if visible else TAB_WIDTH
-        widget = self.right_panel if visible else self.right_tab
-        self.body.contents[2] = (widget, self.body.options("given", width))
+        if visible:
+            self.frame.body = urwid.Overlay(
+                urwid.Columns(
+                    [(1, urwid.SolidFill("▕")), (RIGHT_WIDTH, self.right_panel)]
+                ),
+                self.body,
+                align="right",
+                width=RIGHT_WIDTH + 1,
+                valign="top",
+                height=("relative", 100),
+            )
+        else:
+            self.frame.body = self.body
+            # FIXME: This can be avoided after fixing the "sacrificing 1st
+            # unread msg" issue and setting focus_column=1 when initializing.
+            self.body.focus_position = 1
 
     def keypress(self, size: urwid_Box, key: str) -> Optional[str]:
         self.model.new_user_input = True
@@ -228,19 +254,19 @@ def keypress(self, size: urwid_Box, key: str) -> Optional[str]:
             self.body.focus_col = 1
         elif is_command_key("SEARCH_PEOPLE", key):
             # Start User Search if not in editor_mode
-            self.body.focus_position = 2
-            self.users_view.keypress(size, key)
             self.show_left_panel(visible=False)
             self.show_right_panel(visible=True)
+            self.body.focus_position = 2
+            self.users_view.keypress(size, key)
             return key
         elif is_command_key("SEARCH_STREAMS", key) or is_command_key(
             "SEARCH_TOPICS", key
         ):
             # jump stream search
-            self.body.focus_position = 0
-            self.left_panel.keypress(size, key)
             self.show_right_panel(visible=False)
             self.show_left_panel(visible=True)
+            self.body.focus_position = 0
+            self.left_panel.keypress(size, key)
             return key
         elif is_command_key("OPEN_DRAFT", key):
             saved_draft = self.model.session_draft_message()