mirror of
https://github.com/usememos/memos.git
synced 2025-06-05 22:09:59 +02:00
feat: add qrcode in share dialog (#964)
* feat: add qrcode in share dialog * update: change the color * update: import order
This commit is contained in:
@@ -17,6 +17,7 @@
|
||||
"highlight.js": "^11.6.0",
|
||||
"i18next": "^21.9.2",
|
||||
"lodash-es": "^4.17.21",
|
||||
"qrcode.react": "^3.1.0",
|
||||
"qs": "^6.11.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
|
@@ -1,4 +1,5 @@
|
||||
import { Select, Option } from "@mui/joy";
|
||||
import { QRCodeSVG } from "qrcode.react";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import copy from "copy-to-clipboard";
|
||||
@@ -69,7 +70,6 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
|
||||
if (!memoElRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
toImage(memoElRef.current, {
|
||||
pixelRatio: window.devicePixelRatio * 2,
|
||||
})
|
||||
@@ -138,13 +138,23 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
|
||||
<MemoResources resourceList={memo.resourceList} />
|
||||
</div>
|
||||
<div className="watermark-container">
|
||||
<div className="logo-container">
|
||||
<img className="logo-img" src="/logo.png" alt="" />
|
||||
</div>
|
||||
<div className="userinfo-container">
|
||||
<span className="name-text">{user.nickname || user.username}</span>
|
||||
<span className="usage-text">
|
||||
{state.memoAmount} MEMOS / {createdDays} DAYS
|
||||
</span>
|
||||
</div>
|
||||
<img className="logo-img" src="/logo.png" alt="" />
|
||||
<QRCodeSVG
|
||||
value={`${window.location.origin}/m/${memo.id}`}
|
||||
size={64}
|
||||
bgColor={"#F3F4F6"}
|
||||
fgColor={"#4B5563"}
|
||||
level={"L"}
|
||||
includeMargin={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-4 py-3 w-full flex flex-row justify-between items-center">
|
||||
|
@@ -70,8 +70,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
> .logo-img {
|
||||
@apply h-10 shrink-0 w-auto;
|
||||
> .logo-container{
|
||||
@apply mr-2;
|
||||
|
||||
> .logo-img {
|
||||
@apply h-10 shrink-0 w-auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -3795,6 +3795,11 @@ punycode@^2.1.0:
|
||||
resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.2.0.tgz#2092cc57cd2582c38e4e7e8bb869dc8d3148bc74"
|
||||
integrity sha512-LN6QV1IJ9ZhxWTNdktaPClrNfp8xdSAYS0Zk2ddX7XsXZAxckMHPCBcHRo0cTcEIgYPRiGEkmji3Idkh2yFtYw==
|
||||
|
||||
qrcode.react@^3.1.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-3.1.0.tgz#5c91ddc0340f768316fbdb8fff2765134c2aecd8"
|
||||
integrity sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==
|
||||
|
||||
qs@^6.11.0:
|
||||
version "6.11.0"
|
||||
resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"
|
||||
|
Reference in New Issue
Block a user