hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Manually create update ready icon

Browse Source 
Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton 2022-06-06 12:54:47 -04:00
parent 3d6e77d186
commit 7c06f0d8fe
6 changed files with 74 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Makefile
View File

@ -56,7 +56,6 @@ integration: build
build: node_modules binaries/client build: node_modules binaries/client
yarn run npm:fix-build-version yarn run npm:fix-build-version
$(MAKE) build-extensions -B $(MAKE) build-extensions -B
yarn run build:tray-icons
yarn run compile yarn run compile
ifeq "$(DETECTED_OS)" "Windows" ifeq "$(DETECTED_OS)" "Windows"
# https://github.com/ukoloff/win-ca#clear-pem-folder-on-publish # https://github.com/ukoloff/win-ca#clear-pem-folder-on-publish

102
build/generate-tray-icons.ts
View File

@ -64,36 +64,78 @@ async function generateNormalImages(template: string, size: number, name: string
} }
async function generateUpdateAvailableImages(template: string, size: number, name: string, noticeSvg: string) { async function generateUpdateAvailableImages(template: string, size: number, name: string, noticeSvg: string) {
const circleSvg = new JSDOM(`
<body>
<svg viewBox="0 0 32 32">
<circle cx="20" cy="20" r="6" />
</svg>
<style>
circle {
fill: "black" !important;
}
</style>
</body>
`).window.document.getElementsByTagName("svg")[0];
circleSvg.innerHTML += getSvgStyling("dark");
const circleBuffer = await sharp(Buffer.from(circleSvg.outerHTML))
.resize({
width: Math.floor(size/1.5),
height: Math.floor(size/1.5),
})
.toBuffer();
await sharp(circleBuffer)
.toFile(path.join(outputFolder, "circle.png"));
await Promise.all([ await Promise.all([
sharp(Buffer.from(template)) sharp(Buffer.from(template))
.composite([{
input: (
await sharp(Buffer.from(noticeSvg))
.resize({
width: Math.floor(size/1.5),
height: Math.floor(size/1.5),
})
.toBuffer()
),
top: Math.floor(size/2.5),
left: Math.floor(size/2.5),
}])
.resize({ width: size, height: size }) .resize({ width: size, height: size })
.composite([
{
input: circleBuffer,
gravity: "southeast",
/**
* The `clear` blend rule is buggy and currently doesn't work
*
* https://github.com/lovell/sharp/issues/3247
*/
blend: "clear",
},
{
input: (
await sharp(Buffer.from(noticeSvg))
.resize({
width: Math.floor(size/1.5),
height: Math.floor(size/1.5),
})
.toBuffer()
),
gravity: "southeast",
},
])
.png() .png()
.toFile(path.join(outputFolder, `${name}.png`)), .toFile(path.join(outputFolder, `${name}.png`)),
sharp(Buffer.from(template)) sharp(Buffer.from(template))
.composite([{ .composite([
input: ( {
await sharp(Buffer.from(noticeSvg)) input: circleBuffer,
.resize({ gravity: "southeast",
width: Math.floor((size * 2)/1.5), blend: "clear",
height: Math.floor((size * 2)/1.5), },
}) {
.toBuffer() input: (
), await sharp(Buffer.from(noticeSvg))
top: Math.floor((size * 2)/2.5), .resize({
left: Math.floor((size * 2)/2.5), width: Math.floor((size * 2)/1.5),
}]) height: Math.floor((size * 2)/1.5),
})
.toBuffer()
),
gravity: "southeast",
},
])
.resize({ width: size*2, height: size*2 }) .resize({ width: size*2, height: size*2 })
.png() .png()
.toFile(path.join(outputFolder, `${name}@2x.png`)), .toFile(path.join(outputFolder, `${name}@2x.png`)),
@ -104,8 +146,6 @@ async function getNoticeSvg(): Promise<string> {
const svgData = await readFile(noticeFile, { encoding: "utf-8" }); const svgData = await readFile(noticeFile, { encoding: "utf-8" });
const noticeSvgRoot = new JSDOM(svgData).window.document.getElementsByTagName("svg")[0]; const noticeSvgRoot = new JSDOM(svgData).window.document.getElementsByTagName("svg")[0];
noticeSvgRoot.innerHTML += getSvgStyling("dark");
return noticeSvgRoot.outerHTML; return noticeSvgRoot.outerHTML;
} }
@ -117,13 +157,19 @@ async function generateTrayIcons() {
const baseTemplates = await getBaseIconTemplates(); const baseTemplates = await getBaseIconTemplates();
const noticeTemplate = await getNoticeSvg(); const noticeTemplate = await getNoticeSvg();
void noticeTemplate;
void generateUpdateAvailableImages;
await Promise.all([ await Promise.all([
generateNormalImages(baseTemplates.light, size, "trayIconDarkTemplate"), generateNormalImages(baseTemplates.light, size, "trayIconDarkTemplate"),
generateUpdateAvailableImages(baseTemplates.light, size, "trayIconDarkUpdateAvailableTemplate", noticeTemplate), // generateUpdateAvailableImages(baseTemplates.light, size, "trayIconDarkUpdateAvailableTemplate", noticeTemplate),
generateNormalImages(baseTemplates.dark, size, "trayIconTemplate"), generateNormalImages(baseTemplates.dark, size, "trayIconTemplate"),
generateUpdateAvailableImages(baseTemplates.dark, size, "trayIconUpdateAvailableTemplate", noticeTemplate),
]); ]);
console.warn("Did not update:", [
"trayIconDarkUpdateAvailableTemplate.png",
"trayIconDarkUpdateAvailableTemplate@2x.png",
]);
console.log("Generated all images"); console.log("Generated all images");
} catch (error) { } catch (error) {
console.error(error); console.error(error);

BIN
build/tray/trayIconDarkUpdateAvailableTemplate.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 533 B

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
build/tray/trayIconDarkUpdateAvailableTemplate@2x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 988 B

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
build/tray/trayIconUpdateAvailableTemplate.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 521 B

BIN
build/tray/trayIconUpdateAvailableTemplate@2x.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 916 B