diff --git a/ts/components/dialog/EditProfileDialog.tsx b/ts/components/dialog/EditProfileDialog.tsx index 788eb2964..1521729da 100644 --- a/ts/components/dialog/EditProfileDialog.tsx +++ b/ts/components/dialog/EditProfileDialog.tsx @@ -1,4 +1,4 @@ -import React, { ChangeEvent } from 'react'; +import React, { ChangeEvent, MouseEvent } from 'react'; import { QRCode } from 'react-qr-svg'; import { Avatar, AvatarSize } from '../avatar/Avatar'; @@ -21,29 +21,45 @@ import { sanitizeSessionUsername } from '../../session/utils/String'; import { setLastProfileUpdateTimestamp } from '../../util/storage'; import { ConversationTypeEnum } from '../../models/conversationAttributes'; import { MAX_USERNAME_BYTES } from '../../session/constants'; +import styled from 'styled-components'; +import { saveQRCode } from '../../util/saveQRCode'; -interface State { - profileName: string; - updatedProfileName: string; - oldAvatarPath: string; - newAvatarObjectUrl: string | null; - mode: 'default' | 'edit' | 'qr'; - loading: boolean; -} +const handleSaveQRCode = (event: MouseEvent) => { + event.preventDefault(); + saveQRCode('session-id', '220px', '220px', 'var(--white-color)', 'var(--black-color)'); +}; + +const StyledQRView = styled.div` + cursor: pointer; +`; const QRView = ({ sessionID }: { sessionID: string }) => { return ( -
- {unreadCount > CONVERSATION.MAX_UNREAD_COUNT ? `${CONVERSATION.MAX_UNREAD_COUNT}+` : unreadCount} + {unreadCount > CONVERSATION.MAX_UNREAD_COUNT + ? `${CONVERSATION.MAX_UNREAD_COUNT}+` + : unreadCount}
); } diff --git a/ts/util/saveQRCode.ts b/ts/util/saveQRCode.ts new file mode 100644 index 000000000..785a9f315 --- /dev/null +++ b/ts/util/saveQRCode.ts @@ -0,0 +1,29 @@ +import { saveURLAsFile } from './saveURLAsFile'; + +export function saveQRCode( + filename: string, + width: string, + height: string, + backgroundColor: string, + foregroundColor: string +): void { + const qrSVG = document.querySelector('.qr-image svg'); + if (qrSVG) { + // tslint:disable-next-line: no-http-string + qrSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); + qrSVG.setAttribute('width', width); + qrSVG.setAttribute('height', height); + let content = qrSVG.outerHTML; + content = content.replaceAll(backgroundColor, 'white'); + content = content.replaceAll(foregroundColor, 'black'); + const file = new Blob([content], { type: 'text/plain' }); + const url = URL.createObjectURL(file); + saveURLAsFile({ + filename: `${filename}-${new Date().toISOString()}.svg`, + url, + document, + }); + } else { + window.log.info('[saveQRCode] QR code not found'); + } +}