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

Fix web menu alligment

Browse Source
This commit is contained in:
Zoe Roux 2023-07-21 18:29:40 +09:00
parent db41c55230
commit f9df0b8a12
2 changed files with 43 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
front/packages/primitives/src/menu.tsx
View File

@ -20,7 +20,15 @@
import { Portal } from "@gorhom/portal";
import { ScrollView } from "moti";
import { ComponentType, createContext, ReactElement, ReactNode, useContext, useEffect, useState } from "react";
import {
ComponentType,
createContext,
ReactElement,
ReactNode,
useContext,
useEffect,
useState,
} from "react";
import { StyleSheet, Pressable } from "react-native";
import { percent, px, sm, useYoshiki, xl } from "yoshiki/native";
import Close from "@material-symbols/svg-400/rounded/close-fill.svg";
@ -56,7 +64,7 @@ const Menu = <AsProps,>({
return (
<>
<Trigger onPress={() => setOpen(true)} {...props as any} />
<Trigger onPress={() => setOpen(true)} {...(props as any)} />
{isOpen && (
<Portal>
<ContrastArea mode="user">
@ -129,7 +137,14 @@ const MenuItem = ({
const setOpen = useContext(MenuContext);
const router = useRouter();
const icn = (icon || selected) && <Icon icon={icon ?? Check} color={theme.paragraph} size={24} {...css({ paddingLeft: icon ? ts(2) : 0 })}/>;
const icn = (icon || selected) && (
<Icon
icon={icon ?? Check}
color={theme.paragraph}
size={24}
{...css({ paddingLeft: icon ? ts(2) : 0 })}
/>
);
return (
<PressableFeedback
@ -151,7 +166,9 @@ const MenuItem = ({
>
{left && left}
{!left && icn && icn}
<P {...css({ paddingLeft: ts(2) + +!(icon || selected || left) * px(24), flexGrow: 1 })}>{label}</P>
<P {...css({ paddingLeft: ts(2) + +!(icon || selected || left) * px(24), flexGrow: 1 })}>
{label}
</P>
{left && icn && icn}
</PressableFeedback>
);

32
front/packages/primitives/src/menu.web.tsx
View File

@ -23,7 +23,7 @@ import { ComponentProps, ComponentType, forwardRef, ReactElement, ReactNode } fr
import Link from "next/link";
import { PressableProps } from "react-native";
import { useYoshiki } from "yoshiki/web";
import { px, useYoshiki as useNativeYoshiki } from "yoshiki/native";
import { px, useYoshiki as useNativeYoshiki, calc } from "yoshiki/native";
import { P } from "./text";
import { ContrastArea, SwitchVariant } from "./themes";
import { Icon } from "./icons";
@ -133,6 +133,15 @@ const MenuItem = ({
const { css: nCss } = useNativeYoshiki();
const { css, theme } = useYoshiki();
const icn = (icon || selected) && (
<Icon
icon={icon ?? Dot}
color={theme.paragraph}
size={ts(icon ? 2 : 1)}
{...nCss({ paddingRight: ts(1) })}
/>
);
return (
<>
<style jsx global>{`
@ -155,15 +164,18 @@ const MenuItem = ({
)}
>
{left && left}
{(icon || selected) && (
<Icon
icon={icon ?? Dot}
color={theme.paragraph}
size={ts(icon ? 2 : 1)}
{...nCss({ paddingRight: ts(1) })}
/>
)}
{<P {...nCss(!(icon || selected || left) && { paddingLeft: ts(1) })}>{label}</P>}
{!left && icn && icn}
{
<P
{...nCss({
paddingLeft: ts((icon || selected || left) ? 0 : 2 + +!!icon),
flexGrow: 1,
})}
>
{label}
</P>
}
{left && icn && icn}
</Item>
</>
);