Skip to content
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

Banner: create providers for display #2207

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

Banner: create providers for display #2207

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
e50ac48
Banner: create providers for display
danirabbit Aug 29, 2024
681d952
Classes can't start with a number
danirabbit Aug 29, 2024
5a292f2
Merge branch 'main' into danirabbit/banner-globalprovider
zeebok Sep 14, 2024
f53afdf
Merge branch 'main' into danirabbit/banner-globalprovider
zeebok Sep 17, 2024
d4e1c7f
Merge branch 'main' into danirabbit/banner-globalprovider
zeebok Oct 5, 2024
95d0be0
Merge branch 'main' into danirabbit/banner-globalprovider
danirabbit Dec 10, 2024
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
3 changes: 3 additions & 0 deletions data/styles/Banner.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@
* SPDX-FileCopyrightText: 2017-2024 elementary, Inc. (https://elementary.io)
*/

@define-color banner_bg_color #{'mix(@accent_color, @bg_color, 0.8)'};
@define-color banner_fg_color #{'mix(@accent_color, @text_color, 0.85)'};

.banner {
background-color: #{'@banner_bg_color'};
background-image:
Expand Down
9 changes: 7 additions & 2 deletions src/Views/AppInfoView.vala
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,11 @@
public class AppCenter.Views.AppInfoView : Adw.NavigationPage {
public const int MAX_WIDTH = 800;

private const string BANNER_STYLE_CSS = """
@define-color banner_bg_color %s;
@define-color banner_fg_color %s;
""";

public signal void show_other_package (AppCenterCore.Package package);

public AppCenterCore.Package package { get; construct set; }
Expand Down Expand Up @@ -124,8 +129,8 @@ public class AppCenter.Views.AppInfoView : Adw.NavigationPage {

accent_provider = new Gtk.CssProvider ();
try {
string bg_color = DEFAULT_BANNER_COLOR_PRIMARY;
string text_color = DEFAULT_BANNER_COLOR_PRIMARY_TEXT;
string bg_color = "mix(@accent_color, @bg_color, 0.8)";
string text_color = "mix(@accent_color, @text_color, 0.85)";

var accent_css = "";
if (package != null) {
Expand Down
81 changes: 57 additions & 24 deletions src/Widgets/Banner.vala
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,6 @@
* Authored by: Nathan Dyer <[email protected]>
*/

const string BANNER_STYLE_CSS = """
@define-color banner_bg_color %s;
@define-color banner_fg_color %s;
""";

const string DEFAULT_BANNER_COLOR_PRIMARY = "mix(@accent_color, @bg_color, 0.8)";
const string DEFAULT_BANNER_COLOR_PRIMARY_TEXT = "mix(@accent_color, @text_color, 0.85)";
const int MILLISECONDS_BETWEEN_BANNER_ITEMS = 5000;

public class AppCenter.Widgets.Banner : Gtk.Button {
Expand Down Expand Up @@ -56,7 +49,6 @@ public class AppCenter.Widgets.Banner : Gtk.Button {
);
}


construct {
var name_label = new Gtk.Label (app_name) {
max_width_chars = 50,
Expand Down Expand Up @@ -111,24 +103,65 @@ public class AppCenter.Widgets.Banner : Gtk.Button {
hexpand = true;
child = outer_box;

var provider = new Gtk.CssProvider ();
try {
string bg_color = DEFAULT_BANNER_COLOR_PRIMARY;
string text_color = DEFAULT_BANNER_COLOR_PRIMARY_TEXT;

if (brand_color != null) {
var bg_rgba = Gdk.RGBA ();
bg_rgba.parse (brand_color);
if (brand_color != null) {
set_accent_color (brand_color, this);
}
}

bg_color = brand_color;
text_color = Granite.contrasting_foreground_color (bg_rgba).to_string ();
}
private static Gee.HashMap<string, Gtk.CssProvider>? providers;
public static void set_accent_color (string color, Gtk.Widget widget) {
if (providers == null) {
providers = new Gee.HashMap<string, Gtk.CssProvider> ();
}

var colored_css = BANNER_STYLE_CSS.printf (bg_color, text_color);
provider.load_from_string (colored_css);
get_style_context ().add_provider (provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
} catch (GLib.Error e) {
critical ("Unable to set accent color: %s", e.message);
var color_class = color.replace ("#", "color-");
widget.add_css_class (color_class);

if (!providers.has_key (color)) {
var bg_rgba = Gdk.RGBA ();
bg_rgba.parse (color);

var text_color = Granite.contrasting_foreground_color (bg_rgba).to_string ();

string style = @"
.banner.$color_class {
background-color: $color;
background-image:
linear-gradient(
to bottom right,
shade($color, 1.05),
shade($color, 0.95)
);
color: $text_color;

border: 1px solid shade($color, 0.8);
box-shadow:
inset 0 0 0 1px alpha(shade($color, 1.7), 0.05),
inset 0 1px 0 0 alpha(shade($color, 1.7), 0.45),
inset 0 -1px 0 0 alpha(shade($color, 1.7), 0.15),
0 3px 2px -1px alpha(shade($color, 0.5), 0.2),
0 3px 5px alpha(shade($color, 0.5), 0.15);
}

.banner.$color_class:hover {
box-shadow:
inset 0 0 0 1px alpha(shade($color, 1.7), 0.05),
inset 0 1px 0 0 alpha(shade($color, 1.7), 0.45),
inset 0 -1px 0 0 alpha(shade($color, 1.7), 0.15),
0 10px 8px -11px alpha(shade($color, 0.6), 0.8),
0 8px 12px alpha(shade($color, 0.8), 0.6);
}
";

var style_provider = new Gtk.CssProvider ();
style_provider.load_from_string (style);

providers[color] = style_provider;
Gtk.StyleContext.add_provider_for_display (
Gdk.Display.get_default (),
providers[color],
Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
);
}
}
}
Loading