Skip to content
This repository has been archived by the owner on Aug 23, 2024. It is now read-only.

Commit

Permalink
Add customizable sidebar elements
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeffvli
jeffvli committed Feb 7, 2022
1 parent 98c4349 commit 3b81174
Show file tree
Hide file tree
Showing 6 changed files with 152 additions and 26 deletions.
11 changes: 6 additions & 5 deletions src/__tests__/App.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,11 +73,6 @@ const miscState: General = {
contextMenu: {
show: false,
},
sidebar: {
expand: false,
coverArt: true,
width: '225px',
},
modal: {
currentPageIndex: undefined,
show: false,
Expand Down Expand Up @@ -391,6 +386,12 @@ const configState: ConfigPage = {
gapSize: 20,
alignment: 'flex-start',
},
sidebar: {
expand: false,
coverArt: true,
width: '225px',
selected: ['dashboard', 'nowplaying'],
},
},
external: {
discord: {
Expand Down
53 changes: 33 additions & 20 deletions src/components/layout/Sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,7 @@ const Sidebar = ({
history.push('/');
}
}}
hide={!config.lookAndFeel.sidebar.selected.includes('dashboard')}
>
{t('Dashboard')}
</SidebarNavItem>
Expand All @@ -167,6 +168,7 @@ const Sidebar = ({
history.push('/nowplaying');
}
}}
hide={!config.lookAndFeel.sidebar.selected.includes('nowplaying')}
>
{t('Now Playing')}
</SidebarNavItem>
Expand All @@ -182,6 +184,7 @@ const Sidebar = ({
history.push('/starred');
}
}}
hide={!config.lookAndFeel.sidebar.selected.includes('favorites')}
>
{t('Favorites')}
</SidebarNavItem>
Expand All @@ -197,6 +200,7 @@ const Sidebar = ({
history.push('/library/music');
}
}}
hide={!config.lookAndFeel.sidebar.selected.includes('songs')}
>
Songs
</SidebarNavItem>
Expand All @@ -212,6 +216,7 @@ const Sidebar = ({
history.push('/library/album');
}
}}
hide={!config.lookAndFeel.sidebar.selected.includes('albums')}
>
{t('Albums')}
</SidebarNavItem>
Expand All @@ -226,6 +231,7 @@ const Sidebar = ({
history.push('/library/artist');
}
}}
hide={!config.lookAndFeel.sidebar.selected.includes('artists')}
>
{t('Artists')}
</SidebarNavItem>
Expand All @@ -240,6 +246,7 @@ const Sidebar = ({
history.push('/library/genre');
}
}}
hide={!config.lookAndFeel.sidebar.selected.includes('genres')}
>
{t('Genres')}
</SidebarNavItem>
Expand All @@ -256,6 +263,7 @@ const Sidebar = ({
history.push('/library/folder');
}
}}
hide={!config.lookAndFeel.sidebar.selected.includes('folders')}
>
{t('Folders')}
</SidebarNavItem>
Expand All @@ -272,6 +280,7 @@ const Sidebar = ({
history.push('/config');
}
}}
hide={!config.lookAndFeel.sidebar.selected.includes('config')}
>
{t('Config')}
</SidebarNavItem>
Expand All @@ -285,6 +294,7 @@ const Sidebar = ({
handleToggle();
}
}}
hide={!config.lookAndFeel.sidebar.selected.includes('collapse')}
>
{expand ? t('Collapse') : t('Expand')}
</SidebarNavItem>
Expand All @@ -300,32 +310,35 @@ const Sidebar = ({
history.push('/playlist');
}
}}
hide={!config.lookAndFeel.sidebar.selected.includes('playlists')}
>
{t('Playlists')}
</SidebarNavItem>
)}
</div>
</Nav>
{expand && !disableSidebar && (
<div
style={{
height: `${
sidebarBodyHeight - mainNavHeight < 170
? 170
: sidebarBodyHeight - mainNavHeight
}px`,
overflow: 'hidden',
overflowY: 'auto',
}}
>
<>
<PlaylistDivider onClick={() => history.push('/playlist')}>
{t('Playlists')}
</PlaylistDivider>
<SidebarPlaylists width={width} />
</>
</div>
)}
{expand &&
!disableSidebar &&
config.lookAndFeel.sidebar.selected.includes('playlists') && (
<div
style={{
height: `${
sidebarBodyHeight - mainNavHeight < 170
? 170
: sidebarBodyHeight - mainNavHeight
}px`,
overflow: 'hidden',
overflowY: 'auto',
}}
>
<>
<PlaylistDivider onClick={() => history.push('/playlist')}>
{t('Playlists')}
</PlaylistDivider>
<SidebarPlaylists width={width} />
</>
</div>
)}
</div>
</Sidenav.Body>
</Sidenav>
Expand Down
3 changes: 2 additions & 1 deletion src/components/layout/styled.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,9 +191,10 @@ export const FixedSidebar = styled(Sidebar)<{ font: string; $titleBar: string }>
}
`;

export const SidebarNavItem = styled(Nav.Item)`
export const SidebarNavItem = styled(Nav.Item)<{ hide?: boolean }>`
padding-right: 5px;
user-select: none;
display: ${(props) => (props.hide ? 'none' : 'block')};
a {
color: ${(props) => props.theme.colors.layout.sideBar.button.color} !important;
Expand Down
68 changes: 68 additions & 0 deletions src/components/settings/ConfigPanels/LookAndFeelConfig.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
StyledButton,
StyledPopover,
StyledCheckbox,
StyledCheckPicker,
} from '../../shared/styled';
import ListViewConfig from './ListViewConfig';
import { Fonts } from '../Fonts';
Expand All @@ -42,6 +43,7 @@ import {
setGridAlignment,
setGridCardSize,
setGridGapSize,
setSidebar,
} from '../../../redux/configSlice';
import { Item, Server } from '../../../types';
import ConfigOption from '../ConfigOption';
Expand Down Expand Up @@ -294,6 +296,7 @@ export const ThemeConfigPanel = ({ bordered }: any) => {
const startPagePickerContainerRef = useRef(null);
const albumSortDefaultPickerContainerRef = useRef(null);
const musicSortDefaultPickerContainerRef = useRef(null);
const sidebarPickerContainerRef = useRef(null);
const titleBarRestartWhisper = React.createRef<WhisperInstance>();
const [themeList, setThemeList] = useState(
_.concat(settings.getSync('themes'), settings.getSync('themesDefault'))
Expand Down Expand Up @@ -580,6 +583,71 @@ export const ThemeConfigPanel = ({ bordered }: any) => {
/>
}
/>
<ConfigOption
name={t('Sidebar')}
option={
<StyledInputPickerContainer ref={sidebarPickerContainerRef}>
<StyledCheckPicker
container={() => sidebarPickerContainerRef.current}
data={[
{
label: i18n.t('Dashboard'),
value: 'dashboard',
},
{
label: i18n.t('Now Playing'),
value: 'nowplaying',
},
{
label: i18n.t('Favorites'),
value: 'favorites',
},
{
label: i18n.t('Songs'),
value: 'songs',
},
{
label: i18n.t('Albums'),
value: 'albums',
},
{
label: i18n.t('Artists'),
value: 'artists',
},
{
label: i18n.t('Genres'),
value: 'genres',
},
{
label: i18n.t('Folders'),
value: 'folders',
},
{
label: i18n.t('Config'),
value: 'config',
},
{
label: i18n.t('Collapse'),
value: 'collapse',
},
{
label: i18n.t('Playlists'),
value: 'playlists',
},
]}
searchable={false}
cleanable={false}
defaultValue={config.lookAndFeel.sidebar.selected}
width={250}
disabledItemValues={config.serverType === Server.Subsonic ? ['songs'] : []}
onChange={(e: string) => {
settings.setSync('sidebar.selected', e);
dispatch(setSidebar({ selected: e }));
}}
/>
</StyledInputPickerContainer>
}
/>
</ConfigPanel>
);
};
Expand Down
16 changes: 16 additions & 0 deletions src/components/shared/setDefaultSettings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,22 @@ const setDefaultSettings = (force: boolean) => {
settings.setSync('sidebar.coverArt', true);
}

if (force || !settings.hasSync('sidebar.selected')) {
settings.setSync('sidebar.selected', [
'dashboard',
'nowplaying',
'favorites',
'songs',
'albums',
'artists',
'genres',
'folders',
'config',
'collapse',
'playlists',
]);
}

if (force || !settings.hasSync('pagination.music.recordsPerPage')) {
settings.setSync('pagination.music.recordsPerPage', 50);
}
Expand Down
27 changes: 27 additions & 0 deletions src/redux/configSlice.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,22 @@ export interface Sidebar {
expand: boolean;
width: string;
coverArt: boolean;
selected: SidebarList[];
}

export type SidebarList =
| 'dashboard'
| 'nowplaying'
| 'favorites'
| 'songs'
| 'albums'
| 'artists'
| 'genres'
| 'folders'
| 'config'
| 'collapse'
| 'playlists';

export type ColumnList = 'music' | 'album' | 'playlist' | 'artist' | 'genre' | 'mini';

const initialState: ConfigPage = {
Expand Down Expand Up @@ -153,6 +167,19 @@ const initialState: ConfigPage = {
expand: Boolean(parsedSettings.sidebar?.expand) || true,
width: String(parsedSettings.sidebar?.width) || '225px',
coverArt: Boolean(parsedSettings.sidebar?.coverArt) || true,
selected: parsedSettings.sidebar?.selected || [
'dashboard',
'nowplaying',
'favorites',
'songs',
'albums',
'artists',
'genres',
'folders',
'config',
'collapse',
'playlists',
],
},
},
external: {
Expand Down

0 comments on commit 3b81174

Please sign in to comment.