Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-24 02:02:36 -04:00
Code Issues Packages Projects Releases Wiki Activity

Front: Define and apply Image's border radius constant

Browse Source
This commit is contained in:
Arthur Jamet 2023-12-08 18:34:59 +01:00 committed by Zoe Roux
parent e6ac7e502c
commit c475691939
7 changed files with 53 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
front/packages/primitives/src/constants/image-border-radius.ts Normal file
View File

@ -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 <https://www.gnu.org/licenses/>.
*/
export const ImageBorderRadius = 10;

21
front/packages/primitives/src/constants/index.ts Normal file
View File

@ -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 <https://www.gnu.org/licenses/>.
*/
export * from './image-border-radius';

3
front/packages/primitives/src/image/image.web.tsx
View File

@ -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 <Skeleton variant="custom" {...css([layout, border], props)} />;
if (!src || state === "errored") {

3
front/packages/primitives/src/image/index.tsx
View File

@ -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 = <AsProps = ViewProps,>({
{({ css, theme }) => (
<Container
{...(css(
[layout, !hideLoad && { borderRadius: 6, overflow: "hidden" }],
[layout, !hideLoad && { borderRadius: ImageBorderRadius, overflow: "hidden" }],
asProps,
) as AsProps)}
>

1
front/packages/primitives/src/index.ts
View File

@ -38,3 +38,4 @@ export * from "./button";
export * from "./chip";
export * from "./utils";
export * from "./constants";

7
front/packages/ui/src/browse/list.tsx
View File

@ -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,

3
front/packages/ui/src/home/recommanded.tsx
View File

@ -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),