From 17f4940d10ace36e2f1927a88f2044585e521d99 Mon Sep 17 00:00:00 2001 From: italo-capasso Date: Fri, 3 Jan 2025 18:16:00 -0500 Subject: [PATCH] Implemented a dimmed icon update via Gtk.Stack instead of Gtk.Spinner --- data/styles/AppInfoView.scss | 6 ---- data/styles/HomePage.scss | 14 ++------ src/Views/AppInfoView.vala | 31 ++++++++-------- src/Views/Homepage.vala | 4 +-- .../AppContainers/AbstractPackageRowGrid.vala | 32 ++++++++++++++--- .../AppContainers/ListPackageRowGrid.vala | 22 ------------ src/Widgets/Banner.vala | 36 ++++++++----------- 7 files changed, 61 insertions(+), 84 deletions(-) diff --git a/data/styles/AppInfoView.scss b/data/styles/AppInfoView.scss index f87b96fc1..b0089515c 100644 --- a/data/styles/AppInfoView.scss +++ b/data/styles/AppInfoView.scss @@ -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; } diff --git a/data/styles/HomePage.scss b/data/styles/HomePage.scss index 3e96726de..d0ffcbafb 100644 --- a/data/styles/HomePage.scss +++ b/data/styles/HomePage.scss @@ -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%); } diff --git a/src/Views/AppInfoView.vala b/src/Views/AppInfoView.vala index 2a7460429..ef18de1fb 100644 --- a/src/Views/AppInfoView.vala +++ b/src/Views/AppInfoView.vala @@ -155,6 +155,9 @@ 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, @@ -162,8 +165,14 @@ public class AppCenter.Views.AppInfoView : Adw.NavigationPage { 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 }; @@ -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"; } }); } diff --git a/src/Views/Homepage.vala b/src/Views/Homepage.vala index 1fb21c835..1443ac309 100644 --- a/src/Views/Homepage.vala +++ b/src/Views/Homepage.vala @@ -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 ())); @@ -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 ())); diff --git a/src/Widgets/AppContainers/AbstractPackageRowGrid.vala b/src/Widgets/AppContainers/AbstractPackageRowGrid.vala index dd1ed2cab..aab5052c7 100644 --- a/src/Widgets/AppContainers/AbstractPackageRowGrid.vala +++ b/src/Widgets/AppContainers/AbstractPackageRowGrid.vala @@ -30,16 +30,28 @@ 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, @@ -47,7 +59,7 @@ public abstract class AppCenter.Widgets.AbstractPackageRowGrid : Gtk.Box { }; app_icon_overlay = new Gtk.Overlay () { - child = app_icon + child = image_stack }; action_stack = new ActionStack (package) { @@ -58,12 +70,14 @@ 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"; @@ -71,9 +85,19 @@ public abstract class AppCenter.Widgets.AbstractPackageRowGrid : Gtk.Box { } } + 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"; + } } diff --git a/src/Widgets/AppContainers/ListPackageRowGrid.vala b/src/Widgets/AppContainers/ListPackageRowGrid.vala index e36c32fc0..9825e7842 100644 --- a/src/Widgets/AppContainers/ListPackageRowGrid.vala +++ b/src/Widgets/AppContainers/ListPackageRowGrid.vala @@ -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); @@ -57,18 +56,6 @@ 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); @@ -76,13 +63,4 @@ public class AppCenter.Widgets.ListPackageRowGrid : AbstractPackageRowGrid { 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); - } - } } diff --git a/src/Widgets/Banner.vala b/src/Widgets/Banner.vala index 414d9e371..8b3c4ca4e 100644 --- a/src/Widgets/Banner.vala +++ b/src/Widgets/Banner.vala @@ -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 ( @@ -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 @@ -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"); @@ -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"; } }