From 6e91f1034c744eb8af517a583729a917d20befa2 Mon Sep 17 00:00:00 2001
From: milan <mk@egroupware.org>
Date: Fri, 8 Nov 2024 16:43:25 +0100
Subject: [PATCH] changed et2-image to inline svg located inside /egroupware/*
 so they inherit color just like bootstrap icons -- added bi-card-list.svg to
 be the same size as other toolbar icons

Regarding Ticket #100401
---
 api/js/etemplate/Et2Image/Et2Image.ts           | 17 +++++++++++++++++
 api/src/Image.php                               |  2 +-
 .../templates/default/images/bi-12-square.svg   |  6 ------
 .../templates/default/images/bi-31-square.svg   |  2 +-
 .../templates/default/images/bi-card-list.svg   |  5 +++++
 5 files changed, 24 insertions(+), 8 deletions(-)
 create mode 100644 calendar/templates/default/images/bi-card-list.svg

diff --git a/api/js/etemplate/Et2Image/Et2Image.ts b/api/js/etemplate/Et2Image/Et2Image.ts
index f2bb363984..542dcf9825 100644
--- a/api/js/etemplate/Et2Image/Et2Image.ts
+++ b/api/js/etemplate/Et2Image/Et2Image.ts
@@ -13,6 +13,8 @@ import {Et2Widget} from "../Et2Widget/Et2Widget";
 import {et2_IDetachedDOM} from "../et2_core_interfaces";
 import {property} from "lit/decorators/property.js";
 import {customElement} from "lit/decorators/custom-element.js";
+import {until} from "lit/directives/until.js";
+import {unsafeHTML} from "lit/directives/unsafe-html.js";
 
 @customElement("et2-image")
 export class Et2Image extends Et2Widget(LitElement) implements et2_IDetachedDOM
@@ -180,6 +182,21 @@ export class Et2Image extends Et2Widget(LitElement) implements et2_IDetachedDOM
 			this.classList.add('bi-'+bootstrap[1]);
 			return html``;
 		}
+
+        // our own svg images
+        //only call unsafeHtml when we are inside /egroupware/
+        const ourSvg = url.match(/\/egroupware\/([^.]+)\.svg/);
+        if (ourSvg)
+        {
+            const svg = fetch(url)
+                .then(res => res.text()
+                    .then(text => unsafeHTML(text)));
+            return html`
+                ${until(svg, html`<span>...</span>`)}
+            `
+        }
+
+        // fallback case (no svg, web source)
 		return html`
             <img ${this.id ? html`id="${this.id}"` : ''}
                  src="${url}"
diff --git a/api/src/Image.php b/api/src/Image.php
index d672f1ebe2..1555f98b10 100644
--- a/api/src/Image.php
+++ b/api/src/Image.php
@@ -234,7 +234,7 @@ class Image
 		'calendar/day'	=> '1-square',
 		'calendar/list_view'	=> 'list',
 		'calendar/month_view'	=> 'calendar/bi-31-square',
-		'calendar/multiweek_view'	=> 'card-list',
+		'calendar/multiweek_view'	=> 'calendar/bi-card-list',
 		'calendar/needs-action'	=> 'question-circle',
 		'calendar/next'	=> 'arrow-bar-right',
 		'calendar/nonblocking'	=> 'ban',
diff --git a/calendar/templates/default/images/bi-12-square.svg b/calendar/templates/default/images/bi-12-square.svg
index 3ed32e22a5..3a310581cd 100644
--- a/calendar/templates/default/images/bi-12-square.svg
+++ b/calendar/templates/default/images/bi-12-square.svg
@@ -1,16 +1,10 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
-   width="16"
-   height="16"
    fill="currentColor"
-   class="bi bi-2-square"
    viewBox="0 0 16 16"
    version="1.1"
-   id="svg2"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs2" />
   <path
      d="m 8.6603062,6.24 v 0.07 h -1.271 V 6.246 c 0,-1.213 0.879,-2.402 2.6369998,-2.402 1.582,0 2.613,0.949 2.613,2.215 0,1.002 -0.6,1.667 -1.287,2.43 l -0.096,0.107 -1.9739998,2.22 v 0.077 H 12.780306 V 12 H 7.4363062 V 11.168 L 10.406306,7.875 c 0.434,-0.475 0.903,-1.008 0.903,-1.705 0,-0.744 -0.557,-1.236 -1.3130001,-1.236 -0.8429997,0 -1.3359997,0.615 -1.3359997,1.306"
      id="path1" />
diff --git a/calendar/templates/default/images/bi-31-square.svg b/calendar/templates/default/images/bi-31-square.svg
index 92b1f77606..8bff231e5d 100644
--- a/calendar/templates/default/images/bi-31-square.svg
+++ b/calendar/templates/default/images/bi-31-square.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<svg width="16" height="16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
     <path d="M 12.913 3.5 L 12.913 12.5 L 11.601 12.5 L 11.601 5.003 L 11.536 5.003 L 9.702 6.487 L 9.702 5.057 L 11.601 3.5 L 12.913 3.5 Z"/>
     <path d="M 0 2 C 0 0.896 0.895 0 2 0 L 14 0 C 15.105 0 16 0.896 16 2 L 16 14 C 16 15.105 15.105 16 14 16 L 2 16 C 0.895 16 0 15.105 0 14 L 0 2 Z M 15 2 C 15 1.448 14.552 1 14 1 L 2 1 C 1.448 1 1 1.448 1 2 L 1 14 C 1 14.552 1.448 15 2 15 L 14 15 C 14.552 15 15 14.552 15 14 L 15 2 Z"/>
     <path d="M 5.132 8.443 L 4.253 8.443 L 4.253 7.283 L 5.091 7.283 C 5.871 7.283 6.439 6.72 6.433 5.946 C 6.433 5.18 5.87 4.653 5.085 4.653 C 4.295 4.653 3.773 5.192 3.737 5.794 L 2.489 5.794 C 2.525 4.564 3.439 3.507 5.114 3.5 C 6.708 3.488 7.722 4.457 7.751 5.731 C 7.774 6.959 6.866 7.651 6.269 7.758 L 6.269 7.835 C 6.972 7.91 7.979 8.528 8.003 9.908 C 8.027 11.486 6.726 12.5 5.073 12.5 C 3.368 12.5 2.366 11.454 2.319 10.18 L 3.544 10.18 C 3.603 10.826 4.224 11.328 5.085 11.333 C 6.058 11.34 6.685 10.725 6.673 9.87 C 6.667 9.026 6.052 8.443 5.132 8.443"/>
diff --git a/calendar/templates/default/images/bi-card-list.svg b/calendar/templates/default/images/bi-card-list.svg
new file mode 100644
index 0000000000..28d14832dc
--- /dev/null
+++ b/calendar/templates/default/images/bi-card-list.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor">
+  <path d="M 14.5 1.333 C 14.776 1.333 15 1.631 15 2 L 15 14 C 15 14.368 14.776 14.667 14.5 14.667 L 1.5 14.667 C 1.224 14.667 1 14.368 1 14 L 1 2 C 1 1.631 1.224 1.333 1.5 1.333 L 14.5 1.333 Z M 1.5 0 C 0.672 0 0 0.895 0 2 L 0 14 C 0 15.104 0.672 16 1.5 16 L 14.5 16 C 15.329 16 16 15.104 16 14 L 16 2 C 16 0.895 15.329 0 14.5 0 L 1.5 0 Z"/>
+  <path d="M 5 8 C 5 7.631 5.224 7.333 5.5 7.333 L 12.5 7.333 C 12.885 7.333 13.126 7.888 12.933 8.333 C 12.844 8.539 12.679 8.667 12.5 8.667 L 5.5 8.667 C 5.224 8.667 5 8.368 5 8 M 5 4.667 C 5 4.297 5.224 4 5.5 4 L 12.5 4 C 12.885 4 13.126 4.555 12.933 5 C 12.844 5.205 12.679 5.333 12.5 5.333 L 5.5 5.333 C 5.224 5.333 5 5.035 5 4.667 M 5 11.333 C 5 10.964 5.224 10.667 5.5 10.667 L 12.5 10.667 C 12.885 10.667 13.126 11.221 12.933 11.667 C 12.844 11.872 12.679 12 12.5 12 L 5.5 12 C 5.224 12 5 11.701 5 11.333 M 4 4.667 C 4 5.179 3.584 5.5 3.25 5.244 C 3.096 5.124 3 4.904 3 4.667 C 3 4.153 3.417 3.832 3.75 4.089 C 3.905 4.208 4 4.428 4 4.667 M 4 8 C 4 8.512 3.584 8.833 3.25 8.577 C 3.096 8.457 3 8.237 3 8 C 3 7.487 3.417 7.165 3.75 7.423 C 3.905 7.541 4 7.761 4 8 M 4 11.333 C 4 11.845 3.584 12.167 3.25 11.911 C 3.096 11.791 3 11.571 3 11.333 C 3 10.82 3.417 10.499 3.75 10.756 C 3.905 10.875 4 11.095 4 11.333" />
+</svg>
\ No newline at end of file