sforkowany z mirror/soapbox
Improve styles of ConfirmationModal, fix account deletion modal
rodzic
2eb08aced9
commit
06a0ca704c
|
@ -9,6 +9,8 @@ import AccountContainer from 'soapbox/containers/account_container';
|
||||||
import { isLocal } from 'soapbox/utils/accounts';
|
import { isLocal } from 'soapbox/utils/accounts';
|
||||||
|
|
||||||
import type { AppDispatch, RootState } from 'soapbox/store';
|
import type { AppDispatch, RootState } from 'soapbox/store';
|
||||||
|
import { Stack, Text } from 'soapbox/components/ui';
|
||||||
|
import OutlineBox from 'soapbox/components/outline-box';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
deactivateUserHeading: { id: 'confirmations.admin.deactivate_user.heading', defaultMessage: 'Deactivate @{acct}' },
|
deactivateUserHeading: { id: 'confirmations.admin.deactivate_user.heading', defaultMessage: 'Deactivate @{acct}' },
|
||||||
|
@ -43,10 +45,22 @@ const deactivateUserModal = (intl: IntlShape, accountId: string, afterConfirm =
|
||||||
const acct = state.accounts.get(accountId)!.acct;
|
const acct = state.accounts.get(accountId)!.acct;
|
||||||
const name = state.accounts.get(accountId)!.username;
|
const name = state.accounts.get(accountId)!.username;
|
||||||
|
|
||||||
|
const message = (
|
||||||
|
<Stack space={4}>
|
||||||
|
<OutlineBox>
|
||||||
|
<AccountContainer id={accountId} />
|
||||||
|
</OutlineBox>
|
||||||
|
|
||||||
|
<Text>
|
||||||
|
{intl.formatMessage(messages.deactivateUserPrompt, { acct })}
|
||||||
|
</Text>
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
|
||||||
dispatch(openModal('CONFIRM', {
|
dispatch(openModal('CONFIRM', {
|
||||||
icon: require('@tabler/icons/user-off.svg'),
|
icon: require('@tabler/icons/user-off.svg'),
|
||||||
heading: intl.formatMessage(messages.deactivateUserHeading, { acct }),
|
heading: intl.formatMessage(messages.deactivateUserHeading, { acct }),
|
||||||
message: intl.formatMessage(messages.deactivateUserPrompt, { acct }),
|
message,
|
||||||
confirm: intl.formatMessage(messages.deactivateUserConfirm, { name }),
|
confirm: intl.formatMessage(messages.deactivateUserConfirm, { name }),
|
||||||
onConfirm: () => {
|
onConfirm: () => {
|
||||||
dispatch(deactivateUsers([accountId])).then(() => {
|
dispatch(deactivateUsers([accountId])).then(() => {
|
||||||
|
@ -64,22 +78,21 @@ const deleteUserModal = (intl: IntlShape, accountId: string, afterConfirm = () =
|
||||||
const account = state.accounts.get(accountId)!;
|
const account = state.accounts.get(accountId)!;
|
||||||
const acct = account.acct;
|
const acct = account.acct;
|
||||||
const name = account.username;
|
const name = account.username;
|
||||||
const favicon = account.pleroma.get('favicon');
|
|
||||||
const local = isLocal(account);
|
const local = isLocal(account);
|
||||||
|
|
||||||
const message = (<>
|
const message = (
|
||||||
<AccountContainer id={accountId} />
|
<Stack space={4}>
|
||||||
{intl.formatMessage(messages.deleteUserPrompt, { acct })}
|
<OutlineBox>
|
||||||
</>);
|
<AccountContainer id={accountId} />
|
||||||
|
</OutlineBox>
|
||||||
|
|
||||||
const confirm = (<>
|
<Text>
|
||||||
{favicon &&
|
{intl.formatMessage(messages.deleteUserPrompt, { acct })}
|
||||||
<div className='submit__favicon'>
|
</Text>
|
||||||
<img src={favicon} alt='' />
|
</Stack>
|
||||||
</div>}
|
);
|
||||||
{intl.formatMessage(messages.deleteUserConfirm, { name })}
|
|
||||||
</>);
|
|
||||||
|
|
||||||
|
const confirm = intl.formatMessage(messages.deleteUserConfirm, { name });
|
||||||
const checkbox = local ? intl.formatMessage(messages.deleteLocalUserCheckbox) : false;
|
const checkbox = local ? intl.formatMessage(messages.deleteLocalUserCheckbox) : false;
|
||||||
|
|
||||||
dispatch(openModal('CONFIRM', {
|
dispatch(openModal('CONFIRM', {
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { FormattedMessage } from 'react-intl';
|
import { FormattedMessage } from 'react-intl';
|
||||||
|
|
||||||
import { Modal, Text } from 'soapbox/components/ui';
|
import List, { ListItem } from 'soapbox/components/list';
|
||||||
import { SimpleForm, FieldsGroup, Checkbox } from 'soapbox/features/forms';
|
import { Modal, Stack, Text, Toggle } from 'soapbox/components/ui';
|
||||||
|
|
||||||
interface IConfirmationModal {
|
interface IConfirmationModal {
|
||||||
heading: React.ReactNode,
|
heading: React.ReactNode,
|
||||||
|
@ -60,23 +60,23 @@ const ConfirmationModal: React.FC<IConfirmationModal> = ({
|
||||||
secondaryText={secondary}
|
secondaryText={secondary}
|
||||||
secondaryAction={onSecondary && handleSecondary}
|
secondaryAction={onSecondary && handleSecondary}
|
||||||
>
|
>
|
||||||
<Text>
|
<Stack space={4}>
|
||||||
{message}
|
<Text>
|
||||||
</Text>
|
{message}
|
||||||
|
</Text>
|
||||||
|
|
||||||
<div className='mt-2'>
|
{checkbox && (
|
||||||
{checkbox && <div className='confirmation-modal__checkbox'>
|
<List>
|
||||||
<SimpleForm>
|
<ListItem label={checkbox}>
|
||||||
<FieldsGroup>
|
<Toggle
|
||||||
<Checkbox
|
|
||||||
onChange={handleCheckboxChange}
|
|
||||||
label={checkbox}
|
|
||||||
checked={checked}
|
checked={checked}
|
||||||
|
onChange={handleCheckboxChange}
|
||||||
|
required
|
||||||
/>
|
/>
|
||||||
</FieldsGroup>
|
</ListItem>
|
||||||
</SimpleForm>
|
</List>
|
||||||
</div>}
|
)}
|
||||||
</div>
|
</Stack>
|
||||||
</Modal>
|
</Modal>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -331,14 +331,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.confirmation-modal__checkbox {
|
|
||||||
padding: 0 30px;
|
|
||||||
|
|
||||||
.simple_form {
|
|
||||||
margin-top: -14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.reply-mentions-modal__accounts {
|
.reply-mentions-modal__accounts {
|
||||||
display: block;
|
display: block;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
Ładowanie…
Reference in New Issue