Browse Source

Adjust sidebar playlist styling

master
jeffvli 3 years ago
parent
commit
0f7575f10e
  1. 43
      src/components/layout/Sidebar.tsx
  2. 7
      src/components/layout/SidebarPlaylists.tsx
  3. 3
      src/components/layout/styled.tsx
  4. 8
      src/components/settings/ConfigPanels/LookAndFeelConfig.tsx
  5. 1
      src/components/shared/setDefaultSettings.ts

43
src/components/layout/Sidebar.tsx

@ -174,7 +174,21 @@ const Sidebar = ({
>
{t('Now Playing')}
</SidebarNavItem>
<SidebarNavItem
tabIndex={0}
eventKey="playlists"
icon={<Icon icon="list-ul" />}
onSelect={handleSidebarSelect}
disabled={disableSidebar}
onKeyDown={(e: any) => {
if (e.key === ' ' || e.key === 'Enter') {
history.push('/playlist');
}
}}
$show={config.lookAndFeel.sidebar.selected.includes('playlists')}
>
{t('Playlists')}
</SidebarNavItem>
<SidebarNavItem
tabIndex={0}
eventKey="starred"
@ -300,33 +314,16 @@ const Sidebar = ({
>
{expand ? t('Collapse') : t('Expand')}
</SidebarNavItem>
{!expand && (
<SidebarNavItem
tabIndex={0}
eventKey="playlists"
icon={<Icon icon="list-ul" />}
onSelect={handleSidebarSelect}
disabled={disableSidebar}
onKeyDown={(e: any) => {
if (e.key === ' ' || e.key === 'Enter') {
history.push('/playlist');
}
}}
$show={config.lookAndFeel.sidebar.selected.includes('playlists')}
>
{t('Playlists')}
</SidebarNavItem>
)}
</div>
</Nav>
{expand &&
!disableSidebar &&
config.lookAndFeel.sidebar.selected.includes('playlists') && (
config.lookAndFeel.sidebar.selected.includes('playlistList') && (
<div
style={{
height: `${
sidebarBodyHeight - mainNavHeight < 170
? 170
sidebarBodyHeight - mainNavHeight < 100
? 100
: sidebarBodyHeight - mainNavHeight
}px`,
overflow: 'hidden',
@ -334,9 +331,7 @@ const Sidebar = ({
}}
>
<>
<PlaylistDivider onClick={() => history.push('/playlist')}>
{t('Playlists')}
</PlaylistDivider>
<PlaylistDivider />
<SidebarPlaylists width={width} />
</>
</div>

7
src/components/layout/SidebarPlaylists.tsx

@ -11,6 +11,11 @@ import { StyledButton } from '../shared/styled';
const ListItemContainer = styled.div`
.rs-btn {
padding-left: 20px;
padding-right: 10px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-align: left;
color: ${(props) => props.theme.colors.layout.sideBar.button.color} !important;
@ -34,7 +39,7 @@ const PlaylistRow = ({ data, index, style }: any) => {
appearance="subtle"
onClick={() => history.push(`/playlist/${data[index].id}`)}
>
{data[index].title} {`(${data[index].songCount})`}
{data[index].title}
</StyledButton>
</ListItemContainer>
);

3
src/components/layout/styled.tsx

@ -389,13 +389,13 @@ export const SidebarCoverArtContainer = styled.div<{ height: string }>`
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: rgba(50, 50, 50, 0.2);
img {
max-height: ${(props) => props.height};
max-width: 100%;
height: auto;
cursor: pointer;
}
.rs-btn {
@ -416,5 +416,4 @@ export const SidebarCoverArtContainer = styled.div<{ height: string }>`
export const PlaylistDivider = styled(Divider)`
margin: 10px 0 !important;
cursor: pointer;
`;

8
src/components/settings/ConfigPanels/LookAndFeelConfig.tsx

@ -618,6 +618,10 @@ export const ThemeConfigPanel = ({ bordered }: any) => {
label: i18n.t('Now Playing'),
value: 'nowplaying',
},
{
label: i18n.t('Playlists'),
value: 'playlists',
},
{
label: i18n.t('Favorites'),
value: 'favorites',
@ -651,8 +655,8 @@ export const ThemeConfigPanel = ({ bordered }: any) => {
value: 'collapse',
},
{
label: i18n.t('Playlists'),
value: 'playlists',
label: i18n.t('Playlist List'),
value: 'playlistList',
},
]}
searchable={false}

1
src/components/shared/setDefaultSettings.ts

@ -164,6 +164,7 @@ const setDefaultSettings = (force: boolean) => {
'config',
'collapse',
'playlists',
'playlistList',
]);
}

Loading…
Cancel
Save