Merge lp:~elementary-apps/granite/sidebar-widget into lp:~elementary-pantheon/granite/granite

[Danielle Foré]

== A brand new SourceList/Sidebar widget that isn't treeview based! ==

* Built around ListBox(Rows)
* Neato animations
* Badges
* Busy States,
* Row Action Buttons
* Uses the style class "sidebar" (There's a Gtk Style constant for this so it makes sense to just use it).

== Things that aren't baked into this branch yet: ==

* Make sure the row.activated signal is represented in the demo

* Drag and Drop
    * Mark a section as being draggable
    * Drag to re-arrange
    * Drag an item out to remove it (with poof)
    * Have a nice drop target for that section

* Nesting. Can't add another collapsable section into a section (useful for Mail)

* ProgressBars. To show usage of storage devices. Useful for Files

* Mark SourceList as deprecated

== Known Issues ==

* It's possible to make a selection in more than one section.

[Danielle Foré (danrabbit)]

Default width is too large. Needs to be thinner to accommodate Files

[lp:~elementary-apps/granite/sidebar-widget]

988. By Danielle Foré on 2016-08-28

make min width 176 (16 * 11)

989. By Jeremy Wootten on 2016-09-05

Pass row-actived signal out of SidebarExpandableRow

[JeanLuc (eviltwin1)]

Hi there,
I just took a look at the code. Seems pretty reasonable so far, but personally I have a few things I'd like to be added to make it a fully functional replacement for the custom code I currently use in FeedReader (in addition to the things that you already listed above):

- the ability to have the little collapse/expand arrows on the left side. This is useful if the category itself also needs to have a badge.
- the ability to pack a custom widget in place of the badge/action-button or some sort of option to have a badge as default but show the action-button on hover: FeedReader shows the count of unread articles by default, but as soon as the mouse hovers the number it switches to a button that marks all articles of this specific feed or category as read.
- maybe the ability to have a custom widget instead of the icon_name for SidebarRow. For tags I use colored circles as "icons", which I draw right in the code to a Cairo.Surface. Would be nice if I could just use them as a icon directly.

That's all I can come up with from the top of my head that I personally am missing. Are these deviating too much from your vision of what a "sidebar" should look like?
I would be happy to contribute to this project if it will have everything I need to replace my own code once it's done.

Unmerged revisions

989. By Jeremy Wootten on 2016-09-05

Pass row-actived signal out of SidebarExpandableRow

988. By Danielle Foré on 2016-08-28

make min width 176 (16 * 11)

987. By Danielle Foré on 2016-08-28

add list-based sidebar widget

=== modified file 'demo/GraniteDemo.vala'
--- demo/GraniteDemo.vala	2016-08-06 23:40:54 +0000
+++ demo/GraniteDemo.vala	2016-09-05 18:52:49 +0000
@@ -76,7 +76,7 @@
         create_headerbar ();
         create_welcome ();
         create_pickers ();
-        create_sourcelist ();
+        create_sidebar ();
         create_modebutton ();
         create_dynamictab ();
         create_alert ();
@@ -121,7 +121,7 @@
     private void create_welcome () {
         var welcome = new Granite.Widgets.Welcome ("Sample Window", "This is a demo of the Granite library.");
         welcome.append ("office-calendar", "TimePicker & DatePicker", "Widgets that allows users to easily pick a time or a date.");
-        welcome.append ("tag-new", "SourceList", "A widget that can display a list of items organized in categories.");
+        welcome.append ("tag-new", "sidebar", "A widget that can display a list of items organized in categories.");
         welcome.append ("object-inverse", "ModeButton", "This widget is a multiple option modal switch");
         welcome.append ("document-open", "DynamicNotebook", "Tab bar widget designed for a variable number of tabs.");
         welcome.append ("dialog-warning", "AlertView", "A View showing that an action is required to function.");
@@ -134,7 +134,7 @@
                     break;
                 case 1:
                     home_button.show ();
-                    main_stack.set_visible_child_name ("sourcelist");
+                    main_stack.set_visible_child_name ("sidebar");
                     break;
                 case 2:
                     home_button.show ();
@@ -178,39 +178,95 @@
         main_stack.add_named (grid, "pickers");
     }
 
-    private void create_sourcelist () {
-        var label = new Gtk.Label ("No selected item");
-        var source_list = new Granite.Widgets.SourceList ();
+    private void create_sidebar () {
+        var personal = new Granite.Widgets.SidebarHeader ("Personal");
+
+        var home = new Granite.Widgets.SidebarRow ("Home", "user-home");
+        var recent = new Granite.Widgets.SidebarRow ("Recent", "folder-recent");
+        var documents = new Granite.Widgets.SidebarRow ("Documents", "folder-documents");
+        var music = new Granite.Widgets.SidebarRow ("Music", "folder-music");
+        var trash = new Granite.Widgets.SidebarRow ("Trash", "user-trash-empty");
+        trash.icon_name = "user-trash-full";
+
+        var devices = new Granite.Widgets.SidebarHeader ("Devices");
+
+        var filesystem = new Granite.Widgets.SidebarRow ("Filesystem", "drive-harddisk");
+        filesystem.action_icon_name = "media-eject-symbolic";
+        filesystem.badge = 4;
+        filesystem.tooltip_text = "/ - ext3/ext4 (217 GB Free of 243 GB)";
+
+        var usb_disk = new Granite.Widgets.SidebarRow ("USB Disk", "drive-removable-media");
+        usb_disk.action_icon_name = "media-eject-symbolic";
+        usb_disk.reveal_action = true;
+
+        var sidebar = new Granite.Widgets.Sidebar ();
+        sidebar.add (personal);
+        personal.add_child (home);
+        personal.add_child (recent);
+        personal.add_child (documents);
+        personal.add_child (music);
+        personal.add_child (trash);
+        sidebar.add (devices);
+        devices.add_child (filesystem);
+        devices.add_child (usb_disk);
+
+        var filesystem_button = new Gtk.Button.with_label ("Toggle Eject Button");
+
+        var music_busy = new Gtk.Button.with_label ("Toggle Busy");
+
+        var add_folder = new Gtk.Button.with_label ("Add Folder");
+
+        var badge_spin = new Gtk.SpinButton.with_range (0, 99999, 7);
+        badge_spin.bind_property ("value", home, "badge", BindingFlags.DEFAULT);
+
+        var usb_entry = new Gtk.Entry ();
+        usb_entry.text = "USB Disk";
+        usb_entry.bind_property ("text", usb_disk, "label", BindingFlags.DEFAULT);
+
+        var layout = new Gtk.Grid ();
+        layout.row_spacing = 12;
+        layout.orientation = Gtk.Orientation.VERTICAL;
+        layout.width_request = 650;
+        layout.margin = 24;
+        layout.add (badge_spin);
+        layout.add (music_busy);
+        layout.add (add_folder);
+        layout.add (filesystem_button);
+        layout.add (usb_entry);
 
         var paned = new Gtk.Paned (Gtk.Orientation.HORIZONTAL);
-        paned.pack1 (source_list, false, false);
-        paned.add2 (label);
-        paned.position = 150;
-
-        var rand = new GLib.Rand ();
-        for (int letter = 'A'; letter <= 'Z'; letter++) {
-            var expandable_letter = new Granite.Widgets.SourceList.ExpandableItem ("Item %c".printf (letter));
-            source_list.root.add (expandable_letter);
-            for (int number = 1; number <= 10; number++) {
-                var number_item = new Granite.Widgets.SourceList.Item ("Subitem %d".printf (number));
-                var val = rand.next_int ();
-                if (val % 7 == 0)
-                    number_item.badge = "1";
-                expandable_letter.add (number_item);
-            }
-        }
-
-        main_stack.add_named (paned, "sourcelist");
-
-        source_list.item_selected.connect ((item) => {
-            if (item == null) {
-                label.label = "No selected item";
-                return;
-            }
-
-            if (item.badge != "" && item.badge != null)
-                item.badge = "";
-            label.label = "%s - %s".printf (item.parent.name, item.name);
+        paned.add (sidebar);
+        paned.add (layout);
+
+        main_stack.add_named (paned, "sidebar");
+
+        usb_disk.action_clicked.connect (() => {
+            usb_disk.busy = true;
+            Timeout.add (2000, () => {
+                devices.remove_child (usb_disk);
+                return false;
+            });
+        });
+
+        filesystem_button.clicked.connect (() => {
+            if (filesystem.reveal_action) {
+                filesystem.reveal_action = false;
+            } else {
+                filesystem.reveal_action = true;
+            }
+        });
+
+        music_busy.clicked.connect (() => {
+            if (music.busy) {
+                music.busy = false;
+            } else {
+                music.busy = true;
+            }
+        });
+
+        add_folder.clicked.connect (() => {
+            var folder = new Granite.Widgets.SidebarRow ("Bookmark", "folder");
+            personal.add_child (folder);
         });
     }
 

=== modified file 'lib/CMakeLists.txt'
--- lib/CMakeLists.txt	2015-10-09 17:31:04 +0000
+++ lib/CMakeLists.txt	2016-09-05 18:52:49 +0000
@@ -42,6 +42,10 @@
     Widgets/DecoratedWindow.vala
     Widgets/LightWindow.vala
     Widgets/StatusBar.vala
+    Widgets/Sidebar/Sidebar.vala
+    Widgets/Sidebar/SidebarExpandableRow.vala
+    Widgets/Sidebar/SidebarHeader.vala
+    Widgets/Sidebar/SidebarRow.vala
     Widgets/SidebarPaned.vala
     Widgets/StorageBar.vala
     Widgets/SourceList.vala

=== added directory 'lib/Widgets/Sidebar'
=== added file 'lib/Widgets/Sidebar/Sidebar.vala'
--- lib/Widgets/Sidebar/Sidebar.vala	1970-01-01 00:00:00 +0000
+++ lib/Widgets/Sidebar/Sidebar.vala	2016-09-05 18:52:49 +0000
@@ -0,0 +1,30 @@
+/*
+* Copyright (c) 2016 elementary LLC (https://launchpad.net/granite)
+*
+* This program is free software; you can redistribute it and/or
+* modify it under the terms of the GNU General Public
+* License as published by the Free Software Foundation; either
+* version 2 of the License, or (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+* General Public License for more details.
+*
+* You should have received a copy of the GNU General Public
+* License along with this program; if not, write to the
+* Free Software Foundation, Inc., 59 Temple Place - Suite 330,
+* Boston, MA 02111-1307, USA.
+*
+*/
+
+namespace Granite.Widgets {
+    public class Sidebar : Gtk.Grid {
+        public Sidebar () {
+            orientation = Gtk.Orientation.VERTICAL;
+            get_style_context ().add_class (Gtk.STYLE_CLASS_SIDEBAR);
+            width_request = 176;
+            vexpand = true;
+        }
+    }
+}

=== added file 'lib/Widgets/Sidebar/SidebarExpandableRow.vala'
--- lib/Widgets/Sidebar/SidebarExpandableRow.vala	1970-01-01 00:00:00 +0000
+++ lib/Widgets/Sidebar/SidebarExpandableRow.vala	2016-09-05 18:52:49 +0000
@@ -0,0 +1,77 @@
+/*
+* Copyright (c) 2016 elementary LLC (https://launchpad.net/granite)
+*
+* This program is free software; you can redistribute it and/or
+* modify it under the terms of the GNU General Public
+* License as published by the Free Software Foundation; either
+* version 2 of the License, or (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+* General Public License for more details.
+*
+* You should have received a copy of the GNU General Public
+* License along with this program; if not, write to the
+* Free Software Foundation, Inc., 59 Temple Place - Suite 330,
+* Boston, MA 02111-1307, USA.
+*
+*/
+
+namespace Granite.Widgets {
+    public abstract class SidebarExpandableRow : Gtk.Grid {
+        protected Gtk.ListBox children;
+        protected Gtk.Revealer revealer;
+        protected Gtk.Image disclosure_triangle;
+
+        public signal void row_activated (Gtk.ListBoxRow child);
+
+        public SidebarExpandableRow () {
+            children = new Gtk.ListBox ();
+
+            revealer = new Gtk.Revealer ();
+            revealer.reveal_child = true;
+            revealer.transition_type = Gtk.RevealerTransitionType.SLIDE_DOWN;
+            revealer.add (children);
+
+            disclosure_triangle = new Gtk.Image.from_icon_name ("pan-down-symbolic", Gtk.IconSize.BUTTON);
+
+            revealer.notify["reveal-child"].connect (() => {
+                if (revealer.reveal_child) {
+                    disclosure_triangle.icon_name = "pan-down-symbolic";
+                } else {
+                    disclosure_triangle.icon_name = "pan-end-symbolic";
+                }
+            });
+
+            orientation = Gtk.Orientation.VERTICAL;
+
+            children.row_activated.connect ((row) => {
+                row_activated (row);
+            });
+        }
+
+        public void toggle_reveal_children () {
+            if (revealer.reveal_child) {
+                revealer.reveal_child = false;
+            } else {
+                revealer.reveal_child = true;
+            }
+        }
+
+        public void add_child (SidebarRow child) {
+            children.add (child);
+            show_all ();
+            child.reveal = true;
+        }
+
+        public void remove_child (SidebarRow child) {
+            child.reveal = false;
+            Timeout.add (300, () => {
+            children.remove (child);
+                return false;
+            });
+        }
+
+    }
+}

=== added file 'lib/Widgets/Sidebar/SidebarHeader.vala'
--- lib/Widgets/Sidebar/SidebarHeader.vala	1970-01-01 00:00:00 +0000
+++ lib/Widgets/Sidebar/SidebarHeader.vala	2016-09-05 18:52:49 +0000
@@ -0,0 +1,60 @@
+/*
+* Copyright (c) 2016 elementary LLC (https://launchpad.net/granite)
+*
+* This program is free software; you can redistribute it and/or
+* modify it under the terms of the GNU General Public
+* License as published by the Free Software Foundation; either
+* version 2 of the License, or (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+* General Public License for more details.
+*
+* You should have received a copy of the GNU General Public
+* License along with this program; if not, write to the
+* Free Software Foundation, Inc., 59 Temple Place - Suite 330,
+* Boston, MA 02111-1307, USA.
+*
+*/
+
+namespace Granite.Widgets {
+    public class SidebarHeader : SidebarExpandableRow {
+        public SidebarHeader (string label) {
+            var header_label = new Gtk.Label (label);
+            header_label.get_style_context ().add_class ("h4");
+            header_label.halign = Gtk.Align.START;
+            header_label.hexpand = true;
+
+            var header_revealer = new Gtk.Revealer ();
+            header_revealer.transition_type = Gtk.RevealerTransitionType.CROSSFADE;
+            header_revealer.add (disclosure_triangle);
+
+            var header_layout = new Gtk.Grid ();
+            header_layout.add (header_label);
+            header_layout.add (header_revealer);
+
+            var header = new Gtk.Button ();
+            header.get_style_context ().add_class ("list-row");
+            header.get_style_context ().remove_class ("button");
+            header.add (header_layout);
+
+            add (header);
+            add (revealer);
+
+            header.clicked.connect (() => {
+                toggle_reveal_children ();
+            });
+
+            header.enter_notify_event.connect (() => {
+                header_revealer.reveal_child = true;
+                return false;
+            });
+
+            header.leave_notify_event.connect (() => {
+                header_revealer.reveal_child = false;
+                return false;
+            });
+        }
+    }
+}

=== added file 'lib/Widgets/Sidebar/SidebarRow.vala'
--- lib/Widgets/Sidebar/SidebarRow.vala	1970-01-01 00:00:00 +0000
+++ lib/Widgets/Sidebar/SidebarRow.vala	2016-09-05 18:52:49 +0000
@@ -0,0 +1,169 @@
+/*
+* Copyright (c) 2016 elementary LLC (https://launchpad.net/granite)
+*
+* This program is free software; you can redistribute it and/or
+* modify it under the terms of the GNU General Public
+* License as published by the Free Software Foundation; either
+* version 2 of the License, or (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+* General Public License for more details.
+*
+* You should have received a copy of the GNU General Public
+* License along with this program; if not, write to the
+* Free Software Foundation, Inc., 59 Temple Place - Suite 330,
+* Boston, MA 02111-1307, USA.
+*
+*/
+
+namespace Granite.Widgets {
+    public class SidebarRow : Gtk.ListBoxRow {
+        public signal void action_clicked ();
+
+        private Gtk.Button button;
+        private Gtk.Image button_image;
+        private Gtk.Image icon;
+        private Gtk.Label badge_label;
+        private Gtk.Label row_label;
+        private Gtk.Revealer badge_revealer;
+        private Gtk.Revealer button_revealer;
+        private Gtk.Revealer revealer;
+        private Gtk.Spinner spinner;
+        private Gtk.Stack button_stack;
+
+        public SidebarRow (string label, string icon_name) {
+            icon = new Gtk.Image.from_icon_name (icon_name, Gtk.IconSize.BUTTON);
+
+            row_label = new Gtk.Label (label);
+            row_label.ellipsize = Pango.EllipsizeMode.END;
+            row_label.xalign = 0;
+            row_label.hexpand = true;
+
+            badge_label = new Gtk.Label ("");
+            badge_label.get_style_context ().add_class ("badge");
+            badge_label.margin_end = 3;
+            badge_label.valign = Gtk.Align.CENTER;
+
+            badge_revealer = new Gtk.Revealer ();
+            badge_revealer.transition_type = Gtk.RevealerTransitionType.CROSSFADE;
+            badge_revealer.no_show_all = true;
+            badge_revealer.add (badge_label);
+
+            button_image = new Gtk.Image ();
+            button_image.icon_size = Gtk.IconSize.BUTTON;
+
+            button = new Gtk.Button ();
+            button.get_style_context ().add_class (Gtk.STYLE_CLASS_FLAT);
+            button.image = button_image;
+
+            spinner = new Gtk.Spinner ();
+
+            button_stack = new Gtk.Stack ();
+            button_stack.transition_type = Gtk.StackTransitionType.CROSSFADE;
+            button_stack.add (button);
+            button_stack.add (spinner);
+
+            button_revealer = new Gtk.Revealer ();
+            button_revealer.transition_type = Gtk.RevealerTransitionType.CROSSFADE;
+            button_revealer.add (button_stack);
+
+            var layout = new Gtk.Grid ();
+            layout.margin_start = 6;
+            layout.add (icon);
+            layout.add (row_label);
+            layout.add (button_revealer);
+            layout.add (badge_revealer);
+
+            revealer = new Gtk.Revealer ();
+            revealer.transition_type = Gtk.RevealerTransitionType.SLIDE_DOWN;
+            revealer.add (layout);
+
+            add (revealer);
+
+            button.clicked.connect (() => {
+                action_clicked ();
+            });
+        }
+
+        public string action_icon_name {
+            set {
+                button_image.icon_name = value;
+            }
+        }
+
+        public int badge {
+            set {
+                if (value != 0) {
+                    if (value > 999) {
+                        badge_label.label = "∞";
+                    } else {
+                        badge_label.label = value.to_string ();
+                    }
+                    badge_revealer.no_show_all = false;
+                    badge_revealer.show_all ();
+                    badge_revealer.reveal_child = true;
+                } else {
+                    badge_revealer.reveal_child = false;
+                    Timeout.add (badge_revealer.transition_duration, () => {
+                        badge_revealer.visible = false;
+                        return false;
+                    });
+                }
+            }
+        }
+
+        public bool busy {
+            get {
+                if (button_stack.visible_child == spinner) {
+                    return spinner.active;
+                }
+                return false;
+            }
+            set {
+                spinner.active = value;
+                if (value) {
+                    button_stack.visible_child = spinner;
+                    button_revealer.reveal_child = true;
+                }
+            }
+        }
+
+        public string icon_name {
+            set {
+                icon.icon_name = value;
+            }
+        }
+
+        public string label {
+            get {
+                return row_label.label;
+            }
+            set {
+                row_label.label = value;
+            }
+        }
+
+        public bool reveal {
+            set {
+                revealer.reveal_child = value;
+            }
+        }
+
+        public bool reveal_action {
+            get {
+                if (button_stack.visible_child == button) {
+                    return button_revealer.reveal_child;
+                }
+                return false;
+            }
+            set {
+                if (value) {
+                    button_stack.visible_child = button;
+                }
+                button_revealer.reveal_child = value;
+            }
+        }
+    }
+}