vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-16 21:50:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update various components

Browse Source
This commit is contained in:
jeffvli
2022-11-12 18:44:51 -08:00
parent 79fae63aaf
commit 8353640d05
8 changed files with 205 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/player/components/player-button.tsx
+17 -22
View File
@@ -34,42 +34,29 @@ const MotionWrapper = styled(motion.div)<MotionWrapperProps>`
const ButtonMainVariant = css` const ButtonMainVariant = css`
padding: 0.5rem; padding: 0.5rem;
background-color: var(--playerbar-btn-bg); background: var(--playerbar-btn-main-bg);
border-radius: 50%; border-radius: 50%;
svg { svg {
display: flex; display: flex;
fill: var(--playerbar-btn-fg); fill: var(--playerbar-btn-main-fg);
} }
&:focus-visible { &:focus-visible {
background: var(--playerbar-btn-bg-hover); background: var(--playerbar-btn-main-bg-hover);
} }
&:hover { &:hover {
background: var(--playerbar-btn-bg-hover); background: var(--playerbar-btn-main-bg-hover);
svg { svg {
fill: var(--playerbar-btn-fg-hover); fill: var(--playerbar-btn-main-fg-hover);
} }
} }
`; `;
const ButtonSecondaryVariant = css` const ButtonSecondaryVariant = css`
padding: 0.5rem; padding: 0.5rem;
svg {
display: flex;
fill: var(--playerbar-btn-bg);
stroke: var(--playerbar-btn-bg);
}
&:focus-visible {
svg {
fill: var(--playerbar-btn-bg-hover);
stroke: var(--playerbar-btn-bg-hover);
}
}
`; `;
const ButtonTertiaryVariant = css` const ButtonTertiaryVariant = css`
@@ -81,8 +68,8 @@ const ButtonTertiaryVariant = css`
&:focus-visible { &:focus-visible {
svg { svg {
fill: var(--playerbar-btn-bg-hover); fill: var(--playerbar-btn-fg-hover);
stroke: var(--playerbar-btn-bg-hover); stroke: var(--playerbar-btn-fg-hover);
} }
} }
`; `;
@@ -95,6 +82,7 @@ const StyledPlayerButton = styled(UnstyledButton)<StyledPlayerButtonProps>`
width: 100%; width: 100%;
padding: 0.5rem; padding: 0.5rem;
overflow: visible; overflow: visible;
background: var(--playerbar-btn-bg-hover);
all: unset; all: unset;
cursor: default; cursor: default;
@@ -103,6 +91,7 @@ const StyledPlayerButton = styled(UnstyledButton)<StyledPlayerButtonProps>`
} }
&:focus-visible { &:focus-visible {
background: var(--playerbar-btn-bg-hover);
outline: 1px var(--primary-color) solid; outline: 1px var(--primary-color) solid;
} }
@@ -111,12 +100,18 @@ const StyledPlayerButton = styled(UnstyledButton)<StyledPlayerButtonProps>`
} }
svg { svg {
fill: ${({ $isActive }) => $isActive && 'var(--primary-color)'}; display: flex;
fill: ${({ $isActive }) =>
$isActive ? 'var(--primary-color)' : 'var(--playerbar-btn-fg)'};
stroke: var(--playerbar-btn-fg);
} }
&:hover { &:hover {
background: var(--playerbar-btn-bg-hover);
svg { svg {
fill: ${({ $isActive }) => !$isActive && 'var(--playerbar-btn-bg-hover)'}; fill: ${({ $isActive }) =>
$isActive ? 'var(--primary-color)' : 'var(--playerbar-btn-fg-hover)'};
} }
} }
src/renderer/features/servers/components/server-list-item.tsx
+82 -27
View File
@@ -2,10 +2,16 @@ import { useMemo } from 'react';
import { Stack, Group, Divider } from '@mantine/core'; import { Stack, Group, Divider } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks'; import { useDisclosure } from '@mantine/hooks';
import { useQueryClient } from '@tanstack/react-query'; import { useQueryClient } from '@tanstack/react-query';
import { RiDeleteBin2Line, RiEdit2Fill } from 'react-icons/ri'; import { RiDeleteBin2Line, RiEdit2Fill, RiMore2Fill } from 'react-icons/ri';
import { queryKeys } from '@/renderer/api/query-keys'; import { queryKeys } from '@/renderer/api/query-keys';
import { Server, TaskType } from '@/renderer/api/types'; import { Server, TaskType } from '@/renderer/api/types';
import { Button, Switch, Text, toast } from '@/renderer/components'; import {
Button,
DropdownMenu,
Switch,
Text,
toast,
} from '@/renderer/components';
import { AddServerCredentialForm } from '@/renderer/features/servers/components/add-server-credential-form'; import { AddServerCredentialForm } from '@/renderer/features/servers/components/add-server-credential-form';
import { AddServerUrlForm } from '@/renderer/features/servers/components/add-server-url-form'; import { AddServerUrlForm } from '@/renderer/features/servers/components/add-server-url-form';
import { EditServerForm } from '@/renderer/features/servers/components/edit-server-form'; import { EditServerForm } from '@/renderer/features/servers/components/edit-server-form';
@@ -134,14 +140,26 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
const handleToggleFolder = (folderId: string, enabled: boolean) => { const handleToggleFolder = (folderId: string, enabled: boolean) => {
if (enabled) { if (enabled) {
return disableServerFolder.mutate({ return disableServerFolder.mutate(
query: { folderId, serverId: server.id }, {
}); query: { folderId, serverId: server.id },
},
{
onError: (err) =>
toast.error({ message: err?.response?.data?.error.message }),
}
);
} }
return enableServerFolder.mutate({ return enableServerFolder.mutate(
query: { folderId, serverId: server.id }, {
}); query: { folderId, serverId: server.id },
},
{
onError: (err) =>
toast.error({ message: err?.response?.data?.error.message }),
}
);
}; };
return ( return (
@@ -228,9 +246,23 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
} }
/> />
{serverPermission >= ServerPermission.ADMIN && ( {serverPermission >= ServerPermission.ADMIN && (
<Button compact variant="subtle"> <DropdownMenu position="right-start">
<RiDeleteBin2Line color="var(--danger-color)" /> <DropdownMenu.Target>
</Button> <Button compact variant="subtle">
<RiMore2Fill size={15} />
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<DropdownMenu.Item
disabled
rightSection={
<RiDeleteBin2Line color="var(--danger-color)" />
}
>
Delete
</DropdownMenu.Item>
</DropdownMenu.Dropdown>
</DropdownMenu>
)} )}
</> </>
</Group> </Group>
@@ -261,13 +293,25 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
) )
} }
/> />
<Button <DropdownMenu position="right-start">
compact <DropdownMenu.Target>
variant="subtle" <Button compact variant="subtle">
onClick={() => handleDeleteCredential(credential.id)} <RiMore2Fill size={15} />
> </Button>
<RiDeleteBin2Line color="var(--danger-color)" /> </DropdownMenu.Target>
</Button> <DropdownMenu.Dropdown>
<DropdownMenu.Item
rightSection={
<RiDeleteBin2Line color="var(--danger-color)" />
}
onClick={() =>
handleDeleteCredential(credential.id)
}
>
Delete
</DropdownMenu.Item>
</DropdownMenu.Dropdown>
</DropdownMenu>
</Group> </Group>
</Group> </Group>
))} ))}
@@ -275,7 +319,7 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
<Button <Button
compact compact
mt={10} mt={10}
variant="subtle" variant="default"
onClick={() => addCredentialHandlers.open()} onClick={() => addCredentialHandlers.open()}
> >
Add credential Add credential
@@ -307,13 +351,23 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
} }
/> />
{serverPermission >= ServerPermission.EDITOR && ( {serverPermission >= ServerPermission.EDITOR && (
<Button <DropdownMenu position="right-start">
compact <DropdownMenu.Target>
variant="subtle" <Button compact variant="subtle">
onClick={() => handleDeleteUrl(serverUrl.id)} <RiMore2Fill size={15} />
> </Button>
<RiDeleteBin2Line color="var(--danger-color)" /> </DropdownMenu.Target>
</Button> <DropdownMenu.Dropdown>
<DropdownMenu.Item
rightSection={
<RiDeleteBin2Line color="var(--danger-color)" />
}
onClick={() => handleDeleteUrl(serverUrl.id)}
>
Delete
</DropdownMenu.Item>
</DropdownMenu.Dropdown>
</DropdownMenu>
)} )}
</Group> </Group>
</Group> </Group>
@@ -323,7 +377,7 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
<Button <Button
compact compact
mt={10} mt={10}
variant="subtle" variant="default"
onClick={() => addUrlHandlers.open()} onClick={() => addUrlHandlers.open()}
> >
Add url Add url
@@ -349,6 +403,7 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
<Divider my="xl" /> <Divider my="xl" />
<Button <Button
compact compact
disabled
leftIcon={<RiDeleteBin2Line />} leftIcon={<RiDeleteBin2Line />}
size="xs" size="xs"
sx={{ sx={{
src/renderer/features/servers/components/server-list.tsx
+19 -9
View File
@@ -31,15 +31,25 @@ export const ServerList = () => {
return ( return (
<> <>
<Group mb={10} position="right"> <Group
<Button mb={10}
compact position="right"
disabled={!permissions.createServer} sx={{
variant="subtle" position: 'absolute',
onClick={handleAddServerModal} right: 45,
> transform: 'translateY(-35px)',
Add server }}
</Button> >
{permissions.isAdmin && (
<Button
autoFocus
compact
variant="default"
onClick={handleAddServerModal}
>
Add server
</Button>
)}
</Group> </Group>
<Accordion variant="separated"> <Accordion variant="separated">
{servers?.data?.map((s) => ( {servers?.data?.map((s) => (
src/renderer/features/settings/components/playback-tab.tsx
+2
View File
@@ -187,6 +187,7 @@ export const PlaybackTab = () => {
{ {
control: ( control: (
<Switch <Switch
aria-label="Toggle global media hotkeys"
defaultChecked={settings.globalMediaHotkeys} defaultChecked={settings.globalMediaHotkeys}
disabled={!isElectron()} disabled={!isElectron()}
onChange={(e) => { onChange={(e) => {
@@ -241,6 +242,7 @@ export const PlaybackTab = () => {
{ {
control: ( control: (
<Switch <Switch
aria-label="Toggle skip buttons"
defaultChecked={settings.skipButtons?.enabled} defaultChecked={settings.skipButtons?.enabled}
onChange={(e) => onChange={(e) =>
update({ update({
src/renderer/features/titlebar/components/activity-menu.tsx
+1 -1
View File
@@ -73,7 +73,7 @@ export const ActivityMenu = () => {
{isTaskRunning ? ( {isTaskRunning ? (
<StyledActivitySvg color="var(--primary-color)" size={15} /> <StyledActivitySvg color="var(--primary-color)" size={15} />
) : ( ) : (
<FiActivity size={15} /> <FiActivity color="var(--titlebar-fg)" size={15} />
)} )}
</Button> </Button>
</Popover.Target> </Popover.Target>
src/renderer/features/titlebar/components/app-menu.tsx
+3 -8
View File
@@ -92,13 +92,8 @@ export const AppMenu = () => {
return ( return (
<DropdownMenu withArrow withinPortal position="bottom" width={200}> <DropdownMenu withArrow withinPortal position="bottom" width={200}>
<DropdownMenu.Target> <DropdownMenu.Target>
<Button <Button px={5} size="xs" variant="subtle">
px={5} <RiMenu3Fill color="var(--titlebar-fg)" size={15} />
size="xs"
sx={{ color: 'var(--titlebar-fg)' }}
variant="subtle"
>
<RiMenu3Fill size={15} />
</Button> </Button>
</DropdownMenu.Target> </DropdownMenu.Target>
<DropdownMenu.Dropdown> <DropdownMenu.Dropdown>
@@ -138,7 +133,7 @@ export const AppMenu = () => {
<DropdownMenu.Item rightSection={<RiProfileLine />}> <DropdownMenu.Item rightSection={<RiProfileLine />}>
Edit profile Edit profile
</DropdownMenu.Item> </DropdownMenu.Item>
{permissions.manageUsers && ( {permissions.isAdmin && (
<DropdownMenu.Item <DropdownMenu.Item
rightSection={<RiUserAddLine />} rightSection={<RiUserAddLine />}
onClick={handleManageUsersModal} onClick={handleManageUsersModal}
src/renderer/features/titlebar/components/titlebar.tsx
+2 -5
View File
@@ -1,11 +1,9 @@
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import { Group } from '@mantine/core'; import { Group } from '@mantine/core';
import styled from 'styled-components'; import styled from 'styled-components';
import { Text } from '@/renderer/components';
import { ActivityMenu } from '@/renderer/features/titlebar/components/activity-menu'; import { ActivityMenu } from '@/renderer/features/titlebar/components/activity-menu';
import { AppMenu } from '@/renderer/features/titlebar/components/app-menu'; import { AppMenu } from '@/renderer/features/titlebar/components/app-menu';
import { useAuthStore } from '@/renderer/store'; import { useAuthStore } from '@/renderer/store';
import { Font } from '@/renderer/styles';
import { WindowControls } from '../../window-controls'; import { WindowControls } from '../../window-controls';
interface TitlebarProps { interface TitlebarProps {
@@ -20,6 +18,7 @@ const TitlebarContainer = styled.div`
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
height: 100%; height: 100%;
color: var(--titlebar-fg);
button { button {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
@@ -59,9 +58,7 @@ export const Titlebar = ({ children }: TitlebarProps) => {
<> <>
<TitlebarContainer> <TitlebarContainer>
<Left> <Left>
<Group> <Group>Feishin</Group>
<Text font={Font.POPPINS}>Feishin</Text>
</Group>
</Left> </Left>
<Center /> <Center />
<Right> <Right>
src/renderer/features/users/components/user-list.tsx
+79 -61
View File
@@ -1,11 +1,17 @@
import React from 'react';
import { Avatar, Group, Stack } from '@mantine/core'; import { Avatar, Group, Stack } from '@mantine/core';
import { openContextModal } from '@mantine/modals'; import { openContextModal } from '@mantine/modals';
import { RiAdminLine, RiDeleteBin2Line, RiEdit2Line } from 'react-icons/ri'; import {
RiAdminLine,
RiDeleteBin2Line,
RiEdit2Line,
RiMore2Fill,
} from 'react-icons/ri';
import { User } from '@/renderer/api/types'; import { User } from '@/renderer/api/types';
import { import {
Button, Button,
ContextModalVars, ContextModalVars,
Popover, DropdownMenu,
Text, Text,
toast, toast,
Tooltip, Tooltip,
@@ -74,75 +80,87 @@ export const UserList = () => {
return ( return (
<Stack> <Stack>
<Group mb={10} position="right"> <Group
<Button compact variant="default" onClick={handleAddUserModal}> mb={10}
position="right"
sx={{
position: 'absolute',
right: 45,
transform: 'translateY(-35px)',
}}
>
<Button
autoFocus
compact
variant="default"
onClick={handleAddUserModal}
>
Add user Add user
</Button> </Button>
</Group> </Group>
{users?.data?.map((u) => ( {users?.data?.map((u) => (
<Group <React.Fragment key={u.id}>
key={u.id} <Group
noWrap noWrap
position="apart" position="apart"
sx={{ sx={{
'&:hover': { '&:hover': {
background: 'rgba(125, 125, 125, 0.1)', background: 'rgba(125, 125, 125, 0.1)',
}, },
}} }}
> >
<Group> <Group>
<Avatar radius="xl" /> <Avatar radius="xl" />
<Text overflow="hidden"> <Stack spacing="xs">
{u.displayName ? u.displayName : u.username}{' '} <Text overflow="hidden">
{u.isAdmin && ( {u.username}
<Tooltip label="Admin"> {(u.isSuperAdmin || u.isAdmin) && (
<span> <Tooltip label={u.isSuperAdmin ? 'Super Admin' : 'Admin'}>
<RiAdminLine /> <span>
</span> <RiAdminLine />
</Tooltip> </span>
)} </Tooltip>
</Text> )}
</Group> </Text>
<Group> <Text $secondary size="xs">
<Button {u.displayName}
compact </Text>
disabled={!permissions.isAdmin} </Stack>
leftIcon={<RiEdit2Line />} </Group>
variant="subtle" <Group>
onClick={() => handleEditUserModal(u)} <Button
> compact
Edit disabled={!permissions.isAdmin}
</Button> leftIcon={<RiEdit2Line />}
<Popover position="bottom-start"> variant="subtle"
<Popover.Target> onClick={() => handleEditUserModal(u)}
<Button >
compact Edit
disabled={!permissions.isAdmin} </Button>
variant="subtle" <DropdownMenu position="right-start">
> <DropdownMenu.Target>
<RiDeleteBin2Line color="var(--danger-color)" size={15} />
</Button>
</Popover.Target>
<Popover.Dropdown>
<Group>
<Button <Button
compact compact
uppercase disabled={!permissions.isAdmin}
sx={{ variant="subtle"
'&:hover': { >
background: 'var(--danger-color)', <RiMore2Fill size={15} />
}, </Button>
background: 'var(--danger-color)', </DropdownMenu.Target>
}} <DropdownMenu.Dropdown>
<DropdownMenu.Item
rightSection={
<RiDeleteBin2Line color="var(--danger-color)" />
}
onClick={() => handleDeleteUser(u)} onClick={() => handleDeleteUser(u)}
> >
Delete Delete
</Button> </DropdownMenu.Item>
</Group> </DropdownMenu.Dropdown>
</Popover.Dropdown> </DropdownMenu>
</Popover> </Group>
</Group> </Group>
</Group> </React.Fragment>
))} ))}
</Stack> </Stack>
); );