From e70ad98d01a9ae41bef5e259c1777c929bc77e2d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Tue, 2 Sep 2025 13:58:42 -0700 Subject: [PATCH 1/6] Homepage: minimize category cards --- data/icons/audio.svg | 1412 -------------------- data/icons/audio@2x.svg | 1412 -------------------- data/icons/categories.gresource.xml | 15 - data/icons/categories/48/accessibility.svg | 29 - data/icons/categories/48/audio.svg | 6 - data/icons/categories/48/finance.svg | 29 - data/icons/categories/48/games.svg | 6 - data/icons/categories/48/multimedia.svg | 30 - data/icons/categories/48/office.svg | 6 - data/icons/categories/48/video-rtl.svg | 6 - data/icons/categories/48/video.svg | 6 - data/icons/graphics-rtl.svg | 65 - data/icons/graphics-rtl@2x.svg | 35 - data/icons/graphics.svg | 63 - data/icons/graphics@2x.svg | 35 - data/styles/Category.scss | 129 +- src/Core/CategoryManager.vala | 20 +- src/Views/Homepage.vala | 54 +- 18 files changed, 29 insertions(+), 3329 deletions(-) delete mode 100644 data/icons/audio.svg delete mode 100644 data/icons/audio@2x.svg delete mode 100644 data/icons/categories/48/accessibility.svg delete mode 100644 data/icons/categories/48/audio.svg delete mode 100644 data/icons/categories/48/finance.svg delete mode 100644 data/icons/categories/48/games.svg delete mode 100644 data/icons/categories/48/multimedia.svg delete mode 100644 data/icons/categories/48/office.svg delete mode 100644 data/icons/categories/48/video-rtl.svg delete mode 100644 data/icons/categories/48/video.svg delete mode 100644 data/icons/graphics-rtl.svg delete mode 100644 data/icons/graphics-rtl@2x.svg delete mode 100644 data/icons/graphics.svg delete mode 100644 data/icons/graphics@2x.svg diff --git a/data/icons/audio.svg b/data/icons/audio.svg deleted file mode 100644 index c46bf05234..0000000000 --- a/data/icons/audio.svg +++ /dev/null @@ -1,1412 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/data/icons/audio@2x.svg b/data/icons/audio@2x.svg deleted file mode 100644 index b9601a63fa..0000000000 --- a/data/icons/audio@2x.svg +++ /dev/null @@ -1,1412 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/data/icons/categories.gresource.xml b/data/icons/categories.gresource.xml index 52eb1c1ac7..6f0c628865 100644 --- a/data/icons/categories.gresource.xml +++ b/data/icons/categories.gresource.xml @@ -1,15 +1,6 @@ - categories/48/accessibility.svg - categories/48/audio.svg - categories/48/games.svg - categories/48/multimedia.svg - categories/48/office.svg - categories/48/video-rtl.svg - categories/48/video.svg - categories/48/finance.svg - categories/symbolic/education.svg currency-dollar-symbolic.svg link-contribute.svg @@ -57,14 +48,8 @@ oars/violence.svg - audio.svg - audio@2x.svg education.svg education@2x.svg - graphics.svg - graphics-rtl.svg - graphics@2x.svg - graphics-rtl@2x.svg science.svg diff --git a/data/icons/categories/48/accessibility.svg b/data/icons/categories/48/accessibility.svg deleted file mode 100644 index fa92d555b7..0000000000 --- a/data/icons/categories/48/accessibility.svg +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - image/svg+xml - - - - - - diff --git a/data/icons/categories/48/audio.svg b/data/icons/categories/48/audio.svg deleted file mode 100644 index 6c1c705629..0000000000 --- a/data/icons/categories/48/audio.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/data/icons/categories/48/finance.svg b/data/icons/categories/48/finance.svg deleted file mode 100644 index 142b886fd0..0000000000 --- a/data/icons/categories/48/finance.svg +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - image/svg+xml - - - - - - - diff --git a/data/icons/categories/48/games.svg b/data/icons/categories/48/games.svg deleted file mode 100644 index eef8063d6b..0000000000 --- a/data/icons/categories/48/games.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/data/icons/categories/48/multimedia.svg b/data/icons/categories/48/multimedia.svg deleted file mode 100644 index c7a65291bd..0000000000 --- a/data/icons/categories/48/multimedia.svg +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - image/svg+xml - - - - - - - diff --git a/data/icons/categories/48/office.svg b/data/icons/categories/48/office.svg deleted file mode 100644 index 16ca6d7d30..0000000000 --- a/data/icons/categories/48/office.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/data/icons/categories/48/video-rtl.svg b/data/icons/categories/48/video-rtl.svg deleted file mode 100644 index fb9fa7394e..0000000000 --- a/data/icons/categories/48/video-rtl.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/data/icons/categories/48/video.svg b/data/icons/categories/48/video.svg deleted file mode 100644 index 1ab6b9b080..0000000000 --- a/data/icons/categories/48/video.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/data/icons/graphics-rtl.svg b/data/icons/graphics-rtl.svg deleted file mode 100644 index 153ac1a405..0000000000 --- a/data/icons/graphics-rtl.svg +++ /dev/null @@ -1,65 +0,0 @@ - - - - - - - - - - image/svg+xml - - - - - - - - diff --git a/data/icons/graphics-rtl@2x.svg b/data/icons/graphics-rtl@2x.svg deleted file mode 100644 index 118b68dc5a..0000000000 --- a/data/icons/graphics-rtl@2x.svg +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - - image/svg+xml - - - - - - - - diff --git a/data/icons/graphics.svg b/data/icons/graphics.svg deleted file mode 100644 index 8e5fb68079..0000000000 --- a/data/icons/graphics.svg +++ /dev/null @@ -1,63 +0,0 @@ - - - - - - - - - - image/svg+xml - - - - - - - - diff --git a/data/icons/graphics@2x.svg b/data/icons/graphics@2x.svg deleted file mode 100644 index 187fe3687d..0000000000 --- a/data/icons/graphics@2x.svg +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - - image/svg+xml - - - - - - - - diff --git a/data/styles/Category.scss b/data/styles/Category.scss index 6bad927642..bcef66bf50 100644 --- a/data/styles/Category.scss +++ b/data/styles/Category.scss @@ -7,18 +7,17 @@ background-position: center center; background-repeat: no-repeat; border: 1px solid rgba(black, 0.15); + border-spacing: 0.5rem; box-shadow: inset 0 0 0 1px rgba(white, 0.05), inset 0 1px 0 0 rgba(white, 0.45), inset 0 -1px 0 0 rgba(white, 0.15), 0 3px 2px -1px rgba(black, 0.15), 0 3px 5px rgba(black, 0.1); - font-size: 2em; - font-weight: 600; + font-weight: 500; margin: rem(12px); - padding: rem(12px); - min-height: 3em; - -gtk-icon-size: 48px; + padding: 1rem; + -gtk-icon-style: symbolic; &.accessibility { background-image: @@ -46,10 +45,6 @@ &.audio { background-image: - -gtk-scaled( - url("resource:///io/elementary/appcenter/backgrounds/audio.svg"), - url("resource:///io/elementary/appcenter/backgrounds/audio@2x.svg") - ), linear-gradient( to bottom, #{'@ORANGE_300'}, @@ -67,94 +62,15 @@ &.communication { background-image: - -gtk-icontheme("call-start-symbolic"), - -gtk-icontheme("internet-chat-symbolic"), - -gtk-icontheme("document-edit-symbolic"), - -gtk-icontheme("mail-send-symbolic"), - -gtk-icontheme("document-edit-symbolic"), - -gtk-icontheme("preferences-system-sharing-symbolic"), - -gtk-icontheme("internet-chat-symbolic"), - -gtk-icontheme("mail-send-symbolic"), - -gtk-icontheme("call-start-symbolic"), - -gtk-icontheme("document-edit-symbolic"), - -gtk-icontheme("preferences-system-sharing-symbolic"), - -gtk-icontheme("internet-chat-symbolic"), - -gtk-icontheme("emoji-objects-symbolic"), - -gtk-icontheme("mail-attachment-symbolic"), - -gtk-icontheme("non-starred-symbolic"), - -gtk-icontheme("face-heart-symbolic"), - -gtk-icontheme("internet-mail-symbolic"), - -gtk-icontheme("emoji-body-symbolic"), - -gtk-icontheme("emoji-objects-symbolic"), - -gtk-icontheme("face-heart-symbolic"), - -gtk-icontheme("mail-attachment-symbolic"), - -gtk-icontheme("emoji-objects-symbolic"), - -gtk-icontheme("non-starred-symbolic"), - -gtk-icontheme("emoji-body-symbolic"), linear-gradient( 175deg, #{'@LIME_300'} 5%, #{'@LIME_500'} ); - background-size: - 24px, - 24px, - 24px, - 24px, - 24px, - 24px, - 24px, - 24px, - 24px, - 24px, - 24px, - 24px, - 16px, - 16px, - 16px, - 16px, - 16px, - 16px, - 16px, - 16px, - 16px, - 16px, - 16px, - 16px, - cover; - background-position: - 5% 10%, - 15% 50%, - 5% 90%, - 30% 10%, - 40% 50%, - 30% 90%, - 60% 10%, - 70% 50%, - 60% 90%, - 85% 10%, - 95% 50%, - 85% 90%, - 18% 15%, - 2% 50%, - 18% 85%, - 28% 50%, - 45% 15%, - 53% 50%, - 45% 85%, - 72% 15%, - 82% 50%, - 72% 85%, - 98% 15%, - 98% 85%, - center center; border-color: #{'alpha(@LIME_900, 0.7)'}; - color: #{'alpha(@LIME_900, 0.15)'}; + color: white; text-shadow: 0 1px 2px #{'alpha(@LIME_900, 0.9)'}; - - label { - color: white; - } + -gtk-icon-shadow: 0 1px 2px #{'alpha(@LIME_900, 0.9)'}; } &.development { @@ -259,7 +175,6 @@ 0 0 0 1px rgba(black, 0.15), 0 3px 2px -1px rgba(black, 0.15), 0 3px 5px rgba(black, 0.1); - font-weight: 900; letter-spacing: -1px; -gtk-icon-shadow: 0 1px 2px #{'alpha(@SLATE_900, 0.2)'}, @@ -267,7 +182,6 @@ label { color: #{'@BLUEBERRY_500'}; - font-size: 1.5em; text-shadow: 0 1px 2px #{'alpha(@BLUEBERRY_900, 0.2)'}, 0 2px 6px #{'alpha(@BLUEBERRY_900, 0.1)'}; @@ -275,7 +189,6 @@ image { color: #{'@SLATE_500'}; - -gtk-icon-size: rem(64px); } } @@ -317,40 +230,16 @@ 0 3px 5px rgba(black, 0.1); color: #fe5498; text-shadow: 0 1px 3px #{'@bg_color'}; - - label { - border-image: - -gtk-scaled( - url("resource:///io/elementary/appcenter/backgrounds/graphics.svg"), - url("resource:///io/elementary/appcenter/backgrounds/graphics@2x.svg") - ) 10 10 10 10 / 10px 10px 10px 10px repeat; - padding: 12px; - - &:dir(rtl) { - border-image: - -gtk-scaled( - url("resource:///io/elementary/appcenter/backgrounds/graphics-rtl.svg"), - url("resource:///io/elementary/appcenter/backgrounds/graphics-rtl@2x.svg") - ) 10 10 10 10 / 10px 10px 10px 10px repeat; - } - } } &.internet { background-image: - -gtk-icontheme("applications-internet-symbolic"), linear-gradient( to bottom, #{'@BLUEBERRY_300'}, #{'@BLUEBERRY_500'} ); - background-position: - center 30%, - center center; - background-size: - cover, - cover; - color: #{'alpha(@BLUEBERRY_100, 0.25)'}; + color: white; border-color: #{'alpha(@BLUEBERRY_700, 0.8)'}; box-shadow: inset 0 0 0 1px rgba(white, 0.05), @@ -361,10 +250,6 @@ text-shadow: 0 1px 1px rgba(black, 0.3), 0 2px 3px rgba(black, 0.3); - - label { - color: white; - } } &.media-production { diff --git a/src/Core/CategoryManager.vala b/src/Core/CategoryManager.vala index e8924df3fd..4fc7bd8798 100644 --- a/src/Core/CategoryManager.vala +++ b/src/Core/CategoryManager.vala @@ -18,9 +18,9 @@ public class AppCenter.CategoryManager : Object { categories = new GenericArray (); append ("accessories", _("Accessories"), "applications-accessories", {"Utility"}); - append ("audio", _("Audio"), "appcenter-audio", {"Audio", "Music"}); + append ("audio", _("Audio"), "audio-x-generic", {"Audio", "Music"}); - append ("communication", _("Communication"), "", { + append ("communication", _("Communication"), "internet-chat", { "Chat", "ContactManagement", "Email", @@ -30,7 +30,7 @@ public class AppCenter.CategoryManager : Object { "VideoConference" }); - append ("development", _("Development"), "", { + append ("development", _("Development"), "applications-development", { "Database", "Debugger", "Development", @@ -41,14 +41,14 @@ public class AppCenter.CategoryManager : Object { "WebDevelopment" }); - append ("education", _("Education"), "applications-education-symbolic", {"Education"}); + append ("education", _("Education"), "applications-education", {"Education"}); append ("finance", _("Finance"), "appcenter-finance", { "Economy", "Finance" }); - append ("games", _("Fun & Games"), "appcenter-games-symbolic", { + append ("games", _("Fun & Games"), "applications-games", { "ActionGame", "AdventureGame", "Amusement", @@ -66,7 +66,7 @@ public class AppCenter.CategoryManager : Object { "StrategyGame" }); - append ("graphics", _("Graphics"), "", { + append ("graphics", _("Graphics"), "applications-graphics", { "2DGraphics", "3DGraphics", "Graphics", @@ -101,7 +101,7 @@ public class AppCenter.CategoryManager : Object { "Science" }); - append ("media-production", _("Media Production"), "appcenter-multimedia-symbolic", { + append ("media-production", _("Media Production"), "appcenter-multimedia", { "AudioVideoEditing", "Midi", "Mixer", @@ -109,7 +109,7 @@ public class AppCenter.CategoryManager : Object { "Sequencer" }); - append ("office", _("Office"), "appcenter-office-symbolic", { + append ("office", _("Office"), "appcenter-office", { "Office", "Presentation", "Publishing", @@ -122,9 +122,9 @@ public class AppCenter.CategoryManager : Object { "System" }); - append ("accessibility", _("Universal Access"), "appcenter-accessibility-symbolic", {"Accessibility"}); + append ("accessibility", _("Universal Access"), "appcenter-accessibility", {"Accessibility"}); - append ("video", _("Video"), "appcenter-video-symbolic", { + append ("video", _("Video"), "appcenter-video", { "Tuner", "TV", "Video" diff --git a/src/Views/Homepage.vala b/src/Views/Homepage.vala index 0183d6917a..b311439462 100644 --- a/src/Views/Homepage.vala +++ b/src/Views/Homepage.vala @@ -334,55 +334,25 @@ public class AppCenter.Homepage : Adw.NavigationPage { construct { var name_label = new Gtk.Label (category.name) { + halign = START, wrap = true, - max_width_chars = 15 + xalign = 0 }; - var box = new Gtk.Box (HORIZONTAL, 6) { - halign = CENTER, - valign = CENTER + var display_image = new Gtk.Image.from_icon_name (category.icon) { + halign = END, + valign = CENTER, }; - if (category.icon != "") { - var display_image = new Gtk.Image.from_icon_name (category.icon) { - halign = END, - valign = CENTER, - }; - - box.append (display_image); - - name_label.xalign = 0; - name_label.halign = START; - } else { - name_label.justify = CENTER; - } - + var box = new Gtk.Box (HORIZONTAL, 0); + box.append (display_image); box.append (name_label); + box.add_css_class (Granite.STYLE_CLASS_CARD); + box.add_css_class (Granite.STYLE_CLASS_ROUNDED); + box.add_css_class ("category"); + box.add_css_class (category.id); - var expanded_grid = new Gtk.Grid () { - hexpand = true, - vexpand = true - }; - - var content_area = new Gtk.Grid (); - content_area.attach (box, 0, 0); - content_area.attach (expanded_grid, 0, 0); - content_area.add_css_class (Granite.STYLE_CLASS_CARD); - content_area.add_css_class (Granite.STYLE_CLASS_ROUNDED); - content_area.add_css_class ("category"); - content_area.add_css_class (category.id); - - child = content_area; - - if (category.id == "accessibility") { - name_label.label = category.name.up (); - } else { - name_label.label = category.name; - } - - if (category.id == "science") { - name_label.justify = CENTER; - } + child = box; AppCenterCore.FlatpakBackend.get_default ().package_list_changed.connect (() => { Idle.add (() => { From e402f094d4e971d52cb446207e2a79bbebd4379e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Tue, 2 Sep 2025 14:17:03 -0700 Subject: [PATCH 2/6] Fix up some stuff --- data/styles/Category.scss | 59 ++++++++--------------------------- src/Core/CategoryManager.vala | 12 +++---- 2 files changed, 19 insertions(+), 52 deletions(-) diff --git a/data/styles/Category.scss b/data/styles/Category.scss index bcef66bf50..23cc194d8f 100644 --- a/data/styles/Category.scss +++ b/data/styles/Category.scss @@ -63,7 +63,7 @@ &.communication { background-image: linear-gradient( - 175deg, + to bottom, #{'@LIME_300'} 5%, #{'@LIME_500'} ); @@ -75,46 +75,21 @@ &.development { background-image: - linear-gradient( - to right, - transparent calc(0.5em - 1px), - rgba(white, 0.05) calc(0.5em - 1px), - rgba(white, 0.05) 0.5em, - transparent 0.5em - ), linear-gradient( to bottom, - transparent calc(0.5em - 1px), - rgba(white, 0.05) calc(0.5em - 1px), - rgba(white, 0.05) 0.5em, - transparent 0.5em - ), - linear-gradient( - to right, - transparent calc(1em - 1px), - rgba(white, 0.125) calc(1em - 1px) - ), - linear-gradient( - to bottom, - transparent calc(1em - 1px), - rgba(white, 0.125) calc(1em - 1px) - ), - linear-gradient( - to bottom right, - #{'@GRAPE_500'}, - #{'@GRAPE_700'} + #{'mix(@GRAPE_300, @GRAPE_500, 0.5)'} 5%, + #{'@GRAPE_500'} ); - background-position: center center; - background-repeat: repeat; - background-size: - 1em 1em, - 1em 1em, - 1em 1em, - 1em 1em, - cover; border-color: #{'alpha(@GRAPE_900, 0.7)'}; + box-shadow: + inset 0 0 0 1px rgba(white, 0.05), + inset 0 1px 0 0 rgba(white, 0.25), + inset 0 -1px 0 0 rgba(white, 0.1), + 0 3px 2px -1px rgba(black, 0.15), + 0 3px 5px rgba(black, 0.1); color: white; text-shadow: 0 2px 0 #{'alpha(@GRAPE_900, 0.5)'}; + -gtk-icon-shadow: 0 2px 0 #{'alpha(@GRAPE_900, 0.5)'}; } &.education { @@ -175,20 +150,12 @@ 0 0 0 1px rgba(black, 0.15), 0 3px 2px -1px rgba(black, 0.15), 0 3px 5px rgba(black, 0.1); - letter-spacing: -1px; - -gtk-icon-shadow: - 0 1px 2px #{'alpha(@SLATE_900, 0.2)'}, - 0 2px 6px #{'alpha(@SLATE_900, 0.1)'}; - - label { - color: #{'@BLUEBERRY_500'}; - text-shadow: - 0 1px 2px #{'alpha(@BLUEBERRY_900, 0.2)'}, - 0 2px 6px #{'alpha(@BLUEBERRY_900, 0.1)'}; - } image { color: #{'@SLATE_500'}; + -gtk-icon-shadow: + 0 1px 2px #{'alpha(@SLATE_900, 0.2)'}, + 0 2px 6px #{'alpha(@SLATE_900, 0.1)'}; } } diff --git a/src/Core/CategoryManager.vala b/src/Core/CategoryManager.vala index 4fc7bd8798..78470987fe 100644 --- a/src/Core/CategoryManager.vala +++ b/src/Core/CategoryManager.vala @@ -43,7 +43,7 @@ public class AppCenter.CategoryManager : Object { append ("education", _("Education"), "applications-education", {"Education"}); - append ("finance", _("Finance"), "appcenter-finance", { + append ("finance", _("Finance"), "applications-finance", { "Economy", "Finance" }); @@ -81,7 +81,7 @@ public class AppCenter.CategoryManager : Object { "P2P" }); - append ("science", _("Math, Science, & Engineering"), "", { + append ("science", _("Math, Science, & Engineering"), "applications-science", { "ArtificialIntelligence", "Astronomy", "Biology", @@ -101,7 +101,7 @@ public class AppCenter.CategoryManager : Object { "Science" }); - append ("media-production", _("Media Production"), "appcenter-multimedia", { + append ("media-production", _("Media Production"), "applications-multimedia", { "AudioVideoEditing", "Midi", "Mixer", @@ -109,7 +109,7 @@ public class AppCenter.CategoryManager : Object { "Sequencer" }); - append ("office", _("Office"), "appcenter-office", { + append ("office", _("Office"), "applications-office", { "Office", "Presentation", "Publishing", @@ -122,9 +122,9 @@ public class AppCenter.CategoryManager : Object { "System" }); - append ("accessibility", _("Universal Access"), "appcenter-accessibility", {"Accessibility"}); + append ("accessibility", _("Universal Access"), "preferences-desktop-accessibility", {"Accessibility"}); - append ("video", _("Video"), "appcenter-video", { + append ("video", _("Video"), "media-playback-start", { "Tuner", "TV", "Video" From 968d187e3d859c829778f7c88afce1c245e14fdc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Tue, 2 Sep 2025 14:29:40 -0700 Subject: [PATCH 3/6] adjust more stuff --- data/icons/categories.gresource.xml | 1 - data/icons/science.svg | 191 ---------------------------- data/styles/Category.scss | 66 +++------- 3 files changed, 18 insertions(+), 240 deletions(-) delete mode 100644 data/icons/science.svg diff --git a/data/icons/categories.gresource.xml b/data/icons/categories.gresource.xml index 6f0c628865..f96b895e05 100644 --- a/data/icons/categories.gresource.xml +++ b/data/icons/categories.gresource.xml @@ -50,6 +50,5 @@ education.svg education@2x.svg - science.svg diff --git a/data/icons/science.svg b/data/icons/science.svg deleted file mode 100644 index 9187accd09..0000000000 --- a/data/icons/science.svg +++ /dev/null @@ -1,191 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - diff --git a/data/styles/Category.scss b/data/styles/Category.scss index 23cc194d8f..0c572e04e0 100644 --- a/data/styles/Category.scss +++ b/data/styles/Category.scss @@ -14,7 +14,7 @@ inset 0 -1px 0 0 rgba(white, 0.15), 0 3px 2px -1px rgba(black, 0.15), 0 3px 5px rgba(black, 0.1); - font-weight: 500; + font-weight: 600; margin: rem(12px); padding: 1rem; -gtk-icon-style: symbolic; @@ -53,11 +53,11 @@ border-color: #{'alpha(@ORANGE_900, 0.7)'}; color: #{'shade(@ORANGE_100, 1.25)'}; -gtk-icon-shadow: - 0 1px 1px #{'alpha(@ORANGE_900, 0.5)'}, - 0 2px 3px #{'alpha(@ORANGE_900, 0.5)'}; + 0 1px 1px #{'alpha(@ORANGE_900, 0.3)'}, + 0 2px 3px #{'alpha(@ORANGE_900, 0.3)'}; text-shadow: - 0 1px 1px #{'alpha(@ORANGE_900, 0.5)'}, - 0 2px 3px #{'alpha(@ORANGE_900, 0.5)'}; + 0 1px 1px #{'alpha(@ORANGE_900, 0.3)'}, + 0 2px 3px #{'alpha(@ORANGE_900, 0.3)'}; } &.communication { @@ -69,7 +69,7 @@ ); border-color: #{'alpha(@LIME_900, 0.7)'}; color: white; - text-shadow: 0 1px 2px #{'alpha(@LIME_900, 0.9)'}; + text-shadow: 0 1px 2px #{'alpha(@LIME_900, 0.3)'}; -gtk-icon-shadow: 0 1px 2px #{'alpha(@LIME_900, 0.9)'}; } @@ -88,8 +88,8 @@ 0 3px 2px -1px rgba(black, 0.15), 0 3px 5px rgba(black, 0.1); color: white; - text-shadow: 0 2px 0 #{'alpha(@GRAPE_900, 0.5)'}; - -gtk-icon-shadow: 0 2px 0 #{'alpha(@GRAPE_900, 0.5)'}; + text-shadow: 0 2px 0 #{'alpha(@GRAPE_900, 0.3)'}; + -gtk-icon-shadow: 0 2px 0 #{'alpha(@GRAPE_900, 0.3)'}; } &.education { @@ -133,7 +133,7 @@ 0 3px 2px -1px rgba(black, 0.15), 0 3px 5px rgba(black, 0.1); color: #{'@SILVER_100'}; - text-shadow: 0 1px 2px #{'alpha(@SLATE_900, 0.5)'}; + text-shadow: 0 1px 2px #{'alpha(@SLATE_900, 0.3)'}; -gtk-icon-shadow: 0 1px 2px #{'alpha(@SLATE_900, 0.5)'}; label { @@ -150,13 +150,11 @@ 0 0 0 1px rgba(black, 0.15), 0 3px 2px -1px rgba(black, 0.15), 0 3px 5px rgba(black, 0.1); + color: #{'@SLATE_500'}; - image { - color: #{'@SLATE_500'}; - -gtk-icon-shadow: - 0 1px 2px #{'alpha(@SLATE_900, 0.2)'}, - 0 2px 6px #{'alpha(@SLATE_900, 0.1)'}; - } + -gtk-icon-shadow: + 0 1px 2px #{'alpha(@SLATE_900, 0.2)'}, + 0 2px 6px #{'alpha(@SLATE_900, 0.1)'}; } &.graphics { @@ -339,33 +337,11 @@ } &.office { - background-image: - linear-gradient( - to right, - #{'@BLUEBERRY_300'}, - #{'@BLUEBERRY_500'} 20%, - #{'@LIME_300'} 20%, - #{'@LIME_500'} 40%, - #{'@ORANGE_500'} 40%, - #{'@ORANGE_700'} 60%, - #{'@BANANA_300'} 60%, - #{'@BANANA_500'} 80%, - #{'@GRAPE_500'} 80%, - #{'@GRAPE_700'} - ), - linear-gradient( - rgba(white, 0.05), - rgba(black, 0.05) - ); - background-size: - 100% 6px, - cover; - background-position: bottom; border: none; box-shadow: - 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)'}, + inset 0 0 0 1px #{'alpha(shade(@bg_color, 1.67), 0.05)'}, + inset 0 1px 0 0 #{'alpha(shade(@bg_color, 1.67), 0.45)'}, + inset 0 -1px 0 0 #{'alpha(shade(@bg_color, 1.67), 0.15)'}, 0 0 0 1px rgba(black, 0.15), 0 3px 2px -1px rgba(black, 0.15), 0 3px 5px rgba(black, 0.1); @@ -373,13 +349,7 @@ } &.science { - background-image: - url("resource:///io/elementary/appcenter/backgrounds/science.svg"), - linear-gradient( - to bottom, - #374044, - #374044 - ); + background: #374044; border-color: #{'alpha(#1b2022, 0.8)'}; box-shadow: inset 0 0 0 1px rgba(white, 0.02), @@ -407,7 +377,7 @@ 0 3px 2px -1px rgba(black, 0.15), 0 3px 5px rgba(black, 0.1); color: #{'@SLATE_900'}; - text-shadow: 0 1px rgba(white, 0.4); + text-shadow: 0 1px rgba(white, 0.3); -gtk-icon-shadow: 0 1px rgba(white, 0.4); } From 3a2b1094bd8faa29ad03a1cf44b2c091004a0caa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Sat, 1 Nov 2025 11:42:50 -0700 Subject: [PATCH 4/6] even smaller --- data/styles/Category.scss | 198 +++++++++++++------------------------- src/Views/Homepage.vala | 15 +-- 2 files changed, 73 insertions(+), 140 deletions(-) diff --git a/data/styles/Category.scss b/data/styles/Category.scss index 0c572e04e0..d811bd7e10 100644 --- a/data/styles/Category.scss +++ b/data/styles/Category.scss @@ -4,22 +4,26 @@ */ .category { - background-position: center center; - background-repeat: no-repeat; - border: 1px solid rgba(black, 0.15); - border-spacing: 0.5rem; - box-shadow: - inset 0 0 0 1px rgba(white, 0.05), - inset 0 1px 0 0 rgba(white, 0.45), - inset 0 -1px 0 0 rgba(white, 0.15), - 0 3px 2px -1px rgba(black, 0.15), - 0 3px 5px rgba(black, 0.1); - font-weight: 600; - margin: rem(12px); - padding: 1rem; - -gtk-icon-style: symbolic; + font-weight: 500; + margin: rem(6px); - &.accessibility { + image { + background-position: center center; + background-repeat: no-repeat; + border: 1px solid rgba(black, 0.15); + border-spacing: 0.5rem; + box-shadow: + inset 0 0 0 1px rgba(white, 0.05), + inset 0 1px 0 0 rgba(white, 0.45), + inset 0 -1px 0 0 rgba(white, 0.15), + 0 3px 2px -1px rgba(black, 0.15), + 0 3px 5px rgba(black, 0.1); + color: white; + padding: 1rem; + -gtk-icon-style: symbolic; + } + + &.accessibility image { background-image: linear-gradient( to bottom, @@ -27,12 +31,10 @@ #368ae6 ); border-color: #{'alpha(#2980d1, 0.8)'}; - color: #fff8ef; - text-shadow: 0 1px 0 rgba(black, 0.3); -gtk-icon-shadow: 0 1px 0 rgba(black, 0.3); } - &.accessories { + &.accessories image { border: none; box-shadow: inset 0 0 0 1px #{'alpha(shade(@bg_color, 1.67), 0.05)'}, @@ -43,7 +45,7 @@ 0 3px 5px rgba(black, 0.1); } - &.audio { + &.audio image { background-image: linear-gradient( to bottom, @@ -51,29 +53,25 @@ #{'@ORANGE_500'} ); border-color: #{'alpha(@ORANGE_900, 0.7)'}; - color: #{'shade(@ORANGE_100, 1.25)'}; -gtk-icon-shadow: 0 1px 1px #{'alpha(@ORANGE_900, 0.3)'}, 0 2px 3px #{'alpha(@ORANGE_900, 0.3)'}; - text-shadow: - 0 1px 1px #{'alpha(@ORANGE_900, 0.3)'}, - 0 2px 3px #{'alpha(@ORANGE_900, 0.3)'}; } - &.communication { + &.communication image { background-image: linear-gradient( to bottom, #{'@LIME_300'} 5%, - #{'@LIME_500'} + #{'mix(@LIME_300, @LIME_500, 0.5)'} ); - border-color: #{'alpha(@LIME_900, 0.7)'}; - color: white; - text-shadow: 0 1px 2px #{'alpha(@LIME_900, 0.3)'}; - -gtk-icon-shadow: 0 1px 2px #{'alpha(@LIME_900, 0.9)'}; + border-color: #{'alpha(mix(@LIME_500, @LIME_700, 0.5), 0.7)'}; + -gtk-icon-shadow: + 0 3px 4px #{'alpha(@LIME_500, 0.9)'}, + 0 1px 2px #{'alpha(@LIME_900, 0.9)'}; } - &.development { + &.development image { background-image: linear-gradient( to bottom, @@ -87,12 +85,10 @@ inset 0 -1px 0 0 rgba(white, 0.1), 0 3px 2px -1px rgba(black, 0.15), 0 3px 5px rgba(black, 0.1); - color: white; - text-shadow: 0 2px 0 #{'alpha(@GRAPE_900, 0.3)'}; -gtk-icon-shadow: 0 2px 0 #{'alpha(@GRAPE_900, 0.3)'}; } - &.education { + &.education image { background-image: -gtk-scaled( url("resource:///io/elementary/appcenter/backgrounds/education.svg"), @@ -115,10 +111,9 @@ inset 0 -1px 0 0 rgba(white, 0.1), 0 3px 2px -1px rgba(black, 0.15), 0 3px 5px rgba(black, 0.1); - color: white; } - &.finance { + &.finance image { background-image: linear-gradient( to bottom, @@ -132,8 +127,6 @@ inset 0 -1px 0 0 rgba(white, 0.07), 0 3px 2px -1px rgba(black, 0.15), 0 3px 5px rgba(black, 0.1); - color: #{'@SILVER_100'}; - text-shadow: 0 1px 2px #{'alpha(@SLATE_900, 0.3)'}; -gtk-icon-shadow: 0 1px 2px #{'alpha(@SLATE_900, 0.5)'}; label { @@ -141,7 +134,7 @@ } } - &.games { + &.games image { border: none; box-shadow: inset 0 0 0 1px #{'alpha(shade(@bg_color, 1.67), 0.1)'}, @@ -157,54 +150,26 @@ 0 2px 6px #{'alpha(@SLATE_900, 0.1)'}; } - &.graphics { + &.graphics image { background-image: linear-gradient( - 45deg, - #{'alpha(@fg_color, 0.03)'} 25%, - transparent 25%, - transparent 75%, - #{'alpha(@fg_color, 0.03)'} 75%, - #{'alpha(@fg_color, 0.03)'} - ), - linear-gradient( - 45deg, - #{'alpha(@fg_color, 0.03)'} 25%, - transparent 25%, - transparent 75%, - #{'alpha(@fg_color, 0.03)'} 75%, - #{'alpha(@fg_color, 0.03)'} - ), - linear-gradient( - rgba(white, 0.03), - rgba(black, 0.03) + to bottom, + #{'@BUBBLEGUM_300'} 5%, + #{'mix(@BUBBLEGUM_300, @BUBBLEGUM_500, 0.5)'} ); - background-position: 0 0, 12px 12px; - background-repeat: repeat; - background-size: - 24px 24px, - 24px 24px, - cover; - border: none; - box-shadow: - 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 rgba(black, 0.15), - 0 3px 2px -1px rgba(black, 0.15), - 0 3px 5px rgba(black, 0.1); - color: #fe5498; - text-shadow: 0 1px 3px #{'@bg_color'}; + border-color: #{'alpha(mix(@BUBBLEGUM_500, @BUBBLEGUM_700, 0.5), 0.7)'}; + -gtk-icon-shadow: + 0 3px 4px #{'alpha(@BUBBLEGUM_500, 0.9)'}, + 0 1px 2px #{'alpha(@BUBBLEGUM_900, 0.9)'}; } - &.internet { + &.internet image { background-image: linear-gradient( to bottom, #{'@BLUEBERRY_300'}, #{'@BLUEBERRY_500'} ); - color: white; border-color: #{'alpha(@BLUEBERRY_700, 0.8)'}; box-shadow: inset 0 0 0 1px rgba(white, 0.05), @@ -212,12 +177,9 @@ inset 0 -1px 0 0 rgba(white, 0.1), 0 3px 2px -1px rgba(black, 0.15), 0 3px 5px rgba(black, 0.1); - text-shadow: - 0 1px 1px rgba(black, 0.3), - 0 2px 3px rgba(black, 0.3); } - &.media-production { + &.media-production image { background-image: radial-gradient( circle, @@ -332,11 +294,10 @@ 0 3px 2px -1px rgba(black, 0.15), 0 3px 5px rgba(black, 0.1); color: #{'@BANANA_300'}; - text-shadow: 0 1px 2px #{'alpha(@SLATE_900, 0.75)'}; -gtk-icon-shadow: 0 1px 2px #{'alpha(@SLATE_900, 0.75)'}; } - &.office { + &.office image { border: none; box-shadow: inset 0 0 0 1px #{'alpha(shade(@bg_color, 1.67), 0.05)'}, @@ -348,7 +309,20 @@ color: #{'@ORANGE_500'}; } - &.science { + &.privacy-security image { + background-image: + linear-gradient( + to bottom, + #{'@BANANA_500'} 5%, + #{'mix(@BANANA_500, @BANANA_700, 0.5)'} + ); + border-color: #{'alpha(@BANANA_700, 0.7)'}; + -gtk-icon-shadow: + 0 3px 4px #{'alpha(@BANANA_700, 0.9)'}, + 0 1px 2px #{'alpha(@BANANA_900, 0.9)'}; + } + + &.science image { background: #374044; border-color: #{'alpha(#1b2022, 0.8)'}; box-shadow: @@ -357,12 +331,10 @@ inset 0 -1px 0 0 rgba(white, 0.07), 0 3px 2px -1px rgba(black, 0.15), 0 3px 5px rgba(black, 0.1); - color: white; - text-shadow: 0 1px 2px rgba(black, 0.3); -gtk-icon-shadow: 0 1px 2px rgba(black, 0.3); } - &.system { + &.system image { background-image: linear-gradient( 170deg, @@ -377,63 +349,23 @@ 0 3px 2px -1px rgba(black, 0.15), 0 3px 5px rgba(black, 0.1); color: #{'@SLATE_900'}; - text-shadow: 0 1px rgba(white, 0.3); -gtk-icon-shadow: 0 1px rgba(white, 0.4); } - &.video { + &.video image { background-image: - radial-gradient( - circle, - #{'alpha(@STRAWBERRY_900, 0)'} 65%, - #{'alpha(shade(@STRAWBERRY_900, 0.6), 0.35)'} 66% - ), linear-gradient( to bottom, - #{'alpha(shade(@STRAWBERRY_900, 0.6), 0.8)'}, - #{'alpha(shade(@STRAWBERRY_900, 0.6), 0)'} - ), - linear-gradient( - to right, - transparent, - #{'alpha(@STRAWBERRY_300, 0.4)'} 17%, - transparent 28%, - transparent 40%, - #{'alpha(@STRAWBERRY_300, 0.4)'} 70%, - transparent 80% - ), - linear-gradient( - to bottom, - #{'@STRAWBERRY_300'}, - #{'@STRAWBERRY_700'} + #{'@STRAWBERRY_300'} 5%, + #{'mix(@STRAWBERRY_300, @STRAWBERRY_500, 0.5)'} ); - background-repeat: - no-repeat, - no-repeat, - repeat, - no-repeat; - background-position: - 50%, - 0 0, - 50%, - 50%; - background-size: - auto 150%, - auto 60%, - 100px, auto; - border-color: #{'alpha(@STRAWBERRY_900, 0.9)'}; - box-shadow: - inset 0 0 0 1px rgba(white, 0.05), - inset 0 1px 0 0 rgba(white, 0.25), - inset 0 -1px 0 0 rgba(white, 0.1), - 0 3px 2px -1px rgba(black, 0.15), - 0 3px 5px rgba(black, 0.1); - color: white; - text-shadow: 0 1px 2px #{'alpha(@STRAWBERRY_900, 0.5)'}; - -gtk-icon-shadow: 0 1px 2px #{'alpha(@STRAWBERRY_900, 0.5)'}; + border-color: #{'alpha(mix(@STRAWBERRY_500, @STRAWBERRY_700, 0.5), 0.7)'}; + -gtk-icon-shadow: + 0 3px 4px #{'alpha(@STRAWBERRY_500, 0.9)'}, + 0 1px 2px #{'alpha(@STRAWBERRY_900, 0.9)'}; } - &.writing-language { + &.writing-language image { background-color: white; background-image: linear-gradient( diff --git a/src/Views/Homepage.vala b/src/Views/Homepage.vala index 6cb7a4fdd1..da0046eff6 100644 --- a/src/Views/Homepage.vala +++ b/src/Views/Homepage.vala @@ -94,6 +94,7 @@ public class AppCenter.Homepage : Adw.NavigationPage { margin_start = 12, margin_end =12, margin_bottom = 12, + max_children_per_line = 17, valign = Gtk.Align.START }; @@ -315,20 +316,20 @@ public class AppCenter.Homepage : Adw.NavigationPage { construct { var name_label = new Gtk.Label (category.name) { - halign = START, - wrap = true, - xalign = 0 + justify = CENTER, + max_width_chars = 10, + wrap = true }; + name_label.add_css_class (Granite.CssClass.SMALL); var display_image = new Gtk.Image.from_icon_name (category.icon) { - halign = END, - valign = CENTER, + halign = CENTER }; + display_image.add_css_class (Granite.CssClass.CIRCULAR); - var box = new Gtk.Box (HORIZONTAL, 0); + var box = new Granite.Box (VERTICAL, HALF); box.append (display_image); box.append (name_label); - box.add_css_class (Granite.CssClass.CARD); box.add_css_class ("category"); box.add_css_class (category.id); From ed4f6a36b3e9b16876f3a17c68a41d8069cc6013 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Sat, 1 Nov 2025 11:59:07 -0700 Subject: [PATCH 5/6] Categories at the top --- src/Views/Homepage.vala | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/src/Views/Homepage.vala b/src/Views/Homepage.vala index da0046eff6..f3a0f87f05 100644 --- a/src/Views/Homepage.vala +++ b/src/Views/Homepage.vala @@ -61,6 +61,7 @@ public class AppCenter.Homepage : Adw.NavigationPage { }; var recently_updated_label = new Granite.HeaderLabel (_("Recently Updated")) { + margin_top = 12, margin_start = 12 }; @@ -83,19 +84,13 @@ public class AppCenter.Homepage : Adw.NavigationPage { child = recently_updated_grid }; - var categories_label = new Granite.HeaderLabel (_("Categories")) { - margin_start = 24, - margin_top = 24 - }; - category_flow = new Gtk.FlowBox () { activate_on_single_click = true, + margin_top = 12, homogeneous = true, margin_start = 12, margin_end =12, - margin_bottom = 12, - max_children_per_line = 17, - valign = Gtk.Align.START + max_children_per_line = 17 }; category_flow.set_sort_func ((child1, child2) => { @@ -115,9 +110,8 @@ public class AppCenter.Homepage : Adw.NavigationPage { var box = new Gtk.Box (VERTICAL, 0); box.append (banner_carousel); box.append (banner_dots); - box.append (recently_updated_revealer); - box.append (categories_label); box.append (category_flow); + box.append (recently_updated_revealer); scrolled_window = new Gtk.ScrolledWindow () { child = box, From 89b57a45766dcbfd54516197fbd272d5de492f4c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Sat, 1 Nov 2025 12:04:43 -0700 Subject: [PATCH 6/6] Fix a11y --- src/Views/Homepage.vala | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/Views/Homepage.vala b/src/Views/Homepage.vala index f3a0f87f05..728cd197e4 100644 --- a/src/Views/Homepage.vala +++ b/src/Views/Homepage.vala @@ -85,6 +85,7 @@ public class AppCenter.Homepage : Adw.NavigationPage { }; category_flow = new Gtk.FlowBox () { + accessible_role = LIST, activate_on_single_click = true, margin_top = 12, homogeneous = true, @@ -92,6 +93,10 @@ public class AppCenter.Homepage : Adw.NavigationPage { margin_end =12, max_children_per_line = 17 }; + category_flow.update_property ( + Gtk.AccessibleProperty.LABEL, _("Categories"), + -1 + ); category_flow.set_sort_func ((child1, child2) => { var item1 = (CategoryCard) child1;