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 account menu on android

Browse Source
This commit is contained in:
Zoe Roux 2023-06-14 10:23:39 +09:00
parent e185625f4a
commit cd44e8e4c3
3 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
front/packages/primitives/src/avatar.tsx
View File

@ -18,14 +18,14 @@
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>. * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/ */
import { TextStyle, View } from "react-native"; import { View, ViewStyle } from "react-native";
import { Image } from "./image"; import { Image } from "./image";
import { useYoshiki, px, Stylable } from "yoshiki/native"; import { useYoshiki, px, Stylable } from "yoshiki/native";
import { Icon } from "./icons"; import { Icon } from "./icons";
import AccountCircle from "@material-symbols/svg-400/rounded/account_circle-fill.svg"; import AccountCircle from "@material-symbols/svg-400/rounded/account_circle-fill.svg";
import { YoshikiStyle } from "yoshiki/dist/type"; import { YoshikiStyle } from "yoshiki/dist/type";
import { P } from "@expo/html-elements"; import { P } from "@expo/html-elements";
import { forwardRef } from "react"; import { ComponentType, forwardRef, RefAttributes } from "react";
import { ts } from "./utils"; import { ts } from "./utils";
const stringToColor = (string: string) => { const stringToColor = (string: string) => {
@ -54,33 +54,34 @@ export const Avatar = forwardRef<
color?: string; color?: string;
isLoading?: boolean; isLoading?: boolean;
fill?: boolean; fill?: boolean;
as?: ComponentType<{ style?: ViewStyle } & RefAttributes<View>>;
} & Stylable } & Stylable
>(function _Avatar( >(function _Avatar(
{ src, alt, size = px(24), color, placeholder, isLoading = false, fill = false, ...props }, { src, alt, size = px(24), color, placeholder, isLoading = false, fill = false, as, ...props },
ref, ref,
) { ) {
const { css, theme } = useYoshiki(); const { css, theme } = useYoshiki();
const col = color ?? theme.overlay0; const col = color ?? theme.overlay0;
// TODO: Support dark themes when fill === true // TODO: Support dark themes when fill === true
const Container = as ?? View;
return ( return (
<View <Container
ref={ref} ref={ref}
{...css( {...css(
[ [
{ {
borderRadius: 999999, borderRadius: 999999,
overflow: "hidden",
p: ts(1), p: ts(1),
}, },
fill && { fill && {
bg: col, bg: col,
}, },
placeholder && placeholder &&
!src && !src &&
!isLoading && { !isLoading && {
bg: stringToColor(placeholder), bg: stringToColor(placeholder),
}, },
], ],
props, props,
)} )}
@ -102,6 +103,6 @@ export const Avatar = forwardRef<
) : ( ) : (
<Icon icon={AccountCircle} size={size} color={fill ? col : theme.colors.white} /> <Icon icon={AccountCircle} size={size} color={fill ? col : theme.colors.white} />
)} )}
</View> </Container>
); );
}); });

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

@ -50,14 +50,14 @@ const Menu = <AsProps,>({
const [isOpen, setOpen] = useState(false); const [isOpen, setOpen] = useState(false);
useEffect(() => { useEffect(() => {
console.log("Opnned changed", isOpen);
if (isOpen) onMenuOpen?.call(null); if (isOpen) onMenuOpen?.call(null);
else onMenuClose?.call(null); else onMenuClose?.call(null);
}, [isOpen, onMenuClose, onMenuOpen]); }, [isOpen, onMenuClose, onMenuOpen]);
return ( return (
<> <>
{/* @ts-ignore */} <Trigger onPress={() => setOpen(true)} {...props as any} />
<Trigger onPress={() => setOpen(true)} {...props} />
{isOpen && ( {isOpen && (
<Portal> <Portal>
<ContrastArea mode="user"> <ContrastArea mode="user">

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

@ -29,6 +29,7 @@ import {
tooltip, tooltip,
ts, ts,
Menu, Menu,
PressableFeedback,
} from "@kyoo/primitives"; } from "@kyoo/primitives";
import { Platform, TextInput, View, ViewProps } from "react-native"; import { Platform, TextInput, View, ViewProps } from "react-native";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@ -98,6 +99,7 @@ export const NavbarProfile = () => {
{({ isError: isGuest, username }) => ( {({ isError: isGuest, username }) => (
<Menu <Menu
Trigger={Avatar} Trigger={Avatar}
as={PressableFeedback}
placeholder={username} placeholder={username}
alt={t("navbar.login")} alt={t("navbar.login")}
size={24} size={24}