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: Add Gradient behind navabar if transparent

Browse Source
This commit is contained in:
Arthur Jamet 2024-08-10 15:27:38 +02:00 committed by Zoe Roux
parent d187c63704
commit f9623089a2
3 changed files with 29 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/apps/web/src/pages/_app.tsx
View File

@ -201,7 +201,7 @@ const App = ({ Component, pageProps }: AppProps) => {
{...props} {...props}
/> />
</ConnectionErrorVerifier> </ConnectionErrorVerifier>
<Tooltip id="tooltip" positionStrategy={"fixed"} /> <Tooltip id="tooltip" style={{ zIndex: 10 }} positionStrategy={"fixed"} />
<SetupChecker /> <SetupChecker />
</SnackbarProvider> </SnackbarProvider>
</PortalProvider> </PortalProvider>

20
front/packages/ui/src/layout.tsx
View File

@ -19,6 +19,7 @@
*/ */
import { Main } from "@kyoo/primitives"; import { Main } from "@kyoo/primitives";
import { LinearGradient } from "expo-linear-gradient";
import type { ReactElement } from "react"; import type { ReactElement } from "react";
import { useYoshiki, vw } from "yoshiki/native"; import { useYoshiki, vw } from "yoshiki/native";
import { Navbar } from "./navbar"; import { Navbar } from "./navbar";
@ -30,8 +31,7 @@ export const DefaultLayout = ({
page: ReactElement; page: ReactElement;
transparent?: boolean; transparent?: boolean;
}) => { }) => {
const { css } = useYoshiki(); const { css, theme } = useYoshiki();
return ( return (
<> <>
<Navbar <Navbar
@ -45,6 +45,22 @@ export const DefaultLayout = ({
shadowOpacity: 0, shadowOpacity: 0,
}, },
)} )}
background={
transparent ? (
<LinearGradient
start={{ x: 0, y: 0.25 }}
end={{ x: 0, y: 1 }}
colors={[theme.themeOverlay, "transparent"]}
{...css({
height: "100%",
position: "absolute",
top: 0,
left: 0,
right: 0,
})}
/>
) : undefined
}
/> />
<Main <Main
{...css({ {...css({

14
front/packages/ui/src/navbar/index.tsx
View File

@ -85,8 +85,8 @@ const SearchBar = forwardRef<TextInput, Stylable>(function SearchBar(props, ref)
setQuery(q); setQuery(q);
}} }}
placeholder={t("navbar.search")} placeholder={t("navbar.search")}
placeholderTextColor={theme.colors.white} placeholderTextColor={theme.contrast}
containerStyle={{ height: ts(4), flexShrink: 1, borderColor: (theme) => theme.colors.white }} containerStyle={{ height: ts(4), flexShrink: 1, borderColor: (theme) => theme.contrast }}
{...tooltip(t("navbar.search"))} {...tooltip(t("navbar.search"))}
{...props} {...props}
/> />
@ -177,9 +177,14 @@ export const NavbarRight = () => {
export const Navbar = ({ export const Navbar = ({
left, left,
right, right,
background,
...props ...props
}: { left?: ReactElement | null; right?: ReactElement | null } & Stylable) => { }: {
const { css } = useYoshiki(); left?: ReactElement | null;
right?: ReactElement | null;
background?: ReactElement;
} & Stylable) => {
const { css, theme } = useYoshiki();
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
@ -205,6 +210,7 @@ export const Navbar = ({
props, props,
)} )}
> >
{background}
<View {...css({ flexDirection: "row", alignItems: "center", height: percent(100) })}> <View {...css({ flexDirection: "row", alignItems: "center", height: percent(100) })}>
{left !== undefined ? ( {left !== undefined ? (
left left