use bootstrap icons as icon-font for whole EGroupware, not just in smallPART/ViDoTeach

This commit is contained in:
ralf 2024-08-15 09:25:18 +02:00
parent 787ee4730a
commit 861bb8e846
7 changed files with 14 additions and 1 deletions

View File

@ -93,6 +93,7 @@ export const ButtonMixin = <T extends Constructor>(superclass : T) => class exte
height: 20px;
max-width: 20px;
display: flex;
font-size: 20px !important;
}
::slotted([slot="icon"][src='']) {
display: none;

View File

@ -33,6 +33,7 @@ export class Et2Image extends Et2Widget(LitElement) implements et2_IDetachedDOM
:host([icon]) {
height: 1.3rem;
font-size: 1.3rem !important;
}
`];
}
@ -114,11 +115,17 @@ export class Et2Image extends Et2Widget(LitElement) implements et2_IDetachedDOM
// Hide if no valid image
return html``;
}
const bootstrap = src.match(/\/node_modules\/bootstrap-icons\/icons\/([^.]+)\.svg/);
if (bootstrap)
{
this.classList.add('bi-'+bootstrap[1]);
return html``;
}
return html`
<img ${this.id ? html`id="${this.id}"` : ''}
src="${src}"
alt="${this.label}"
width="${this.width || nothing}"
width="${this.width || (this.height ? nothing : '100%')}"
height="${this.height || nothing}"
style="${this.style || nothing}"
part="image"

View File

@ -51,6 +51,7 @@
* @package pixelegg
* @version $Id$
*/
@import "../../node_modules/bootstrap-icons/font/bootstrap-icons.min.css";
@media (prefers-color-scheme: dark) {
html[data-darkmode='2'] {
background: #000;

View File

@ -54,6 +54,7 @@
* @package pixelegg
* @version $Id$
*/
@import "../../node_modules/bootstrap-icons/font/bootstrap-icons.min.css";
@media (prefers-color-scheme: dark) {
html[data-darkmode='2'] {
background: #000;

View File

@ -44,6 +44,7 @@
* @package pixelegg
* @version $Id$
*/
@import "../../node_modules/bootstrap-icons/font/bootstrap-icons.min.css";
@media (prefers-color-scheme: dark) {
html[data-darkmode='2'] {
background: #000;

View File

@ -10,6 +10,7 @@
*/
@import "monochrome.less";
@import "../less/app_colors.less";
@import "../../node_modules/bootstrap-icons/font/bootstrap-icons.min.css";
// overwriting Shoelace light theme
:root, :host, .sl-theme-light {

View File

@ -20,6 +20,7 @@
* @package pixelegg
* @version $Id$
*/
@import "../../node_modules/bootstrap-icons/font/bootstrap-icons.min.css";
@media (prefers-color-scheme: dark) {
html[data-darkmode='2'] {
background: #000;