From 6188270412db0b5808b6a5880e26a2b316f77d6a Mon Sep 17 00:00:00 2001 From: "Patrik J. Braun" Date: Mon, 4 Sep 2023 21:16:50 +0200 Subject: [PATCH] Fine tuning app icon #690 #587 --- src/backend/routes/PublicRouter.ts | 189 +++++++++--------- src/common/config/public/ClientConfig.ts | 4 +- .../app/ui/frame/frame.component.html | 2 +- 3 files changed, 98 insertions(+), 97 deletions(-) diff --git a/src/backend/routes/PublicRouter.ts b/src/backend/routes/PublicRouter.ts index 028290b0..8ffe6b05 100644 --- a/src/backend/routes/PublicRouter.ts +++ b/src/backend/routes/PublicRouter.ts @@ -35,7 +35,7 @@ export class PublicRouter { let selectedLocale = req.locale; if (req.cookies && req.cookies[CookieNames.lang]) { if ( - Config.Server.languages.indexOf(req.cookies[CookieNames.lang]) !== -1 + Config.Server.languages.indexOf(req.cookies[CookieNames.lang]) !== -1 ) { selectedLocale = req.cookies[CookieNames.lang]; } @@ -48,14 +48,14 @@ export class PublicRouter { // index.html should not be cached as it contains template that can change const renderIndex = (req: Request, res: Response, next: NextFunction) => { ejs.renderFile( - path.join(ProjectPath.FrontendFolder, req.localePath, 'index.html'), - res.tpl, - (err, str) => { - if (err) { - return next(new ErrorDTO(ErrorCodes.GENERAL_ERROR, err.message)); - } - res.send(str); + path.join(ProjectPath.FrontendFolder, req.localePath, 'index.html'), + res.tpl, + (err, str) => { + if (err) { + return next(new ErrorDTO(ErrorCodes.GENERAL_ERROR, err.message)); } + res.send(str); + } ); }; @@ -94,12 +94,12 @@ export class PublicRouter { }) as unknown as ClientConfig; // Escaping html tags, like confCopy.Server.customHTMLHead = - confCopy.Server.customHTMLHead - .replace(/&/g, '&') - .replace(//g, '>') - .replace(/"/g, '"') - .replace(/'/g, '''); + confCopy.Server.customHTMLHead + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"') + .replace(/'/g, '''); res.tpl.Config = confCopy; res.tpl.customHTMLHead = Config.Server.customHTMLHead; const selectedTheme = Config.Gallery.Themes.availableThemes.find(th => th.name === Config.Gallery.Themes.selectedTheme)?.theme || ''; @@ -140,8 +140,8 @@ export class PublicRouter { 'photo' ], start_url: - Config.Server.publicUrl === '' ? '.' : Config.Server.publicUrl, - background_color: '#212529', + Config.Server.publicUrl === '' ? '.' : Config.Server.publicUrl, + background_color: '#000000', theme_color: '#000000', }); }); @@ -163,62 +163,63 @@ export class PublicRouter { vBs[2] = icon_size; vBs[3] = icon_size; + const getCanvasSize = () => Math.max(vBs[2], vBs[3]); + const addPadding = (p: number) => { if (p <= 0) { return; } - const size = Math.max(vBs[2], vBs[3]); + const size = getCanvasSize(); vBs[0] -= size * (p / 2); vBs[1] -= size * (p / 2); vBs[2] += size * (p); vBs[3] += size * (p); }; - const circle_size = icon_size * 1.38; addPadding(0.38); addPadding(paddingPercent); - const canvasMid = { - x: vBs[2] / 2 + vBs[0], - y: vBs[3] / 2 + vBs[1], + const canvasSize = getCanvasSize(); + const canvasStart = { + x: vBs[0], + y: vBs[1] }; - return '' + - (theme === 'auto' ? ('') : - (theme != null ? - ('') - : '')) + - '' + - Config.Server.svgIcon.items + ''; + ' xmlns="http://www.w3.org/2000/svg"' + + ' viewBox="' + vBs.join(' ') + '">' + + (theme === 'auto' ? ('') : + (theme != null ? + ('') + : '')) + + `` + + Config.Server.svgIcon.items + ''; }; app.get('/icon.svg', (req: Request, res: Response) => { @@ -232,7 +233,7 @@ export class PublicRouter { res.set('Cache-control', 'public, max-age=31536000'); res.header('Content-Type', 'image/svg+xml'); // Use 40% padding: https://w3c.github.io/manifest/#icon-masks - res.send(getIcon('auto', 0.4)); + res.send(getIcon('auto', 0.3)); }); @@ -276,44 +277,44 @@ export class PublicRouter { }); app.get( - [ - '/', - '/login', - '/gallery*', - '/share/:' + QueryParams.gallery.sharingKey_params, - '/shareLogin', - '/admin', - '/duplicates', - '/faces', - '/albums', - '/search*', - ], - AuthenticationMWs.tryAuthenticate, - addTPl, // add template after authentication was successful - setLocale, - renderIndex + [ + '/', + '/login', + '/gallery*', + '/share/:' + QueryParams.gallery.sharingKey_params, + '/shareLogin', + '/admin', + '/duplicates', + '/faces', + '/albums', + '/search*', + ], + AuthenticationMWs.tryAuthenticate, + addTPl, // add template after authentication was successful + setLocale, + renderIndex ); Config.Server.languages.forEach((l) => { app.get( - [ - '/' + l + '/', - '/' + l + '/login', - '/' + l + '/gallery*', - '/' + l + '/share*', - '/' + l + '/admin', - '/' + l + '/search*', - ], - redirectToBase(l) + [ + '/' + l + '/', + '/' + l + '/login', + '/' + l + '/gallery*', + '/' + l + '/share*', + '/' + l + '/admin', + '/' + l + '/search*', + ], + redirectToBase(l) ); }); const renderFile = (subDir = '') => { return (req: Request, res: Response) => { const file = path.join( - ProjectPath.FrontendFolder, - req.localePath, - subDir, - req.params.file + ProjectPath.FrontendFolder, + req.localePath, + subDir, + req.params.file ); if (!fs.existsSync(file)) { return res.sendStatus(404); @@ -326,16 +327,16 @@ export class PublicRouter { }; app.get( - '/assets/:file(*)', - setLocale, - AuthenticationMWs.normalizePathParam('file'), - renderFile('assets') + '/assets/:file(*)', + setLocale, + AuthenticationMWs.normalizePathParam('file'), + renderFile('assets') ); app.get( - '/:file', - setLocale, - AuthenticationMWs.normalizePathParam('file'), - renderFile() + '/:file', + setLocale, + AuthenticationMWs.normalizePathParam('file'), + renderFile() ); } } diff --git a/src/common/config/public/ClientConfig.ts b/src/common/config/public/ClientConfig.ts index 1b90ec0d..23a81336 100644 --- a/src/common/config/public/ClientConfig.ts +++ b/src/common/config/public/ClientConfig.ts @@ -1335,8 +1335,8 @@ export class ClientServiceConfig { } as TAGS, description: $localize`Sets the icon of the app`, }) - // Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. - svgIcon: SVGIconConfig = new SVGIconConfig(`0 0 477 499`, ''); + // source: https://icons.getbootstrap.com/ + svgIcon: SVGIconConfig = new SVGIconConfig(`0 0 512 512`, ''); } @SubConfigClass({tags: {client: true}, softReadonly: true}) diff --git a/src/frontend/app/ui/frame/frame.component.html b/src/frontend/app/ui/frame/frame.component.html index 557a7d1c..5a605e8a 100644 --- a/src/frontend/app/ui/frame/frame.component.html +++ b/src/frontend/app/ui/frame/frame.component.html @@ -7,7 +7,7 @@
- + {{title}}