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
This commit is contained in:
milan 2024-11-08 16:43:25 +01:00
parent 4a1af18783
commit 6e91f1034c
5 changed files with 24 additions and 8 deletions

View File

@ -13,6 +13,8 @@ import {Et2Widget} from "../Et2Widget/Et2Widget";
import {et2_IDetachedDOM} from "../et2_core_interfaces"; import {et2_IDetachedDOM} from "../et2_core_interfaces";
import {property} from "lit/decorators/property.js"; import {property} from "lit/decorators/property.js";
import {customElement} from "lit/decorators/custom-element.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") @customElement("et2-image")
export class Et2Image extends Et2Widget(LitElement) implements et2_IDetachedDOM 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]); this.classList.add('bi-'+bootstrap[1]);
return html``; 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` return html`
<img ${this.id ? html`id="${this.id}"` : ''} <img ${this.id ? html`id="${this.id}"` : ''}
src="${url}" src="${url}"

View File

@ -234,7 +234,7 @@ class Image
'calendar/day' => '1-square', 'calendar/day' => '1-square',
'calendar/list_view' => 'list', 'calendar/list_view' => 'list',
'calendar/month_view' => 'calendar/bi-31-square', '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/needs-action' => 'question-circle',
'calendar/next' => 'arrow-bar-right', 'calendar/next' => 'arrow-bar-right',
'calendar/nonblocking' => 'ban', 'calendar/nonblocking' => 'ban',

View File

@ -1,16 +1,10 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg <svg
width="16"
height="16"
fill="currentColor" fill="currentColor"
class="bi bi-2-square"
viewBox="0 0 16 16" viewBox="0 0 16 16"
version="1.1" version="1.1"
id="svg2"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs2" />
<path <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" 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" /> id="path1" />

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 970 B

View File

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="utf-8"?> <?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 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 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"/> <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"/>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 1.4 KiB