Replacing app icon with new outline camera + raspberry head icon

src/backend/model/fileprocessing/PhotoProcessing.ts

@@ -301,9 +301,8 @@ export class PhotoProcessing {
     // run on other thread
     const input = {
       type: ThumbnailSourceType.Photo,
-      svgString: `<svg width="${size}" height="${size}" xmlns="http://www.w3.org/2000/svg"
-viewBox="${Config.Server.svgIcon.viewBox || '0 0 512 512'}">
-<path fill="${color}" d="${Config.Server.svgIcon.path}"/></svg>`,
+      svgString: `<svg fill="${color}" width="${size}" height="${size}" xmlns="http://www.w3.org/2000/svg"
+viewBox="${Config.Server.svgIcon.viewBox || '0 0 512 512'}">d="${Config.Server.svgIcon.items}</svg>`,
       size: size,
       outPath,
       makeSquare: false,

src/backend/routes/PublicRouter.ts

@@ -145,7 +145,7 @@ export class PublicRouter {
       res.header('Content-Type', 'image/svg+xml');
       res.send('<svg xmlns="http://www.w3.org/2000/svg"' +
         ' viewBox="' + (Config.Server.svgIcon.viewBox || '0 0 512 512') + '">' +
-        '<path d="' + Config.Server.svgIcon.path + '"/></svg>');
+        Config.Server.svgIcon.items + '</svg>');
     });
 
 
@@ -155,24 +155,24 @@ export class PublicRouter {
       res.send('<svg xmlns="http://www.w3.org/2000/svg"' +
         ' viewBox="' + (Config.Server.svgIcon.viewBox || '0 0 512 512') + '">' +
         '<style>' +
-        '    path {' +
+        '    path, circle {' +
         '      fill: black;' +
         '    }' +
         '    @media (prefers-color-scheme: dark) {' +
-        '      path {' +
+        '      path, circle {' +
         '        fill: white;' +
         '      }' +
         '    }' +
         '  </style>' +
-        '<path d="' + Config.Server.svgIcon.path + '"/></svg>');
+        Config.Server.svgIcon.items + '</svg>');
     });
 
     app.get('/icon_inv.svg', (req: Request, res: Response) => {
       res.set('Cache-control', 'public, max-age=31536000');
       res.header('Content-Type', 'image/svg+xml');
-      res.send('<svg xmlns="http://www.w3.org/2000/svg"' +
+      res.send('<svg style="fill:white" xmlns="http://www.w3.org/2000/svg"' +
         ' viewBox="' + (Config.Server.svgIcon.viewBox || '0 0 512 512') + '">' +
-        '<path style="fill:white" d="' + Config.Server.svgIcon.path + '"/></svg>');
+        Config.Server.svgIcon.items + '</svg>');
     });
 
 

src/frontend/app/app.module.ts

@@ -176,6 +176,7 @@ import {
   ionWarningOutline
 } from '@ng-icons/ionicons';
 import {SortingMethodIconComponent} from './ui/sorting-method-icon/sorting-method-icon.component';
+import {SafeHtmlPipe} from './pipes/SafeHTMLPipe';
 
 @Injectable()
 export class MyHammerConfig extends HammerGestureConfig {
@@ -236,7 +237,7 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
       ionCameraOutline, ionWarningOutline, ionLockClosedOutline, ionChevronUpOutline,
       ionFlagOutline, ionGlobeOutline, ionPieChartOutline, ionStopOutline,
       ionTimeOutline, ionCheckmarkOutline, ionPulseOutline, ionResizeOutline,
-      ionCloudOutline, ionChatboxOutline, ionServerOutline, ionFileTrayFullOutline,ionBrushOutline,
+      ionCloudOutline, ionChatboxOutline, ionServerOutline, ionFileTrayFullOutline, ionBrushOutline,
       ionBrowsersOutline
     }),
     ClipboardModule,
@@ -321,6 +322,7 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
     UsersComponent,
     SharingsListComponent,
     SortingMethodIconComponent,
+    SafeHtmlPipe
   ],
   providers: [
     {provide: HTTP_INTERCEPTORS, useClass: CSRFInterceptor, multi: true},

src/frontend/app/icon.component.ts

@@ -5,13 +5,13 @@ import {Config} from '../../common/config/public/Config';
   selector: 'app-icon',
   styles: [':host {line-height: 0}'],
   template: `
-    <svg xmlns="http://www.w3.org/2000/svg"
-         [attr.width]="width"
-         [attr.height]="height"
-         fill="currentcolor"
-         [attr.viewBox]="Config.Server.svgIcon.viewBox || '0 0 512 512'">
-      <path [attr.d]="Config.Server.svgIcon.path"/>
-    </svg>`,
+      <svg xmlns="http://www.w3.org/2000/svg"
+           [attr.width]="width"
+           [attr.height]="height"
+           fill="currentcolor"
+           [attr.viewBox]="Config.Server.svgIcon.viewBox || '0 0 512 512'"
+           [innerHtml]="Config.Server.svgIcon.items | safeHtml">
+      </svg>`,
 })
 export class IconComponent {
 

src/frontend/app/pipes/SafeHTMLPipe.ts

@@ -0,0 +1,12 @@
+import {Pipe, PipeTransform, SecurityContext} from '@angular/core';
+import {DomSanitizer} from '@angular/platform-browser';
+
+@Pipe({name: 'safeHtml'})
+export class SafeHtmlPipe implements PipeTransform {
+  constructor(private sanitizer: DomSanitizer) {
+  }
+
+  transform(html: string) {
+    return this.sanitizer.bypassSecurityTrustHtml(html);
+  }
+}

src/frontend/app/ui/gallery/map/MarkerFactory.ts

@@ -2,17 +2,17 @@ import {DivIcon, setOptions} from 'leaflet';
 
 export interface SvgIconOptions {
   color?: string;
-  svgPath?: string;
+  svgItems?: string;
   viewBox?: string;
   small?: boolean;
 }
 
 const SvgIcon: { new(options?: SvgIconOptions): DivIcon } = DivIcon.extend({
   initialize: function(options: SvgIconOptions = {}) {
     options.color = options.color || 'var(--bs-primary)';
-    options.svgPath = options.svgPath || 'M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z';
+    options.svgItems = options.svgItems || '<path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z"/>';
     options.viewBox = options.viewBox || '0 0 512 512';
-    const svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="' + options.viewBox + '"><path fill="' + options.color + '" d="' + options.svgPath + '"/></svg>';
+    const svg = '<svg xmlns="http://www.w3.org/2000/svg"  fill="' + options.color + '" viewBox="' + options.viewBox + '">' + options.svgItems + '</svg>';
     setOptions(this, {
       iconSize: options.small ? [15, 15] : [30, 30],
       iconAnchor: options.small ? [15, 28] : [15, 35],

src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts

@@ -191,7 +191,7 @@ export class GalleryMapLightboxComponent implements OnChanges, OnDestroy {
             theme: ths.theme,
             icon: MarkerFactory.getSvgIcon({
               color: ths.theme.color,
-              svgPath: ths.theme.svgIcon?.path,
+              svgItems: ths.theme.svgIcon?.items,
               viewBox: ths.theme.svgIcon?.viewBox
             })
           };

src/frontend/app/ui/settings/template/settings-entry/settings-entry.component.html

@@ -159,8 +159,8 @@ <h5 class="modal-title" i18n>Add new theme</h5>
             <svg xmlns="http://www.w3.org/2000/svg"
                  width="1em"
                  fill="currentcolor"
-                 [attr.viewBox]="state.value.viewBox || '0 0 512 512'">
-              <path [attr.d]="state.value.path"/>
+                 [attr.viewBox]="state.value.viewBox || '0 0 512 512'"
+                 [innerHtml]="state.value.items | safeHtml">
             </svg>
           </button>
 
@@ -178,8 +178,8 @@ <h5 class="modal-title" i18n>Icon</h5>
                   <svg xmlns="http://www.w3.org/2000/svg"
                        width="2em"
                        fill="currentcolor"
-                       [attr.viewBox]="state.value.viewBox || '0 0 512 512'">
-                    <path [attr.d]="state.value.path"/>
+                       [attr.viewBox]="state.value.viewBox || '0 0 512 512'"
+                       [innerHtml]="state.value.items | safeHtml">
                   </svg>
                 </div>
               </div>
@@ -209,10 +209,10 @@ <h5 class="modal-title" i18n>Icon</h5>
                 (change)="onChange($event)"></app-settings-entry>
 
               <app-settings-entry
-                [ngModel]="state.value.__state.path"
+                [ngModel]="state.value.__state.items"
                 [noChangeDetection]="true"
-                [name]="'icon_p_'+idName"
-                [id]="'icon_p_'+idName"
+                [name]="'icon_i_'+idName"
+                [id]="'icon_i_'+idName"
                 (change)="onChange($event)"></app-settings-entry>
             </div>
 

src/frontend/app/ui/settings/template/settings-entry/settings-entry.component.ts

@@ -17,6 +17,7 @@ import {WebConfig} from '../../../../../../common/config/private/WebConfig';
 import {JobScheduleConfig, UserConfig} from '../../../../../../common/config/private/PrivateConfig';
 import {enumToTranslatedArray} from '../../../EnumTranslations';
 import {BsModalService} from '../../../../../../../node_modules/ngx-bootstrap/modal';
+import {Config} from '../../../../../../common/config/public/Config';
 
 interface IState {
   shouldHide(): boolean;
@@ -450,8 +451,8 @@ export class SettingsEntryComponent
       const doc = parser.parseFromString(reader.result as string, 'image/svg+xml');
       try {
         const wb = doc.documentElement.getAttribute('viewBox');
-        const path = doc.documentElement.getElementsByTagName('path')[0].getAttribute('d');
-        this.state.value.path = path;
+        const items = doc.documentElement.innerHTML;
+        this.state.value.items = items;
         this.state.value.viewBox = wb;
       } catch (e) {
         console.error(e);
@@ -465,6 +466,7 @@ export class SettingsEntryComponent
 
   }
 
+  protected readonly Config = Config;
 }
 
 

src/frontend/index.html

@@ -40,7 +40,7 @@
          style="width: 200px;max-width: calc(50vw);max-height: calc(50vh);"
          fill="currentcolor"
          viewBox="<%- Config.Server.svgIcon.viewBox || '0 0 512 512' %>">
-      <path d="<%- Config.Server.svgIcon.path %>"/>
+      <%- Config.Server.svgIcon.items %>
     </svg>
     <h2 style="margin-top: 1em">Loading...</h2>
   </div>