mirror of
https://github.com/jeffvli/feishin.git
synced 2024-11-20 06:27:09 +01:00
Remove sidebar play button, increase fw for labels
This commit is contained in:
parent
196cb1bd48
commit
acb906aad9
@ -1,10 +1,8 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import { createPolymorphicComponent, Flex, FlexProps, Group } from '@mantine/core';
|
||||
import { RiPlayFill } from 'react-icons/ri';
|
||||
import type { LinkProps } from 'react-router-dom';
|
||||
import { Link } from 'react-router-dom';
|
||||
import styled, { css } from 'styled-components';
|
||||
import { Button } from '/@/renderer/components';
|
||||
import { textEllipsis } from '/@/renderer/styles';
|
||||
|
||||
interface ListItemProps extends FlexProps {
|
||||
@ -79,17 +77,19 @@ SidebarItem.defaultProps = {
|
||||
|
||||
const _PlaylistItemLink = styled(StyledItem)<LinkProps & { disabled?: boolean }>`
|
||||
display: block;
|
||||
width: 80%;
|
||||
padding: 0.3rem 0;
|
||||
overflow: hidden;
|
||||
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: opacity 0.2s ease-in-out;
|
||||
pointer-events: ${(props) => props.disabled && 'none'};
|
||||
${textEllipsis}
|
||||
|
||||
&:hover {
|
||||
color: var(--sidebar-fg-hover);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@ -110,13 +110,6 @@ export const PlaylistSidebarItem = ({
|
||||
<Group
|
||||
noWrap
|
||||
position="apart"
|
||||
sx={{
|
||||
'&:hover': {
|
||||
button: {
|
||||
display: 'block',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<PlaylistItemLink
|
||||
component={Link}
|
||||
@ -125,19 +118,6 @@ export const PlaylistSidebarItem = ({
|
||||
>
|
||||
{children}
|
||||
</PlaylistItemLink>
|
||||
<Flex
|
||||
align="center"
|
||||
justify="flex-end"
|
||||
>
|
||||
<Button
|
||||
compact
|
||||
sx={{ display: 'none' }}
|
||||
variant="filled"
|
||||
onClick={handlePlay}
|
||||
>
|
||||
<RiPlayFill />
|
||||
</Button>
|
||||
</Flex>
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
|
@ -199,7 +199,7 @@ export const Sidebar = () => {
|
||||
>
|
||||
<Accordion.Item value="library">
|
||||
<Accordion.Control>
|
||||
<Group>
|
||||
<Group fw="600">
|
||||
{location.pathname.includes('/library/') ? (
|
||||
<RiDatabaseFill size={15} />
|
||||
) : (
|
||||
@ -210,7 +210,7 @@ export const Sidebar = () => {
|
||||
</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
<SidebarItem to={AppRoute.LIBRARY_ALBUMS}>
|
||||
<Group>
|
||||
<Group fw="600">
|
||||
{location.pathname === AppRoute.LIBRARY_ALBUMS ? (
|
||||
<RiAlbumFill />
|
||||
) : (
|
||||
@ -220,7 +220,7 @@ export const Sidebar = () => {
|
||||
</Group>
|
||||
</SidebarItem>
|
||||
<SidebarItem to={AppRoute.LIBRARY_SONGS}>
|
||||
<Group>
|
||||
<Group fw="600">
|
||||
{location.pathname === AppRoute.LIBRARY_SONGS ? (
|
||||
<RiMusicFill />
|
||||
) : (
|
||||
@ -230,7 +230,7 @@ export const Sidebar = () => {
|
||||
</Group>
|
||||
</SidebarItem>
|
||||
<SidebarItem to={AppRoute.LIBRARY_ALBUMARTISTS}>
|
||||
<Group>
|
||||
<Group fw="600">
|
||||
{location.pathname === AppRoute.LIBRARY_ALBUMARTISTS ? (
|
||||
<RiUserVoiceFill />
|
||||
) : (
|
||||
@ -243,7 +243,7 @@ export const Sidebar = () => {
|
||||
disabled
|
||||
to={AppRoute.LIBRARY_FOLDERS}
|
||||
>
|
||||
<Group>
|
||||
<Group fw="600">
|
||||
<RiFlag2Line />
|
||||
Genres
|
||||
</Group>
|
||||
@ -252,7 +252,7 @@ export const Sidebar = () => {
|
||||
disabled
|
||||
to={AppRoute.LIBRARY_FOLDERS}
|
||||
>
|
||||
<Group>
|
||||
<Group fw="600">
|
||||
<RiFolder3Line />
|
||||
Folders
|
||||
</Group>
|
||||
|
Loading…
Reference in New Issue
Block a user