feat: add mechanism to toggle sidebar button in mobile view

add mechanism in toggle sidebar button to toggle bottom sheet when in mobile view, and return to original behavior when in desktop view.
tfuxu · Dec 4, 2023 · c70170a · c70170a
1 parent 5eaed31
commit c70170a
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 9 deletions.
diff --git a/data/ui/dither_page.blp b/data/ui/dither_page.blp
@@ -107,10 +107,10 @@ template $HalftoneDitherPage: Adw.BreakpointBin {
                   ]
                 }
 
-                Gtk.Button {
+                Gtk.Button toggle_sheet_button {
                   icon-name: "sidebar-show-right-symbolic";
                   tooltip-text: _("Toggle Sidebar");
-                  clicked => $on_toggle_sidebar_clicked();
+                  clicked => $on_toggle_sheet_clicked();
 
                   styles [
                     "osd",
@@ -134,6 +134,10 @@ template $HalftoneDitherPage: Adw.BreakpointBin {
             };
           }
         }
+
+        Adw.Bin bottom_sheet {
+          visible: false;
+        }
       };
     };
   };
@@ -142,6 +146,7 @@ template $HalftoneDitherPage: Adw.BreakpointBin {
     condition ("max-width: 640px")
     setters {
       split_view.collapsed: true;
+      bottom_sheet.visible: true;
       content_main_menu.visible: true;
     }
   }

diff --git a/halftone/views/dither_page.py b/halftone/views/dither_page.py
@@ -31,9 +31,12 @@ class HalftoneDitherPage(Adw.BreakpointBin):
     split_view = Gtk.Template.Child()
     sidebar_view = Gtk.Template.Child()
 
+    bottom_sheet = Gtk.Template.Child()
+
     preview_scroll_window = Gtk.Template.Child()
 
     save_image_button = Gtk.Template.Child()
+    toggle_sheet_button = Gtk.Template.Child()
 
     save_format_combo = Gtk.Template.Child()
     dither_algorithms_combo = Gtk.Template.Child()
@@ -74,6 +77,8 @@ def __init__(self, parent, **kwargs):
 
         self.toast_overlay = self.parent.toast_overlay
 
+        self.is_mobile: bool = False
+
         self.origin_x: float = None
         self.origin_y: float = None
 
@@ -290,12 +295,19 @@ def on_resize_toggled(self, widget, *args):
                                           self.image_height_row)
 
     @Gtk.Template.Callback()
-    def on_toggle_sidebar_clicked(self, widget, *args):
-        if self.split_view.props.show_sidebar == False:
-            self.split_view.set_show_sidebar(True)
-            return
+    def on_toggle_sheet_clicked(self, widget, *args):
+        if self.is_mobile:
+            if self.bottom_sheet.props.visible:
+                self.bottom_sheet.set_visible(False)
+                return
 
-        self.split_view.set_show_sidebar(False)
+            self.bottom_sheet.set_visible(True)
+        else:
+            if self.split_view.props.show_sidebar:
+                self.split_view.set_show_sidebar(False)
+                return
+
+            self.split_view.set_show_sidebar(True)
 
     @Gtk.Template.Callback()
     def on_brightness_changed(self, widget):
@@ -426,12 +438,22 @@ def on_awaiting_image_load(self, *args):
 
     def on_breakpoint_apply(self, *args):
         self.sidebar_view.set_content(None)
-        self.image_box.append(self.image_prefs_page)
+        self.bottom_sheet.set_child(self.image_prefs_page)
+
+        self.is_mobile = True
+
+        self.toggle_sheet_button.set_tooltip_text(_("Toggle Bottom Sheet"))
+        self.toggle_sheet_button.set_icon_name("sheet-show-bottom-symbolic")
 
     def on_breakpoint_unapply(self, *args):
-        self.image_box.remove(self.image_prefs_page)
+        self.bottom_sheet.set_child(None)
         self.sidebar_view.set_content(self.image_prefs_page)
 
+        self.is_mobile = False
+
+        self.toggle_sheet_button.set_tooltip_text(_("Toggle Sidebar"))
+        self.toggle_sheet_button.set_icon_name("sidebar-show-right-symbolic")
+
     """ Module-specific helpers """
 
     def set_original_paintable(self, path: str):