antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-02 10:53:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add responsive styles to header

Browse source
This commit is contained in:
jeffvli 2022-12-25 02:29:00 -08:00
parent 7f62b583af
commit 7cc3adedc4
2 changed files with 19 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/renderer/components/search-input/index.tsx
View file

@ -20,6 +20,7 @@ export const SearchInput = ({
const mergedRef = useMergedRef<HTMLInputElement>(ref); const mergedRef = useMergedRef<HTMLInputElement>(ref);
const isOpened = focused || ref.current?.value; const isOpened = focused || ref.current?.value;
const showIcon = !isOpened || (openedWidth || 150) > 150;
useHotkeys([ useHotkeys([
[ [
@ -42,7 +43,7 @@ export const SearchInput = ({
<TextInput <TextInput
ref={mergedRef} ref={mergedRef}
{...props} {...props}
icon={<RiSearchLine size={15} />} icon={showIcon && <RiSearchLine size={15} />}
styles={{ styles={{
input: { input: {
backgroundColor: isOpened ? 'inherit' : 'transparent !important', backgroundColor: isOpened ? 'inherit' : 'transparent !important',

17
src/renderer/features/albums/components/album-list-header.tsx
View file

@ -36,6 +36,7 @@ import { JellyfinAlbumFilters } from '/@/renderer/features/albums/components/jel
import { api } from '/@/renderer/api'; import { api } from '/@/renderer/api';
import { controller } from '/@/renderer/api/controller'; import { controller } from '/@/renderer/api/controller';
import { queryKeys } from '/@/renderer/api/query-keys'; import { queryKeys } from '/@/renderer/api/query-keys';
import { useContainerQuery } from '/@/renderer/hooks';
const FILTERS = { const FILTERS = {
jellyfin: [ jellyfin: [
@ -89,6 +90,7 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
const setFilter = useSetAlbumFilters(); const setFilter = useSetAlbumFilters();
const page = useAlbumListStore(); const page = useAlbumListStore();
const filters = page.filter; const filters = page.filter;
const cq = useContainerQuery();
const musicFoldersQuery = useMusicFolders(); const musicFoldersQuery = useMusicFolders();
@ -97,6 +99,8 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
FILTERS[server.type as keyof typeof FILTERS].find((f) => f.value === filters.sortBy)?.name) || FILTERS[server.type as keyof typeof FILTERS].find((f) => f.value === filters.sortBy)?.name) ||
'Unknown'; 'Unknown';
const sortOrderLabel = ORDER.find((o) => o.value === filters.sortOrder)?.name || 'Unknown';
const setSize = throttle( const setSize = throttle(
(e: number) => (e: number) =>
setPage({ setPage({
@ -204,7 +208,7 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
return ( return (
<PageHeader> <PageHeader>
<HeaderItems> <HeaderItems ref={cq.ref}>
<Flex <Flex
align="center" align="center"
gap="md" gap="md"
@ -290,11 +294,17 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
fw="normal" fw="normal"
variant="subtle" variant="subtle"
> >
{cq.isMd ? (
sortOrderLabel
) : (
<>
{filters.sortOrder === SortOrder.ASC ? ( {filters.sortOrder === SortOrder.ASC ? (
<RiSortAsc size={15} /> <RiSortAsc size={15} />
) : ( ) : (
<RiSortDesc size={15} /> <RiSortDesc size={15} />
)} )}
</>
)}
</Button> </Button>
</DropdownMenu.Target> </DropdownMenu.Target>
<DropdownMenu.Dropdown> <DropdownMenu.Dropdown>
@ -318,7 +328,7 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
fw="normal" fw="normal"
variant="subtle" variant="subtle"
> >
<RiFolder2Line size={15} /> {cq.isMd ? 'Folder' : <RiFolder2Line size={15} />}
</Button> </Button>
</DropdownMenu.Target> </DropdownMenu.Target>
<DropdownMenu.Dropdown> <DropdownMenu.Dropdown>
@ -342,7 +352,7 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
fw="normal" fw="normal"
variant="subtle" variant="subtle"
> >
<RiFilter3Line size={15} /> {cq.isMd ? 'Filters' : <RiFilter3Line size={15} />}
</Button> </Button>
</Popover.Target> </Popover.Target>
<Popover.Dropdown> <Popover.Dropdown>
@ -357,6 +367,7 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
<Flex> <Flex>
<SearchInput <SearchInput
defaultValue={page.filter.searchTerm} defaultValue={page.filter.searchTerm}
openedWidth={cq.isLg ? 300 : cq.isMd ? 250 : cq.isSm ? 150 : 75}
onChange={handleSearch} onChange={handleSearch}
/> />
</Flex> </Flex>