From c475691939c14065c068e49080964f31beae57c0 Mon Sep 17 00:00:00 2001 From: Arthur Jamet Date: Fri, 8 Dec 2023 18:34:59 +0100 Subject: [PATCH] Front: Define and apply Image's border radius constant --- .../src/constants/image-border-radius.ts | 21 +++++++++++++++++++ .../primitives/src/constants/index.ts | 21 +++++++++++++++++++ .../primitives/src/image/image.web.tsx | 3 ++- front/packages/primitives/src/image/index.tsx | 3 ++- front/packages/primitives/src/index.ts | 1 + front/packages/ui/src/browse/list.tsx | 7 ++++--- front/packages/ui/src/home/recommanded.tsx | 3 ++- 7 files changed, 53 insertions(+), 6 deletions(-) create mode 100644 front/packages/primitives/src/constants/image-border-radius.ts create mode 100644 front/packages/primitives/src/constants/index.ts diff --git a/front/packages/primitives/src/constants/image-border-radius.ts b/front/packages/primitives/src/constants/image-border-radius.ts new file mode 100644 index 00000000..52c260bd --- /dev/null +++ b/front/packages/primitives/src/constants/image-border-radius.ts @@ -0,0 +1,21 @@ +/* + * Kyoo - A portable and vast media library solution. + * Copyright (c) Kyoo. + * + * See AUTHORS.md and LICENSE file in the project root for full license information. + * + * Kyoo 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 + * any later version. + * + * Kyoo 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 Kyoo. If not, see . + */ + +export const ImageBorderRadius = 10; diff --git a/front/packages/primitives/src/constants/index.ts b/front/packages/primitives/src/constants/index.ts new file mode 100644 index 00000000..9a6f3db2 --- /dev/null +++ b/front/packages/primitives/src/constants/index.ts @@ -0,0 +1,21 @@ +/* + * Kyoo - A portable and vast media library solution. + * Copyright (c) Kyoo. + * + * See AUTHORS.md and LICENSE file in the project root for full license information. + * + * Kyoo 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 + * any later version. + * + * Kyoo 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 Kyoo. If not, see . + */ + +export * from './image-border-radius'; \ No newline at end of file diff --git a/front/packages/primitives/src/image/image.web.tsx b/front/packages/primitives/src/image/image.web.tsx index ac3403de..c0017fd6 100644 --- a/front/packages/primitives/src/image/image.web.tsx +++ b/front/packages/primitives/src/image/image.web.tsx @@ -25,6 +25,7 @@ import { Props, ImageLayout } from "./base-image"; import { BlurhashContainer } from "./blurhash.web"; import { Skeleton } from "../skeleton"; import NextImage from "next/image"; +import { ImageBorderRadius } from "../constants"; export const Image = ({ src, @@ -40,7 +41,7 @@ export const Image = ({ typeof window === "undefined" ? "finished" : "loading", ); - const border = { borderRadius: 6 } satisfies ViewStyle; + const border = { borderRadius: ImageBorderRadius } satisfies ViewStyle; if (forcedLoading) return ; if (!src || state === "errored") { diff --git a/front/packages/primitives/src/image/index.tsx b/front/packages/primitives/src/image/index.tsx index 8ae5f182..ea110dea 100644 --- a/front/packages/primitives/src/image/index.tsx +++ b/front/packages/primitives/src/image/index.tsx @@ -25,6 +25,7 @@ import { ComponentProps, ComponentType, ReactNode } from "react"; import { LinearGradient, LinearGradientProps } from "expo-linear-gradient"; import { ContrastArea } from "../themes"; import { percent } from "yoshiki/native"; +import { ImageBorderRadius } from "../constants"; export { BlurhashContainer } from "./blurhash"; export { type Props as ImageProps, Image }; @@ -84,7 +85,7 @@ export const ImageBackground = ({ {({ css, theme }) => ( diff --git a/front/packages/primitives/src/index.ts b/front/packages/primitives/src/index.ts index 28c2bae7..cd6f8d78 100644 --- a/front/packages/primitives/src/index.ts +++ b/front/packages/primitives/src/index.ts @@ -38,3 +38,4 @@ export * from "./button"; export * from "./chip"; export * from "./utils"; +export * from "./constants"; diff --git a/front/packages/ui/src/browse/list.tsx b/front/packages/ui/src/browse/list.tsx index 2a8d1df2..15242d0d 100644 --- a/front/packages/ui/src/browse/list.tsx +++ b/front/packages/ui/src/browse/list.tsx @@ -29,6 +29,7 @@ import { Heading, Icon, PosterBackground, + ImageBorderRadius } from "@kyoo/primitives"; import { useState } from "react"; import { View } from "react-native"; @@ -71,10 +72,10 @@ export const ItemList = ({ onPressIn={() => setHovered((i) => i + 1)} onPressOut={() => setHovered((i) => i - 1)} containerStyle={{ - borderRadius: px(6), + borderRadius: px(ImageBorderRadius), }} imageStyle={{ - borderRadius: px(6), + borderRadius: px(ImageBorderRadius), }} {...css( { @@ -82,7 +83,7 @@ export const ItemList = ({ justifyContent: "space-evenly", flexDirection: "row", height: ItemList.layout.size, - borderRadius: px(6), + borderRadius: px(ImageBorderRadius), marginX: ItemList.layout.gap, }, props, diff --git a/front/packages/ui/src/home/recommanded.tsx b/front/packages/ui/src/home/recommanded.tsx index 1d4bae55..b60f91c5 100644 --- a/front/packages/ui/src/home/recommanded.tsx +++ b/front/packages/ui/src/home/recommanded.tsx @@ -33,6 +33,7 @@ import { H3, Icon, IconFab, + ImageBorderRadius, Link, P, PosterBackground, @@ -89,7 +90,7 @@ export const ItemDetails = ({ height: ItemDetails.layout.size, flexDirection: "row", bg: (theme) => theme.variant.background, - borderRadius: 6, + borderRadius: 12, // to make the border stick to the poster overflow: "hidden", borderColor: (theme) => theme.background, borderWidth: ts(0.25),