Skip to content

Wallpaper: Use Gtk.GridView #470

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
danirabbit wants to merge 6 commits into
base: main
Choose a base branch
from
Draft

Wallpaper: Use Gtk.GridView #470

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
872e5ff
Use GtkSelection
danirabbit Jan 9, 2026
34c59df
Use Gtk.GridView
danirabbit Jan 9, 2026
937857e
Replace deprecated allocation
danirabbit Jan 13, 2026
21dbbff
Fix margins
danirabbit Jan 13, 2026
772abee
merge main
danirabbit Jan 14, 2026
777e89c
use aspect frame
danirabbit Jan 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions data/plug.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,23 +53,23 @@
background-position: calc(100% + 24px) calc(100% + 24px), 0;
}

.wallpaper flowboxchild {
.wallpaper gridview child {
border-radius: 0.75em;
margin: 1em;
margin: 0.5em;
}

.wallpaper flowboxchild picture {
.wallpaper gridview child picture {
margin: 0.666em; /* Needs to be separate to position checkbutton */
}

.wallpaper flowboxchild:checked .card {
.wallpaper gridview child:checked .card {
box-shadow:
0 0 0 4px @accent_color,
0 0 0 1px alpha(#000, 0.05),
0 3px 3px alpha(#000, 0.22);
}

.wallpaper flowboxchild check {
.wallpaper gridview child check {
border-radius: 50%;
min-height: 20px;
min-width: 20px;
Expand Down
85 changes: 38 additions & 47 deletions src/Views/Wallpaper.vala
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,13 @@ public class PantheonShell.Wallpaper : Switchboard.SettingsPage {

private static GLib.Settings gnome_background_settings;

private Gtk.ScrolledWindow wallpaper_scrolled_window;
private Gtk.FlowBox wallpaper_view;
private Gtk.GridView wallpaper_view;
private Gtk.Overlay view_overlay;
private Gtk.ComboBoxText combo;
private Gtk.ColorButton color_button;

private GLib.ListStore wallpaper_model;
private Gtk.SingleSelection wallpaper_selection;
private WallpaperContainer active_wallpaper = null;
private SolidColorContainer solid_color = null;
private WallpaperContainer wallpaper_for_removal = null;
Expand Down Expand Up @@ -56,22 +56,22 @@ public class PantheonShell.Wallpaper : Switchboard.SettingsPage {

wallpaper_model = new GLib.ListStore (typeof (WallpaperContainer));

wallpaper_view = new Gtk.FlowBox () {
activate_on_single_click = true,
homogeneous = true,
selection_mode = SINGLE,
min_children_per_line = 3,
max_children_per_line = 5
wallpaper_selection = new Gtk.SingleSelection (wallpaper_model);

var factory = new Gtk.SignalListItemFactory ();
factory.bind.connect (on_bind);

wallpaper_view = new Gtk.GridView (wallpaper_selection, factory) {
max_columns = 5,
single_click_activate = true
};
wallpaper_view.bind_model (wallpaper_model, create_widget_func);
wallpaper_view.add_css_class (Granite.STYLE_CLASS_VIEW);
wallpaper_view.child_activated.connect (update_checked_wallpaper);
wallpaper_view.activate.connect (update_checked_wallpaper);
wallpaper_view.add_controller (drop_target);

var color = gnome_background_settings.get_string ("primary-color");
create_solid_color_container (color);

wallpaper_scrolled_window = new Gtk.ScrolledWindow () {
var wallpaper_scrolled_window = new Gtk.ScrolledWindow () {
child = wallpaper_view,
hscrollbar_policy = NEVER,
hexpand = true,
Expand Down Expand Up @@ -126,14 +126,10 @@ public class PantheonShell.Wallpaper : Switchboard.SettingsPage {
drop_target.drop.connect (on_drag_data_received);
}

private Gtk.Widget create_widget_func (Object object) {
var wallpaper_container = (WallpaperContainer) object;

var flowbox_child = new Gtk.FlowBoxChild () {
child = wallpaper_container
};

return flowbox_child;
private void on_bind (Object obj) {
var list_item = (Gtk.ListItem) obj;
var wallpaper_container = (WallpaperContainer) list_item.item;
list_item.child = wallpaper_container;
}

private void show_wallpaper_chooser () {
Expand Down Expand Up @@ -203,8 +199,8 @@ public class PantheonShell.Wallpaper : Switchboard.SettingsPage {
gnome_background_settings.set_string ("picture-uri-dark", "");
}

private void update_checked_wallpaper (Gtk.FlowBox box, Gtk.FlowBoxChild child) {
var children = (WallpaperContainer) child.get_child ();
private void update_checked_wallpaper (uint position) {
var children = (WallpaperContainer) wallpaper_selection.get_item (position);

if (!(children is SolidColorContainer)) {
current_wallpaper_path = children.uri;
Expand Down Expand Up @@ -237,9 +233,9 @@ public class PantheonShell.Wallpaper : Switchboard.SettingsPage {
set_combo_disabled_if_necessary ();
create_solid_color_container (color_button.rgba.to_string ());

wallpaper_model.insert_sorted (solid_color, wallpapers_sort_function);
var pos = wallpaper_model.insert_sorted (solid_color, wallpapers_sort_function);

wallpaper_view.select_child ((Gtk.FlowBoxChild) solid_color.get_parent ());
wallpaper_selection.set_selected (pos);

if (active_wallpaper != null) {
active_wallpaper.checked = false;
Expand All @@ -260,17 +256,17 @@ public class PantheonShell.Wallpaper : Switchboard.SettingsPage {
if (active_wallpaper == solid_color) {
active_wallpaper.checked = false;

var child = wallpaper_view.get_first_child ();
while (child != null) {
var child = wallpaper_selection.get_item (0);
for (var pos = 0; child != null; pos++) {
var container = (WallpaperContainer) child;
if (container.uri == current_wallpaper_path) {
container.checked = true;
wallpaper_view.select_child ((Gtk.FlowBoxChild) container.get_parent ());
wallpaper_selection.set_selected (pos);
active_wallpaper = container;
break;
}

child = child.get_next_sibling ();
child = wallpaper_selection.get_item (pos);
}
}
} else {
Expand Down Expand Up @@ -346,15 +342,17 @@ public class PantheonShell.Wallpaper : Switchboard.SettingsPage {
finished = true;

if (gnome_background_settings.get_string ("picture-options") == "none") {
wallpaper_view.select_child ((Gtk.FlowBoxChild) solid_color.get_parent ());
solid_color.checked = true;
active_wallpaper = solid_color;
uint pos = -1;
if (wallpaper_model.find (solid_color, out pos)) {
wallpaper_selection.set_selected (pos);
solid_color.checked = true;
active_wallpaper = solid_color;
}
}

if (active_wallpaper != null) {
Gtk.Allocation alloc;
active_wallpaper.get_allocation (out alloc);
wallpaper_scrolled_window.get_vadjustment ().value = alloc.y;
uint pos = -1;
if (active_wallpaper != null && wallpaper_model.find (active_wallpaper, out pos)) {
wallpaper_view.scroll_to (pos, NONE, null);
}
}
} catch (Error err) {
Expand All @@ -365,14 +363,9 @@ public class PantheonShell.Wallpaper : Switchboard.SettingsPage {
}

private void create_solid_color_container (string color) {
if (solid_color != null) {
wallpaper_view.unselect_child ((Gtk.FlowBoxChild) solid_color.get_parent ());

uint pos = -1;
if (wallpaper_model.find (solid_color, out pos)) {
wallpaper_model.remove (pos);
}

uint pos = -1;
if (solid_color != null && wallpaper_model.find (solid_color, out pos)) {
wallpaper_model.remove (pos);
solid_color.destroy ();
}

Expand Down Expand Up @@ -411,7 +404,7 @@ public class PantheonShell.Wallpaper : Switchboard.SettingsPage {
var thumb_path = info.get_attribute_as_string (FileAttribute.THUMBNAIL_PATH);
var thumb_valid = info.get_attribute_boolean (FileAttribute.THUMBNAIL_IS_VALID);
var wallpaper = new WallpaperContainer (uri, thumb_path, thumb_valid);
wallpaper_model.insert_sorted (wallpaper, wallpapers_sort_function);
var pos = wallpaper_model.insert_sorted (wallpaper, wallpapers_sort_function);

wallpaper.trash.connect (() => {
send_undo_toast ();
Expand All @@ -420,16 +413,14 @@ public class PantheonShell.Wallpaper : Switchboard.SettingsPage {

// Select the wallpaper if it is the current wallpaper
if (current_wallpaper_path.has_suffix (uri) && gnome_background_settings.get_string ("picture-options") != "none") {
this.wallpaper_view.select_child ((Gtk.FlowBoxChild) wallpaper.get_parent ());
wallpaper_selection.set_selected (pos);
// Set the widget activated without activating it
wallpaper.checked = true;
active_wallpaper = wallpaper;
}
} catch (Error e) {
critical ("Unable to add wallpaper: %s", e.message);
}

wallpaper_view.invalidate_sort ();
}

public void cancel_thumbnail_generation () {
Expand Down
23 changes: 17 additions & 6 deletions src/Widgets/WallpaperContainer.vala
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@ public class PantheonShell.WallpaperContainer : Granite.Bin {
protected const int THUMB_HEIGHT = 144;
protected Gtk.Picture image;

private Gtk.Box card_box;
private static float monitor_ratio;

private Gtk.Revealer check_revealer;

public string? thumb_path { get; construct set; }
Expand Down Expand Up @@ -53,10 +54,18 @@ public class PantheonShell.WallpaperContainer : Granite.Bin {
Object (uri: uri, thumb_path: thumb_path, thumb_valid: thumb_valid);
}

static construct {
var monitor = Gdk.Display.get_default ().get_monitor_at_surface (
(((Gtk.Application) Application.get_default ()).active_window).get_surface ()
);

monitor_ratio = (float) monitor.geometry.width / monitor.geometry.height;
}

construct {
image = new Gtk.Picture () {
content_fit = COVER,
height_request = THUMB_HEIGHT
can_shrink = false,
content_fit = COVER
};
image.add_css_class (Granite.CssClass.CARD);

Expand All @@ -78,10 +87,12 @@ public class PantheonShell.WallpaperContainer : Granite.Bin {
};
overlay.add_overlay (check_revealer);

halign = CENTER;
valign = CENTER;
var frame = new Gtk.AspectFrame (0.5f, 0.5f, monitor_ratio, false) {
child = overlay
};

child = overlay;
child = frame;
height_request = THUMB_HEIGHT;

if (uri != null) {
var remove_wallpaper_action = new SimpleAction ("trash", null);
Expand Down