From 5f7b00562691c04688ae406ca54a924decdea5d7 Mon Sep 17 00:00:00 2001 From: jeffvli Date: Fri, 31 Mar 2023 05:22:51 -0700 Subject: [PATCH] Refactor layout components --- .../albums/components/album-list-header.tsx | 25 +++-------- .../components/album-artist-list-header.tsx | 24 +++-------- .../features/shared/components/filter-bar.tsx | 13 ++++++ .../shared/components/library-header-bar.tsx | 43 +++++++++++++------ src/renderer/features/shared/index.ts | 1 + .../songs/components/song-list-header.tsx | 19 +++----- src/renderer/styles/ag-grid.scss | 4 ++ 7 files changed, 68 insertions(+), 61 deletions(-) create mode 100644 src/renderer/features/shared/components/filter-bar.tsx diff --git a/src/renderer/features/albums/components/album-list-header.tsx b/src/renderer/features/albums/components/album-list-header.tsx index ff2ff488..ddf7a2ba 100644 --- a/src/renderer/features/albums/components/album-list-header.tsx +++ b/src/renderer/features/albums/components/album-list-header.tsx @@ -9,14 +9,8 @@ import { api } from '/@/renderer/api'; import { controller } from '/@/renderer/api/controller'; import { queryKeys } from '/@/renderer/api/query-keys'; import { AlbumListQuery, LibraryItem } from '/@/renderer/api/types'; -import { - PageHeader, - Paper, - SearchInput, - SpinnerIcon, - VirtualInfiniteGridRef, -} from '/@/renderer/components'; -import { LibraryHeaderBar } from '/@/renderer/features/shared'; +import { PageHeader, SearchInput, VirtualInfiniteGridRef } from '/@/renderer/components'; +import { FilterBar, LibraryHeaderBar } from '/@/renderer/features/shared'; import { useContainerQuery } from '/@/renderer/hooks'; import { AlbumListFilter, @@ -209,14 +203,9 @@ export const AlbumListHeader = ({ handlePlay(playButtonBehavior)} /> {title || 'Albums'} - - {itemCount === null || itemCount === undefined ? : itemCount} - + + {itemCount} + - + - + ); }; diff --git a/src/renderer/features/artists/components/album-artist-list-header.tsx b/src/renderer/features/artists/components/album-artist-list-header.tsx index 86ca3473..d280d18f 100644 --- a/src/renderer/features/artists/components/album-artist-list-header.tsx +++ b/src/renderer/features/artists/components/album-artist-list-header.tsx @@ -7,13 +7,7 @@ import { useQueryClient } from '@tanstack/react-query'; import debounce from 'lodash/debounce'; import { api } from '/@/renderer/api'; import { queryKeys } from '/@/renderer/api/query-keys'; -import { - PageHeader, - Paper, - SearchInput, - SpinnerIcon, - VirtualInfiniteGridRef, -} from '/@/renderer/components'; +import { PageHeader, SearchInput, VirtualInfiniteGridRef } from '/@/renderer/components'; import { LibraryHeaderBar } from '/@/renderer/features/shared'; import { useContainerQuery } from '/@/renderer/hooks'; import { @@ -25,6 +19,7 @@ import { import { ListDisplayType } from '/@/renderer/types'; import { AlbumArtistListHeaderFilters } from '/@/renderer/features/artists/components/album-artist-list-header-filters'; import { useAlbumArtistListContext } from '/@/renderer/features/artists/context/album-artist-list-context'; +import { FilterBar } from '../../shared/components/filter-bar'; interface AlbumArtistListHeaderProps { gridRef: MutableRefObject; @@ -154,14 +149,9 @@ export const AlbumArtistListHeader = ({ > Album Artists - - {itemCount === null || itemCount === undefined ? : itemCount} - + + {itemCount} + - + - + ); }; diff --git a/src/renderer/features/shared/components/filter-bar.tsx b/src/renderer/features/shared/components/filter-bar.tsx new file mode 100644 index 00000000..89d5d6c5 --- /dev/null +++ b/src/renderer/features/shared/components/filter-bar.tsx @@ -0,0 +1,13 @@ +import { PaperProps } from '@mantine/core'; +import styled from 'styled-components'; +import { Paper } from '/@/renderer/components'; + +const StyledFilterBar = styled(Paper)` + z-index: 1; + padding: 1rem; + box-shadow: 0 5px 15px rgba(0, 0, 0, 65%); +`; + +export const FilterBar = ({ children, ...props }: PaperProps) => { + return {children}; +}; diff --git a/src/renderer/features/shared/components/library-header-bar.tsx b/src/renderer/features/shared/components/library-header-bar.tsx index 7cca57d4..b0828bba 100644 --- a/src/renderer/features/shared/components/library-header-bar.tsx +++ b/src/renderer/features/shared/components/library-header-bar.tsx @@ -1,25 +1,25 @@ import { ReactNode } from 'react'; -import { Group, Box } from '@mantine/core'; -import { TextTitle } from '/@/renderer/components'; +import { Box } from '@mantine/core'; +import { Paper, PaperProps, SpinnerIcon, TextTitle } from '/@/renderer/components'; import { PlayButton as PlayBtn } from '/@/renderer/features/shared/components/play-button'; +import styled from 'styled-components'; interface LibraryHeaderBarProps { children: ReactNode; } +const HeaderContainer = styled.div` + display: flex; + flex-wrap: nowrap; + gap: 1rem; + align-items: center; + width: 100%; + height: 100%; + padding: 0 1rem; +`; + export const LibraryHeaderBar = ({ children }: LibraryHeaderBarProps) => { - return ( - - {children} - - ); + return {children}; }; interface TitleProps { @@ -54,5 +54,20 @@ const PlayButton = ({ onClick }: PlayButtonProps) => { ); }; +const Badge = styled(Paper)` + padding: 0.3rem 1rem; + font-weight: 600; + border-radius: 0.3rem; +`; + +interface HeaderBadgeProps extends PaperProps { + isLoading?: boolean; +} + +const HeaderBadge = ({ children, isLoading, ...props }: HeaderBadgeProps) => { + return {isLoading ? : children}; +}; + LibraryHeaderBar.Title = Title; LibraryHeaderBar.PlayButton = PlayButton; +LibraryHeaderBar.Badge = HeaderBadge; diff --git a/src/renderer/features/shared/index.ts b/src/renderer/features/shared/index.ts index 371f5c8d..e38bc818 100644 --- a/src/renderer/features/shared/index.ts +++ b/src/renderer/features/shared/index.ts @@ -7,3 +7,4 @@ export * from './components/library-header-bar'; export * from './mutations/create-favorite-mutation'; export * from './mutations/delete-favorite-mutation'; export * from './mutations/update-rating-mutation'; +export * from './components/filter-bar'; diff --git a/src/renderer/features/songs/components/song-list-header.tsx b/src/renderer/features/songs/components/song-list-header.tsx index a63b0578..c74effed 100644 --- a/src/renderer/features/songs/components/song-list-header.tsx +++ b/src/renderer/features/songs/components/song-list-header.tsx @@ -6,9 +6,9 @@ import { ChangeEvent, MutableRefObject, useCallback } from 'react'; import { api } from '/@/renderer/api'; import { queryKeys } from '/@/renderer/api/query-keys'; import { LibraryItem, SongListQuery } from '/@/renderer/api/types'; -import { PageHeader, Paper, SearchInput, SpinnerIcon } from '/@/renderer/components'; +import { PageHeader, SearchInput } from '/@/renderer/components'; import { usePlayQueueAdd } from '/@/renderer/features/player'; -import { LibraryHeaderBar } from '/@/renderer/features/shared'; +import { FilterBar, LibraryHeaderBar } from '/@/renderer/features/shared'; import { SongListHeaderFilters } from '/@/renderer/features/songs/components/song-list-header-filters'; import { useSongListContext } from '/@/renderer/features/songs/context/song-list-context'; import { useContainerQuery } from '/@/renderer/hooks'; @@ -119,14 +119,9 @@ export const SongListHeader = ({ handlePlay(playButtonBehavior)} /> {title || 'Tracks'} - - {itemCount === null || itemCount === undefined ? : itemCount} - + + {itemCount} + - + - + ); }; diff --git a/src/renderer/styles/ag-grid.scss b/src/renderer/styles/ag-grid.scss index 771f0dfc..4d1d6ec2 100644 --- a/src/renderer/styles/ag-grid.scss +++ b/src/renderer/styles/ag-grid.scss @@ -10,6 +10,10 @@ transition: position 0.2s ease-in-out; } +.ag-header { + z-index: 5; +} + .window-frame { top: 95px; }