diff --git a/data/styles/categories.css b/data/styles/categories.css
index 0b8c677cb..2dfee022d 100644
--- a/data/styles/categories.css
+++ b/data/styles/categories.css
@@ -273,24 +273,34 @@
}
.category.games {
- background-image:
- linear-gradient(
- to bottom,
- mix(@SLATE_500, @BLUEBERRY_500, 0.5),
- @SLATE_900
- );
- border-color: alpha(@SLATE_900, 0.8);
+ border: none;
box-shadow:
- inset 0 0 0 1px alpha(white, 0.02),
- inset 0 1px 0 0 alpha(white, 0.23),
- inset 0 -1px 0 0 alpha(white, 0.07),
+ inset 0 0 0 1px alpha(shade(@bg_color, 1.67), 0.1),
+ inset 0 1px 0 0 alpha(shade(@bg_color, 1.67), 0.9),
+ inset 0 -1px 0 0 alpha(shade(@bg_color, 1.67), 0.3),
+ 0 0 0 1px alpha(black, 0.15),
0 3px 2px -1px alpha(black, 0.15),
- 0 3px 5px alpha(@BLACK_900, 0.1);
- color: shade(@BLUEBERRY_100, 1.1);
- font-size: 26px;
- font-weight: 700;
- text-shadow: 0 1px 2px alpha(@BLACK_900, 0.8);
- -gtk-icon-shadow: 0 1px 2px alpha(@BLACK_900, 0.8);
+ 0 3px 5px alpha(black, 0.1);
+ font-weight: 900;
+ letter-spacing: -1px;
+ -gtk-icon-shadow:
+ 0 1px 2px alpha(@SLATE_900, 0.2),
+ 0 2px 6px alpha(@SLATE_900, 0.1);
+}
+
+.games label.pink {
+ font-size: 30px;
+ text-shadow:
+ 0 1px 2px alpha(@BUBBLEGUM_900, 0.2),
+ 0 2px 6px alpha(@BUBBLEGUM_900, 0.1);
+ margin-bottom: -12px;
+}
+
+.games label.blue {
+ font-size: 36px;
+ text-shadow:
+ 0 1px 2px alpha(@BLUEBERRY_900, 0.2),
+ 0 2px 6px alpha(@BLUEBERRY_900, 0.1);
}
.category.graphics {
diff --git a/po/POTFILES b/po/POTFILES
index 21d5c92be..8e4258686 100644
--- a/po/POTFILES
+++ b/po/POTFILES
@@ -35,7 +35,6 @@ src/Widgets/AbstractAppList.vala
src/Widgets/Banner.vala
src/Widgets/CardNumberEntry.vala
src/Widgets/CategoryFlowBox.vala
-src/Widgets/CategoryItem.vala
src/Widgets/HumbleButton.vala
src/Widgets/NetworkInfoBar.vala
src/Widgets/PackageRow.vala
diff --git a/src/Views/Homepage.vala b/src/Views/Homepage.vala
index 58b4b06d7..21f557ede 100644
--- a/src/Views/Homepage.vala
+++ b/src/Views/Homepage.vala
@@ -136,21 +136,17 @@ public class AppCenter.Homepage : AbstractView {
load_banners_and_carousels.begin ();
category_flow.child_activated.connect ((child) => {
- var item = child as Widgets.CategoryItem;
- if (item != null) {
- show_app_list_for_category (item.app_category);
- }
+ var card = (Widgets.CategoryFlowBox.AbstractCategoryCard) child;
+ show_app_list_for_category (card.category);
});
AppCenterCore.Client.get_default ().installed_apps_changed.connect (() => {
Idle.add (() => {
// Clear the cached categories when the AppStream pool is updated
foreach (weak Gtk.Widget child in category_flow.get_children ()) {
- if (child is Widgets.CategoryItem) {
- var item = child as Widgets.CategoryItem;
- var category_components = item.app_category.get_components ();
- category_components.remove_range (0, category_components.length);
- }
+ var item = (Widgets.CategoryFlowBox.AbstractCategoryCard) child;
+ var category_components = item.category.get_components ();
+ category_components.remove_range (0, category_components.length);
}
return GLib.Source.REMOVE;
diff --git a/src/Widgets/CategoryFlowBox.vala b/src/Widgets/CategoryFlowBox.vala
index f41ff4c33..d462d16a1 100644
--- a/src/Widgets/CategoryFlowBox.vala
+++ b/src/Widgets/CategoryFlowBox.vala
@@ -24,9 +24,11 @@ public class AppCenter.Widgets.CategoryFlowBox : Gtk.FlowBox {
homogeneous = true;
margin_bottom = 12;
- add (get_category (_("Accessories"), "applications-accessories", {"Utility"}, "accessories"));
- add (get_category (_("Audio"), "applications-audio-symbolic", {"Audio", "Music"}, "audio"));
- add (get_category (_("Communication"), "", {
+ var games_card = new GamesCard ();
+
+ add (new LegacyCard (_("Accessories"), "applications-accessories", {"Utility"}, "accessories"));
+ add (new LegacyCard (_("Audio"), "applications-audio-symbolic", {"Audio", "Music"}, "audio"));
+ add (new LegacyCard (_("Communication"), "", {
"Chat",
"ContactManagement",
"Email",
@@ -35,7 +37,7 @@ public class AppCenter.Widgets.CategoryFlowBox : Gtk.FlowBox {
"Telephony",
"VideoConference"
}, "communication"));
- add (get_category (_("Development"), "", {
+ add (new LegacyCard (_("Development"), "", {
"Database",
"Debugger",
"Development",
@@ -45,29 +47,13 @@ public class AppCenter.Widgets.CategoryFlowBox : Gtk.FlowBox {
"TerminalEmulator",
"WebDevelopment"
}, "development"));
- add (get_category (_("Education"), "", {"Education"}, "education"));
- add (get_category (_("Finance"), "payment-card-symbolic", {
+ add (new LegacyCard (_("Education"), "", {"Education"}, "education"));
+ add (new LegacyCard (_("Finance"), "payment-card-symbolic", {
"Economy",
"Finance"
}, "finance"));
- add (get_category (_("Games"), "applications-games-symbolic", {
- "ActionGame",
- "AdventureGame",
- "ArcadeGame",
- "Amusement",
- "BlocksGame",
- "BoardGame",
- "CardGame",
- "Game",
- "KidsGame",
- "LogicGame",
- "RolePlaying",
- "Shooter",
- "Simulation",
- "SportsGame",
- "StrategyGame"
- }, "games"));
- add (get_category (_("Graphics"), "", {
+ add (games_card);
+ add (new LegacyCard (_("Graphics"), "", {
"2DGraphics",
"3DGraphics",
"Graphics",
@@ -76,11 +62,11 @@ public class AppCenter.Widgets.CategoryFlowBox : Gtk.FlowBox {
"RasterGraphics",
"VectorGraphics"
}, "graphics"));
- add (get_category (_("Internet"), "applications-internet", {
+ add (new LegacyCard (_("Internet"), "applications-internet", {
"Network",
"P2P"
}, "internet"));
- add (get_category (_("Math, Science, & Engineering"), "", {
+ add (new LegacyCard (_("Math, Science, & Engineering"), "", {
"ArtificialIntelligence",
"Astronomy",
"Biology",
@@ -99,31 +85,31 @@ public class AppCenter.Widgets.CategoryFlowBox : Gtk.FlowBox {
"Robotics",
"Science"
}, "science"));
- add (get_category (_("Media Production"), "applications-multimedia-symbolic", {
+ add (new LegacyCard (_("Media Production"), "applications-multimedia-symbolic", {
"AudioVideoEditing",
"Midi",
"Mixer",
"Recorder",
"Sequencer"
}, "media-production"));
- add (get_category (_("Office"), "applications-office-symbolic", {
+ add (new LegacyCard (_("Office"), "applications-office-symbolic", {
"Office",
"Presentation",
"Publishing",
"Spreadsheet",
"WordProcessor"
}, "office"));
- add (get_category (_("System"), "applications-system-symbolic", {
+ add (new LegacyCard (_("System"), "applications-system-symbolic", {
"Monitor",
"System"
}, "system"));
- add (get_category (_("Universal Access"), "applications-accessibility-symbolic", {"Accessibility"}, "accessibility"));
- add (get_category (_("Video"), "applications-video-symbolic", {
+ add (new LegacyCard (_("Universal Access"), "applications-accessibility-symbolic", {"Accessibility"}, "accessibility"));
+ add (new LegacyCard (_("Video"), "applications-video-symbolic", {
"Tuner",
"TV",
"Video"
}, "video"));
- add (get_category (_("Writing & Language"), "preferences-desktop-locale", {
+ add (new LegacyCard (_("Writing & Language"), "preferences-desktop-locale", {
"Dictionary",
"Languages",
"Literature",
@@ -133,33 +119,171 @@ public class AppCenter.Widgets.CategoryFlowBox : Gtk.FlowBox {
"Translation",
"WordProcessor"
}, "writing-language"));
- add (get_category (_("Privacy & Security"), "preferences-system-privacy", {
+ add (new LegacyCard (_("Privacy & Security"), "preferences-system-privacy", {
"Security",
}, "privacy-security"));
set_sort_func ((child1, child2) => {
- var item1 = child1 as Widgets.CategoryItem;
- var item2 = child2 as Widgets.CategoryItem;
+ var item1 = (AbstractCategoryCard) child1;
+ var item2 = (AbstractCategoryCard) child2;
if (item1 != null && item2 != null) {
- return item1.app_category.name.collate (item2.app_category.name);
+ return item1.category.name.collate (item2.category.name);
}
return 0;
});
}
- private Widgets.CategoryItem get_category (string name, string icon, string[] groups, string style) {
- var category = new AppStream.Category ();
- category.set_name (name);
- category.set_icon (icon);
+ public abstract class AbstractCategoryCard : Gtk.FlowBoxChild {
+ public AppStream.Category category { get; protected set; }
+
+ protected Gtk.Grid content_area;
+ protected unowned Gtk.StyleContext style_context;
+
+ protected static Gtk.CssProvider category_provider;
+
+ static construct {
+ category_provider = new Gtk.CssProvider ();
+ category_provider.load_from_resource ("io/elementary/appcenter/categories.css");
+ }
+
+ construct {
+ var expanded_grid = new Gtk.Grid () {
+ expand = true,
+ margin = 12
+ };
+
+ content_area = new Gtk.Grid () {
+ margin = 12
+ };
+ content_area.add (expanded_grid);
+
+ style_context = content_area.get_style_context ();
+ style_context.add_class (Granite.STYLE_CLASS_CARD);
+ style_context.add_class (Granite.STYLE_CLASS_ROUNDED);
+ style_context.add_class ("category");
+ style_context.add_provider (category_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
+
+ child = content_area;
+ }
+ }
+
+ private class LegacyCard : AbstractCategoryCard {
+ public LegacyCard (string name, string icon, string[] groups, string style) {
+ category = new AppStream.Category ();
+ category.set_name (name);
+ category.set_icon (icon);
+
+ foreach (var group in groups) {
+ category.add_desktop_group (group);
+ }
+
+ var display_image = new Gtk.Image ();
+ display_image.icon_size = Gtk.IconSize.DIALOG;
+ display_image.valign = Gtk.Align.CENTER;
+ display_image.halign = Gtk.Align.END;
+
+ var name_label = new Gtk.Label (null);
+ name_label.wrap = true;
+ name_label.max_width_chars = 15;
+ name_label.get_style_context ().add_provider (category_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
+
+ var grid = new Gtk.Grid ();
+ grid.orientation = Gtk.Orientation.HORIZONTAL;
+ grid.column_spacing = 6;
+ grid.halign = Gtk.Align.CENTER;
+ grid.valign = Gtk.Align.CENTER;
+ grid.margin_top = 32;
+ grid.margin_end = 16;
+ grid.margin_bottom = 32;
+ grid.margin_start = 16;
+ grid.add (display_image);
+ grid.add (name_label);
- foreach (var group in groups) {
- category.add_desktop_group (group);
+ content_area.attach (grid, 0, 0);
+
+ if (category.icon != "") {
+ display_image.icon_name = category.icon;
+ name_label.xalign = 0;
+ name_label.halign = Gtk.Align.START;
+ } else {
+ display_image.destroy ();
+ name_label.justify = Gtk.Justification.CENTER;
+ }
+
+ style_context.add_class (style);
+
+ if (style == "accessibility") {
+ name_label.label = category.name.up ();
+ } else {
+ name_label.label = category.name;
+ }
+
+ if (style == "science") {
+ name_label.justify = Gtk.Justification.CENTER;
+ }
}
+ }
+
+ private class GamesCard : AbstractCategoryCard {
+ construct {
+ category = new AppStream.Category () {
+ name = _("Fun & Games"),
+ icon = "applications-games-symbolic"
+ };
+ category.add_desktop_group ("ActionGame");
+ category.add_desktop_group ("AdventureGame");
+ category.add_desktop_group ("Amusement");
+ category.add_desktop_group ("ArcadeGame");
+ category.add_desktop_group ("BlocksGame");
+ category.add_desktop_group ("BoardGame");
+ category.add_desktop_group ("CardGame");
+ category.add_desktop_group ("Game");
+ category.add_desktop_group ("KidsGame");
+ category.add_desktop_group ("LogicGame");
+ category.add_desktop_group ("RolePlaying");
+ category.add_desktop_group ("Shooter");
+ category.add_desktop_group ("Simulation");
+ category.add_desktop_group ("SportsGame");
+ category.add_desktop_group ("StrategyGame");
- var item = new Widgets.CategoryItem (category);
- item.add_category_class (style);
+ var image = new Gtk.Image () {
+ icon_name = "applications-games-symbolic",
+ pixel_size = 64
+ };
- return item;
+ unowned var image_context = image.get_style_context ();
+ image_context.add_class (Granite.STYLE_CLASS_ACCENT);
+ image_context.add_class ("slate");
+
+ var fun_label = new Gtk.Label (_("Fun &")) {
+ halign = Gtk.Align.START
+ };
+
+ unowned var fun_label_context = fun_label.get_style_context ();
+ fun_label_context.add_class (Granite.STYLE_CLASS_ACCENT);
+ fun_label_context.add_class ("pink");
+ fun_label_context.add_provider (category_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
+
+ var games_label = new Gtk.Label (_("Games"));
+
+ unowned var games_label_context = games_label.get_style_context ();
+ games_label_context.add_class (Granite.STYLE_CLASS_ACCENT);
+ games_label_context.add_class ("blue");
+ games_label_context.add_provider (category_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
+
+ var grid = new Gtk.Grid () {
+ column_spacing = 12,
+ halign = Gtk.Align.CENTER,
+ valign = Gtk.Align.CENTER
+ };
+ grid.attach (image, 0, 0, 1, 2);
+ grid.attach (fun_label, 1, 0);
+ grid.attach (games_label, 1, 1);
+
+ content_area.attach (grid, 0, 0);
+
+ style_context.add_class ("games");
+ }
}
}
diff --git a/src/Widgets/CategoryItem.vala b/src/Widgets/CategoryItem.vala
deleted file mode 100644
index 0216e9ca4..000000000
--- a/src/Widgets/CategoryItem.vala
+++ /dev/null
@@ -1,106 +0,0 @@
-// -*- Mode: vala; indent-tabs-mode: nil; tab-width: 4 -*-
-/*-
- * Copyright (c) 2014-2016 elementary LLC. (https://elementary.io)
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program. If not, see .
- *
- * Authored by: Corentin Noël
- */
-
-public class AppCenter.Widgets.CategoryItem : Gtk.FlowBoxChild {
- public AppStream.Category app_category { get; construct; }
- private Gtk.Label name_label;
- private Gtk.Grid themed_grid;
- private unowned Gtk.StyleContext themed_grid_context;
- private static Gtk.CssProvider category_provider;
-
- public CategoryItem (AppStream.Category app_category) {
- Object (app_category: app_category);
- }
-
- static construct {
- category_provider = new Gtk.CssProvider ();
- category_provider.load_from_resource ("io/elementary/appcenter/categories.css");
- }
-
- construct {
- var display_image = new Gtk.Image ();
- display_image.icon_size = Gtk.IconSize.DIALOG;
- display_image.valign = Gtk.Align.CENTER;
- display_image.halign = Gtk.Align.END;
-
- name_label = new Gtk.Label (null);
- name_label.wrap = true;
- name_label.max_width_chars = 15;
- name_label.get_style_context ().add_provider (category_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
-
- var grid = new Gtk.Grid ();
- grid.orientation = Gtk.Orientation.HORIZONTAL;
- grid.column_spacing = 6;
- grid.halign = Gtk.Align.CENTER;
- grid.valign = Gtk.Align.CENTER;
- grid.margin_top = 32;
- grid.margin_end = 16;
- grid.margin_bottom = 32;
- grid.margin_start = 16;
- grid.add (display_image);
- grid.add (name_label);
-
- var expanded_grid = new Gtk.Grid () {
- expand = true,
- margin = 12
- };
-
- themed_grid = new Gtk.Grid () {
- margin = 12
- };
- themed_grid.attach (grid, 0, 0, 1, 1);
- themed_grid.attach (expanded_grid, 0, 0, 1, 1);
-
- themed_grid_context = themed_grid.get_style_context ();
- themed_grid_context.add_class (Granite.STYLE_CLASS_CARD);
- themed_grid_context.add_class (Granite.STYLE_CLASS_ROUNDED);
- themed_grid_context.add_class ("category");
- themed_grid_context.add_provider (category_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
-
- child = themed_grid;
-
- tooltip_text = app_category.summary ?? "";
-
- if (app_category.icon != "") {
- display_image.icon_name = app_category.icon;
- ((Gtk.Misc) name_label).xalign = 0;
- name_label.halign = Gtk.Align.START;
- } else {
- display_image.destroy ();
- name_label.justify = Gtk.Justification.CENTER;
- }
-
- show_all ();
- }
-
- public void add_category_class (string theme_name) {
- themed_grid_context.add_class (theme_name);
-
- if (theme_name == "games" || theme_name == "accessibility") {
- name_label.label = app_category.name.up ();
- } else {
- name_label.label = app_category.name;
- }
-
- if (theme_name == "science") {
- name_label.justify = Gtk.Justification.CENTER;
- }
- }
-}
diff --git a/src/meson.build b/src/meson.build
index e095af4c0..2d8048a33 100644
--- a/src/meson.build
+++ b/src/meson.build
@@ -36,7 +36,6 @@ appcenter_files = files(
'Widgets/Banner.vala',
'Widgets/CardNumberEntry.vala',
'Widgets/CategoryFlowBox.vala',
- 'Widgets/CategoryItem.vala',
'Widgets/HumbleButton.vala',
'Widgets/NetworkInfoBar.vala',
'Widgets/PackageRow.vala',