diff --git a/data/icons/audio.svg b/data/icons/audio.svg deleted file mode 100644 index c46bf0523..000000000 --- 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 b9601a63f..000000000 --- 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 52eb1c1ac..f96b895e0 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,7 @@ 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 fa92d555b..000000000 --- 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 6c1c70562..000000000 --- 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 142b886fd..000000000 --- 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 eef8063d6..000000000 --- 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 c7a65291b..000000000 --- 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 16ca6d7d3..000000000 --- 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 fb9fa7394..000000000 --- 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 1ab6b9b08..000000000 --- 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 153ac1a40..000000000 --- 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 118b68dc5..000000000 --- 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 8e5fb6807..000000000 --- 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 187fe3687..000000000 --- a/data/icons/graphics@2x.svg +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - - image/svg+xml - - - - - - - - diff --git a/data/icons/science.svg b/data/icons/science.svg deleted file mode 100644 index 9187accd0..000000000 --- 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 6bad92764..d811bd7e1 100644 --- a/data/styles/Category.scss +++ b/data/styles/Category.scss @@ -4,23 +4,26 @@ */ .category { - background-position: center center; - background-repeat: no-repeat; - border: 1px solid rgba(black, 0.15); - 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; - margin: rem(12px); - padding: rem(12px); - min-height: 3em; - -gtk-icon-size: 48px; + 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, @@ -28,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)'}, @@ -44,164 +45,50 @@ 0 3px 5px rgba(black, 0.1); } - &.audio { + &.audio image { 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'}, #{'@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.5)'}, - 0 2px 3px #{'alpha(@ORANGE_900, 0.5)'}; - 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 { + &.communication image { 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, + to bottom, #{'@LIME_300'} 5%, - #{'@LIME_500'} + #{'mix(@LIME_300, @LIME_500, 0.5)'} ); - 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)'}; - text-shadow: 0 1px 2px #{'alpha(@LIME_900, 0.9)'}; - - label { - color: white; - } + 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 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)'}; - color: white; - text-shadow: 0 2px 0 #{'alpha(@GRAPE_900, 0.5)'}; + 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); + -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"), @@ -224,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, @@ -241,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.5)'}; -gtk-icon-shadow: 0 1px 2px #{'alpha(@SLATE_900, 0.5)'}; label { @@ -250,7 +134,7 @@ } } - &.games { + &.games image { border: none; box-shadow: inset 0 0 0 1px #{'alpha(shade(@bg_color, 1.67), 0.1)'}, @@ -259,98 +143,33 @@ 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; + color: #{'@SLATE_500'}; + -gtk-icon-shadow: 0 1px 2px #{'alpha(@SLATE_900, 0.2)'}, 0 2px 6px #{'alpha(@SLATE_900, 0.1)'}; - - 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)'}; - } - - image { - color: #{'@SLATE_500'}; - -gtk-icon-size: rem(64px); - } } - &.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'}; - - 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; - } - } + 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: - -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)'}; border-color: #{'alpha(@BLUEBERRY_700, 0.8)'}; box-shadow: inset 0 0 0 1px rgba(white, 0.05), @@ -358,16 +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); - - label { - color: white; - } } - &.media-production { + &.media-production image { background-image: radial-gradient( circle, @@ -482,52 +294,36 @@ 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 { - 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; + &.office image { 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); color: #{'@ORANGE_500'}; } - &.science { + &.privacy-security image { background-image: - url("resource:///io/elementary/appcenter/backgrounds/science.svg"), linear-gradient( to bottom, - #374044, - #374044 + #{'@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: inset 0 0 0 1px rgba(white, 0.02), @@ -535,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, @@ -555,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.4); -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/Core/CategoryManager.vala b/src/Core/CategoryManager.vala index e8924df3f..78470987f 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", { + append ("finance", _("Finance"), "applications-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", @@ -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-symbolic", { + 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-symbolic", { + append ("office", _("Office"), "applications-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"), "preferences-desktop-accessibility", {"Accessibility"}); - append ("video", _("Video"), "appcenter-video-symbolic", { + append ("video", _("Video"), "media-playback-start", { "Tuner", "TV", "Video" diff --git a/src/Views/Homepage.vala b/src/Views/Homepage.vala index 6f53ed960..728cd197e 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,19 @@ 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 () { + accessible_role = LIST, activate_on_single_click = true, + margin_top = 12, homogeneous = true, margin_start = 12, margin_end =12, - margin_bottom = 12, - valign = Gtk.Align.START + 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; @@ -114,9 +115,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, @@ -315,54 +315,24 @@ public class AppCenter.Homepage : Adw.NavigationPage { construct { var name_label = new Gtk.Label (category.name) { - wrap = true, - max_width_chars = 15 + justify = CENTER, + max_width_chars = 10, + wrap = true }; + name_label.add_css_class (Granite.CssClass.SMALL); - var box = new Gtk.Box (HORIZONTAL, 6) { - halign = CENTER, - valign = CENTER + var display_image = new Gtk.Image.from_icon_name (category.icon) { + halign = CENTER }; + display_image.add_css_class (Granite.CssClass.CIRCULAR); - 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 Granite.Box (VERTICAL, HALF); + box.append (display_image); box.append (name_label); + 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.CssClass.CARD); - 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 (() => {