From 6e7eea3cd37bb161ca8d36cc2646d1493dd90e97 Mon Sep 17 00:00:00 2001 From: userquin Date: Thu, 26 Jan 2023 19:57:43 +0100 Subject: [PATCH 1/4] feat: show app category on all categories --- components/AppCard.tsx | 24 ++++++++++++++++++++++-- components/AppsGrid.tsx | 2 +- public/categories/android.svg | 4 ++++ public/categories/desktop.svg | 4 ++++ public/categories/ios.svg | 4 ++++ public/categories/sailfish.svg | 4 ++++ public/categories/web.svg | 4 ++++ styles/globals.scss | 9 +++++++++ 8 files changed, 52 insertions(+), 3 deletions(-) create mode 100644 public/categories/android.svg create mode 100644 public/categories/desktop.svg create mode 100644 public/categories/ios.svg create mode 100644 public/categories/sailfish.svg create mode 100644 public/categories/web.svg diff --git a/components/AppCard.tsx b/components/AppCard.tsx index 6c86fce3b..df8d7d927 100644 --- a/components/AppCard.tsx +++ b/components/AppCard.tsx @@ -1,5 +1,10 @@ import Image from "next/image" import { FormattedMessage } from "react-intl" +import AndroidCategory from "../public/categories/android.svg?inline" +import DesktopCategory from "../public/categories/desktop.svg?inline" +import IosCategory from "../public/categories/ios.svg?inline" +import SailfishCategory from "../public/categories/sailfish.svg?inline" +import WebCategory from "../public/categories/web.svg?inline" export type AppCardProps = { name: React.ReactNode @@ -12,14 +17,14 @@ export type AppCardProps = { * Renders a card with app data. * Layout (width, height, positioning) can be set from the parent. */ -export const AppCard = ({ name, icon, url, paid }) => { +export const AppCard = (activeCategory, { name, icon, url, paid, category }) => { return (
{`Logo @@ -36,6 +41,21 @@ export const AppCard = ({ name, icon, url, paid }) => { {name}
+ {activeCategory === 'all' ? ( + + {category === 'desktop' ? ( + + ) : category === 'web' ? ( + + ) : category === 'ios' ? ( + + ) : category === 'android' ? ( + + ) : category === 'sailfish' ? ( + + ) : '' } + + ) : '' } ) } diff --git a/components/AppsGrid.tsx b/components/AppsGrid.tsx index 0a6579742..f4ed35c58 100644 --- a/components/AppsGrid.tsx +++ b/components/AppsGrid.tsx @@ -87,7 +87,7 @@ export const AppsGrid = ({ apps }: AppsGridProps) => { />
- {sortedAndFilteredApps.map(AppCard)} + {sortedAndFilteredApps.map(entry => AppCard(activeCategory, entry))}
) diff --git a/public/categories/android.svg b/public/categories/android.svg new file mode 100644 index 000000000..d40ada992 --- /dev/null +++ b/public/categories/android.svg @@ -0,0 +1,4 @@ + + Android + + diff --git a/public/categories/desktop.svg b/public/categories/desktop.svg new file mode 100644 index 000000000..af5a5f2b8 --- /dev/null +++ b/public/categories/desktop.svg @@ -0,0 +1,4 @@ + + Desktop + + diff --git a/public/categories/ios.svg b/public/categories/ios.svg new file mode 100644 index 000000000..c399d8a72 --- /dev/null +++ b/public/categories/ios.svg @@ -0,0 +1,4 @@ + + iOS + + diff --git a/public/categories/sailfish.svg b/public/categories/sailfish.svg new file mode 100644 index 000000000..d1774b05b --- /dev/null +++ b/public/categories/sailfish.svg @@ -0,0 +1,4 @@ + + Sailfish OS + + diff --git a/public/categories/web.svg b/public/categories/web.svg new file mode 100644 index 000000000..7cd06cc3e --- /dev/null +++ b/public/categories/web.svg @@ -0,0 +1,4 @@ + + Web + + diff --git a/styles/globals.scss b/styles/globals.scss index e84f15182..675443d41 100755 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -131,3 +131,12 @@ @apply bg-blurple-500; } } + +span.absolute:has(svg) { + right: 0; +} + +html[dir="rtl"] span.absolute:has(svg) { + left: 0; + right: auto; +} From 45cb3f0897d2b0ef9357fc4499f40e4598ad3c09 Mon Sep 17 00:00:00 2001 From: userquin Date: Thu, 26 Jan 2023 20:16:49 +0100 Subject: [PATCH 2/4] chore: add custom class for rtl container icon, has not supported in FF --- components/AppCard.tsx | 2 +- styles/globals.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/AppCard.tsx b/components/AppCard.tsx index df8d7d927..404301a0d 100644 --- a/components/AppCard.tsx +++ b/components/AppCard.tsx @@ -42,7 +42,7 @@ export const AppCard = (activeCategory, { name, icon, url, paid, category }) => {activeCategory === 'all' ? ( - + {category === 'desktop' ? ( ) : category === 'web' ? ( diff --git a/styles/globals.scss b/styles/globals.scss index 675443d41..a6d7f954e 100755 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -132,11 +132,11 @@ } } -span.absolute:has(svg) { +span.app-category { right: 0; } -html[dir="rtl"] span.absolute:has(svg) { +html[dir="rtl"] span.app-category { left: 0; right: auto; } From f62c2d17d9e339a0999098f6d2c5ee196c95da7f Mon Sep 17 00:00:00 2001 From: userquin Date: Thu, 26 Jan 2023 21:07:31 +0100 Subject: [PATCH 3/4] chore: include i18n support for svg title --- components/AppCard.tsx | 20 ++++++++++---------- components/categories/AndroidCategory.tsx | 11 +++++++++++ components/categories/DesktopCategory.tsx | 11 +++++++++++ components/categories/IosCategory.tsx | 11 +++++++++++ components/categories/SailfishCategory.tsx | 11 +++++++++++ components/categories/WebCategory.tsx | 11 +++++++++++ public/categories/android.svg | 4 ---- public/categories/desktop.svg | 4 ---- public/categories/ios.svg | 4 ---- public/categories/sailfish.svg | 4 ---- public/categories/web.svg | 4 ---- 11 files changed, 65 insertions(+), 30 deletions(-) create mode 100644 components/categories/AndroidCategory.tsx create mode 100644 components/categories/DesktopCategory.tsx create mode 100644 components/categories/IosCategory.tsx create mode 100644 components/categories/SailfishCategory.tsx create mode 100644 components/categories/WebCategory.tsx delete mode 100644 public/categories/android.svg delete mode 100644 public/categories/desktop.svg delete mode 100644 public/categories/ios.svg delete mode 100644 public/categories/sailfish.svg delete mode 100644 public/categories/web.svg diff --git a/components/AppCard.tsx b/components/AppCard.tsx index 404301a0d..35da32920 100644 --- a/components/AppCard.tsx +++ b/components/AppCard.tsx @@ -1,10 +1,10 @@ import Image from "next/image" import { FormattedMessage } from "react-intl" -import AndroidCategory from "../public/categories/android.svg?inline" -import DesktopCategory from "../public/categories/desktop.svg?inline" -import IosCategory from "../public/categories/ios.svg?inline" -import SailfishCategory from "../public/categories/sailfish.svg?inline" -import WebCategory from "../public/categories/web.svg?inline" +import { AndroidCategory } from "../components/categories/AndroidCategory" +import { DesktopCategory } from "../components/categories/DesktopCategory" +import { IosCategory } from "../components/categories/IosCategory" +import { SailfishCategory } from "../components/categories/SailfishCategory" +import { WebCategory } from "../components/categories/WebCategory" export type AppCardProps = { name: React.ReactNode @@ -44,15 +44,15 @@ export const AppCard = (activeCategory, { name, icon, url, paid, category }) => {activeCategory === 'all' ? ( {category === 'desktop' ? ( - + ) : category === 'web' ? ( - + ) : category === 'ios' ? ( - + ) : category === 'android' ? ( - + ) : category === 'sailfish' ? ( - + ) : '' } ) : '' } diff --git a/components/categories/AndroidCategory.tsx b/components/categories/AndroidCategory.tsx new file mode 100644 index 000000000..cdae04e19 --- /dev/null +++ b/components/categories/AndroidCategory.tsx @@ -0,0 +1,11 @@ +import { useIntl } from "react-intl" + +export const AndroidCategory = () => { + const intl = useIntl() + return ( + + {intl.formatMessage({ id: "browse_apps.android", defaultMessage: "Android" })} + + + ) +} diff --git a/components/categories/DesktopCategory.tsx b/components/categories/DesktopCategory.tsx new file mode 100644 index 000000000..75c73b335 --- /dev/null +++ b/components/categories/DesktopCategory.tsx @@ -0,0 +1,11 @@ +import { useIntl } from "react-intl" + +export const DesktopCategory = () => { + const intl = useIntl() + return ( + + {intl.formatMessage({ id: "browse_apps.desktop", defaultMessage: "Desktop" })} + + + ) +} diff --git a/components/categories/IosCategory.tsx b/components/categories/IosCategory.tsx new file mode 100644 index 000000000..e76e3f7c0 --- /dev/null +++ b/components/categories/IosCategory.tsx @@ -0,0 +1,11 @@ +import { useIntl } from "react-intl" + +export const IosCategory = () => { + const intl = useIntl() + return ( + + {intl.formatMessage({ id: "browse_apps.ios", defaultMessage: "iOS" })} + + + ) +} diff --git a/components/categories/SailfishCategory.tsx b/components/categories/SailfishCategory.tsx new file mode 100644 index 000000000..616aad3bf --- /dev/null +++ b/components/categories/SailfishCategory.tsx @@ -0,0 +1,11 @@ +import { useIntl } from "react-intl" + +export const SailfishCategory = () => { + const intl = useIntl() + return ( + + {intl.formatMessage({ id: "browse_apps.sailfish", defaultMessage: "SailfishOS" })} + + + ) +} diff --git a/components/categories/WebCategory.tsx b/components/categories/WebCategory.tsx new file mode 100644 index 000000000..2d18fd539 --- /dev/null +++ b/components/categories/WebCategory.tsx @@ -0,0 +1,11 @@ +import { useIntl } from "react-intl" + +export const WebCategory = () => { + const intl = useIntl() + return ( + + {intl.formatMessage({ id: "browse_apps.web", defaultMessage: "Web" })} + + + ) +} diff --git a/public/categories/android.svg b/public/categories/android.svg deleted file mode 100644 index d40ada992..000000000 --- a/public/categories/android.svg +++ /dev/null @@ -1,4 +0,0 @@ - - Android - - diff --git a/public/categories/desktop.svg b/public/categories/desktop.svg deleted file mode 100644 index af5a5f2b8..000000000 --- a/public/categories/desktop.svg +++ /dev/null @@ -1,4 +0,0 @@ - - Desktop - - diff --git a/public/categories/ios.svg b/public/categories/ios.svg deleted file mode 100644 index c399d8a72..000000000 --- a/public/categories/ios.svg +++ /dev/null @@ -1,4 +0,0 @@ - - iOS - - diff --git a/public/categories/sailfish.svg b/public/categories/sailfish.svg deleted file mode 100644 index d1774b05b..000000000 --- a/public/categories/sailfish.svg +++ /dev/null @@ -1,4 +0,0 @@ - - Sailfish OS - - diff --git a/public/categories/web.svg b/public/categories/web.svg deleted file mode 100644 index 7cd06cc3e..000000000 --- a/public/categories/web.svg +++ /dev/null @@ -1,4 +0,0 @@ - - Web - - From b027cc266c3943d6f9e67c57ce4c324ea84b005a Mon Sep 17 00:00:00 2001 From: userquin Date: Thu, 26 Jan 2023 21:12:00 +0100 Subject: [PATCH 4/4] chore: rename stroke-width attr on SailfishOS svg --- components/categories/SailfishCategory.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/categories/SailfishCategory.tsx b/components/categories/SailfishCategory.tsx index 616aad3bf..d33c1e6a8 100644 --- a/components/categories/SailfishCategory.tsx +++ b/components/categories/SailfishCategory.tsx @@ -5,7 +5,7 @@ export const SailfishCategory = () => { return ( {intl.formatMessage({ id: "browse_apps.sailfish", defaultMessage: "SailfishOS" })} - + ) }