mirror
/
soapbox
kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
1
0
Forkuj 1
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Fix action-modal

fix-error-messages
danidfra 2024-11-04 21:41:18 -03:00
rodzic 9c1d5260b4
commit ada9e53ff2
1 zmienionych plików z 10 dodań i 6 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

16
src/features/ui/components/modals/actions-modal.tsx
Wyświetl plik

@ -3,8 +3,8 @@ import React from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { spring } from 'react-motion'; import { spring } from 'react-motion';
import Icon from 'soapbox/components/icon';
import { HStack } from 'soapbox/components/ui'; import { HStack } from 'soapbox/components/ui';
import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
import ReplyIndicator from 'soapbox/features/compose/components/reply-indicator'; import ReplyIndicator from 'soapbox/features/compose/components/reply-indicator';
import Motion from '../../util/optional-motion'; import Motion from '../../util/optional-motion';
@ -36,10 +36,10 @@ const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClo
{...compProps} {...compProps}
space={2.5} space={2.5}
data-index={i} data-index={i}
className={clsx('w-full', { active, 'text-danger-600 dark:text-danger-400': destructive })} className={clsx('flex w-full items-center px-4 py-3 text-left text-gray-700 no-underline hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800 dark:focus:bg-primary-800', { active, 'text-danger-600 dark:text-danger-400': destructive })}
element={Comp} element={Comp}
> >
{icon && <Icon title={text} src={icon} role='presentation' tabIndex={-1} />} {icon && <SvgIcon title={text} className='size-6 min-w-5 stroke-[1.5]' src={icon} role='presentation' tabIndex={-1} />}
<div> <div>
<div className={clsx({ 'font-medium': !!meta })}>{text}</div> <div className={clsx({ 'font-medium': !!meta })}>{text}</div>
<div>{meta}</div> <div>{meta}</div>
@ -52,18 +52,22 @@ const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClo
return ( return (
<Motion defaultStyle={{ top: 100 }} style={{ top: spring(0) }}> <Motion defaultStyle={{ top: 100 }} style={{ top: spring(0) }}>
{({ top }) => ( {({ top }) => (
<div className='pointer-events-auto relative z-[9999] m-auto flex max-h-[calc(100vh-3rem)] w-full max-w-lg flex-col overflow-hidden rounded-2xl bg-white text-gray-400 shadow-xl black:bg-black dark:bg-gray-900' style={{ top: `${top}%` }}> <div className='pointer-events-auto relative z-[9999] m-auto flex max-h-[calc(100vh-3rem)] w-full max-w-lg flex-col overflow-hidden rounded-2xl bg-white text-gray-400 shadow-xl black:bg-black dark:bg-gray-900' style={{ top: `${top}%` }}>
{status && ( {status && (
<ReplyIndicator className='max-h-[300px] overflow-y-auto rounded-b-none' status={status} hideActions /> <ReplyIndicator className='max-h-[300px] overflow-y-auto rounded-b-none' status={status} hideActions />
)} )}
<ul className={clsx({ 'max-h-[calc(80vh-75px)]': !!status }, 'my-2 shrink-0 overflow-y-auto')}> <ul className={clsx({ ' max-h-[calc(80vh-75px)]': !!status }, 'my-2 max-h-[calc(100vh-147px)] shrink-0 overflow-y-auto')}>
{actions && actions.map(renderAction)} {actions && actions.map(renderAction)}
<li className='m-2 block h-px bg-gray-200 black:bg-gray-800 dark:bg-gray-600' /> <li className='m-2 block h-px bg-gray-200 black:bg-gray-800 dark:bg-gray-600' />
<li> <li>
<button type='button' className='w-full text-center text-gray-700 hover:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800' onClick={onClose}> <button
type='button'
className='flex w-full items-center justify-center px-4 py-3 text-left text-gray-700 no-underline hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800 dark:focus:bg-primary-800'
onClick={onClose}
>
<FormattedMessage id='lightbox.close' defaultMessage='Close' /> <FormattedMessage id='lightbox.close' defaultMessage='Close' />
</button> </button>
</li> </li>