Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix font weights, update actions modal #669

Merged
merged 2 commits into from
Nov 1, 2023
Merged

Fix font weights, update actions modal #669

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2b95bb3
Update actions modal
harshithmohan Oct 25, 2023
b35a238
Fix the default font weight
harshithmohan Oct 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 31 additions & 40 deletions src/components/Dialogs/ActionsModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React, { useMemo, useState } from 'react';
import AnimateHeight from 'react-animate-height';
import { mdiInformationOutline, mdiPlayCircleOutline } from '@mdi/js';
import { mdiPlayCircleOutline } from '@mdi/js';
import { Icon } from '@mdi/react';
import cx from 'classnames';
import { map } from 'lodash';
Expand All @@ -17,10 +16,10 @@ const actions = {
import: {
title: 'Import',
data: [
'run-import',
'remove-missing-files-mylist',
'remove-missing-files',
'import-new-files',
'run-import',
],
},
anidb: {
Expand Down Expand Up @@ -89,7 +88,7 @@ type Props = {
const Action = ({ actionKey }: { actionKey: string }) => {
const [runActionTrigger] = useRunActionMutation();

const runAction = async (name: string, action) => {
const runAction = async (name: string, action: string) => {
try {
await runActionTrigger(action);
toast.success(`Running action "${name}"`);
Expand All @@ -100,33 +99,20 @@ const Action = ({ actionKey }: { actionKey: string }) => {
}
};

const [showInfo, setShowInfo] = useState(false);

const action = useMemo(() => quickActions[actionKey], [actionKey]);
const { functionName, info, name } = action;
const { functionName, name } = action;

return (
<TransitionDiv>
<div className="flex justify-between gap-x-3">
<TransitionDiv className="flex flex-col gap-y-2">
<div className="flex justify-between">
{name}
<div className="flex gap-x-2.5">
<Button onClick={() => setShowInfo(prev => !prev)} className="text-panel-text-primary">
<Icon path={mdiInformationOutline} size={1} />
</Button>
<Button onClick={() => runAction(name, functionName)} className="text-panel-text-primary">
<Icon path={mdiPlayCircleOutline} size={1} />
</Button>
</div>
<Button onClick={() => runAction(name, functionName)} className="text-panel-icon-action">
<Icon path={mdiPlayCircleOutline} size={1} />
</Button>
</div>
<div className="flex text-sm text-panel-text opacity-65">
{quickActions[actionKey].info}
</div>
<AnimateHeight height={showInfo ? 'auto' : 0}>
<div className="mt-3 flex gap-x-2 rounded-md border border-panel-border bg-panel-background-alt px-4 py-2">
{/* Icon size reduces if not put in a div */}
<div className="mt-0.5">
<Icon path={mdiInformationOutline} size={0.8333} />
</div>
{info}
</div>
</AnimateHeight>
</TransitionDiv>
);
};
Expand All @@ -138,23 +124,28 @@ function ActionsModal({ onClose, show }: Props) {
<ModalPanel
show={show}
onRequestClose={onClose}
title="Actions"
noPadding
>
<div className="flex">
<div className="flex min-w-[8rem] flex-col gap-y-4 border-r-2 border-panel-border">
{map(actions, (value, key) => (
<div
className={cx('font-semibold cursor-pointer', activeTab === key && 'text-panel-text-primary')}
key={key}
onClick={() => setActiveTab(key)}
>
{value.title}
</div>
))}
<div className="flex h-[26.75rem]">
<div className="flex shrink-0 flex-col gap-y-8 border-r border-panel-border bg-panel-background-alt p-8 font-semibold">
<div className="text-xl">Actions</div>
<div className="flex flex-col gap-y-4">
{map(actions, (value, key) => (
<div
className={cx('cursor-pointer', activeTab === key && 'text-panel-text-primary')}
key={key}
onClick={() => setActiveTab(key)}
>
{value.title}
</div>
))}
</div>
</div>

<div className="flex grow flex-col gap-y-2 pl-8">
{actions[activeTab].data.map(key => <Action actionKey={key} key={key} />)}
<div className="flex grow p-8 pr-6">
<div className="scroll-gutter flex grow flex-col gap-y-4 overflow-y-auto pr-2">
{actions[activeTab].data.map((key: string) => <Action actionKey={key} key={key} />)}
</div>
</div>
</div>
</ModalPanel>
Expand Down
9 changes: 6 additions & 3 deletions src/components/Panels/ModalPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@ import cx from 'classnames';
type Props = {
children: React.ReactNode;
show: boolean;
title: React.ReactNode;
title?: React.ReactNode;
size?: 'sm' | 'md' | 'lg';
className?: string;
noPadding?: boolean;
onRequestClose?: () => void;
onAfterOpen?: () => void;
};
Expand All @@ -22,6 +23,7 @@ function ModalPanel(props: Props) {
const {
children,
className,
noPadding,
onAfterOpen,
onRequestClose,
show,
Expand All @@ -44,13 +46,14 @@ function ModalPanel(props: Props) {
<div className="flex h-full w-full items-center justify-center" onClick={onRequestClose}>
<div
className={cx(
'flex max-h-[66%] flex-col gap-y-8 rounded-md border border-panel-border bg-panel-background p-8 drop-shadow-lg',
'flex max-h-[66%] flex-col gap-y-8 rounded-md border border-panel-border bg-panel-background drop-shadow-lg',
!noPadding && 'p-8',
sizeClass[size ?? 'md'],
className,
)}
onClick={e => e.stopPropagation()}
>
<div className="text-xl font-semibold">{title}</div>
{title && <div className="text-xl font-semibold">{title}</div>}
<div className="flex flex-col gap-y-8">
{children}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/css/common.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ input[type='range']:focus::-moz-range-thumb {
body {
background-color: theme('colors.panel-background-alt');
color: theme('colors.panel-text');
font-weight: 400;
font-weight: 350;
}

::-webkit-scrollbar {
Expand Down
2 changes: 1 addition & 1 deletion tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ module.exports = {
fontWeight: {
extralight: 100,
light: 200,
normal: 300,
normal: 350,
medium: 400,
semibold: 500,
bold: 600,
Expand Down