From 31bba837ca23301706fcc692b044c03270a2693f Mon Sep 17 00:00:00 2001 From: jeffvli Date: Sat, 30 Oct 2021 04:52:16 -0700 Subject: [PATCH] Add refs for picker components --- src/components/library/AlbumList.tsx | 52 +++++++---- src/components/library/FolderList.tsx | 65 +++++++------ .../settings/ConfigPanels/ListViewConfig.tsx | 91 ++++++++++--------- .../ConfigPanels/LookAndFeelConfig.tsx | 18 +++- .../settings/ConfigPanels/PlaybackConfig.tsx | 16 +++- .../settings/ConfigPanels/ServerConfig.tsx | 29 +++--- src/components/shared/ContextMenu.tsx | 1 + src/components/shared/styled.ts | 4 - src/components/viewtypes/ViewTypeButtons.tsx | 42 ++++----- src/styles/App.global.css | 6 ++ src/styles/custom-theme.less | 1 + 11 files changed, 190 insertions(+), 135 deletions(-) diff --git a/src/components/library/AlbumList.tsx b/src/components/library/AlbumList.tsx index 1debdae..e1525af 100644 --- a/src/components/library/AlbumList.tsx +++ b/src/components/library/AlbumList.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import _ from 'lodash'; import settings from 'electron-settings'; import { ButtonToolbar } from 'rsuite'; @@ -18,7 +18,7 @@ import { toggleRangeSelected, clearSelected, } from '../../redux/multiSelectSlice'; -import { StyledInputPicker } from '../shared/styled'; +import { StyledInputPicker, StyledInputPickerContainer } from '../shared/styled'; import { RefreshButton } from '../shared/ToolbarButtons'; import { setActive } from '../../redux/albumSlice'; @@ -42,6 +42,7 @@ const AlbumList = () => { const [sortTypes, setSortTypes] = useState(); const [viewType, setViewType] = useState(settings.getSync('albumViewType')); const [musicFolder, setMusicFolder] = useState(undefined); + const albumFilterPickerContainerRef = useRef(null); useEffect(() => { if (folder.applied.albums) { @@ -150,23 +151,36 @@ const AlbumList = () => { - { - await queryClient.cancelQueries(['albumList', album.active.filter, musicFolder]); - setSearchQuery(''); - dispatch(setActive({ ...album.active, filter: value })); - }} - /> - - + + + albumFilterPickerContainerRef.current} + size="sm" + width={180} + defaultValue={album.active.filter} + groupBy="role" + data={sortTypes} + cleanable={false} + placeholder="Sort Type" + onChange={async (value: string) => { + await queryClient.cancelQueries([ + 'albumList', + album.active.filter, + musicFolder, + ]); + setSearchQuery(''); + dispatch(setActive({ ...album.active, filter: value })); + }} + /> + + + + } subsidetitle={<>} searchQuery={searchQuery} diff --git a/src/components/library/FolderList.tsx b/src/components/library/FolderList.tsx index db08fe7..70b5fb6 100644 --- a/src/components/library/FolderList.tsx +++ b/src/components/library/FolderList.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import settings from 'electron-settings'; import _ from 'lodash'; import { useQuery, useQueryClient } from 'react-query'; @@ -23,7 +23,7 @@ import { } from '../../redux/multiSelectSlice'; import GenericPage from '../layout/GenericPage'; import GenericPageHeader from '../layout/GenericPageHeader'; -import { StyledButton, StyledInputPicker } from '../shared/styled'; +import { StyledButton, StyledInputPicker, StyledInputPickerContainer } from '../shared/styled'; import { fixPlayer2Index, setPlayQueueByRowClick, setRate } from '../../redux/playQueueSlice'; import { setStatus } from '../../redux/playerSlice'; import useSearchQuery from '../../hooks/useSearchQuery'; @@ -37,6 +37,7 @@ const FolderList = () => { const queryClient = useQueryClient(); const folder = useAppSelector((state) => state.folder); const [musicFolder, setMusicFolder] = useState(folder.musicFolder); + const folderPickerContainerRef = useRef(null); const { isLoading, isError, data: indexData, error }: any = useQuery( ['indexes', musicFolder], @@ -163,33 +164,39 @@ const FolderList = () => { showTitleTooltip subtitle={ <> - - { - setMusicFolder(e); - }} - style={{ width: '250px' }} - /> - - { - history.push( - `/library/folder?folderId=${folderData?.parent ? folderData.parent : ''}` - ); - dispatch( - setCurrentViewedFolder(folderData?.parent ? folderData.parent : '') - ); - }} - > - - Go up - - + + + folderPickerContainerRef.current} + size="sm" + width={180} + data={musicFolders} + defaultValue={musicFolder} + valueKey="id" + labelKey="name" + onChange={(e: any) => { + setMusicFolder(e); + }} + /> + + { + history.push( + `/library/folder?folderId=${ + folderData?.parent ? folderData.parent : '' + }` + ); + dispatch( + setCurrentViewedFolder(folderData?.parent ? folderData.parent : '') + ); + }} + > + + Go up + + + } /> diff --git a/src/components/settings/ConfigPanels/ListViewConfig.tsx b/src/components/settings/ConfigPanels/ListViewConfig.tsx index 7a1e505..199bed5 100644 --- a/src/components/settings/ConfigPanels/ListViewConfig.tsx +++ b/src/components/settings/ConfigPanels/ListViewConfig.tsx @@ -1,8 +1,13 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { nanoid } from 'nanoid/non-secure'; import settings from 'electron-settings'; import { ControlLabel } from 'rsuite'; -import { StyledInputNumber, StyledPanel, StyledTagPicker } from '../../shared/styled'; +import { + StyledInputNumber, + StyledInputPickerContainer, + StyledPanel, + StyledTagPicker, +} from '../../shared/styled'; import ListViewTable from '../../viewtypes/ListViewTable'; import { useAppDispatch, useAppSelector } from '../../../redux/hooks'; import { @@ -53,6 +58,7 @@ const ListViewConfig = ({ defaultColumns, columnPicker, columnList, settingsConf const config = useAppSelector((state) => state.config); const [selectedColumns, setSelectedColumns] = useState([]); const columnListType = settingsConfig.columnList.split('List')[0]; + const columnPickerContainerRef = useRef(null); useEffect(() => { const cols = config.lookAndFeel.listView[columnListType].columns.map((col: any) => { @@ -100,46 +106,49 @@ const ListViewConfig = ({ defaultColumns, columnPicker, columnList, settingsConf
- { - const columns: any[] = []; - if (e) { - e.forEach((selected: string) => { - const alreadySelectedColumn = config.lookAndFeel.listView[ - columnListType - ].columns.find((column: any) => column.label === selected); - - if (alreadySelectedColumn) { - return columns.push(alreadySelectedColumn); - } - - const selectedColumn = columnList.find( - (column: any) => column.label === selected - ); - - if (selectedColumn) { - return columns.push({ ...selectedColumn.value, uniqueId: nanoid() }); - } - - return null; + + columnPickerContainerRef.current} + data={columnPicker} + defaultValue={defaultColumns} + value={selectedColumns} + style={{ width: '100%' }} + onChange={(e: any) => { + const columns: any[] = []; + if (e) { + e.forEach((selected: string) => { + const alreadySelectedColumn = config.lookAndFeel.listView[ + columnListType + ].columns.find((column: any) => column.label === selected); + + if (alreadySelectedColumn) { + return columns.push(alreadySelectedColumn); + } + + const selectedColumn = columnList.find( + (column: any) => column.label === selected + ); + + if (selectedColumn) { + return columns.push({ ...selectedColumn.value, uniqueId: nanoid() }); + } + + return null; + }); + } + + const cleanColumns = columns.map((col) => { + const { uniqueId, ...rest } = col; + return rest; }); - } - - const cleanColumns = columns.map((col) => { - const { uniqueId, ...rest } = col; - return rest; - }); - - dispatch(setColumnList({ listType: columnListType, entries: columns })); - settings.setSync(settingsConfig.columnList, cleanColumns); - }} - labelKey="label" - valueKey="label" - /> + + dispatch(setColumnList({ listType: columnListType, entries: columns })); + settings.setSync(settingsConfig.columnList, cleanColumns); + }} + labelKey="label" + valueKey="label" + /> + { const [highlightOnRowHoverChk, setHighlightOnRowHoverChk] = useState( Boolean(settings.getSync('highlightOnRowHover')) ); + const fontPickerContainerRef = useRef(null); + const titleBarPickerContainerRef = useRef(null); const songCols: any = settings.getSync('musicListColumns'); const albumCols: any = settings.getSync('albumListColumns'); @@ -67,10 +70,14 @@ const LookAndFeelConfig = () => { Default Dark Default Light -
+
+
+ + Font
fontPickerContainerRef.current} data={Fonts} groupBy="role" cleanable={false} @@ -80,12 +87,13 @@ const LookAndFeelConfig = () => { dispatch(setFont(e)); }} /> -
+
-
+ Titlebar style (requires app restart)
titleBarPickerContainerRef.current} data={[ { label: 'macOS', @@ -103,7 +111,7 @@ const LookAndFeelConfig = () => { dispatch(setMiscSetting({ setting: 'titleBar', value: e })); }} /> -
+
{ const dispatch = useAppDispatch(); const playQueue = useAppSelector((state) => state.playQueue); + const crossfadePickerContainerRef = useRef(null); + return (

@@ -77,10 +84,11 @@ const PlaybackConfig = () => { }} />
-

+ Crossfade type
crossfadePickerContainerRef.current} data={[ { label: 'Equal Power', @@ -118,7 +126,7 @@ const PlaybackConfig = () => { dispatch(setPlaybackSetting({ setting: 'fadeType', value: e })); }} /> -
+
Volume fade diff --git a/src/components/settings/ConfigPanels/ServerConfig.tsx b/src/components/settings/ConfigPanels/ServerConfig.tsx index e23cdb8..aef5de5 100644 --- a/src/components/settings/ConfigPanels/ServerConfig.tsx +++ b/src/components/settings/ConfigPanels/ServerConfig.tsx @@ -1,9 +1,9 @@ -import React from 'react'; +import React, { useRef } from 'react'; import settings from 'electron-settings'; import { useQuery } from 'react-query'; import { CheckboxGroup } from 'rsuite'; import { ConfigPanel } from '../styled'; -import { StyledCheckbox, StyledInputPicker } from '../../shared/styled'; +import { StyledCheckbox, StyledInputPicker, StyledInputPickerContainer } from '../../shared/styled'; import { useAppDispatch, useAppSelector } from '../../../redux/hooks'; import { getMusicFolders } from '../../../api/api'; import { setAppliedFolderViews, setMusicFolder } from '../../../redux/folderSlice'; @@ -12,21 +12,26 @@ const ServerConfig = () => { const dispatch = useAppDispatch(); const folder = useAppSelector((state) => state.folder); const { isLoading, data: musicFolders } = useQuery(['musicFolders'], getMusicFolders); + const musicFolderPickerContainerRef = useRef(null); return (

Select a music folder (leaving this blank will use all folders).


- { - settings.setSync('musicFolder.id', e); - dispatch(setMusicFolder(e)); - }} - /> + + musicFolderPickerContainerRef.current} + data={isLoading ? [] : musicFolders} + defaultValue={folder.musicFolder} + valueKey="id" + labelKey="name" + onChange={(e: any) => { + settings.setSync('musicFolder.id', e); + dispatch(setMusicFolder(e)); + }} + /> + +

Select which pages to apply music folder filtering to:

diff --git a/src/components/shared/ContextMenu.tsx b/src/components/shared/ContextMenu.tsx index e19a1f4..d74bc17 100644 --- a/src/components/shared/ContextMenu.tsx +++ b/src/components/shared/ContextMenu.tsx @@ -109,6 +109,7 @@ export const GlobalContextMenu = () => { const [shouldCreatePlaylist, setShouldCreatePlaylist] = useState(false); const [newPlaylistName, setNewPlaylistName] = useState(''); const [indexToMoveTo, setIndexToMoveTo] = useState(0); + const playlistPickerContainerRef = useRef(null); const { data: playlists }: any = useQuery(['playlists', 'name'], () => getPlaylists('name')); diff --git a/src/components/shared/styled.ts b/src/components/shared/styled.ts index 8b11c7f..5b39418 100644 --- a/src/components/shared/styled.ts +++ b/src/components/shared/styled.ts @@ -337,10 +337,6 @@ export const StyledInputPicker = styled(InputPicker)<{ width?: number }>` border-radius: ${(props) => props.theme.other.input.borderRadius}; } - .rs-picker-select-menu-item { - background: ${(props) => `${props.theme.colors.background.input} !important`}; - } - .rs-btn-default { background: ${(props) => `${props.theme.colors.input.background} !important`}; } diff --git a/src/components/viewtypes/ViewTypeButtons.tsx b/src/components/viewtypes/ViewTypeButtons.tsx index 94a104a..5c57a3d 100644 --- a/src/components/viewtypes/ViewTypeButtons.tsx +++ b/src/components/viewtypes/ViewTypeButtons.tsx @@ -1,31 +1,31 @@ import React from 'react'; -import { ButtonToolbar, ButtonGroup, Icon } from 'rsuite'; +import { ButtonToolbar, Icon } from 'rsuite'; import settings from 'electron-settings'; import { StyledIconButton } from '../shared/styled'; const ViewTypeButtons = ({ handleListClick, handleGridClick, viewTypeSetting }: any) => { return ( - - } - appearance="subtle" - onClick={async () => { - handleListClick(); - localStorage.setItem(`${viewTypeSetting}ViewType`, 'list'); - settings.setSync(`${viewTypeSetting}ViewType`, 'list'); - }} - /> - } - appearance="subtle" - onClick={async () => { - handleGridClick(); - localStorage.setItem(`${viewTypeSetting}ViewType`, 'grid'); - settings.setSync(`${viewTypeSetting}ViewType`, 'grid'); - }} - /> - + } + size="sm" + appearance="subtle" + onClick={async () => { + handleListClick(); + localStorage.setItem(`${viewTypeSetting}ViewType`, 'list'); + settings.setSync(`${viewTypeSetting}ViewType`, 'list'); + }} + /> + } + size="sm" + appearance="subtle" + onClick={async () => { + handleGridClick(); + localStorage.setItem(`${viewTypeSetting}ViewType`, 'grid'); + settings.setSync(`${viewTypeSetting}ViewType`, 'grid'); + }} + /> ); }; diff --git a/src/styles/App.global.css b/src/styles/App.global.css index f469175..4448529 100644 --- a/src/styles/App.global.css +++ b/src/styles/App.global.css @@ -57,6 +57,12 @@ body { } */ +/* Fixes the picker menu position */ +.rs-picker-menu { + left: inherit !important; + top: inherit !important; +} + *::-webkit-scrollbar { width: 10px; } diff --git a/src/styles/custom-theme.less b/src/styles/custom-theme.less index c0e24ab..c7938d0 100644 --- a/src/styles/custom-theme.less +++ b/src/styles/custom-theme.less @@ -45,6 +45,7 @@ @table-head-font-color: undefined; @table-resize-mouse-color: #292d33; @table-sort-icon-unsort: ''; +@zindex-table-header-row-wrapper: 0; // Sidenav @sidenav-default-bg: undefined;