Skip to content

Commit

Permalink
Implemented a dimmed icon update via Gtk.Stack instead of Gtk.Spinner
Browse files Browse the repository at this point in the history
  • Loading branch information
italo-capasso committed Jan 3, 2025
1 parent 687cea9 commit 17f4940
Show file tree
Hide file tree
Showing 7 changed files with 61 additions and 84 deletions.
6 changes: 0 additions & 6 deletions data/styles/AppInfoView.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,6 @@ appinfoview {
}
}

.spinner {
background-color: rgba(black, 0.65);
border-radius: rem(10px);
padding: rem(12px);
}

.content-warning-box {
margin: rem(12px) rem(12px) 0;
}
Expand Down
14 changes: 3 additions & 11 deletions data/styles/HomePage.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,16 +74,8 @@ homepage {
opacity: 0.85;
}
}
}

.spinner {
background-color: rgba(black, 0.65);
border-radius: rem(10px);
padding: rem(12px);

&-small {
background-color: rgba(black, 0.65);
border-radius: rem(5px);
padding: rem(5px);
}
}
.icon-dim {
filter: blur(0.75px) saturate(10%);
}
31 changes: 14 additions & 17 deletions src/Views/AppInfoView.vala
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,15 +155,24 @@ public class AppCenter.Views.AppInfoView : Adw.NavigationPage {
var app_icon = new Gtk.Image () {
pixel_size = 128
};
var app_icon_updated = new Gtk.Image () {
pixel_size = 128
};

var badge_image = new Gtk.Image () {
halign = Gtk.Align.END,
valign = Gtk.Align.END,
pixel_size = 64
};

var app_icon_stack = new Gtk.Stack () {
transition_type = Gtk.StackTransitionType.CROSSFADE
};
app_icon_stack.add_named (app_icon, "base_icon");
app_icon_stack.add_named (app_icon_updated, "updated_icon");

var app_icon_overlay = new Gtk.Overlay () {
child = app_icon,
child = app_icon_stack,
valign = Gtk.Align.START
};

Expand All @@ -184,24 +193,12 @@ public class AppCenter.Views.AppInfoView : Adw.NavigationPage {
}
}

var spinner = new Gtk.Spinner () {
margin_top = 6,
halign = Gtk.Align.CENTER,
valign = Gtk.Align.CENTER,
width_request = 104,
height_request = 104,
visible = package.uses_generic_icon && package.icon_available
};
spinner.start ();
spinner.add_css_class ("spinner");
app_icon_overlay.add_overlay (spinner);

if (package.uses_generic_icon) {
if (package.uses_generic_icon && package.icon_available) {
app_icon.add_css_class ("icon-dim");
backend.on_metadata_remote_preprocessed.connect ((remote_title) => {
if (package.origin_description == remote_title) {
spinner.visible = false;
app_icon.clear ();
app_icon.set_from_gicon (package.get_icon (128, scale_factor));
app_icon_updated.set_from_gicon (package.get_icon (128, scale_factor));
app_icon_stack.visible_child_name = "updated_icon";
}
});
}
Expand Down
4 changes: 2 additions & 2 deletions src/Views/Homepage.vala
View file
Original file line number Diff line number Diff line change
Expand Up @@ -339,7 +339,7 @@ public class AppCenter.Homepage : Adw.NavigationPage {
show_package (package);
});

if (package.uses_generic_icon) {
if (package.uses_generic_icon && package.icon_available) {
backend.on_metadata_remote_preprocessed.connect ((remote_title) => {
if (remote_title == package.origin_description) {
banner.update_icon (package.get_icon (128, get_app_scale_factor ()));
Expand Down Expand Up @@ -376,7 +376,7 @@ public class AppCenter.Homepage : Adw.NavigationPage {

if (!installed) {
var package_row = new AppCenter.Widgets.ListPackageRowGrid (package);
if (package.uses_generic_icon) {
if (package.uses_generic_icon && package.icon_available) {
backend.on_metadata_remote_preprocessed.connect ((remote_title) => {
if (remote_title == package.origin_description) {
package_row.update_icon (package.get_icon (128, get_app_scale_factor ()));
Expand Down
32 changes: 28 additions & 4 deletions src/Widgets/AppContainers/AbstractPackageRowGrid.vala
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,24 +30,36 @@ public abstract class AppCenter.Widgets.AbstractPackageRowGrid : Gtk.Box {
protected ActionStack action_stack;
protected Gtk.Label package_name;
protected Gtk.Overlay app_icon_overlay;
protected Gtk.Stack image_stack;
protected Gtk.Image updated_icon_image;

protected AbstractPackageRowGrid (AppCenterCore.Package package) {
Object (package: package);
}

construct {
var app_icon = new Gtk.Image () {
var icon_image = new Gtk.Image () {
pixel_size = 48
};

updated_icon_image = new Gtk.Image () {
pixel_size = 48
};

image_stack = new Gtk.Stack () {
transition_type = Gtk.StackTransitionType.CROSSFADE
};
image_stack.add_named (icon_image, "base_icon");
image_stack.add_named (updated_icon_image, "updated_icon");

var badge_image = new Gtk.Image () {
halign = Gtk.Align.END,
valign = Gtk.Align.END,
pixel_size = 24
};

app_icon_overlay = new Gtk.Overlay () {
child = app_icon
child = image_stack
};

action_stack = new ActionStack (package) {
Expand All @@ -58,22 +70,34 @@ public abstract class AppCenter.Widgets.AbstractPackageRowGrid : Gtk.Box {

var plugin_host_package = package.get_plugin_host_package ();
if (package.kind == AppStream.ComponentKind.ADDON && plugin_host_package != null) {
app_icon.gicon = plugin_host_package.get_icon (app_icon.pixel_size, scale_factor);
icon_image.gicon = plugin_host_package.get_icon (icon_image.pixel_size, scale_factor);
updated_icon_image.gicon = plugin_host_package.get_icon (updated_icon_image.pixel_size, scale_factor);
badge_image.gicon = package.get_icon (badge_image.pixel_size / 2, scale_factor);

app_icon_overlay.add_overlay (badge_image);
} else {
app_icon.gicon = package.get_icon (app_icon.pixel_size, scale_factor);
icon_image.gicon = package.get_icon (icon_image.pixel_size, scale_factor);
updated_icon_image.gicon = package.get_icon (updated_icon_image.pixel_size, scale_factor);

if (package.is_runtime_updates) {
badge_image.icon_name = "system-software-update";
app_icon_overlay.add_overlay (badge_image);
}
}

if (package.uses_generic_icon && package.icon_available) {
icon_image.add_css_class ("icon-dim");
}

margin_top = 6;
margin_start = 12;
margin_bottom = 6;
margin_end = 12;
}

public void update_icon (Icon icon) {
updated_icon_image.clear ();
updated_icon_image.set_from_gicon (icon);
image_stack.visible_child_name = "updated_icon";
}
}
22 changes: 0 additions & 22 deletions src/Widgets/AppContainers/ListPackageRowGrid.vala
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@

public class AppCenter.Widgets.ListPackageRowGrid : AbstractPackageRowGrid {
private Gtk.Label package_summary;
private Gtk.Spinner spinner;

public ListPackageRowGrid (AppCenterCore.Package package) {
Object (package: package);
Expand Down Expand Up @@ -57,32 +56,11 @@ public class AppCenter.Widgets.ListPackageRowGrid : AbstractPackageRowGrid {
row_spacing = 3
};

spinner = new Gtk.Spinner () {
margin_top = 1,
halign = Gtk.Align.CENTER,
valign = Gtk.Align.CENTER,
width_request = 40,
height_request = 40,
visible = package.uses_generic_icon && package.icon_available
};
spinner.start ();
spinner.add_css_class ("spinner-small");
app_icon_overlay.add_overlay (spinner);

grid.attach (app_icon_overlay, 0, 0, 1, 2);
grid.attach (package_name, 1, 0);
grid.attach (package_summary, 1, 1);
grid.attach (action_stack, 2, 0, 1, 2);

append (grid);
}

public void update_icon (Icon icon) {
spinner.visible = false;
Gtk.Image icon_image = app_icon_overlay.child as Gtk.Image;
if (icon_image != null) {
icon_image.clear ();
icon_image.set_from_gicon (icon);
}
}
}
36 changes: 14 additions & 22 deletions src/Widgets/Banner.vala
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@ public class AppCenter.Widgets.Banner : Gtk.Button {
public string summary { get; construct; }
public bool uses_generic_icon { get; construct set; }

private Gtk.Spinner spinner;
private Gtk.Image icon_image;
private Gtk.Stack image_stack;
private Gtk.Image updated_icon_image;

public Banner (string name, string summary, string description, Icon icon, string brand_color) {
Object (
Expand Down Expand Up @@ -98,23 +98,16 @@ public class AppCenter.Widgets.Banner : Gtk.Button {
};
description_label.add_css_class ("description");

spinner = new Gtk.Spinner () {
margin_top = 6,
halign = Gtk.Align.FILL,
valign = Gtk.Align.CENTER,
width_request = 80,
height_request = 104,
visible = uses_generic_icon
};
spinner.start ();
spinner.add_css_class ("spinner");

icon_image = new Gtk.Image.from_gicon (icon);
icon_image.add_css_class ("icon_image");
var image_overlay = new Gtk.Overlay () {
child = icon_image,
var icon_image = new Gtk.Image.from_gicon (icon);
if (uses_generic_icon) {
icon_image.add_css_class ("icon-dim");
}
updated_icon_image = new Gtk.Image.from_gicon (icon);
image_stack = new Gtk.Stack () {
transition_type = Gtk.StackTransitionType.CROSSFADE,
};
image_overlay.add_overlay (spinner);
image_stack.add_named (icon_image, "base_icon");
image_stack.add_named (updated_icon_image, "updated_icon");

var inner_box = new Gtk.Box (VERTICAL, 0) {
valign = CENTER
Expand All @@ -126,7 +119,7 @@ public class AppCenter.Widgets.Banner : Gtk.Button {
var outer_box = new Gtk.Box (HORIZONTAL, 24) {
halign = CENTER
};
outer_box.append (image_overlay);
outer_box.append (image_stack);
outer_box.append (inner_box);

add_css_class ("banner");
Expand Down Expand Up @@ -159,8 +152,7 @@ public class AppCenter.Widgets.Banner : Gtk.Button {

public void update_icon (Icon icon) {
uses_generic_icon = false;
spinner.visible = false;
icon_image.clear ();
icon_image.set_from_gicon (icon);
updated_icon_image.set_from_gicon (icon);
image_stack.visible_child_name = "updated_icon";
}
}

0 comments on commit 17f4940

Please sign in to comment.