matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

pl-fe: Allow pleroma-fe-like linear view

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-09-01 15:15:10 +02:00
parent f09ea01f9e
commit db3460eb04
8 changed files with 126 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx
View File

@ -21,7 +21,7 @@ interface MenuItem {
target?: React.HTMLAttributeAnchorTarget;
text: string;
to?: string;
type?: 'toggle';
type?: 'toggle' | 'radio';
items?: Array<Omit<MenuItem, 'items'>>;
}
@ -120,7 +120,7 @@ const DropdownMenuItem = ({ index, item, onClick, autoFocus, onSetTab }: IDropdo
>
{item.icon && <Icon src={item.icon} className='mr-3 size-5 flex-none rtl:ml-3 rtl:mr-0' />}
<div className={clsx('truncate', { 'text-xs': item.meta, 'text-base': !item.meta, 'mr-2': item.count || item.type === 'toggle' || item.items?.length })}>
<div className={clsx('truncate', { 'text-xs': item.meta, 'text-base': !item.meta, 'mr-2': item.count || item.type === 'toggle' || item.type === 'radio' || item.items?.length })}>
{item.meta ? (
<>
<div className='truncate text-base'>{item.text}</div>
@ -135,9 +135,9 @@ const DropdownMenuItem = ({ index, item, onClick, autoFocus, onSetTab }: IDropdo
</span>
) : null}
{item.type === 'toggle' && (
{(item.type === 'toggle' || item.type === 'radio') && (
<div className='ml-auto'>
<Toggle checked={item.checked} onChange={handleChange} />
<Toggle checked={item.checked} onChange={handleChange} radio={item.type === 'radio'} />
</div>
)}

30
packages/pl-fe/src/components/ui/toggle.tsx
View File

@ -3,10 +3,11 @@ import React, { useRef } from 'react';
interface IToggle extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'checked' | 'onChange' | 'required' | 'disabled'> {
size?: 'sm' | 'md';
radio?: boolean;
}
/** A glorified checkbox. */
const Toggle: React.FC<IToggle> = ({ id, size = 'md', name, checked = false, onChange, required, disabled }) => {
const Toggle: React.FC<IToggle> = ({ id, size = 'md', name, checked = false, onChange, required, disabled, radio }) => {
const input = useRef<HTMLInputElement>(null);
const handleClick: React.MouseEventHandler<HTMLButtonElement> = () => {
@ -16,7 +17,14 @@ const Toggle: React.FC<IToggle> = ({ id, size = 'md', name, checked = false, onC
return (
<button
className={clsx('flex-none rounded-full focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-gray-800 dark:ring-offset-0 dark:focus:ring-primary-500', {
className={clsx('flex-none rounded-full focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-gray-800 dark:ring-offset-0 dark:focus:ring-primary-500', radio ? {
'p-0.5 border-2': true,
'border-gray-500': !checked && !disabled,
'border-primary-600': checked && !disabled,
'border-gray-200': !checked && disabled,
'border-primary-200': checked && disabled,
'cursor-default': disabled,
} : {
'bg-gray-500': !checked && !disabled,
'bg-primary-600': checked && !disabled,
'bg-gray-200': !checked && disabled,
@ -28,12 +36,18 @@ const Toggle: React.FC<IToggle> = ({ id, size = 'md', name, checked = false, onC
onClick={handleClick}
type='button'
>
<div className={clsx('rounded-full bg-white transition-transform', {
'h-4.5 w-4.5': size === 'sm',
'translate-x-3.5 rtl:-translate-x-3.5': size === 'sm' && checked,
'h-6 w-6': size === 'md',
'translate-x-4 rtl:-translate-x-4': size === 'md' && checked,
})}
<div
className={radio ? clsx('rounded-full', {
'h-3 w-3': size === 'sm',
'h-4 w-4': size === 'md',
'bg-primary-600': checked && !disabled,
'bg-primary-200': checked && disabled,
}) : clsx('rounded-full bg-white transition-transform', {
'h-4.5 w-4.5': size === 'sm',
'translate-x-3.5 rtl:-translate-x-3.5': size === 'sm' && checked,
'h-6 w-6': size === 'md',
'translate-x-4 rtl:-translate-x-4': size === 'md' && checked,
})}
/>
<input