diff --git a/demo/GraniteDemo.vala b/demo/GraniteDemo.vala index da3b34dc9..9b1204abd 100644 --- a/demo/GraniteDemo.vala +++ b/demo/GraniteDemo.vala @@ -41,7 +41,7 @@ public class Granite.Demo : Gtk.Application { }; main_stack.add_titled (placeholder, "placeholder", "Placeholder"); main_stack.add_titled (box_view, "box", "Box"); - main_stack.add_titled (lists_view, "lists", "Lists"); + main_stack.add_titled (lists_view, "lists", "Lists & Grids"); main_stack.add_titled (style_manager_view, "style_manager", "StyleManager"); main_stack.add_titled (accel_label_view, "accel_label", "AccelLabel"); main_stack.add_titled (css_view, "css", "Style Classes"); diff --git a/demo/Views/ListsView.vala b/demo/Views/ListsView.vala index 1ac3ebc36..5418f5359 100644 --- a/demo/Views/ListsView.vala +++ b/demo/Views/ListsView.vala @@ -5,7 +5,7 @@ public class ListsView : DemoPage { construct { - title = "Lists"; + title = "Lists & Grids"; var card_title = new Granite.HeaderLabel ("Gtk.ListBox") { secondary_text = "This ListBox has \"Granite.CssClass.CARD\"" @@ -28,36 +28,36 @@ public class ListsView : DemoPage { ); list_box.append (new Granite.ListItem () { child = separators_modelbutton }); - var scrolled_title = new Granite.HeaderLabel ("Gtk.ListView") { + var list_title = new Granite.HeaderLabel ("Gtk.ListView") { secondary_text = "ScrolledWindow with \"has-frame = true\" has a view level background color" }; - var liststore = new GLib.ListStore (typeof (ListObject)); - liststore.append (new ListObject () { + var list_store = new GLib.ListStore (typeof (ListObject)); + list_store.append (new ListObject () { text = "Row 1" }); - liststore.append (new ListObject () { + list_store.append (new ListObject () { text = "Row 2" }); - liststore.append (new ListObject () { + list_store.append (new ListObject () { text = "Row 3" }); - liststore.append (new ListObject () { + list_store.append (new ListObject () { text = "Row 4" }); - liststore.append (new ListObject () { + list_store.append (new ListObject () { text = "Row 5" }); - var selection_model = new Gtk.SingleSelection (liststore); + var list_selection = new Gtk.SingleSelection (list_store); - var factory = new Gtk.SignalListItemFactory (); - factory.setup.connect ((obj) => { + var list_factory = new Gtk.SignalListItemFactory (); + list_factory.setup.connect ((obj) => { var list_item = (Gtk.ListItem) obj; list_item.child = new Granite.ListItem (); }); - factory.bind.connect ((obj) => { + list_factory.bind.connect ((obj) => { var list_item = (Gtk.ListItem) obj; var list_object = (ListObject) list_item.item; @@ -65,17 +65,79 @@ public class ListsView : DemoPage { granite_list_item.text = list_object.text; }); - var list_view = new Gtk.ListView (selection_model, factory) { + var list_view = new Gtk.ListView (list_selection, list_factory) { show_separators = true }; - var scrolled_window = new Gtk.ScrolledWindow () { + var list_scrolled = new Gtk.ScrolledWindow () { child = list_view, has_frame = true, hscrollbar_policy = NEVER, min_content_height = 128 }; + var grid_title = new Granite.HeaderLabel ("Gtk.GridView"); + + var grid_store = new GLib.ListStore (typeof (GridObject)); + grid_store.append (new GridObject () { + icon_name = "folder-documents", + text = "Documents" + }); + grid_store.append (new GridObject () { + icon_name = "folder-download", + text = "Downloads" + }); + grid_store.append (new GridObject () { + icon_name = "folder-music", + text = "Music" + }); + grid_store.append (new GridObject () { + icon_name = "folder-pictures", + text = "Pictures" + }); + grid_store.append (new GridObject () { + icon_name = "folder-publicshare", + text = "Public" + }); + grid_store.append (new GridObject () { + icon_name = "folder-templates", + text = "Templates" + }); + grid_store.append (new GridObject () { + icon_name = "folder-videos", + text = "Videos" + }); + + var grid_selection = new Gtk.MultiSelection (grid_store); + + var grid_factory = new Gtk.SignalListItemFactory (); + grid_factory.setup.connect ((obj) => { + var list_item = (Gtk.ListItem) obj; + list_item.child = new GridItem (); + }); + + grid_factory.bind.connect ((obj) => { + var list_item = (Gtk.ListItem) obj; + var grid_object = (GridObject) list_item.item; + + var grid_item = ((GridItem) list_item.child); + grid_item.text = grid_object.text; + grid_item.icon_name = grid_object.icon_name; + }); + + var grid_view = new Gtk.GridView (grid_selection, grid_factory) { + max_columns = 4, + enable_rubberband = true + }; + + var grid_scrolled = new Gtk.ScrolledWindow () { + child = grid_view, + has_frame = true, + hscrollbar_policy = NEVER, + min_content_height = 128, + propagate_natural_height = true + }; + var vbox = new Granite.Box (VERTICAL, HALF) { margin_top = 12, margin_bottom = 12, @@ -84,8 +146,10 @@ public class ListsView : DemoPage { }; vbox.append (card_title); vbox.append (list_box); - vbox.append (scrolled_title); - vbox.append (scrolled_window); + vbox.append (list_title); + vbox.append (list_scrolled); + vbox.append (grid_title); + vbox.append (grid_scrolled); child = vbox; @@ -95,4 +159,35 @@ public class ListsView : DemoPage { private class ListObject : Object { public string text { get; set; } } + + private class GridObject : Object { + public string text { get; set; } + public string icon_name { get; set; } + } + + private class GridItem : Granite.Box { + public string text { get; set; } + public string icon_name { get; set; } + + public GridItem () { + Object ( + orientation: Gtk.Orientation.VERTICAL + ); + } + + construct { + var image = new Gtk.Image.from_icon_name (icon_name) { + pixel_size = 64 + }; + + var label = new Gtk.Label (text); + + child_spacing = HALF; + append (image); + append (label); + + bind_property ("text", label, "label"); + bind_property ("icon-name", image, "icon-name"); + } + } } diff --git a/lib/Styles/Gtk/GridView.scss b/lib/Styles/Gtk/GridView.scss new file mode 100644 index 000000000..682abf367 --- /dev/null +++ b/lib/Styles/Gtk/GridView.scss @@ -0,0 +1,21 @@ +gridview { + border-spacing: 1rem; + padding: 1rem; + + &.view { + background-color: bg-color(1); + } + + child.activatable { + @extend .model; + + &:selected { + @extend selection; + } + } + + rubberband { + @extend selection; + @include border-interactive-roundrect; + } +} diff --git a/lib/Styles/Gtk/Index.scss b/lib/Styles/Gtk/Index.scss index 2251434c7..48430446c 100644 --- a/lib/Styles/Gtk/Index.scss +++ b/lib/Styles/Gtk/Index.scss @@ -4,6 +4,7 @@ @import 'CheckButton.scss'; @import 'Entry.scss'; @import 'Expander.scss'; +@import 'GridView.scss'; @import 'HeaderBar.scss'; @import 'Image.scss'; @import 'ListBox.scss';