Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-31 12:14:46 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add sort by button (v1)

Browse Source
This commit is contained in:
Zoe Roux 2023-03-15 02:57:05 +09:00
parent 19c3f44d9a
commit a716fd1e22
3 changed files with 67 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,6 +28,7 @@ import { P } from "./text";
import { ContrastArea } from "./themes"; import { ContrastArea } from "./themes";
import { Icon } from "./icons"; import { Icon } from "./icons";
import Dot from "@material-symbols/svg-400/rounded/fiber_manual_record-fill.svg"; import Dot from "@material-symbols/svg-400/rounded/fiber_manual_record-fill.svg";
import { focusReset } from "./utils";
type YoshikiFunc<T> = (props: ReturnType<typeof useYoshiki>) => T; type YoshikiFunc<T> = (props: ReturnType<typeof useYoshiki>) => T;
const YoshikiProvider = ({ children }: { children: YoshikiFunc<ReactNode> }) => { const YoshikiProvider = ({ children }: { children: YoshikiFunc<ReactNode> }) => {
@ -138,17 +139,13 @@ const MenuItem = ({
onSelect={onSelect} onSelect={onSelect}
href={href} href={href}
{...css( {...css(
[ {
{ display: "flex",
display: "flex", alignItems: "center",
alignItems: "center", padding: "8px",
padding: "8px", height: "32px",
height: "32px", focus: focusReset as any,
focus: { },
boxShadow: "none",
},
},
],
props as any, props as any,
)} )}
> >

3
front/packages/primitives/src/tooltip.tsx
View File

@ -53,6 +53,9 @@ export const WebTooltip = ({ theme }: { theme: Theme }) => {
transform: translate(-50%); transform: translate(-50%);
z-index: 999; z-index: 999;
width: max-content;
max-width: 300%;
margin-top: 8px; margin-top: 8px;
border-radius: 5px; border-radius: 5px;
padding: 6px; padding: 6px;

72
front/packages/ui/src/browse/header.tsx
View File

@ -18,13 +18,15 @@
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>. * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/ */
import { IconButton, tooltip, ts } from "@kyoo/primitives"; import { HR, Icon, IconButton, Menu, P, PressableFeedback, tooltip, ts } from "@kyoo/primitives";
import { View } from "moti";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useYoshiki } from "yoshiki/native"; import { useYoshiki } from "yoshiki/native";
import GridView from "@material-symbols/svg-400/rounded/grid_view.svg"; import GridView from "@material-symbols/svg-400/rounded/grid_view.svg";
import ViewList from "@material-symbols/svg-400/rounded/view_list.svg"; import ViewList from "@material-symbols/svg-400/rounded/view_list.svg";
import Sort from "@material-symbols/svg-400/rounded/sort.svg";
import { Layout, SortBy, SortOrd } from "./types"; import { Layout, SortBy, SortOrd } from "./types";
import { forwardRef } from "react";
import { View, PressableProps } from "react-native";
// const SortByMenu = ({ // const SortByMenu = ({
// sortKey, // sortKey,
@ -98,6 +100,25 @@ import { Layout, SortBy, SortOrd } from "./types";
// ); // );
// }; // };
const SortTrigger = forwardRef<View, PressableProps & { sortKey: SortBy }>(function _SortTrigger(
{ sortKey, ...props },
ref,
) {
const { css } = useYoshiki();
const { t } = useTranslation();
return (
<PressableFeedback
ref={ref}
{...css({ flexDirection: "row", alignItems: "center" }, props as any)}
{...tooltip(t("browse.sortby-tt"))}
>
<Icon icon={Sort} {...css({ paddingX: ts(0.5) })} />
<P>{t(`browse.sortkey.${sortKey}`)}</P>
</PressableFeedback>
);
});
export const BrowseSettings = ({ export const BrowseSettings = ({
sortKey, sortKey,
setSort, setSort,
@ -114,23 +135,42 @@ export const BrowseSettings = ({
setLayout: (layout: Layout) => void; setLayout: (layout: Layout) => void;
}) => { }) => {
// const [sortAnchor, setSortAnchor] = useState<HTMLElement | null>(null); // const [sortAnchor, setSortAnchor] = useState<HTMLElement | null>(null);
const { css } = useYoshiki(); const { css, theme } = useYoshiki();
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<View {...css({ flexDirection: "row" })}> <View {...css({ flexDirection: "row", marginX: ts(4), marginY: ts(1) })}>
<IconButton <View {...css({ flexGrow: 1 })}></View>
icon={GridView} <View {...css({ flexDirection: "row" })}>
onPress={() => setLayout(Layout.Grid)} <Menu Trigger={SortTrigger} sortKey={sortKey}>
{...tooltip(t("browse.switchToGrid"))} {Object.values(SortBy).map((x) => (
{...css({ paddingX: ts(.5) })} <Menu.Item
/> key={x}
<IconButton label={t(`browse.sortkey.${x}`)}
icon={ViewList} selected={sortKey === x}
onPress={() => setLayout(Layout.List)} onSelect={() => setSort(x)}
{...tooltip(t("browse.switchToList"))} // component={Link}
{...css({ paddingX: ts(.5) })} // to={{ query: { ...router.query, sortBy: `${sortKey}-${sortOrd}` } }}
/> // TODO: Set query param for sort.
/>
))}
</Menu>
<HR orientation="vertical" />
<IconButton
icon={GridView}
onPress={() => setLayout(Layout.Grid)}
color={layout == Layout.Grid ? theme.accent : undefined}
{...tooltip(t("browse.switchToGrid"))}
{...css({ paddingX: ts(0.5) })}
/>
<IconButton
icon={ViewList}
onPress={() => setLayout(Layout.List)}
color={layout == Layout.List ? theme.accent : undefined}
{...tooltip(t("browse.switchToList"))}
{...css({ paddingX: ts(0.5) })}
/>
</View>
</View> </View>
); );