Make sorting UI better

2026-04-15 00:34:42 +09:00 · 2024-07-19 11:17:42 -04:00
parent da3a909230
commit ae3cd173ed
9 changed files with 61 additions and 23 deletions
--- a/data/icons/font-x-generic-symbolic.svg
+++ b/data/icons/font-x-generic-symbolic.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
+    <path d="m 10 2 c -0.550781 0 -1 0.449219 -1 1 v 11 c 0 0.550781 0.449219 1 1 1 h 3 c 1.636719 0 2.988281 -1.347656 2.988281 -2.984375 v -2.042969 c 0 -1.636718 -1.351562 -2.984375 -2.988281 -2.984375 h -2 v -3.988281 c 0 -0.550781 -0.449219 -1 -1 -1 z m -8 3 c -0.550781 0 -1 0.449219 -1 1 s 0.449219 1 1 1 h 2 c 0.558594 0 0.992188 0.429688 1 0.988281 h -1.402344 c -1.925781 -0.042969 -3.5429685 1.507813 -3.582031 3.429688 v 0.019531 c 0 1.957031 1.605469 3.5625 3.558594 3.5625 h 2.425781 c 0.550781 0 1 -0.449219 1 -1 v -6 c 0 -1.644531 -1.355469 -3 -3 -3 z m 9 3.988281 h 2 c 0.554688 0 0.988281 0.429688 0.988281 0.984375 v 2.042969 c 0 0.554687 -0.433593 0.984375 -0.988281 0.984375 h -2 z m -7.445312 1 h 0.019531 h 1.425781 v 3.011719 h -1.425781 c -0.867188 0 -1.546875 -0.683594 -1.554688 -1.550781 c 0.023438 -0.835938 0.695313 -1.480469 1.535157 -1.460938 z m 0 0" fill="#2e3434"/>
+</svg>
--- a/data/icons/harddisk-symbolic.svg
+++ b/data/icons/harddisk-symbolic.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><path d="m 4 0 c -1.644531 0 -3 1.355469 -3 3 v 10 c 0 1.644531 1.355469 3 3 3 h 8 c 1.644531 0 3 -1.355469 3 -3 v -10 c 0 -1.644531 -1.355469 -3 -3 -3 z m 0 2 h 8 c 0.570312 0 1 0.429688 1 1 v 9 c 0 0.570312 -0.429688 1 -1 1 h -8 c -0.554688 0 -1 -0.445312 -1 -1 v -9 c 0 -0.554688 0.445312 -1 1 -1 z m 4 1 c -2.210938 0 -4 1.789062 -4 4 v 4 h 4 c 2.5 0 4 -1.789062 4 -4 s -1.789062 -4 -4 -4 z m 0 2 c 1.105469 0 2 0.894531 2 2 s -0.894531 2 -2 2 s -2 -0.894531 -2 -2 s 0.894531 -2 2 -2 z m 0 0" fill="#222222"/></svg>
--- a/data/icons/tag-outline-symbolic.svg
+++ b/data/icons/tag-outline-symbolic.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><g fill="#222222"><path d="m 6 4.5 c 0 0.828125 -0.671875 1.5 -1.5 1.5 s -1.5 -0.671875 -1.5 -1.5 s 0.671875 -1.5 1.5 -1.5 s 1.5 0.671875 1.5 1.5 z m 0 0"/><path d="m 0 7.089844 c 0 0.847656 0.335938 1.660156 0.9375 2.261718 l 5.382812 5.382813 c 0.929688 0.933594 2.429688 0.933594 3.359376 0 l 4.964843 -4.964844 c 0.980469 -0.980469 0.980469 -2.558593 0 -3.539062 l -5.417969 -5.417969 c -0.519531 -0.519531 -1.226562 -0.8125 -1.960937 -0.8125 h -3.265625 c -2.214844 0 -4 1.785156 -4 4 z m 4 -5.089844 h 3.265625 c 0.207031 0 0.402344 0.082031 0.546875 0.226562 l 5.417969 5.417969 c 0.191406 0.191407 0.191406 0.519531 0 0.710938 l -4.964844 4.964843 c -0.144531 0.144532 -0.386719 0.144532 -0.53125 0 l -5.382813 -5.382812 c -0.226562 -0.226562 -0.351562 -0.53125 -0.351562 -0.847656 v -3.089844 c 0 -1.097656 0.902344 -2 2 -2 z m 0 0"/></g></svg>
--- a/data/icons/view-sort-ascending-symbolic.svg
+++ b/data/icons/view-sort-ascending-symbolic.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="#2e3436">
+        <path d="m 6.5 6 c -0.277344 0 -0.5 0.222656 -0.5 0.5 v 1 c 0 0.277344 0.222656 0.5 0.5 0.5 h 5 c 0.277344 0 0.5 -0.222656 0.5 -0.5 v -1 c 0 -0.277344 -0.222656 -0.5 -0.5 -0.5 z m 0 3 c -0.277344 0 -0.5 0.222656 -0.5 0.5 v 1 c 0 0.277344 0.222656 0.5 0.5 0.5 h 7 c 0.277344 0 0.5 -0.222656 0.5 -0.5 v -1 c 0 -0.277344 -0.222656 -0.5 -0.5 -0.5 z m 0 3 c -0.277344 0 -0.5 0.222656 -0.5 0.5 v 1 c 0 0.277344 0.222656 0.5 0.5 0.5 h 9 c 0.277344 0 0.5 -0.222656 0.5 -0.5 v -1 c 0 -0.277344 -0.222656 -0.5 -0.5 -0.5 z m 0 0"/>
+        <path d="m 3 16 c -0.550781 0 -1 -0.449219 -1 -1 v -11 h -2 v -1 h 0.0078125 c -0.00390625 -0.265625 0.1015625 -0.519531 0.2851565 -0.707031 l 2 -2 c 0.390625 -0.3906252 1.023437 -0.3906252 1.414062 0 l 2 2 c 0.183594 0.1875 0.289063 0.441406 0.289063 0.707031 h 0.003906 v 1 h -2 v 11 c 0 0.550781 -0.449219 1 -1 1 z m 0 0"/>
+    </g>
+</svg>
--- a/data/icons/view-sort-descending-symbolic.svg
+++ b/data/icons/view-sort-descending-symbolic.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
+    <g fill="#2e3436">
+        <path d="m 3 0 c -0.550781 0 -1 0.449219 -1 1 v 11 h -2 v 1 h 0.0078125 c -0.00390625 0.265625 0.1015625 0.519531 0.2851565 0.707031 l 2 2 c 0.390625 0.390625 1.023437 0.390625 1.414062 0 l 2 -2 c 0.183594 -0.1875 0.289063 -0.441406 0.289063 -0.707031 h 0.003906 v -1 h -2 v -11 c 0 -0.550781 -0.449219 -1 -1 -1 z m 0 0"/>
+        <path d="m 6.5 10 c -0.277344 0 -0.5 -0.222656 -0.5 -0.5 v -1 c 0 -0.277344 0.222656 -0.5 0.5 -0.5 h 5 c 0.277344 0 0.5 0.222656 0.5 0.5 v 1 c 0 0.277344 -0.222656 0.5 -0.5 0.5 z m 0 -3 c -0.277344 0 -0.5 -0.222656 -0.5 -0.5 v -1 c 0 -0.277344 0.222656 -0.5 0.5 -0.5 h 7 c 0.277344 0 0.5 0.222656 0.5 0.5 v 1 c 0 0.277344 -0.222656 0.5 -0.5 0.5 z m 0 -3 c -0.277344 0 -0.5 -0.222656 -0.5 -0.5 v -1 c 0 -0.277344 0.222656 -0.5 0.5 -0.5 h 9 c 0.277344 0 0.5 0.222656 0.5 0.5 v 1 c 0 0.277344 -0.222656 0.5 -0.5 0.5 z m 0 0"/>
+    </g>
+</svg>
--- a/src/user_data_page/data_subpage.py
+++ b/src/user_data_page/data_subpage.py
@@ -66,11 +66,10 @@ class DataSubpage(Gtk.ScrolledWindow):
            self.ready_to_sort_size = True
            self.flow_box.invalidate_sort()

-    def generate_list(self, flatpaks, data, sort_mode):
+    def generate_list(self, flatpaks, data):
        self.boxes.clear()
        self.ready_to_sort_size = False
        self.finished_boxes = 0
-        self.sort_mode = sort_mode
        self.total_items = len(data)
        self.subtitle.set_label(_("{} Items").format(self.total_items))
        if flatpaks:
--- a/src/user_data_page/user_data_page.blp
+++ b/src/user_data_page/user_data_page.blp
@@ -119,52 +119,57 @@ Popover sort_pop {
            homogeneous: true;
            spacing: 3;
            ToggleButton asc {
+                active: true;
                styles ["flat"]
-                label: _("Ascending");
                can-focus: bind asc.active inverted;
                can-target: bind asc.active inverted;
+                Adw.ButtonContent {
+                    icon-name: "view-sort-ascending-symbolic";
+                    label: _("Ascending");
+                }
            }
            ToggleButton dsc {
                styles ["flat"]
-                label: _("Descending");
                active: bind asc.active inverted bidirectional;
                can-focus: bind dsc.active inverted;
                can-target: bind dsc.active inverted;
+                Adw.ButtonContent {
+                    icon-name: "view-sort-descending-symbolic";
+                    label: _("Descending");
+                }
            }
        }
        Separator {
        }
        Box sort_list {
-            orientation: vertical;
+            homogeneous: true;
+            spacing: 3;
            ToggleButton sort_name {
+                active: true;
                styles ["flat"]
                can-focus: bind sort_name.active inverted;
                can-target: bind sort_name.active inverted;
-                Label {
-                    styles ["body"]
-                    halign: start;
-                    label: _("Sort By Name");
+                Adw.ButtonContent {
+                    icon-name: "font-x-generic-symbolic";
+                    label: _("Name");
                }
            }
            ToggleButton sort_id {
                styles ["flat"]
                can-focus: bind sort_id.active inverted;
                can-target: bind sort_id.active inverted;
-                Label {
-                    styles ["body"]
-                    halign: start;
-                    label: _("Sort By ID");
+                Adw.ButtonContent {
+                    icon-name: "tag-outline-symbolic";
+                    label: _("ID");
                }
            }
            ToggleButton sort_size {
-                active: true;
                can-focus: bind sort_size.active inverted;
                can-target: bind sort_size.active inverted;
                styles ["flat"]
-                Label {
-                    styles ["body"]
-                    halign: start;
-                    label: _("Sort By Size");
+                Adw.ButtonContent {
+                    icon-name: "harddisk-symbolic";
+                    label: _("Size");
                }
            }
        }
--- a/src/user_data_page/user_data_page.py
+++ b/src/user_data_page/user_data_page.py
@@ -28,7 +28,7 @@ class UserDataPage(Adw.BreakpointBin):
    #    This must be set to the created object from within the class's __init__ method
    instance = None

-    def sort_handler(self, button):
+    def sort_handler(self, button, should_sort=True):
        if not button.get_active():
            return

@@ -58,8 +58,9 @@ class UserDataPage(Adw.BreakpointBin):
                self.adp.sort_mode = "size"
                self.ldp.sort_mode = "size"

-        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:
@@ -94,10 +95,16 @@ 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)
+
    def end_loading(self, *args):
        def callback(*args):
-            self.adp.generate_list(self.data_flatpaks, self.active_data, "size")
-            self.ldp.generate_list([], self.leftover_data, "name")
+            self.adp.generate_list(self.data_flatpaks, self.active_data)
+            self.ldp.generate_list([], self.leftover_data)
        
        Gio.Task.new(None, None, callback).run_in_thread(self.sort_data)

--- a/src/warehouse.gresource.xml
+++ b/src/warehouse.gresource.xml
@@ -54,5 +54,10 @@
    <file preprocess="xml-stripblanks" alias="vertical-arrows-long-symbolic.svg">../data/icons/vertical-arrows-long-symbolic.svg</file>
    <file preprocess="xml-stripblanks" alias="dot-symbolic.svg">../data/icons/dot-symbolic.svg</file>
    <file preprocess="xml-stripblanks" alias="folder-templates-symbolic.svg">../data/icons/folder-templates-symbolic.svg</file>
+    <file preprocess="xml-stripblanks" alias="view-sort-ascending-symbolic.svg">../data/icons/view-sort-ascending-symbolic.svg</file>
+    <file preprocess="xml-stripblanks" alias="view-sort-descending-symbolic.svg">../data/icons/view-sort-descending-symbolic.svg</file>
+    <file preprocess="xml-stripblanks" alias="font-x-generic-symbolic.svg">../data/icons/font-x-generic-symbolic.svg</file>
+    <file preprocess="xml-stripblanks" alias="tag-outline-symbolic.svg">../data/icons/tag-outline-symbolic.svg</file>
+    <file preprocess="xml-stripblanks" alias="harddisk-symbolic.svg">../data/icons/harddisk-symbolic.svg</file>
  </gresource>
 </gresources>