pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remove sidebar play button, increase fw for labels

Browse source
This commit is contained in:
jeffvli 2023-01-03 01:48:07 -08:00
parent 196cb1bd48
commit acb906aad9
2 changed files with 10 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/renderer/features/sidebar/components/sidebar-item.tsx
View file

@ -1,10 +1,8 @@
import type { ReactNode } from 'react'; import type { ReactNode } from 'react';
import { createPolymorphicComponent, Flex, FlexProps, Group } from '@mantine/core'; import { createPolymorphicComponent, Flex, FlexProps, Group } from '@mantine/core';
import { RiPlayFill } from 'react-icons/ri';
import type { LinkProps } from 'react-router-dom'; import type { LinkProps } from 'react-router-dom';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import styled, { css } from 'styled-components'; import styled, { css } from 'styled-components';
import { Button } from '/@/renderer/components';
import { textEllipsis } from '/@/renderer/styles'; import { textEllipsis } from '/@/renderer/styles';
interface ListItemProps extends FlexProps { interface ListItemProps extends FlexProps {
@ -79,17 +77,19 @@ SidebarItem.defaultProps = {
const _PlaylistItemLink = styled(StyledItem)<LinkProps & { disabled?: boolean }>` const _PlaylistItemLink = styled(StyledItem)<LinkProps & { disabled?: boolean }>`
display: block; display: block;
width: 80%;
padding: 0.3rem 0; padding: 0.3rem 0;
overflow: hidden; overflow: hidden;
color: var(--sidebar-fg); color: var(--sidebar-fg);
opacity: ${(props) => props.disabled && 0.6}; cursor: default;
opacity: ${(props) => (props.disabled ? 0.6 : 0.8)};
transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
pointer-events: ${(props) => props.disabled && 'none'}; pointer-events: ${(props) => props.disabled && 'none'};
${textEllipsis} ${textEllipsis}
&:hover { &:hover {
color: var(--sidebar-fg-hover); color: var(--sidebar-fg-hover);
opacity: 1;
} }
&:focus-visible { &:focus-visible {
@ -110,13 +110,6 @@ export const PlaylistSidebarItem = ({
<Group <Group
noWrap noWrap
position="apart" position="apart"
sx={{
'&:hover': {
button: {
display: 'block',
},
},
}}
> >
<PlaylistItemLink <PlaylistItemLink
component={Link} component={Link}
@ -125,19 +118,6 @@ export const PlaylistSidebarItem = ({
> >
{children} {children}
</PlaylistItemLink> </PlaylistItemLink>
<Flex
align="center"
justify="flex-end"
>
<Button
compact
sx={{ display: 'none' }}
variant="filled"
onClick={handlePlay}
>
<RiPlayFill />
</Button>
</Flex>
</Group> </Group>
); );
} }

12
src/renderer/features/sidebar/components/sidebar.tsx
View file

@ -199,7 +199,7 @@ export const Sidebar = () => {
> >
<Accordion.Item value="library"> <Accordion.Item value="library">
<Accordion.Control> <Accordion.Control>
<Group> <Group fw="600">
{location.pathname.includes('/library/') ? ( {location.pathname.includes('/library/') ? (
<RiDatabaseFill size={15} /> <RiDatabaseFill size={15} />
) : ( ) : (
@ -210,7 +210,7 @@ export const Sidebar = () => {
</Accordion.Control> </Accordion.Control>
<Accordion.Panel> <Accordion.Panel>
<SidebarItem to={AppRoute.LIBRARY_ALBUMS}> <SidebarItem to={AppRoute.LIBRARY_ALBUMS}>
<Group> <Group fw="600">
{location.pathname === AppRoute.LIBRARY_ALBUMS ? ( {location.pathname === AppRoute.LIBRARY_ALBUMS ? (
<RiAlbumFill /> <RiAlbumFill />
) : ( ) : (
@ -220,7 +220,7 @@ export const Sidebar = () => {
</Group> </Group>
</SidebarItem> </SidebarItem>
<SidebarItem to={AppRoute.LIBRARY_SONGS}> <SidebarItem to={AppRoute.LIBRARY_SONGS}>
<Group> <Group fw="600">
{location.pathname === AppRoute.LIBRARY_SONGS ? ( {location.pathname === AppRoute.LIBRARY_SONGS ? (
<RiMusicFill /> <RiMusicFill />
) : ( ) : (
@ -230,7 +230,7 @@ export const Sidebar = () => {
</Group> </Group>
</SidebarItem> </SidebarItem>
<SidebarItem to={AppRoute.LIBRARY_ALBUMARTISTS}> <SidebarItem to={AppRoute.LIBRARY_ALBUMARTISTS}>
<Group> <Group fw="600">
{location.pathname === AppRoute.LIBRARY_ALBUMARTISTS ? ( {location.pathname === AppRoute.LIBRARY_ALBUMARTISTS ? (
<RiUserVoiceFill /> <RiUserVoiceFill />
) : ( ) : (
@ -243,7 +243,7 @@ export const Sidebar = () => {
disabled disabled
to={AppRoute.LIBRARY_FOLDERS} to={AppRoute.LIBRARY_FOLDERS}
> >
<Group> <Group fw="600">
<RiFlag2Line /> <RiFlag2Line />
Genres Genres
</Group> </Group>
@ -252,7 +252,7 @@ export const Sidebar = () => {
disabled disabled
to={AppRoute.LIBRARY_FOLDERS} to={AppRoute.LIBRARY_FOLDERS}
> >
<Group> <Group fw="600">
<RiFolder3Line /> <RiFolder3Line />
Folders Folders
</Group> </Group>