IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Client: PortalSettings: WhiteLabel: add logo options

Browse Source
This commit is contained in:
Viktor Fomin 2022-11-21 13:56:29 +05:00
parent f95e6d2b86
commit 7db84753b7
2 changed files with 28 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/client/src/pages/PortalSettings/categories/common/Branding/whitelabel.js
View File

@ -15,7 +15,7 @@ import WhiteLabelWrapper from "./StyledWhitelabel";
import LoaderWhiteLabel from "../sub-components/loaderWhiteLabel";
import Logo from "./sub-components/logo";
import { generateLogo } from "../../../utils/generateLogo";
import { generateLogo, getLogoOptions } from "../../../utils/generateLogo";
const WhiteLabel = (props) => {
const {
@ -59,12 +59,9 @@ const WhiteLabel = (props) => {
for (let i = 0; i < logoUrlsWhiteLabel.length; i++) {
const width = logoSizes[i].width / 2;
const height = logoSizes[i].height / 2;
const text =
i === 2 || i === 5
? logoTextWhiteLabel.trim().charAt(0)
: logoTextWhiteLabel;
const logo = generateLogo(width, height, text);
const options = getLogoOptions(i, logoTextWhiteLabel);
console.log(i, logoUrlsWhiteLabel[i]);
const logo = generateLogo(width, height, options.text, options.fontSize);
newLogos.push(logo);
}
setLogoUrlsWhiteLabel(newLogos);

27
packages/client/src/pages/PortalSettings/utils/generateLogo.js
View File

@ -1,14 +1,35 @@
export const generateLogo = (width, height, text, fill = "#000") => {
export const generateLogo = (width, height, text, fontSize = 18) => {
const canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext("2d");
ctx.fillStyle = "transparent";
ctx.clearRect(0, 0, width, height);
ctx.fillStyle = fill;
ctx.fillStyle = "#000";
ctx.textAlign = "start";
ctx.textBaseline = "top";
ctx.font = `18px Arial`;
ctx.font = `${fontSize}px Arial`;
ctx.fillText(text, 0, 0);
return canvas.toDataURL();
};
export const getLogoOptions = (index, text) => {
switch (index) {
case 0:
return { fontSize: 18, text: text };
case 1:
return { fontSize: 30, text: text };
case 2:
return { fontSize: 16, text: text.trim().charAt(0) };
case 3:
return { fontSize: 12, text: text };
case 4:
return { fontSize: 12, text: text };
case 5:
return { fontSize: 30, text: text.trim().charAt(0) };
case 6:
return { fontSize: 30, text: text };
default:
return { fontSize: 18, text: text };
}
};