Fine tuning app icon #690 #587

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 <script></script>
       confCopy.Server.customHTMLHead =
-          confCopy.Server.customHTMLHead
-              .replace(/&/g, '&amp;')
-              .replace(/</g, '&lt;')
-              .replace(/>/g, '&gt;')
-              .replace(/"/g, '&quot;')
-              .replace(/'/g, '&#039;');
+        confCopy.Server.customHTMLHead
+          .replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;')
+          .replace(/'/g, '&#039;');
       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 '<svg ' +
-          ' xmlns="http://www.w3.org/2000/svg"' +
-          ' viewBox="' + vBs.join(' ') + '">' +
-          (theme === 'auto' ? ('<style>' +
-                  '    path, circle {' +
-                  '      fill: black;' +
-                  '    }' +
-                  '   circle.bg {' +
-                  '    fill: white;' +
-                  '   }' +
-                  '    @media (prefers-color-scheme: dark) {' +
-                  '      path, circle {' +
-                  '        fill: white;' +
-                  '      }' +
-                  '   circle.bg {' +
-                  '    fill: black;' +
-                  '   }' +
-                  '    }' +
-                  '  </style>') :
-              (theme != null ?
-                  ('<style>' +
-                      '    path, circle {' +
-                      '      fill: ' + theme + ';' +
-                      '    }' +
-                      '   circle.bg {' +
-                      '    fill: black;' +
-                      '   }' +
-                      '  </style>')
-                  : '<style>' +
-                  '   circle.bg {' +
-                  '    fill: white;' +
-                  '   }' +
-                  '  </style>')) +
-          '<circle class="bg" cy="' + (canvasMid.y) + '" cx="' + (canvasMid.x) + '"  r="' + (circle_size / 2) + '"></circle>' +
-          Config.Server.svgIcon.items + '</svg>';
+        ' xmlns="http://www.w3.org/2000/svg"' +
+        ' viewBox="' + vBs.join(' ') + '">' +
+        (theme === 'auto' ? ('<style>' +
+            '    path, circle {' +
+            '      fill: black;' +
+            '    }' +
+            '   circle.bg,rect.bg {' +
+            '    fill: white;' +
+            '   }' +
+            '    @media (prefers-color-scheme: dark) {' +
+            '      path, circle {' +
+            '        fill: white;' +
+            '      }' +
+            '   circle.bg,rect.bg {' +
+            '    fill: black;' +
+            '   }' +
+            '    }' +
+            '  </style>') :
+          (theme != null ?
+            ('<style>' +
+              '    path, circle {' +
+              '      fill: ' + theme + ';' +
+              '    }' +
+              '   circle.bg {' +
+              '    fill: black;' +
+              '   }' +
+              '  </style>')
+            : '<style>' +
+            '   circle.bg,rect.bg {' +
+            '    fill: white;' +
+            '   }' +
+            '  </style>')) +
+        `<rect class="bg" x="${canvasStart.x}" y="${canvasStart.y}" width="${canvasSize}" height="${canvasSize}" rx="15" />` +
+        Config.Server.svgIcon.items + '</svg>';
     };
 
     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()
     );
   }
 }

src/frontend/app/ui/frame/frame.component.html

@@ -7,7 +7,7 @@
     <div class="container-fluid">
       <a class="navbar-brand d-none d-sm-block" [routerLink]="['/gallery']"
          [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>
       </a>
       <div class="collapse navbar-collapse text-center" id="navbarCollapse" [collapse]="collapsed">