ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dialogs: Draw buttons in one row (#2318)

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-01-24 00:17:50 +01:00
parent 0699f1388e
commit 38535ee905
12 changed files with 85 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/calls/group/GroupCall.tsx
View File

@ -390,12 +390,14 @@ const GroupCall: FC<OwnProps & StateProps> = ({
onCheck={setShouldEndGroupCall}
/>
)}
<Button isText className="confirm-dialog-button" onClick={handleLeaveGroupCall}>
{lang(isEndGroupCallModal ? 'VoipGroupEnd' : 'VoipGroupLeave')}
</Button>
<Button isText className="confirm-dialog-button" onClick={handleCloseConfirmLeaveModal}>
{lang('Cancel')}
</Button>
<div className="dialog-buttons">
<Button isText className="confirm-dialog-button" onClick={handleLeaveGroupCall}>
{lang(isEndGroupCallModal ? 'VoipGroupEnd' : 'VoipGroupLeave')}
</Button>
<Button isText className="confirm-dialog-button" onClick={handleCloseConfirmLeaveModal}>
{lang('Cancel')}
</Button>
</div>
</Modal>
</Modal>
);

48
src/components/common/DeleteChatModal.tsx
View File

@ -192,30 +192,32 @@ const DeleteChatModal: FC<OwnProps & StateProps> = ({
onCloseAnimationEnd={onCloseAnimationEnd}
>
{renderContent()}
{isBot && (
<Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteAndStop}>
{lang('DeleteAndStop')}
<div className="dialog-buttons-column">
{isBot && (
<Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteAndStop}>
{lang('DeleteAndStop')}
</Button>
)}
{canDeleteForAll && (
<Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteForAll}>
{contactName ? renderText(lang('ChatList.DeleteForEveryone', contactName)) : lang('DeleteForAll')}
</Button>
)}
{!isPrivateChat && chat.isCreator && (
<Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteChat}>
{lang('DeleteForAll')}
</Button>
)}
<Button
color="danger"
className="confirm-dialog-button"
isText
onClick={isPrivateChat ? handleDeleteChat : handleLeaveChat}
>
{lang(renderActionText())}
</Button>
)}
{canDeleteForAll && (
<Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteForAll}>
{contactName ? renderText(lang('ChatList.DeleteForEveryone', contactName)) : lang('DeleteForAll')}
</Button>
)}
{!isPrivateChat && chat.isCreator && (
<Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteChat}>
{lang('DeleteForAll')}
</Button>
)}
<Button
color="danger"
className="confirm-dialog-button"
isText
onClick={isPrivateChat ? handleDeleteChat : handleLeaveChat}
>
{lang(renderActionText())}
</Button>
<Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
<Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
</div>
</Modal>
);
};

20
src/components/common/DeleteMessageModal.tsx
View File

@ -99,16 +99,18 @@ const DeleteMessageModal: FC<OwnProps & StateProps> = ({
{willDeleteForAll && (
<p>{lang('lng_delete_for_everyone_hint', 1, 'i')}</p>
)}
{canDeleteForAll && (
<Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteMessageForAll}>
{contactName && renderText(lang('Conversation.DeleteMessagesFor', contactName))}
{!contactName && lang('Conversation.DeleteMessagesForEveryone')}
<div className={canDeleteForAll ? 'dialog-buttons-column' : 'dialog-buttons'}>
{canDeleteForAll && (
<Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteMessageForAll}>
{contactName && renderText(lang('Conversation.DeleteMessagesFor', contactName))}
{!contactName && lang('Conversation.DeleteMessagesForEveryone')}
</Button>
)}
<Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteMessageForSelf}>
{lang(canDeleteForAll ? 'ChatList.DeleteForCurrentUser' : 'Delete')}
</Button>
)}
<Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteMessageForSelf}>
{lang(canDeleteForAll ? 'ChatList.DeleteForCurrentUser' : 'Delete')}
</Button>
<Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
<Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
</div>
</Modal>
);
};

12
src/components/common/ReportModal.tsx
View File

@ -113,7 +113,7 @@ const ReportModal: FC<OwnProps> = ({
onClose={onClose}
onEnter={isOpen ? handleReport : undefined}
onCloseAnimationEnd={onCloseAnimationEnd}
className="report"
className="narrow"
title={title}
>
<RadioGroup
@ -127,10 +127,12 @@ const ReportModal: FC<OwnProps> = ({
value={description}
onChange={handleDescriptionChange}
/>
<Button color="danger" className="confirm-dialog-button" isText onClick={handleReport}>
{lang('lng_report_button')}
</Button>
<Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
<div className="dialog-buttons">
<Button color="danger" className="confirm-dialog-button" isText onClick={handleReport}>
{lang('lng_report_button')}
</Button>
<Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
</div>
</Modal>
);
};

1
src/components/left/settings/SettingsActiveSessions.tsx
View File

@ -247,6 +247,7 @@ const SettingsActiveSessions: FC<OwnProps & StateProps> = ({
confirmLabel={lang('TerminateAllSessions')}
confirmHandler={handleTerminateAllSessions}
confirmIsDestructive
areButtonsInColumn
/>
)}
<SettingsActiveSession isOpen={isModalOpen} hash={openedSessionHash} onClose={handleCloseSessionModal} />

1
src/components/main/AttachBotInstallModal.tsx
View File

@ -46,7 +46,6 @@ const AttachBotInstallModal: FC<OwnProps> = ({
<ConfirmDialog
isOpen={Boolean(bot)}
onClose={cancelAttachBotInstall}
isButtonsInOneRow
title={renderingBot?.shortName}
confirmHandler={handleConfirm}
>

1
src/components/middle/ChatReportPanel.tsx
View File

@ -151,7 +151,6 @@ const ChatReportPanel: FC<OwnProps & StateProps> = ({
text={user
? lang('UserInfo.BlockConfirmationTitle', getUserFullName(user))
: lang('Chat.Confirm.ReportSpam.Channel')}
isButtonsInOneRow
confirmIsDestructive
confirmLabel={lang('Block')}
confirmHandler={user ? handleConfirmBlock : handleChatReportSpam}

22
src/components/middle/DeleteSelectedMessageModal.tsx
View File

@ -92,17 +92,19 @@ const DeleteSelectedMessageModal: FC<OwnProps & StateProps> = ({
{willDeleteForAll && (
<p>This will delete them for everyone in this chat.</p>
)}
{canDeleteForAll && (
<Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteMessageForAll}>
{contactName
? renderText(lang('ChatList.DeleteForEveryone', contactName))
: lang('Conversation.DeleteMessagesForEveryone')}
<div className={canDeleteForAll ? 'dialog-buttons-column' : 'dialog-buttons'}>
{canDeleteForAll && (
<Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteMessageForAll}>
{contactName
? renderText(lang('ChatList.DeleteForEveryone', contactName))
: lang('Conversation.DeleteMessagesForEveryone')}
</Button>
)}
<Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteMessageForSelf}>
{lang(canDeleteForAll ? 'ChatList.DeleteForCurrentUser' : 'Delete')}
</Button>
)}
<Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteMessageForSelf}>
{lang(canDeleteForAll ? 'ChatList.DeleteForCurrentUser' : 'Delete')}
</Button>
<Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
<Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
</div>
</Modal>
);
};

19
src/components/right/DeleteMemberModal.tsx
View File

@ -9,8 +9,7 @@ import { getUserFirstOrLastName } from '../../global/helpers';
import renderText from '../common/helpers/renderText';
import useLang from '../../hooks/useLang';
import Modal from '../ui/Modal';
import Button from '../ui/Button';
import ConfirmDialog from '../ui/ConfirmDialog';
export type OwnProps = {
isOpen: boolean;
@ -44,19 +43,15 @@ const DeleteMemberModal: FC<OwnProps & StateProps> = ({
}
return (
<Modal
<ConfirmDialog
isOpen={isOpen}
onClose={onClose}
onEnter={handleDeleteChatMember}
className="delete"
title={lang('GroupRemoved.Remove')}
>
<p>{renderText(lang('PeerInfo.Confirm.RemovePeer', contactName))}</p>
<Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteChatMember}>
{lang('lng_box_remove')}
</Button>
<Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
</Modal>
textParts={renderText(lang('PeerInfo.Confirm.RemovePeer', contactName))}
confirmLabel={lang('lng_box_remove')}
confirmHandler={handleDeleteChatMember}
confirmIsDestructive
/>
);
};

1
src/components/right/management/ManageDiscussion.tsx
View File

@ -242,7 +242,6 @@ const ManageDiscussion: FC<OwnProps & StateProps> = ({
textParts={renderLinkGroupConfirmText()}
confirmLabel={lang('DiscussionLinkGroup')}
confirmHandler={handleLinkGroupSessions}
isButtonsInOneRow
/>
</div>
);

10
src/components/ui/ConfirmDialog.tsx
View File

@ -20,7 +20,7 @@ type OwnProps = {
confirmLabel?: string;
confirmHandler: () => void;
confirmIsDestructive?: boolean;
isButtonsInOneRow?: boolean;
areButtonsInColumn?: boolean;
children?: React.ReactNode;
};
@ -35,7 +35,7 @@ const ConfirmDialog: FC<OwnProps> = ({
confirmLabel = 'Confirm',
confirmHandler,
confirmIsDestructive,
isButtonsInOneRow,
areButtonsInColumn,
children,
}) => {
const lang = useLang();
@ -62,7 +62,11 @@ const ConfirmDialog: FC<OwnProps> = ({
<p>{textPart}</p>
))}
{textParts || children}
<div className={isButtonsInOneRow ? 'dialog-buttons mt-2' : ''} ref={containerRef} onKeyDown={handleKeyDown}>
<div
className={areButtonsInColumn ? 'dialog-buttons-column' : 'dialog-buttons mt-2'}
ref={containerRef}
onKeyDown={handleKeyDown}
>
<Button
className="confirm-dialog-button"
isText

13
src/components/ui/Modal.scss
View File

@ -28,12 +28,6 @@
}
}
&.report {
.modal-dialog {
max-width: 15rem;
}
}
.modal-container {
position: fixed;
top: 0;
@ -177,12 +171,19 @@
display: flex;
flex-direction: row-reverse;
justify-content: flex-start;
flex-wrap: wrap;
.confirm-dialog-button + .confirm-dialog-button {
margin-left: 1rem;
}
}
.dialog-buttons-column {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.dialog-checkbox {
margin: 1rem 0;
}