xuthus/pigallery2
1
0
Fork 0
mirror of https://github.com/xuthus83/pigallery2.git synced 2025-01-14 14:43:17 +08:00
Code Actions Projects Activity

Fine tuning app icon #690 #587

Browse Source
This commit is contained in:
Patrik J. Braun 2023-09-04 21:16:50 +02:00
parent 383de854dd
commit 6188270412
3 changed files with 98 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/backend/routes/PublicRouter.ts
View File

@ -141,7 +141,7 @@ export class PublicRouter {
], ],
start_url: start_url:
Config.Server.publicUrl === '' ? '.' : Config.Server.publicUrl, Config.Server.publicUrl === '' ? '.' : Config.Server.publicUrl,
background_color: '#212529', background_color: '#000000',
theme_color: '#000000', theme_color: '#000000',
}); });
}); });
@ -163,27 +163,28 @@ export class PublicRouter {
vBs[2] = icon_size; vBs[2] = icon_size;
vBs[3] = icon_size; vBs[3] = icon_size;
const getCanvasSize = () => Math.max(vBs[2], vBs[3]);
const addPadding = (p: number) => { const addPadding = (p: number) => {
if (p <= 0) { if (p <= 0) {
return; return;
} }
const size = Math.max(vBs[2], vBs[3]); const size = getCanvasSize();
vBs[0] -= size * (p / 2); vBs[0] -= size * (p / 2);
vBs[1] -= size * (p / 2); vBs[1] -= size * (p / 2);
vBs[2] += size * (p); vBs[2] += size * (p);
vBs[3] += size * (p); vBs[3] += size * (p);
}; };
const circle_size = icon_size * 1.38;
addPadding(0.38); addPadding(0.38);
addPadding(paddingPercent); addPadding(paddingPercent);
const canvasMid = { const canvasSize = getCanvasSize();
x: vBs[2] / 2 + vBs[0], const canvasStart = {
y: vBs[3] / 2 + vBs[1], x: vBs[0],
y: vBs[1]
}; };
return '<svg ' + return '<svg ' +
' xmlns="http://www.w3.org/2000/svg"' + ' xmlns="http://www.w3.org/2000/svg"' +
' viewBox="' + vBs.join(' ') + '">' + ' viewBox="' + vBs.join(' ') + '">' +
@ -191,14 +192,14 @@ export class PublicRouter {
' path, circle {' + ' path, circle {' +
' fill: black;' + ' fill: black;' +
' }' + ' }' +
' circle.bg {' + ' circle.bg,rect.bg {' +
' fill: white;' + ' fill: white;' +
' }' + ' }' +
' @media (prefers-color-scheme: dark) {' + ' @media (prefers-color-scheme: dark) {' +
' path, circle {' + ' path, circle {' +
' fill: white;' + ' fill: white;' +
' }' + ' }' +
' circle.bg {' + ' circle.bg,rect.bg {' +
' fill: black;' + ' fill: black;' +
' }' + ' }' +
' }' + ' }' +
@ -213,11 +214,11 @@ export class PublicRouter {
' }' + ' }' +
' </style>') ' </style>')
: '<style>' + : '<style>' +
' circle.bg {' + ' circle.bg,rect.bg {' +
' fill: white;' + ' fill: white;' +
' }' + ' }' +
' </style>')) + ' </style>')) +
'<circle class="bg" cy="' + (canvasMid.y) + '" cx="' + (canvasMid.x) + '" r="' + (circle_size / 2) + '"></circle>' + `<rect class="bg" x="${canvasStart.x}" y="${canvasStart.y}" width="${canvasSize}" height="${canvasSize}" rx="15" />` +
Config.Server.svgIcon.items + '</svg>'; Config.Server.svgIcon.items + '</svg>';
}; };
@ -232,7 +233,7 @@ export class PublicRouter {
res.set('Cache-control', 'public, max-age=31536000'); res.set('Cache-control', 'public, max-age=31536000');
res.header('Content-Type', 'image/svg+xml'); res.header('Content-Type', 'image/svg+xml');
// Use 40% padding: https://w3c.github.io/manifest/#icon-masks // Use 40% padding: https://w3c.github.io/manifest/#icon-masks
res.send(getIcon('auto', 0.4)); res.send(getIcon('auto', 0.3));
}); });

4
src/common/config/public/ClientConfig.ts
View File

File diff suppressed because one or more lines are too long

2
src/frontend/app/ui/frame/frame.component.html
View File

@ -7,7 +7,7 @@
<div class="container-fluid"> <div class="container-fluid">
<a class="navbar-brand d-none d-sm-block" [routerLink]="['/gallery']" <a class="navbar-brand d-none d-sm-block" [routerLink]="['/gallery']"
[queryParams]="queryService.getParams()"> [queryParams]="queryService.getParams()">
<app-icon class="d-inline-block align-top" [width]="30" [height]="30"></app-icon> <app-icon class="d-inline-block align-top me-1" [width]="30" [height]="30"></app-icon>
<strong class="d-none d-lg-inline-block">{{title}}</strong> <strong class="d-none d-lg-inline-block">{{title}}</strong>
</a> </a>
<div class="collapse navbar-collapse text-center" id="navbarCollapse" [collapse]="collapsed"> <div class="collapse navbar-collapse text-center" id="navbarCollapse" [collapse]="collapsed">