Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-31 04:04:21 -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 { Portal } from "@gorhom/portal";
import { ScrollView } from "moti"; 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 { StyleSheet, Pressable } from "react-native";
import { percent, px, sm, useYoshiki, xl } from "yoshiki/native"; import { percent, px, sm, useYoshiki, xl } from "yoshiki/native";
import Close from "@material-symbols/svg-400/rounded/close-fill.svg"; import Close from "@material-symbols/svg-400/rounded/close-fill.svg";
@ -56,7 +64,7 @@ const Menu = <AsProps,>({
return ( return (
<> <>
<Trigger onPress={() => setOpen(true)} {...props as any} /> <Trigger onPress={() => setOpen(true)} {...(props as any)} />
{isOpen && ( {isOpen && (
<Portal> <Portal>
<ContrastArea mode="user"> <ContrastArea mode="user">
@ -129,7 +137,14 @@ const MenuItem = ({
const setOpen = useContext(MenuContext); const setOpen = useContext(MenuContext);
const router = useRouter(); 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 ( return (
<PressableFeedback <PressableFeedback
@ -151,7 +166,9 @@ const MenuItem = ({
> >
{left && left} {left && left}
{!left && icn && icn} {!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} {left && icn && icn}
</PressableFeedback> </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 Link from "next/link";
import { PressableProps } from "react-native"; import { PressableProps } from "react-native";
import { useYoshiki } from "yoshiki/web"; 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 { P } from "./text";
import { ContrastArea, SwitchVariant } from "./themes"; import { ContrastArea, SwitchVariant } from "./themes";
import { Icon } from "./icons"; import { Icon } from "./icons";
@ -133,6 +133,15 @@ const MenuItem = ({
const { css: nCss } = useNativeYoshiki(); const { css: nCss } = useNativeYoshiki();
const { css, theme } = useYoshiki(); 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 ( return (
<> <>
<style jsx global>{` <style jsx global>{`
@ -155,15 +164,18 @@ const MenuItem = ({
)} )}
> >
{left && left} {left && left}
{(icon || selected) && ( {!left && icn && icn}
<Icon {
icon={icon ?? Dot} <P
color={theme.paragraph} {...nCss({
size={ts(icon ? 2 : 1)} paddingLeft: ts((icon || selected || left) ? 0 : 2 + +!!icon),
{...nCss({ paddingRight: ts(1) })} flexGrow: 1,
/> })}
)} >
{<P {...nCss(!(icon || selected || left) && { paddingLeft: ts(1) })}>{label}</P>} {label}
</P>
}
{left && icn && icn}
</Item> </Item>
</> </>
); );