mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Refactored and cleaned up Modal and friends

Browse source
This commit is contained in:
Alvaro 2022-09-29 16:40:09 -06:00 • committed by GitHub
parent f64426fbe0
commit 00a720faa9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
31 changed files with 853 additions and 787 deletions
Download patch file Download diff file Expand all files Collapse all files

1
ts/components/conversation/ContactModal.tsx
View file

@ -172,6 +172,7 @@ export const ContactModal = ({
hasXButton
i18n={i18n}
onClose={hideContactModal}
padded={false}
>
<div className="ContactModal">
<Avatar

40
ts/components/conversation/DeliveryIssueDialog.tsx
View file

@ -31,12 +31,34 @@ export function DeliveryIssueDialog(props: PropsType): React.ReactElement {
// Focus first button after initial render, restore focus on teardown
const [focusRef] = useRestoreFocus();
const footer = (
<>
<Button
onClick={learnMoreAboutDeliveryIssue}
size={ButtonSize.Medium}
variant={ButtonVariant.Secondary}
>
{i18n('DeliveryIssue--learnMore')}
</Button>
<Button
onClick={onClose}
ref={focusRef}
size={ButtonSize.Medium}
variant={ButtonVariant.Primary}
className="module-delivery-issue-dialog__close-button"
>
{i18n('Confirmation--confirm')}
</Button>
</>
);
return (
<Modal
modalName="DeliveryIssueDialog"
hasXButton={false}
onClose={onClose}
i18n={i18n}
modalFooter={footer}
>
<section>
<div className="module-delivery-issue-dialog__image">
@ -60,24 +82,6 @@ export function DeliveryIssueDialog(props: PropsType): React.ReactElement {
/>
</div>
</section>
<Modal.ButtonFooter>
<Button
onClick={learnMoreAboutDeliveryIssue}
size={ButtonSize.Medium}
variant={ButtonVariant.Secondary}
>
{i18n('DeliveryIssue--learnMore')}
</Button>
<Button
onClick={onClose}
ref={focusRef}
size={ButtonSize.Medium}
variant={ButtonVariant.Primary}
className="module-delivery-issue-dialog__close-button"
>
{i18n('Confirmation--confirm')}
</Button>
</Modal.ButtonFooter>
</Modal>
);
}

19
ts/components/conversation/conversation-details/ConversationNotificationsModal.tsx
View file

@ -47,11 +47,20 @@ export const ConversationNotificationsModal = ({
return (
<Modal
modalName="ConversationNotificationsModal"
hasStickyButtons
hasXButton
onClose={onClose}
i18n={i18n}
title={i18n('muteNotificationsTitle')}
modalFooter={
<>
<Button onClick={onClose} variant={ButtonVariant.Secondary}>
{i18n('cancel')}
</Button>
<Button onClick={onMuteChange} variant={ButtonVariant.Primary}>
{i18n('mute')}
</Button>
</>
}
>
{muteOptions
.filter(x => x.value > 0)
@ -67,14 +76,6 @@ export const ConversationNotificationsModal = ({
onChange={value => value && setMuteExpirationValue(option.value)}
/>
))}
<Modal.ButtonFooter>
<Button onClick={onClose} variant={ButtonVariant.Secondary}>
{i18n('cancel')}
</Button>
<Button onClick={onMuteChange} variant={ButtonVariant.Primary}>
{i18n('mute')}
</Button>
</Modal.ButtonFooter>
</Modal>
);
};

50
ts/components/conversation/conversation-details/EditConversationAttributesModal.tsx
View file

@ -155,6 +155,7 @@ export const EditConversationAttributesModal: FunctionComponent<PropsType> = ({
} else {
content = (
<form
id="edit-conversation-form"
onSubmit={onSubmit}
className="module-EditConversationAttributesModal"
>
@ -199,40 +200,43 @@ export const EditConversationAttributesModal: FunctionComponent<PropsType> = ({
{i18n('updateGroupAttributes__error-message')}
</div>
)}
<Modal.ButtonFooter>
<Button
disabled={isRequestActive}
onClick={onClose}
variant={ButtonVariant.Secondary}
>
{i18n('cancel')}
</Button>
<Button
type="submit"
variant={ButtonVariant.Primary}
disabled={!canSubmit}
>
{isRequestActive ? (
<Spinner size="20px" svgSize="small" direction="on-avatar" />
) : (
i18n('save')
)}
</Button>
</Modal.ButtonFooter>
</form>
);
}
const modalFooter = (
<>
<Button
disabled={isRequestActive}
onClick={onClose}
variant={ButtonVariant.Secondary}
>
{i18n('cancel')}
</Button>
<Button
type="submit"
form="edit-conversation-form"
variant={ButtonVariant.Primary}
disabled={!canSubmit}
>
{isRequestActive ? (
<Spinner size="20px" svgSize="small" direction="on-avatar" />
) : (
i18n('save')
)}
</Button>
</>
);
return (
<Modal
modalName="EditConversationAttributesModal"
hasStickyButtons
hasXButton
i18n={i18n}
onClose={onClose}
title={i18n('updateGroupAttributes__title')}
modalFooter={modalFooter}
>
{content}
</Modal>