[baobab/reroot-view: 27/35] Use a GtkTreeView as FolderDisplay and wire up sorting



commit 40955fdce3e44b3604f2b819290e54c8bb0f8849
Author: Stefano Facchini <stefano facchini gmail com>
Date:   Sun Jun 21 18:47:39 2020 +0200

    Use a GtkTreeView as FolderDisplay and wire up sorting

 data/baobab.css                  |  29 ++-----
 data/ui/baobab-folder-display.ui | 161 ++++++++++++++-------------------------
 data/ui/baobab-main-window.ui    |   8 +-
 src/baobab-folder-display.vala   |  65 +++++++++-------
 src/baobab-window.vala           |  33 ++++++++
 5 files changed, 140 insertions(+), 156 deletions(-)
---
diff --git a/data/baobab.css b/data/baobab.css
index 201997b..e2bfe2d 100644
--- a/data/baobab.css
+++ b/data/baobab.css
@@ -54,11 +54,15 @@
     color: @theme_unfocused_text_color;
 }
 
+window.background stack > grid > frame border,
 window.background stack > grid > scrolledwindow.frame {
-    border-radius: 0;
     border-width: 0 1px 0 0;
 }
 
+window.background stack treeview:hover:not(:selected) {
+    background: @theme_bg_color;
+}
+
 pathbar button {
        transition: 0;
        margin: 0;
@@ -72,29 +76,6 @@ pathbar {
        background: @theme_bg_color;
 }
 
-folder-display {
-    background: white;
-    border-color: @borders;
-    border-style: solid;
-    border-width: 0 1px 1px 0;
-}
-
-folder-display:hover {
-    background: @theme_bg_color;
-}
-
-folder-display label {
-    padding: 6px;
-}
-
-.folder-display-header {
-    font-weight: bold;
-}
-
-treeview:hover:not(:selected) {
-    background: @theme_bg_color;
-}
-
 window infobar.warning,
 window infobar.error {
     border-bottom-width: 1px;
diff --git a/data/ui/baobab-folder-display.ui b/data/ui/baobab-folder-display.ui
index 710c991..687feb6 100644
--- a/data/ui/baobab-folder-display.ui
+++ b/data/ui/baobab-folder-display.ui
@@ -2,124 +2,77 @@
 <!-- Generated with glade 3.22.0 -->
 <interface>
   <requires lib="gtk+" version="3.22"/>
-  <template class="BaobabFolderDisplay" parent="GtkButton">
+  <template class="BaobabFolderDisplay" parent="GtkTreeView">
     <property name="visible">True</property>
+    <property name="can_focus">True</property>
+    <property name="activate_on_single_click">True</property>
+    <child internal-child="selection">
+      <object class="GtkTreeSelection" id="treeview_selection">
+        <property name="mode">none</property>
+      </object>
+    </child>
     <child>
-      <object class="GtkGrid">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <child>
-          <object class="GtkLabel" id="folder_name_primary">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="halign">start</property>
-            <property name="hexpand">True</property>
-            <property name="ellipsize">end</property>
-            <style>
-              <class name="folder-display-header"/>
-            </style>
-          </object>
-          <packing>
-            <property name="left_attach">0</property>
-            <property name="top_attach">0</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkLabel">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="halign">end</property>
-            <property name="label" translatable="yes">Size</property>
-            <style>
-              <class name="dim-label"/>
-              <class name="folder-display-header"/>
-            </style>
-          </object>
-          <packing>
-            <property name="left_attach">1</property>
-            <property name="top_attach">0</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkLabel">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="halign">end</property>
-            <property name="label" translatable="yes">Contents</property>
-            <style>
-              <class name="dim-label"/>
-              <class name="folder-display-header"/>
-            </style>
-          </object>
-          <packing>
-            <property name="left_attach">2</property>
-            <property name="top_attach">0</property>
-          </packing>
-        </child>
+      <object class="GtkTreeViewColumn" id="folder_column">
+        <property name="title" translatable="yes">Folder</property>
+        <property name="expand">True</property>
+        <property name="reorderable">True</property>
+        <property name="sort_column_id">0</property>
         <child>
-          <object class="GtkLabel" id="folder_name_secondary">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="halign">start</property>
-            <property name="hexpand">True</property>
+          <object class="BaobabCellRendererName" id="folder_column_text_renderer">
             <property name="ellipsize">end</property>
-            <style>
-              <class name="dim-label"/>
-            </style>
           </object>
-          <packing>
-            <property name="left_attach">0</property>
-            <property name="top_attach">1</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkLabel" id="folder_size">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="halign">end</property>
-          </object>
-          <packing>
-            <property name="left_attach">1</property>
-            <property name="top_attach">1</property>
-          </packing>
+          <attributes>
+            <attribute name="name">0</attribute>
+            <attribute name="display_name">4</attribute>
+            <attribute name="state">6</attribute>
+          </attributes>
         </child>
+      </object>
+    </child>
+    <child>
+      <object class="GtkTreeViewColumn" id="size_column">
+        <property name="title" translatable="yes">Size</property>
+        <property name="reorderable">True</property>
+        <property name="sort_column_id">2</property>
         <child>
-          <object class="GtkLabel" id="folder_elements">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="halign">end</property>
+          <object class="BaobabCellRendererSize" id="size_column_size_renderer">
+            <property name="xalign">1.0</property>
           </object>
-          <packing>
-            <property name="left_attach">2</property>
-            <property name="top_attach">1</property>
-          </packing>
+          <attributes>
+            <attribute name="size">2</attribute>
+            <attribute name="state">6</attribute>
+          </attributes>
         </child>
+      </object>
+    </child>
+    <child>
+      <object class="GtkTreeViewColumn" id="contents_column">
+        <property name="title" translatable="yes">Contents</property>
+        <property name="reorderable">True</property>
+        <property name="sort_column_id">5</property>
         <child>
-          <object class="GtkLabel">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="halign">end</property>
-            <property name="label" translatable="yes">Modified</property>
-            <style>
-              <class name="dim-label"/>
-              <class name="folder-display-header"/>
-            </style>
+          <object class="BaobabCellRendererItems" id="contents_column_items_renderer">
+            <property name="xalign">1.0</property>
           </object>
-          <packing>
-            <property name="left_attach">3</property>
-            <property name="top_attach">0</property>
-          </packing>
+          <attributes>
+            <attribute name="items">5</attribute>
+            <attribute name="state">6</attribute>
+          </attributes>
         </child>
+      </object>
+    </child>
+    <child>
+      <object class="GtkTreeViewColumn" id="time_modified_column">
+        <property name="title" translatable="yes">Modified</property>
+        <property name="reorderable">True</property>
+        <property name="sort_column_id">3</property>
         <child>
-          <object class="GtkLabel" id="folder_time">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="halign">end</property>
+          <object class="BaobabCellRendererTime" id="modified_column_time_renderer">
+            <property name="xalign">1.0</property>
           </object>
-          <packing>
-            <property name="left_attach">3</property>
-            <property name="top_attach">1</property>
-          </packing>
+          <attributes>
+            <attribute name="time">3</attribute>
+          </attributes>
         </child>
       </object>
     </child>
diff --git a/data/ui/baobab-main-window.ui b/data/ui/baobab-main-window.ui
index bd819d7..a5a1e18 100644
--- a/data/ui/baobab-main-window.ui
+++ b/data/ui/baobab-main-window.ui
@@ -244,7 +244,12 @@
                   <property name="can_focus">False</property>
                   <property name="column_homogeneous">True</property>
                   <child>
-                    <object class="BaobabFolderDisplay" id="folder_display"/>
+                    <object class="GtkFrame" id="folder_display_frame">
+                      <property name="visible">true</property>
+                      <child>
+                        <object class="BaobabFolderDisplay" id="folder_display"/>
+                      </child>
+                    </object>
                     <packing>
                       <property name="left_attach">0</property>
                       <property name="top_attach">0</property>
@@ -264,6 +269,7 @@
                         <object class="GtkTreeView" id="treeview">
                           <property name="visible">True</property>
                           <property name="can_focus">True</property>
+                          <property name="headers_visible">false</property>
                           <property name="activate_on_single_click">True</property>
                           <child internal-child="selection">
                             <object class="GtkTreeSelection" id="treeview_selection1"/>
diff --git a/src/baobab-folder-display.vala b/src/baobab-folder-display.vala
index bfa7c89..b8e5b55 100644
--- a/src/baobab-folder-display.vala
+++ b/src/baobab-folder-display.vala
@@ -20,24 +20,19 @@
 namespace Baobab {
 
     [GtkTemplate (ui = "/org/gnome/baobab/ui/baobab-folder-display.ui")]
-    public class FolderDisplay : Gtk.Button {
-        static construct {
-            set_css_name ("folder-display");
-        }
-
-        [GtkChild]
-        private Gtk.Label folder_name_primary;
+    public class FolderDisplay : Gtk.TreeView {
         [GtkChild]
-        private Gtk.Label folder_name_secondary;
+        public Gtk.TreeViewColumn folder_column;
         [GtkChild]
-        private Gtk.Label folder_size;
+        public Gtk.TreeViewColumn size_column;
         [GtkChild]
-        private Gtk.Label folder_elements;
+        public Gtk.TreeViewColumn contents_column;
         [GtkChild]
-        private Gtk.Label folder_time;
+        public Gtk.TreeViewColumn time_modified_column;
 
         construct {
-            clicked.connect (() => { activated ();});
+            row_activated.connect (() => { activated (); });
+            model = create_model ();
         }
 
         public signal void activated ();
@@ -47,10 +42,10 @@ namespace Baobab {
             set {
                 location_ = value;
 
-                set_name_from_location ();
-                folder_size.label = "";
-                folder_elements.label = "";
-                folder_time.label = "";
+                var list_store = (Gtk.ListStore) model;
+                list_store.clear ();
+                list_store.insert_with_values (null, -1,
+                           Scanner.Columns.NAME, location.name);
             }
 
             get {
@@ -71,32 +66,48 @@ namespace Baobab {
                 uint64 size;
                 int elements;
                 uint64 time;
+                Scanner.State state;
 
                 location.scanner.get (iter,
                            Scanner.Columns.NAME, out name,
                            Scanner.Columns.DISPLAY_NAME, out display_name,
                            Scanner.Columns.SIZE, out size,
                            Scanner.Columns.ELEMENTS, out elements,
-                           Scanner.Columns.TIME_MODIFIED, out time);
+                           Scanner.Columns.TIME_MODIFIED, out time,
+                           Scanner.Columns.STATE, out state);
 
                 if (value.get_depth () == 1) {
-                    set_name_from_location ();
-                } else {
-                    folder_name_primary.label = format_name (display_name, name);
-                    folder_name_secondary.label = "";
+                    name = location.name;
                 }
-                folder_size.label = format_size (size);
-                folder_elements.label = format_items (elements);
-                folder_time.label = format_time_approximate (time);
+
+                var list_store = (Gtk.ListStore) model;
+                list_store.clear ();
+                list_store.insert_with_values (null, -1,
+                           Scanner.Columns.NAME, name,
+                           Scanner.Columns.DISPLAY_NAME, display_name,
+                           Scanner.Columns.SIZE, size,
+                           Scanner.Columns.ELEMENTS, elements,
+                           Scanner.Columns.TIME_MODIFIED, time,
+                           Scanner.Columns.STATE, state);
             }
             get {
                 return path_;
             }
         }
 
-        void set_name_from_location () {
-            folder_name_primary.label = location.name;
-            folder_name_secondary.label = location.file.get_parse_name ();
+        Gtk.ListStore create_model () {
+            var list_store = new Gtk.ListStore.newv (new Type[] {
+                typeof (string),  // NAME
+                typeof (double),  // PERCENT
+                typeof (uint64),  // SIZE
+                typeof (uint64),  // TIME_MODIFIED
+                typeof (string),  // DISPLAY_NAME
+                typeof (int),     // ELEMENTS
+                typeof (Scanner.State)    // STATE
+            });
+            list_store.set_sort_column_id (Scanner.Columns.SIZE, Gtk.SortType.DESCENDING);
+
+            return list_store;
         }
     }
 }
diff --git a/src/baobab-window.vala b/src/baobab-window.vala
index d46e8fe..c855ddf 100644
--- a/src/baobab-window.vala
+++ b/src/baobab-window.vala
@@ -69,6 +69,12 @@ namespace Baobab {
         [GtkChild]
         private Gtk.MenuItem treeview_popup_trash;
         [GtkChild]
+        private Gtk.TreeViewColumn size_column;
+        [GtkChild]
+        private Gtk.TreeViewColumn contents_column;
+        [GtkChild]
+        private Gtk.TreeViewColumn time_modified_column;
+        [GtkChild]
         private Gtk.Stack chart_stack;
         [GtkChild]
         private Gtk.Stack spinner_stack;
@@ -461,8 +467,33 @@ namespace Baobab {
                 var path = convert_path_to_child_path (wrapper_path);
                 reroot_treeview (path, true);
             });
+
+            var folder_display_model = (Gtk.TreeSortable) folder_display.model;
+            folder_display_model.sort_column_changed.connect (reset_treeview_sorting);
+
+            folder_display.size_column.notify["width"].connect (copy_treeview_column_sizes);
+            folder_display.contents_column.notify["width"].connect (copy_treeview_column_sizes);
+            folder_display.time_modified_column.notify["width"].connect (copy_treeview_column_sizes);
+        }
+
+        void copy_treeview_column_sizes () {
+            size_column.min_width = folder_display.size_column.width;
+            contents_column.min_width = folder_display.contents_column.width;
+            time_modified_column.min_width = folder_display.time_modified_column.width;
+        }
+
+        void reset_treeview_sorting () {
+            int id;
+            Gtk.SortType sort_type;
+
+            var folder_display_model = (Gtk.TreeSortable) folder_display.model;
+            var treeview_model = (Gtk.TreeSortable) treeview.model;
+
+            folder_display_model.get_sort_column_id (out id, out sort_type);
+            treeview_model.set_sort_column_id (id, sort_type);
         }
 
+
         void reroot_treeview (Gtk.TreePath path, bool select_first = false) {
             Gtk.TreeIter iter;
             active_location.scanner.get_iter (out iter, path);
@@ -477,6 +508,7 @@ namespace Baobab {
 
             var filter = new Gtk.TreeModelFilter (active_location.scanner, path);
             treeview.model = new Gtk.TreeModelSort.with_model (filter);
+            reset_treeview_sorting ();
 
             if (select_first) {
                 treeview.set_cursor (new Gtk.TreePath.first (), null, false);
@@ -605,6 +637,7 @@ namespace Baobab {
 
             // Make sure to update the folder display after the scan
             folder_display.path = new Gtk.TreePath.first ();
+            copy_treeview_column_sizes ();
 
             if (!scanner.show_allocated_size) {
                 message (_("Could not always detect occupied disk sizes."), _("Apparent sizes may be shown 
instead."), Gtk.MessageType.INFO);


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]