ui: Add TabView's to autohide layout.

This commit adds a closed tab view of width 3 for each of the side
panels when in the autohide layout. The initial layout when the app
is started is left panel open, right panel closed.

This makes use of the TabView class and changes show_left_panel
and show_right_panel accordingly.

Tests updated.

Author: Rohitth007

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
 
 
@@ -25,9 +25,15 @@ def mock_external_classes(self, mocker: MockerFixture) -> None:
 
     @pytest.fixture
     def view(self, mocker: MockerFixture) -> View:
-        main_window = mocker.patch(VIEW + ".main_window")
+        mocker.patch(MODULE + ".TabView")
+        mocker.patch(MODULE + ".LeftColumnView")
+        mocker.patch("zulipterminal.ui_tools.views.urwid.Frame")
+        mocker.patch("zulipterminal.ui_tools.views.MessageView")
+        mocker.patch(MODULE + ".RightColumnView")
+
         # View is an urwid.Frame instance, a Box widget.
         mocker.patch(VIEW + ".sizing", return_value=frozenset({"box"}))
+
         return View(self.controller)
 
     def test_init(self, mocker: MockerFixture) -> None:
@@ -44,8 +50,11 @@ def test_init(self, mocker: MockerFixture) -> None:
 
     def test_left_column_view(self, mocker: MockerFixture, view: View) -> None:
         left_view = mocker.patch(MODULE + ".LeftColumnView")
+        left_tab = mocker.patch(MODULE + ".TabView")
+
         return_value = view.left_column_view()
-        assert return_value == left_view(view)
+
+        assert return_value == (left_view(view), left_tab())
 
     def test_middle_column_view(self, view: View, mocker: MockerFixture) -> None:
         middle_view = mocker.patch(MODULE + ".MiddleColumnView")
@@ -59,11 +68,14 @@ def test_middle_column_view(self, view: View, mocker: MockerFixture) -> None:
 
     def test_right_column_view(self, view: View, mocker: MockerFixture) -> None:
         right_view = mocker.patch(MODULE + ".RightColumnView")
+        right_tab = mocker.patch(MODULE + ".TabView")
         line_box = mocker.patch(MODULE + ".urwid.LineBox")
+
         return_value = view.right_column_view()
+
         right_view.assert_called_once_with(view)
         assert view.users_view == right_view()
-        assert return_value == line_box()
+        assert return_value == (line_box(), right_tab())
 
     def test_set_footer_text_default(self, view: View, mocker: MockerFixture) -> None:
         mocker.patch(VIEW + ".get_random_help", return_value=["some help text"])
@@ -153,15 +165,15 @@ def test_footer_view(self, mocker: MockerFixture, view: View) -> None:
     def test_main_window(
         self, mocker: MockerFixture, monkeypatch: pytest.MonkeyPatch
     ) -> None:
-        left = mocker.patch(VIEW + ".left_column_view")
+        left = mocker.patch(VIEW + ".left_column_view", return_value=("PANEL", "TAB"))
 
         # NOTE: Use monkeypatch not patch, as view doesn't exist until later
         def just_set_message_view(self: Any) -> None:
             self.message_view = mocker.Mock(read_message=lambda: None)
 
         monkeypatch.setattr(View, "middle_column_view", just_set_message_view)
 
-        right = mocker.patch(VIEW + ".right_column_view")
+        right = mocker.patch(VIEW + ".right_column_view", return_value=("PANEL", "TAB"))
         col = mocker.patch(MODULE + ".urwid.Columns")
         frame = mocker.patch(MODULE + ".urwid.Frame")
         title_divider = mocker.patch(MODULE + ".urwid.Divider")
@@ -190,9 +202,9 @@ def just_set_message_view(self: Any) -> None:
         expected_column_calls = [
             mocker.call(
                 [
-                    (LEFT_WIDTH, left()),
+                    (LEFT_WIDTH, view.left_panel),
                     ("weight", 10, mocker.ANY),  # ANY is a center
-                    (0, right()),
+                    (TAB_WIDTH, view.right_tab),
                 ],
                 focus_column=0,
             ),
@@ -215,7 +227,7 @@ def just_set_message_view(self: Any) -> None:
         )
 
     @pytest.mark.parametrize("autohide", [True, False])
-    @pytest.mark.parametrize("visible, width", [(True, LEFT_WIDTH), (False, 0)])
+    @pytest.mark.parametrize("visible, width", [(True, LEFT_WIDTH), (False, TAB_WIDTH)])
     def test_show_left_panel(
         self,
         mocker: MockerFixture,
@@ -224,20 +236,25 @@ def test_show_left_panel(
         width: int,
         autohide: bool,
     ) -> None:
-        view.left_panel = mocker.Mock()
         view.body = mocker.Mock()
-        view.body.contents = [mocker.Mock(), mocker.Mock(), mocker.Mock()]
+        view.body.contents = [view.left_panel, mocker.Mock(), mocker.Mock()]
         view.controller.autohide = autohide
 
         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)
         else:
             view.body.options.assert_not_called()
 
     @pytest.mark.parametrize("autohide", [True, False])
-    @pytest.mark.parametrize("visible, width", [(True, RIGHT_WIDTH), (False, 0)])
+    @pytest.mark.parametrize(
+        "visible, width", [(True, RIGHT_WIDTH), (False, TAB_WIDTH)]
+    )
     def test_show_right_panel(
         self,
         mocker: MockerFixture,
@@ -246,14 +263,17 @@ def test_show_right_panel(
         width: int,
         autohide: bool,
     ) -> None:
-        view.right_panel = mocker.Mock()
         view.body = mocker.Mock()
-        view.body.contents = [mocker.Mock(), mocker.Mock(), mocker.Mock()]
+        view.body.contents = [mocker.Mock(), mocker.Mock(), view.right_panel]
         view.controller.autohide = autohide
 
         view.show_right_panel(visible=visible)
 
         if autohide:
+            if visible:
+                assert view.body.contents[2][0] == view.right_panel
+            else:
+                assert view.body.contents[2][0] == view.right_tab
             view.body.options.assert_called_once_with("given", width)
         else:
             view.body.options.assert_not_called()

zulipterminal/config/symbols.py

@@ -18,3 +18,5 @@
 STATUS_IDLE = "◒"
 STATUS_OFFLINE = "○"
 STATUS_INACTIVE = "•"
+AUTOHIDE_TAB_LEFT_ARROW = "❰"
+AUTOHIDE_TAB_RIGHT_ARROW = "❱"

zulipterminal/ui.py

@@ -8,6 +8,8 @@
 from zulipterminal.config.keys import commands_for_random_tips, is_command_key
 from zulipterminal.config.symbols import (
     APPLICATION_TITLE_BAR_LINE,
+    AUTOHIDE_TAB_LEFT_ARROW,
+    AUTOHIDE_TAB_RIGHT_ARROW,
     COLUMN_TITLE_BAR_LINE,
 )
 from zulipterminal.helper import asynch
@@ -17,10 +19,12 @@
     LeftColumnView,
     MiddleColumnView,
     RightColumnView,
+    TabView,
 )
 from zulipterminal.urwid_types import urwid_Box
 
 
+TAB_WIDTH = 3
 LEFT_WIDTH = 27
 RIGHT_WIDTH = 23
 
@@ -46,7 +50,11 @@ def __init__(self, controller: Any) -> None:
         super().__init__(self.main_window())
 
     def left_column_view(self) -> Any:
-        return LeftColumnView(self)
+        tab = TabView(
+            f"{AUTOHIDE_TAB_LEFT_ARROW} STREAMS & TOPICS {AUTOHIDE_TAB_LEFT_ARROW}"
+        )
+        panel = LeftColumnView(self)
+        return panel, tab
 
     def middle_column_view(self) -> Any:
         self.middle_column = MiddleColumnView(
@@ -63,8 +71,9 @@ def middle_column_view(self) -> Any:
         )
 
     def right_column_view(self) -> Any:
+        tab = TabView(f"{AUTOHIDE_TAB_RIGHT_ARROW} USERS {AUTOHIDE_TAB_RIGHT_ARROW}")
         self.users_view = RightColumnView(self)
-        return urwid.LineBox(
+        panel = urwid.LineBox(
             self.users_view,
             title="Users",
             title_attr="column_title",
@@ -77,6 +86,7 @@ def right_column_view(self) -> Any:
             bline="",
             brcorner="",
         )
+        return panel, tab
 
     def get_random_help(self) -> List[Any]:
         # Get random allowed hotkey (ie. eligible for being displayed as a tip)
@@ -131,14 +141,14 @@ def footer_view(self) -> Any:
         return urwid.AttrWrap(urwid.Text(text_header), "footer")
 
     def main_window(self) -> Any:
-        self.left_panel = self.left_column_view()
+        self.left_panel, self.left_tab = self.left_column_view()
         self.center_panel = self.middle_column_view()
-        self.right_panel = self.right_column_view()
+        self.right_panel, self.right_tab = self.right_column_view()
         if self.controller.autohide:
             body = [
                 (LEFT_WIDTH, self.left_panel),
                 ("weight", 10, self.center_panel),
-                (0, self.right_panel),
+                (TAB_WIDTH, self.right_tab),
             ]
         else:
             body = [
@@ -180,15 +190,17 @@ def show_left_panel(self, *, visible: bool) -> None:
         if not self.controller.autohide:
             return
 
-        width = LEFT_WIDTH if visible else 0
-        self.body.contents[0] = (self.left_panel, self.body.options("given", width))
+        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))
 
     def show_right_panel(self, *, visible: bool) -> None:
         if not self.controller.autohide:
             return
 
-        width = RIGHT_WIDTH if visible else 0
-        self.body.contents[2] = (self.right_panel, self.body.options("given", width))
+        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))
 
     def keypress(self, size: urwid_Box, key: str) -> Optional[str]:
         self.model.new_user_input = True