From 6ac69bb213d62c4764ccd579c8b438101dcedbb5 Mon Sep 17 00:00:00 2001 From: heliguy Date: Fri, 19 Jul 2024 16:20:20 -0400 Subject: [PATCH] make the UI more pwetty :3 --- src/user_data_page/data_subpage.blp | 50 +++++----- src/user_data_page/data_subpage.py | 22 ++++- src/user_data_page/user_data_page.blp | 127 +++++++++++++++++++++----- src/user_data_page/user_data_page.py | 114 +++++++++++++---------- 4 files changed, 217 insertions(+), 96 deletions(-) diff --git a/src/user_data_page/data_subpage.blp b/src/user_data_page/data_subpage.blp index d386c7e..5162185 100644 --- a/src/user_data_page/data_subpage.blp +++ b/src/user_data_page/data_subpage.blp @@ -1,21 +1,23 @@ using Gtk 4.0; using Adw 1; -template $DataSubpage : ScrolledWindow { - Box { +template $DataSubpage : Box { + Box outer_box { orientation: vertical; - Box { - orientation: vertical; + Box label_box { margin-start: 24; margin-end: 24; + halign: fill; + hexpand: true; Label title { label: _("No Title Set"); styles ["title-1"] hexpand: true; + justify: fill; halign: start; wrap: true; } - Box { + Box subtitle_size_box { Label subtitle { label: "No Subtutle Set"; styles ["title-3"] @@ -37,27 +39,33 @@ template $DataSubpage : ScrolledWindow { Label size_label { label: _("Loading Size…"); styles ["title-3"] - hexpand: true; halign: start; wrap: true; } } + margin-bottom: 9; } - Separator { - margin-start: 12; - margin-end: 12; - margin-top: 9; - margin-bottom: 6; - } - FlowBox flow_box { - styles ["boxed-list"] - homogeneous: true; - valign: start; - selection-mode: none; - max-children-per-line: 6; - margin-start: 12; - margin-end: 12; - margin-bottom: 12; + ScrolledWindow scrolled_window { + Box { + orientation: vertical; + vexpand: true; + Separator { + margin-start: 12; + margin-end: 12; + // margin-top: 9; + margin-bottom: 6; + } + FlowBox flow_box { + styles ["boxed-list"] + homogeneous: true; + valign: start; + selection-mode: none; + max-children-per-line: 6; + margin-start: 12; + margin-end: 12; + margin-bottom: 12; + } + } } } } \ No newline at end of file diff --git a/src/user_data_page/data_subpage.py b/src/user_data_page/data_subpage.py index eb89058..dbe4ade 100644 --- a/src/user_data_page/data_subpage.py +++ b/src/user_data_page/data_subpage.py @@ -6,10 +6,15 @@ from .host_info import HostInfo import subprocess @Gtk.Template(resource_path="/io/github/flattool/Warehouse/user_data_page/data_subpage.ui") -class DataSubpage(Gtk.ScrolledWindow): +class DataSubpage(Gtk.Box): __gtype_name__ = 'DataSubpage' gtc = Gtk.Template.Child + scrolled_window = gtc() + + outer_box = gtc() + label_box = gtc() + subtitle_size_box = gtc() title = gtc() subtitle = gtc() spinner = gtc() @@ -62,6 +67,7 @@ class DataSubpage(Gtk.ScrolledWindow): self.total_size = 0 self.total_items = len(data) self.subtitle.set_label(_("{} Items").format(self.total_items)) + self.min_horizontal_label_width = self.label_box.get_preferred_size()[1].width if flatpaks: for i, pak in enumerate(flatpaks): box = DataBox(pak.info["name"], pak.info["id"], pak.data_path, pak.icon_path, self.box_size_callback) @@ -89,6 +95,14 @@ class DataSubpage(Gtk.ScrolledWindow): def on_invalidate(self, box): self.flow_box.invalidate_filter() + def label_orientation_handler(self, adj): + current_page_width = adj.get_upper() - 24 + + if self.label_box.get_allocated_width() < self.min_horizontal_label_width: + GLib.idle_add(lambda *_: self.label_box.set_orientation(Gtk.Orientation.VERTICAL)) + else: + GLib.idle_add(lambda *_: self.label_box.set_orientation(Gtk.Orientation.HORIZONTAL)) + def __init__(self, title, parent_page, main_window, **kwargs): super().__init__(**kwargs) @@ -107,10 +121,14 @@ class DataSubpage(Gtk.ScrolledWindow): self.boxes = [] self.ready_to_sort_size = False self.finished_boxes = 0 + self.min_horizontal_label_width = self.label_box.get_preferred_size()[1].width # Apply self.flow_box.set_sort_func(self.sort_func) self.flow_box.set_filter_func(self.filter_func) # Connections - parent_page.search_entry.connect("search-changed", self.on_invalidate) \ No newline at end of file + parent_page.search_entry.connect("search-changed", self.on_invalidate) + + # self.title.get_preferred_size()[1].width + self.subtitle.get_preferred_size()[1].width + self.scrolled_window.get_hadjustment().connect("changed", self.label_orientation_handler) \ No newline at end of file diff --git a/src/user_data_page/user_data_page.blp b/src/user_data_page/user_data_page.blp index 749fd5d..e5ad00f 100644 --- a/src/user_data_page/user_data_page.blp +++ b/src/user_data_page/user_data_page.blp @@ -28,7 +28,7 @@ template $UserDataPage : Adw.BreakpointBin { } ; [start] - Button sidebar_button { + ToggleButton sidebar_button { icon-name: "dock-left-symbolic"; tooltip-text: _("Show Sidebar"); } @@ -38,13 +38,26 @@ template $UserDataPage : Adw.BreakpointBin { tooltip-text: _("Search User Data"); } [end] - MenuButton sort_button { - popover: sort_pop; + MenuButton active_sort_button { + popover: active_sort_pop; icon-name: "vertical-arrows-long-symbolic"; tooltip-text: _("Sort User Data"); } [end] - ToggleButton select_button { + ToggleButton active_select_button { + icon-name: "selection-mode-symbolic"; + tooltip-text: _("Select User Data"); + } + [end] + MenuButton leftover_sort_button { + visible: false; + popover: leftover_sort_pop; + icon-name: "vertical-arrows-long-symbolic"; + tooltip-text: _("Sort User Data"); + } + [end] + ToggleButton leftover_select_button { + visible: false; icon-name: "selection-mode-symbolic"; tooltip-text: _("Select User Data"); } @@ -63,7 +76,6 @@ template $UserDataPage : Adw.BreakpointBin { } [bottom] Revealer { - reveal-child: bind select_button.active; transition-type: slide_up; [center] Box bottom_bar { @@ -107,7 +119,7 @@ template $UserDataPage : Adw.BreakpointBin { } } -Popover sort_pop { +Popover active_sort_pop { styles ["menu"] Box { orientation: vertical; @@ -118,21 +130,21 @@ Popover sort_pop { Box { homogeneous: true; spacing: 3; - ToggleButton asc { + ToggleButton active_asc { active: true; styles ["flat"] - can-focus: bind asc.active inverted; - can-target: bind asc.active inverted; + can-focus: bind active_asc.active inverted; + can-target: bind active_asc.active inverted; Adw.ButtonContent { icon-name: "view-sort-ascending-symbolic"; label: _("Ascending"); } } - ToggleButton dsc { + ToggleButton active_dsc { styles ["flat"] - active: bind asc.active inverted bidirectional; - can-focus: bind dsc.active inverted; - can-target: bind dsc.active inverted; + active: bind active_asc.active inverted bidirectional; + can-focus: bind active_dsc.active inverted; + can-target: bind active_dsc.active inverted; Adw.ButtonContent { icon-name: "view-sort-descending-symbolic"; label: _("Descending"); @@ -141,31 +153,100 @@ Popover sort_pop { } Separator { } - Box sort_list { + Box { homogeneous: true; spacing: 3; - ToggleButton sort_name { + ToggleButton active_sort_name { active: true; styles ["flat"] - can-focus: bind sort_name.active inverted; - can-target: bind sort_name.active inverted; + can-focus: bind active_sort_name.active inverted; + can-target: bind active_sort_name.active inverted; Adw.ButtonContent { icon-name: "font-x-generic-symbolic"; label: _("Name"); } } - ToggleButton sort_id { + ToggleButton active_sort_id { styles ["flat"] - can-focus: bind sort_id.active inverted; - can-target: bind sort_id.active inverted; + can-focus: bind active_sort_id.active inverted; + can-target: bind active_sort_id.active inverted; Adw.ButtonContent { icon-name: "tag-outline-symbolic"; label: _("ID"); } } - ToggleButton sort_size { - can-focus: bind sort_size.active inverted; - can-target: bind sort_size.active inverted; + ToggleButton active_sort_size { + can-focus: bind active_sort_size.active inverted; + can-target: bind active_sort_size.active inverted; + styles ["flat"] + Adw.ButtonContent { + icon-name: "harddisk-symbolic"; + label: _("Size"); + } + } + } + } +} + +Popover leftover_sort_pop { + styles ["menu"] + Box { + orientation: vertical; + margin-start: 6; + margin-end: 6; + margin-top: 6; + margin-bottom: 6; + Box { + homogeneous: true; + spacing: 3; + ToggleButton leftover_asc { + active: true; + styles ["flat"] + can-focus: bind leftover_asc.active inverted; + can-target: bind leftover_asc.active inverted; + Adw.ButtonContent { + icon-name: "view-sort-ascending-symbolic"; + label: _("Ascending"); + } + } + ToggleButton leftover_dsc { + styles ["flat"] + active: bind leftover_asc.active inverted bidirectional; + can-focus: bind leftover_dsc.active inverted; + can-target: bind leftover_dsc.active inverted; + Adw.ButtonContent { + icon-name: "view-sort-descending-symbolic"; + label: _("Descending"); + } + } + } + Separator { + } + Box { + homogeneous: true; + spacing: 3; + ToggleButton leftover_sort_name { + active: true; + styles ["flat"] + can-focus: bind leftover_sort_name.active inverted; + can-target: bind leftover_sort_name.active inverted; + Adw.ButtonContent { + icon-name: "font-x-generic-symbolic"; + label: _("Name"); + } + } + ToggleButton leftover_sort_id { + styles ["flat"] + can-focus: bind leftover_sort_id.active inverted; + can-target: bind leftover_sort_id.active inverted; + Adw.ButtonContent { + icon-name: "tag-outline-symbolic"; + label: _("ID"); + } + } + ToggleButton leftover_sort_size { + can-focus: bind leftover_sort_size.active inverted; + can-target: bind leftover_sort_size.active inverted; styles ["flat"] Adw.ButtonContent { icon-name: "harddisk-symbolic"; diff --git a/src/user_data_page/user_data_page.py b/src/user_data_page/user_data_page.py index 48fef62..cef8a4a 100644 --- a/src/user_data_page/user_data_page.py +++ b/src/user_data_page/user_data_page.py @@ -14,55 +14,58 @@ class UserDataPage(Adw.BreakpointBin): switcher_bar = gtc() sidebar_button = gtc() search_button = gtc() - select_button = gtc() + active_select_button = gtc() + active_sort_button = gtc() + leftover_select_button = gtc() + leftover_sort_button = gtc() search_entry = gtc() stack = gtc() - sort_pop = gtc() - asc = gtc() - dsc = gtc() - sort_list = gtc() - sort_name = gtc() - sort_id = gtc() - sort_size = gtc() + # sort_pop = gtc() + # asc = gtc() + # dsc = gtc() + # sort_list = gtc() + # sort_name = gtc() + # sort_id = gtc() + # sort_size = gtc() # Referred to in the main window # It is used to determine if a new page should be made or not # This must be set to the created object from within the class's __init__ method instance = None - def sort_handler(self, button, should_sort=True): - if not button.get_active(): - return + # def sort_handler(self, button, should_sort=True): + # if not button.get_active(): + # return - match button: - case self.asc: - self.adp.sort_ascend = True - self.ldp.sort_ascend = True - case self.dsc: - self.adp.sort_ascend = False - self.ldp.sort_ascend = False - case self.sort_name: - self.sort_id.grab_focus() - self.sort_id.set_active(False) - self.sort_size.set_active(False) - self.adp.sort_mode = "name" - self.ldp.sort_mode = "name" - case self.sort_id: - self.sort_size.grab_focus() - self.sort_size.set_active(False) - self.sort_name.set_active(False) - self.adp.sort_mode = "id" - self.ldp.sort_mode = "id" - case self.sort_size: - self.sort_name.grab_focus() - self.sort_name.set_active(False) - self.sort_id.set_active(False) - self.adp.sort_mode = "size" - self.ldp.sort_mode = "size" + # match button: + # case self.asc: + # self.adp.sort_ascend = True + # self.ldp.sort_ascend = True + # case self.dsc: + # self.adp.sort_ascend = False + # self.ldp.sort_ascend = False + # case self.sort_name: + # self.sort_id.grab_focus() + # self.sort_id.set_active(False) + # self.sort_size.set_active(False) + # self.adp.sort_mode = "name" + # self.ldp.sort_mode = "name" + # case self.sort_id: + # self.sort_size.grab_focus() + # self.sort_size.set_active(False) + # self.sort_name.set_active(False) + # self.adp.sort_mode = "id" + # self.ldp.sort_mode = "id" + # case self.sort_size: + # self.sort_name.grab_focus() + # self.sort_name.set_active(False) + # self.sort_id.set_active(False) + # self.adp.sort_mode = "size" + # self.ldp.sort_mode = "size" - if should_sort: - self.adp.flow_box.invalidate_sort() - self.ldp.flow_box.invalidate_sort() + # if should_sort: + # self.adp.flow_box.invalidate_sort() + # self.ldp.flow_box.invalidate_sort() # def bpt_handler(self, _, is_applied): # if is_applied and self.adj.get_value() == 0: @@ -97,11 +100,11 @@ class UserDataPage(Adw.BreakpointBin): self.ldp.spinner.set_visible(True) self.ldp.flow_box.remove_all() - self.sort_handler(self.asc, False) - self.sort_handler(self.dsc, False) - self.sort_handler(self.sort_name, False) - self.sort_handler(self.sort_id, False) - self.sort_handler(self.sort_size, False) + # self.sort_handler(self.asc, False) + # self.sort_handler(self.dsc, False) + # self.sort_handler(self.sort_name, False) + # self.sort_handler(self.sort_id, False) + # self.sort_handler(self.sort_size, False) def end_loading(self, *args): def callback(*args): @@ -111,6 +114,12 @@ class UserDataPage(Adw.BreakpointBin): Gio.Task.new(None, None, callback).run_in_thread(self.sort_data) + def switch_view_handler(self, page): + self.active_select_button.set_visible(page is self.adp) + self.active_sort_button.set_visible(page is self.adp) + self.leftover_select_button.set_visible(page is self.ldp) + self.leftover_sort_button.set_visible(page is self.ldp) + def __init__(self, main_window, **kwargs): super().__init__(**kwargs) @@ -123,6 +132,7 @@ class UserDataPage(Adw.BreakpointBin): self.active_data = [] self.leftover_data = [] self.total_items = 0 + ms=main_window.main_split # Apply self.stack.add_titled_with_icon( @@ -137,14 +147,18 @@ class UserDataPage(Adw.BreakpointBin): title=_("Leftover Data"), icon_name="folder-templates-symbolic", ) + self.sidebar_button.set_active(ms.get_show_sidebar()) # Connections - self.sidebar_button.connect("clicked", lambda *_, ms=main_window.main_split: ms.set_show_sidebar(not ms.get_show_sidebar() if not ms.get_collapsed() else True)) + # self.sidebar_button.connect("clicked", lambda *_, ms=main_window.main_split: ms.set_show_sidebar(not ms.get_show_sidebar() if not ms.get_collapsed() else True)) + main_window.main_split.connect("notify::show-sidebar", lambda *_: self.sidebar_button.set_active(ms.get_show_sidebar())) + self.sidebar_button.connect("toggled", lambda *_: ms.set_show_sidebar(self.sidebar_button.get_active())) + self.stack.connect("notify::visible-child", lambda *_: self.switch_view_handler(self.stack.get_visible_child())) # self.adj.connect("value-changed", self.show_title_handler) - self.asc.connect("toggled", self.sort_handler) - self.dsc.connect("toggled", self.sort_handler) - self.sort_name.connect("toggled", self.sort_handler) - self.sort_id.connect("toggled", self.sort_handler) - self.sort_size.connect("toggled", self.sort_handler) + # self.asc.connect("toggled", self.sort_handler) + # self.dsc.connect("toggled", self.sort_handler) + # self.sort_name.connect("toggled", self.sort_handler) + # self.sort_id.connect("toggled", self.sort_handler) + # self.sort_size.connect("toggled", self.sort_handler) # self.bpt.connect("apply", self.bpt_handler, True) # self.bpt.connect("unapply", self.bpt_handler, False) \ No newline at end of file