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

Add a tooltip function

Browse Source
This commit is contained in:
Zoe Roux 2022-12-05 01:54:47 +09:00
parent 71a506443f
commit fff73ed2b8
5 changed files with 130 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,7 +29,7 @@ import { Hydrate, QueryClientProvider } from "@tanstack/react-query";
import { createQueryClient, fetchQuery, QueryIdentifier, QueryPage } from "@kyoo/models";
import superjson from "superjson";
import Head from "next/head";
import { ThemeSelector as KThemeSelector } from "@kyoo/primitives";
import { ThemeSelector as KThemeSelector, WebTooltip } from "@kyoo/primitives";
const ThemeSelector = ({ children }: { children?: ReactNode | ReactNode[] }) => {
// TODO: Handle user selected mode (light, dark, auto)
@ -45,27 +45,30 @@ const GlobalCssTheme = () => {
const theme = useTheme();
return (
<style jsx global>{`
body {
margin: 0px;
padding: 0px;
background-color: ${theme.background};
}
<>
<style jsx global>{`
body {
margin: 0px;
padding: 0px;
background-color: ${theme.background};
}
*::-webkit-scrollbar {
height: 6px;
width: 6px;
background: transparent;
}
*::-webkit-scrollbar {
height: 6px;
width: 6px;
background: transparent;
}
*::-webkit-scrollbar-thumb {
background-color: #999;
border-radius: 90px;
}
*:hover::-webkit-scrollbar-thumb {
background-color: rgb(134, 127, 127);
}
`}</style>
*::-webkit-scrollbar-thumb {
background-color: #999;
border-radius: 90px;
}
*:hover::-webkit-scrollbar-thumb {
background-color: rgb(134, 127, 127);
}
`}</style>
<WebTooltip theme={theme} />
</>
);
};

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

@ -26,6 +26,7 @@ export * from "./links";
export * from "./avatar";
export * from "./image";
export * from "./skeleton";
export * from "./tooltip";
import { px } from "yoshiki/native";

69
front/packages/primitives/src/tooltip.tsx Normal file
View File

@ -0,0 +1,69 @@
/*
* 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/>.
*/
import { ToastAndroid, PressableProps } from "react-native";
import { Theme } from "yoshiki/native";
export const tooltip = (tooltip: string) =>
({
dataSet: { tooltip },
onLongPress: () => {
// TODO handle IOS.
ToastAndroid.show(tooltip, ToastAndroid.SHORT);
},
} satisfies PressableProps);
export const WebTooltip = ({ theme }: { theme: Theme }) => {
const background = `${theme.colors.black}CC`;
return (
<style jsx global>{`
[data-tooltip] {
position: relative;
}
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%);
margin-top: 8px;
border-radius: 5px;
padding: 6px;
font-size: 0.8rem;
color: ${theme.colors.white};
background-color: ${background};
font-family: ${theme.fonts.paragraph};
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out;
}
[data-tooltip]:hover::after {
opacity: 1;
visibility: visible;
}
`}</style>
);
};

35
front/packages/primitives/src/types.d.ts vendored Normal file
View File

@ -0,0 +1,35 @@
/*
* 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/>.
*/
import React from "react";
import "react-native";
declare module "react-native" {
interface ViewProps {
dataSet?: Record<string, string>;
}
}
declare module "react" {
interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
jsx?: boolean;
global?: boolean;
}
}

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

@ -21,13 +21,11 @@
import useTranslation from "next-translate/useTranslation";
import { Library, LibraryP, Page, Paged, QueryIdentifier } from "@kyoo/models";
import { rem, useYoshiki } from "yoshiki/native";
import { IconButton, Header, Avatar, A, Skeleton, ts } from "@kyoo/primitives";
import { Text, View } from "react-native";
import { IconButton, Header, Avatar, A, Skeleton, tooltip, ts } from "@kyoo/primitives";
import { View } from "react-native";
import { Fetch } from "../fetch";
import { KyooLongLogo } from "./icon";
const tooltip = (tooltip: string): object => ({});
export const NavbarTitle = KyooLongLogo;
export const Navbar = () => {