diff --git a/src/backend/model/fileprocessing/PhotoProcessing.ts b/src/backend/model/fileprocessing/PhotoProcessing.ts index 6966edbda..1c07f42b3 100644 --- a/src/backend/model/fileprocessing/PhotoProcessing.ts +++ b/src/backend/model/fileprocessing/PhotoProcessing.ts @@ -301,9 +301,8 @@ export class PhotoProcessing { // run on other thread const input = { type: ThumbnailSourceType.Photo, - svgString: ` -`, + svgString: `d="${Config.Server.svgIcon.items}`, size: size, outPath, makeSquare: false, diff --git a/src/backend/routes/PublicRouter.ts b/src/backend/routes/PublicRouter.ts index 3b18008e9..844bb5352 100644 --- a/src/backend/routes/PublicRouter.ts +++ b/src/backend/routes/PublicRouter.ts @@ -145,7 +145,7 @@ export class PublicRouter { res.header('Content-Type', 'image/svg+xml'); res.send('' + - ''); + Config.Server.svgIcon.items + ''); }); @@ -155,24 +155,24 @@ export class PublicRouter { res.send('' + '' + - ''); + Config.Server.svgIcon.items + ''); }); 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('' + - ''); + Config.Server.svgIcon.items + ''); }); diff --git a/src/common/config/public/ClientConfig.ts b/src/common/config/public/ClientConfig.ts index 99f284cbb..0e61f6d21 100644 --- a/src/common/config/public/ClientConfig.ts +++ b/src/common/config/public/ClientConfig.ts @@ -326,9 +326,9 @@ export class MapLayers { @SubConfigClass({tags: {client: true}, softReadonly: true}) export class SVGIconConfig { - constructor(viewBox: string = '0 0 512 512', path: string = '') { + constructor(viewBox: string = '0 0 512 512', items: string = '') { this.viewBox = viewBox; - this.path = path; + this.items = items; } @ConfigProperty({ @@ -342,12 +342,12 @@ export class SVGIconConfig { @ConfigProperty({ tags: { - name: $localize`SVG path`, + name: $localize`SVG Items`, priority: ConfigPriority.advanced }, - description: $localize`Path element of the SVG icon. Icons used on the map: fontawesome.com/icons.`, + description: $localize`Content elements (paths, circles, rects) of the SVG icon. Icons used on the map: fontawesome.com/icons.`, }) - path: string = ''; + items: string = ''; } @SubConfigClass({tags: {client: true}, softReadonly: true}) @@ -530,19 +530,19 @@ export class ClientMapConfig { ['flight', 'flying'], new PathThemeConfig('var(--bs-orange)', '4 8', - new SVGIconConfig('0 0 567 512', 'M482.3 192c34.2 0 93.7 29 93.7 64c0 36-59.5 64-93.7 64l-116.6 0L265.2 495.9c-5.7 10-16.3 16.1-27.8 16.1l-56.2 0c-10.6 0-18.3-10.2-15.4-20.4l49-171.6L112 320 68.8 377.6c-3 4-7.8 6.4-12.8 6.4l-42 0c-7.8 0-14-6.3-14-14c0-1.3 .2-2.6 .5-3.9L32 256 .5 145.9c-.4-1.3-.5-2.6-.5-3.9c0-7.8 6.3-14 14-14l42 0c5 0 9.8 2.4 12.8 6.4L112 192l102.9 0-49-171.6C162.9 10.2 170.6 0 181.2 0l56.2 0c11.5 0 22.1 6.2 27.8 16.1L365.7 192l116.6 0z') + new SVGIconConfig('0 0 567 512', '') ) ), new MapPathGroupThemeConfig( ['drive', 'driving'], new PathThemeConfig('var(--bs-orange)', '4 8', - new SVGIconConfig('0 0 640 512', 'M171.3 96H224v96H111.3l30.4-75.9C146.5 104 158.2 96 171.3 96zM272 192V96h81.2c9.7 0 18.9 4.4 25 12l67.2 84H272zm256.2 1L428.2 68c-18.2-22.8-45.8-36-75-36H171.3c-39.3 0-74.6 23.9-89.1 60.3L40.6 196.4C16.8 205.8 0 228.9 0 256V368c0 17.7 14.3 32 32 32H65.3c7.6 45.4 47.1 80 94.7 80s87.1-34.6 94.7-80H385.3c7.6 45.4 47.1 80 94.7 80s87.1-34.6 94.7-80H608c17.7 0 32-14.3 32-32V320c0-65.2-48.8-119-111.8-127zM434.7 368a48 48 0 1 1 90.5 32 48 48 0 1 1 -90.5-32zM160 336a48 48 0 1 1 0 96 48 48 0 1 1 0-96z') + new SVGIconConfig('0 0 640 512', '') ) ), new MapPathGroupThemeConfig( ['ship', 'sailing', 'cruise'], new PathThemeConfig('var(--bs-orange)', '4 8', - new SVGIconConfig('0 0 576 512', 'M256 16c0-7 4.5-13.2 11.2-15.3s13.9 .4 17.9 6.1l224 320c3.4 4.9 3.8 11.3 1.1 16.6s-8.2 8.6-14.2 8.6H272c-8.8 0-16-7.2-16-16V16zM212.1 96.5c7 1.9 11.9 8.2 11.9 15.5V336c0 8.8-7.2 16-16 16H80c-5.7 0-11-3-13.8-8s-2.9-11-.1-16l128-224c3.6-6.3 11-9.4 18-7.5zM5.7 404.3C2.8 394.1 10.5 384 21.1 384H554.9c10.6 0 18.3 10.1 15.4 20.3l-4 14.3C550.7 473.9 500.4 512 443 512H133C75.6 512 25.3 473.9 9.7 418.7l-4-14.3z') + new SVGIconConfig('0 0 576 512', '') ) )]), new MapPathGroupConfig('Sport', @@ -550,31 +550,31 @@ export class ClientMapConfig { ['run'], new PathThemeConfig('var(--bs-primary)', '', - new SVGIconConfig('0 0 417 512', 'M320 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM125.7 175.5c9.9-9.9 23.4-15.5 37.5-15.5c1.9 0 3.8 .1 5.6 .3L137.6 254c-9.3 28 1.7 58.8 26.8 74.5l86.2 53.9-25.4 88.8c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l28.7-100.4c5.9-20.6-2.6-42.6-20.7-53.9L238 299l30.9-82.4 5.1 12.3C289 264.7 323.9 288 362.7 288H384c17.7 0 32-14.3 32-32s-14.3-32-32-32H362.7c-12.9 0-24.6-7.8-29.5-19.7l-6.3-15c-14.6-35.1-44.1-61.9-80.5-73.1l-48.7-15c-11.1-3.4-22.7-5.2-34.4-5.2c-31 0-60.8 12.3-82.7 34.3L57.4 153.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l23.1-23.1zM91.2 352H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h69.6c19 0 36.2-11.2 43.9-28.5L157 361.6l-9.5-6c-17.5-10.9-30.5-26.8-37.9-44.9L91.2 352z') + new SVGIconConfig('0 0 417 512', '') ) ), new MapPathGroupThemeConfig( ['walk'], new PathThemeConfig('var(--bs-primary)', '', - new SVGIconConfig('0 0 320 512', 'M160 48a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zM126.5 199.3c-1 .4-1.9 .8-2.9 1.2l-8 3.5c-16.4 7.3-29 21.2-34.7 38.2l-2.6 7.8c-5.6 16.8-23.7 25.8-40.5 20.2s-25.8-23.7-20.2-40.5l2.6-7.8c11.4-34.1 36.6-61.9 69.4-76.5l8-3.5c20.8-9.2 43.3-14 66.1-14c44.6 0 84.8 26.8 101.9 67.9L281 232.7l21.4 10.7c15.8 7.9 22.2 27.1 14.3 42.9s-27.1 22.2-42.9 14.3L247 287.3c-10.3-5.2-18.4-13.8-22.8-24.5l-9.6-23-19.3 65.5 49.5 54c5.4 5.9 9.2 13 11.2 20.8l23 92.1c4.3 17.1-6.1 34.5-23.3 38.8s-34.5-6.1-38.8-23.3l-22-88.1-70.7-77.1c-14.8-16.1-20.3-38.6-14.7-59.7l16.9-63.5zM68.7 398l25-62.4c2.1 3 4.5 5.8 7 8.6l40.7 44.4-14.5 36.2c-2.4 6-6 11.5-10.6 16.1L54.6 502.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L68.7 398z') + new SVGIconConfig('0 0 320 512', '') ) ), new MapPathGroupThemeConfig( ['hike', 'hiking'], new PathThemeConfig('var(--bs-primary)', '', - new SVGIconConfig('0 0 384 512', 'M192 48a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm51.3 182.7L224.2 307l49.7 49.7c9 9 14.1 21.2 14.1 33.9V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V397.3l-73.9-73.9c-15.8-15.8-22.2-38.6-16.9-60.3l20.4-84c8.3-34.1 42.7-54.9 76.7-46.4c19 4.8 35.6 16.4 46.4 32.7L305.1 208H336V184c0-13.3 10.7-24 24-24s24 10.7 24 24v55.8c0 .1 0 .2 0 .2s0 .2 0 .2V488c0 13.3-10.7 24-24 24s-24-10.7-24-24V272H296.6c-16 0-31-8-39.9-21.4l-13.3-20zM81.1 471.9L117.3 334c3 4.2 6.4 8.2 10.1 11.9l41.9 41.9L142.9 488.1c-4.5 17.1-22 27.3-39.1 22.8s-27.3-22-22.8-39.1zm55.5-346L101.4 266.5c-3 12.1-14.9 19.9-27.2 17.9l-47.9-8c-14-2.3-22.9-16.3-19.2-30L31.9 155c9.5-34.8 41.1-59 77.2-59h4.2c15.6 0 27.1 14.7 23.3 29.8z') + new SVGIconConfig('0 0 384 512', '') ) ), new MapPathGroupThemeConfig( ['bike', 'biking', 'cycling'], new PathThemeConfig('var(--bs-primary)', '', - new SVGIconConfig('0 0 640 512', 'M400 96a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm27.2 64l-61.8-48.8c-17.3-13.6-41.7-13.8-59.1-.3l-83.1 64.2c-30.7 23.8-28.5 70.8 4.3 91.6L288 305.1V416c0 17.7 14.3 32 32 32s32-14.3 32-32V288c0-10.7-5.3-20.7-14.2-26.6L295 232.9l60.3-48.5L396 217c5.7 4.5 12.7 7 20 7h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H427.2zM56 384a72 72 0 1 1 144 0A72 72 0 1 1 56 384zm200 0A128 128 0 1 0 0 384a128 128 0 1 0 256 0zm184 0a72 72 0 1 1 144 0 72 72 0 1 1 -144 0zm200 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z') + new SVGIconConfig('0 0 640 512', '') ) ), new MapPathGroupThemeConfig( ['skiing', 'ski'], new PathThemeConfig('var(--bs-primary)', '', - new SVGIconConfig('0 0 512 512', 'M380.7 48a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zM2.7 268.9c6.1-11.8 20.6-16.3 32.4-10.2L232.7 361.3l46.2-69.2-75.1-75.1c-14.6-14.6-20.4-33.9-18.4-52.1l108.8 52 39.3 39.3c16.2 16.2 18.7 41.5 6 60.6L289.8 391l128.7 66.8c13.6 7.1 29.8 7.2 43.6 .3l15.2-7.6c11.9-5.9 26.3-1.1 32.2 10.7s1.1 26.3-10.7 32.2l-15.2 7.6c-27.5 13.7-59.9 13.5-87.2-.7L12.9 301.3C1.2 295.2-3.4 280.7 2.7 268.9zM118.9 65.6L137 74.2l8.7-17.4c4-7.9 13.6-11.1 21.5-7.2s11.1 13.6 7.2 21.5l-8.5 16.9 54.7 26.2c1.5-.7 3.1-1.4 4.7-2.1l83.4-33.4c34.2-13.7 72.8 4.2 84.5 39.2l17.1 51.2 52.1 26.1c15.8 7.9 22.2 27.1 14.3 42.9s-27.1 22.2-42.9 14.3l-58.1-29c-11.4-5.7-20-15.7-24.1-27.8l-5.8-17.3-27.3 12.1-6.8 3-6.7-3.2L151.5 116.7l-9.2 18.4c-4 7.9-13.6 11.1-21.5 7.2s-11.1-13.6-7.2-21.5l9-18-17.6-8.4c-8-3.8-11.3-13.4-7.5-21.3s13.4-11.3 21.3-7.5z') + new SVGIconConfig('0 0 512 512', '') ) )]), new MapPathGroupConfig('Other paths', @@ -1268,7 +1268,7 @@ export class ClientServiceConfig { 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 407 512`, 'M372 232.5l-3.7-6.5c.1-46.4-21.4-65.3-46.5-79.7 7.6-2 15.4-3.6 17.6-13.2 13.1-3.3 15.8-9.4 17.1-15.8 3.4-2.3 14.8-8.7 13.6-19.7 6.4-4.4 10-10.1 8.1-18.1 6.9-7.5 8.7-13.7 5.8-19.4 8.3-10.3 4.6-15.6 1.1-20.9 6.2-11.2.7-23.2-16.6-21.2-6.9-10.1-21.9-7.8-24.2-7.8-2.6-3.2-6-6-16.5-4.7-6.8-6.1-14.4-5-22.3-2.1-9.3-7.3-15.5-1.4-22.6.8C271.6.6 269 5.5 263.5 7.6c-12.3-2.6-16.1 3-22 8.9l-6.9-.1c-18.6 10.8-27.8 32.8-31.1 44.1-3.3-11.3-12.5-33.3-31.1-44.1l-6.9.1c-5.9-5.9-9.7-11.5-22-8.9-5.6-2-8.1-7-19.4-3.4-4.6-1.4-8.9-4.4-13.9-4.3-2.6.1-5.5 1-8.7 3.5-7.9-3-15.5-4-22.3 2.1-10.5-1.3-14 1.4-16.5 4.7-2.3 0-17.3-2.3-24.2 7.8C21.2 16 15.8 28 22 39.2c-3.5 5.4-7.2 10.7 1.1 20.9-2.9 5.7-1.1 11.9 5.8 19.4-1.8 8 1.8 13.7 8.1 18.1-1.2 11 10.2 17.4 13.6 19.7 1.3 6.4 4 12.4 17.1 15.8 2.2 9.5 10 11.2 17.6 13.2-25.1 14.4-46.6 33.3-46.5 79.7l-3.7 6.5c-28.8 17.2-54.7 72.7-14.2 117.7 2.6 14.1 7.1 24.2 11 35.4 5.9 45.2 44.5 66.3 54.6 68.8 14.9 11.2 30.8 21.8 52.2 29.2C159 504.2 181 512 203 512h1c22.1 0 44-7.8 64.2-28.4 21.5-7.4 37.3-18 52.2-29.2 10.2-2.5 48.7-23.6 54.6-68.8 3.9-11.2 8.4-21.3 11-35.4 40.6-45.1 14.7-100.5-14-117.7zm-22.2-8c-1.5 18.7-98.9-65.1-82.1-67.9 45.7-7.5 83.6 19.2 82.1 67.9zm-43 93.1c-24.5 15.8-59.8 5.6-78.8-22.8s-14.6-64.2 9.9-80c24.5-15.8 59.8-5.6 78.8 22.8s14.6 64.2-9.9 80zM238.9 29.3c.8 4.2 1.8 6.8 2.9 7.6 5.4-5.8 9.8-11.7 16.8-17.3 0 3.3-1.7 6.8 2.5 9.4 3.7-5 8.8-9.5 15.5-13.3-3.2 5.6-.6 7.3 1.2 9.6 5.1-4.4 10-8.8 19.4-12.3-2.6 3.1-6.2 6.2-2.4 9.8 5.3-3.3 10.6-6.6 23.1-8.9-2.8 3.1-8.7 6.3-5.1 9.4 6.6-2.5 14-4.4 22.1-5.4-3.9 3.2-7.1 6.3-3.9 8.8 7.1-2.2 16.9-5.1 26.4-2.6l-6 6.1c-.7.8 14.1.6 23.9.8-3.6 5-7.2 9.7-9.3 18.2 1 1 5.8.4 10.4 0-4.7 9.9-12.8 12.3-14.7 16.6 2.9 2.2 6.8 1.6 11.2.1-3.4 6.9-10.4 11.7-16 17.3 1.4 1 3.9 1.6 9.7.9-5.2 5.5-11.4 10.5-18.8 15 1.3 1.5 5.8 1.5 10 1.6-6.7 6.5-15.3 9.9-23.4 14.2 4 2.7 6.9 2.1 10 2.1-5.7 4.7-15.4 7.1-24.4 10 1.7 2.7 3.4 3.4 7.1 4.1-9.5 5.3-23.2 2.9-27 5.6.9 2.7 3.6 4.4 6.7 5.8-15.4.9-57.3-.6-65.4-32.3 15.7-17.3 44.4-37.5 93.7-62.6-38.4 12.8-73 30-102 53.5-34.3-15.9-10.8-55.9 5.8-71.8zm-34.4 114.6c24.2-.3 54.1 17.8 54 34.7-.1 15-21 27.1-53.8 26.9-32.1-.4-53.7-15.2-53.6-29.8 0-11.9 26.2-32.5 53.4-31.8zm-123-12.8c3.7-.7 5.4-1.5 7.1-4.1-9-2.8-18.7-5.3-24.4-10 3.1 0 6 .7 10-2.1-8.1-4.3-16.7-7.7-23.4-14.2 4.2-.1 8.7 0 10-1.6-7.4-4.5-13.6-9.5-18.8-15 5.8.7 8.3.1 9.7-.9-5.6-5.6-12.7-10.4-16-17.3 4.3 1.5 8.3 2 11.2-.1-1.9-4.2-10-6.7-14.7-16.6 4.6.4 9.4 1 10.4 0-2.1-8.5-5.8-13.3-9.3-18.2 9.8-.1 24.6 0 23.9-.8l-6-6.1c9.5-2.5 19.3.4 26.4 2.6 3.2-2.5-.1-5.6-3.9-8.8 8.1 1.1 15.4 2.9 22.1 5.4 3.5-3.1-2.3-6.3-5.1-9.4 12.5 2.3 17.8 5.6 23.1 8.9 3.8-3.6.2-6.7-2.4-9.8 9.4 3.4 14.3 7.9 19.4 12.3 1.7-2.3 4.4-4 1.2-9.6 6.7 3.8 11.8 8.3 15.5 13.3 4.1-2.6 2.5-6.2 2.5-9.4 7 5.6 11.4 11.5 16.8 17.3 1.1-.8 2-3.4 2.9-7.6 16.6 15.9 40.1 55.9 6 71.8-29-23.5-63.6-40.7-102-53.5 49.3 25 78 45.3 93.7 62.6-8 31.8-50 33.2-65.4 32.3 3.1-1.4 5.8-3.2 6.7-5.8-4-2.8-17.6-.4-27.2-5.6zm60.1 24.1c16.8 2.8-80.6 86.5-82.1 67.9-1.5-48.7 36.5-75.5 82.1-67.9zM38.2 342c-23.7-18.8-31.3-73.7 12.6-98.3 26.5-7 9 107.8-12.6 98.3zm91 98.2c-13.3 7.9-45.8 4.7-68.8-27.9-15.5-27.4-13.5-55.2-2.6-63.4 16.3-9.8 41.5 3.4 60.9 25.6 16.9 20 24.6 55.3 10.5 65.7zm-26.4-119.7c-24.5-15.8-28.9-51.6-9.9-80s54.3-38.6 78.8-22.8 28.9 51.6 9.9 80c-19.1 28.4-54.4 38.6-78.8 22.8zM205 496c-29.4 1.2-58.2-23.7-57.8-32.3-.4-12.7 35.8-22.6 59.3-22 23.7-1 55.6 7.5 55.7 18.9.5 11-28.8 35.9-57.2 35.4zm58.9-124.9c.2 29.7-26.2 53.8-58.8 54-32.6.2-59.2-23.8-59.4-53.4v-.6c-.2-29.7 26.2-53.8 58.8-54 32.6-.2 59.2 23.8 59.4 53.4v.6zm82.2 42.7c-25.3 34.6-59.6 35.9-72.3 26.3-13.3-12.4-3.2-50.9 15.1-72 20.9-23.3 43.3-38.5 58.9-26.6 10.5 10.3 16.7 49.1-1.7 72.3zm22.9-73.2c-21.5 9.4-39-105.3-12.6-98.3 43.9 24.7 36.3 79.6 12.6 98.3z'); + svgIcon: SVGIconConfig = new SVGIconConfig(`0 0 477 499`, ''); } @SubConfigClass({tags: {client: true}, softReadonly: true}) diff --git a/src/frontend/app/app.module.ts b/src/frontend/app/app.module.ts index 7b4a4d5c1..1cddeeed8 100644 --- a/src/frontend/app/app.module.ts +++ b/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}, diff --git a/src/frontend/app/icon.component.ts b/src/frontend/app/icon.component.ts index 0cf690033..4b4b56d9c 100644 --- a/src/frontend/app/icon.component.ts +++ b/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: ` - - - `, + + `, }) export class IconComponent { diff --git a/src/frontend/app/pipes/SafeHTMLPipe.ts b/src/frontend/app/pipes/SafeHTMLPipe.ts new file mode 100644 index 000000000..fb05b8b3f --- /dev/null +++ b/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); + } +} diff --git a/src/frontend/app/ui/gallery/map/MarkerFactory.ts b/src/frontend/app/ui/gallery/map/MarkerFactory.ts index abec7a38e..e462823d9 100644 --- a/src/frontend/app/ui/gallery/map/MarkerFactory.ts +++ b/src/frontend/app/ui/gallery/map/MarkerFactory.ts @@ -2,7 +2,7 @@ import {DivIcon, setOptions} from 'leaflet'; export interface SvgIconOptions { color?: string; - svgPath?: string; + svgItems?: string; viewBox?: string; small?: boolean; } @@ -10,9 +10,9 @@ export interface SvgIconOptions { 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 || ''; options.viewBox = options.viewBox || '0 0 512 512'; - const svg = ''; + const svg = '' + options.svgItems + ''; setOptions(this, { iconSize: options.small ? [15, 15] : [30, 30], iconAnchor: options.small ? [15, 28] : [15, 35], diff --git a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts index adb118057..d951dba2e 100644 --- a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts +++ b/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 }) }; diff --git a/src/frontend/app/ui/settings/template/settings-entry/settings-entry.component.html b/src/frontend/app/ui/settings/template/settings-entry/settings-entry.component.html index dd35a3585..ae26b741c 100644 --- a/src/frontend/app/ui/settings/template/settings-entry/settings-entry.component.html +++ b/src/frontend/app/ui/settings/template/settings-entry/settings-entry.component.html @@ -159,8 +159,8 @@
Add new theme
- + [attr.viewBox]="state.value.viewBox || '0 0 512 512'" + [innerHtml]="state.value.items | safeHtml"> @@ -178,8 +178,8 @@
Icon
- + [attr.viewBox]="state.value.viewBox || '0 0 512 512'" + [innerHtml]="state.value.items | safeHtml"> @@ -209,10 +209,10 @@
Icon
(change)="onChange($event)"> diff --git a/src/frontend/app/ui/settings/template/settings-entry/settings-entry.component.ts b/src/frontend/app/ui/settings/template/settings-entry/settings-entry.component.ts index c52aa8856..06dbeb0d3 100644 --- a/src/frontend/app/ui/settings/template/settings-entry/settings-entry.component.ts +++ b/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; } diff --git a/src/frontend/index.html b/src/frontend/index.html index 90b25236d..c0f89bbf0 100644 --- a/src/frontend/index.html +++ b/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' %>"> - + <%- Config.Server.svgIcon.items %>

Loading...