Skip to content
Snippets Groups Projects
Commit 0a9d1496 authored by Bekerle, Patrizio's avatar Bekerle, Patrizio :fire:
Browse files

Add css variable icon override (and some deprecated and test code)

parent 88a24e0f
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
packages/common/src/icon.js
+ 88
− 0
View file @ 0a9d1496
...@@ -18,7 +18,57 @@ const errorIcon = ` ...@@ -18,7 +18,57 @@ const errorIcon = `
</svg> </svg>
`; `;
// // This variable holds overrides for icons
// // Example: {"cloud": "/new/path/to/icon.svg"}
// let iconOverride = null;
// This variable holds the base path
// Example: "/dist"
// let basePath = null;
function getCSSVariable(name) {
let value = window.getComputedStyle(document.documentElement).getPropertyValue(name);
if (!value) {
return null;
}
return value.replaceAll('"', '').replaceAll('\'', '').trim();
}
export function getIconSVGURL(name) { export function getIconSVGURL(name) {
const varName = '--dbp-override-icon-' + name;
const cssVarValue = getCSSVariable(varName);
const iconBasePath = getCSSVariable('--dbp-icon-base-path');
// console.log("varName", varName);
// console.log("cssVarValue", cssVarValue);
// console.log("iconBasePath", iconBasePath);
// check if we want to override the icon
if (cssVarValue) {
let path = cssVarValue;
// try to take care of relative paths
if (!path.startsWith('/') && !path.startsWith('http://') && !path.startsWith('https://') && iconBasePath) {
path = iconBasePath + path;
}
// console.log("path", path);
return path;
}
// if (iconOverride && iconOverride[name]) {
// let path = iconOverride[name];
//
// // try to take care of relative paths
// if (!path.startsWith('/') && !path.startsWith('http://') && !path.startsWith('https://') && basePath) {
// path = basePath + path;
// }
//
// return path;
// }
return commonUtils.getAssetURL(pkgName, 'icons/' + encodeURI(name) + '.svg'); return commonUtils.getAssetURL(pkgName, 'icons/' + encodeURI(name) + '.svg');
} }
...@@ -42,6 +92,7 @@ export function getIconCSS(name) { ...@@ -42,6 +92,7 @@ export function getIconCSS(name) {
async function getSVGTextElement(name) { async function getSVGTextElement(name) {
const iconURL = getIconSVGURL(name); const iconURL = getIconSVGURL(name);
// console.log("iconURL: " + iconURL);
const response = await fetch(iconURL); const response = await fetch(iconURL);
if (!response.ok) { if (!response.ok) {
...@@ -55,6 +106,31 @@ async function getSVGTextElement(name) { ...@@ -55,6 +106,31 @@ async function getSVGTextElement(name) {
return unsafeHTML(text); return unsafeHTML(text);
} }
// /**
// * Fetch and interpret the icon override data
// *
// * @param path
// * @returns {Promise<{}|any>} json object
// */
// async function fetchIconOverrideData(path) {
// // try to take care of relative paths
// if (!path.startsWith('/') && !path.startsWith('http://') && !path.startsWith('https://') && basePath) {
// path = basePath + path;
// }
//
// const response = await fetch(path);
//
// if (!response.ok) {
// return {};
// }
//
// try {
// return JSON.parse(await response.text());
// } catch(e) {
// return {};
// }
// }
const iconCache = {}; const iconCache = {};
/** /**
...@@ -99,6 +175,17 @@ export class Icon extends LitElement { ...@@ -99,6 +175,17 @@ export class Icon extends LitElement {
svg { svg {
height: 100%; height: 100%;
#background-image: url(/dist/icons/nextcloud.svg);
#background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' fill='black'><path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /></svg>");
#background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 97.6 81.74'%3E%3Cg%3E%3Cpath d='M89.8,22.7a28.51,28.51,0,0,0-16.9-9.1,27.84,27.84,0,0,0-14.8-12A24,24,0,0,0,48.9,0,28.36,28.36,0,0,0,20.6,27.4,22.42,22.42,0,0,0,13,70.11v-6.3A16.7,16.7,0,0,1,5.5,50a17,17,0,0,1,17-17h3.6V28.5A23,23,0,0,1,49,5.6a19.75,19.75,0,0,1,7.2,1.2h.1A22.48,22.48,0,0,1,68.9,17.5l.6,1.3,1.4.2a23.07,23.07,0,0,1,14.9,7.5,23.85,23.85,0,0,1-1.23,33.74v7A29.56,29.56,0,0,0,89.8,22.7Z'/%3E%3Cg%3E%3Cpath d='M16.39,71.61H36.65V51.36H16.39Z' style='fill: %23e4154b'/%3E%3Cpath d='M38.67,71.61H58.93V51.36H38.67Z' style='fill: %23e4154b'/%3E%3Cpath d='M61,71.61H81.21V51.36H61Z' style='fill: %23e4154b'/%3E%3Cpath d='M26.52,81.74H46.78V61.49H26.52Z' style='fill: %23e4154b'/%3E%3Cpath d='M50.83,61.49H71.08V41.23H50.83Z' style='fill: %23e4154b'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
#mask-image: url(/dist/icons/nextcloud.svg);
#content: url(/dist/icons/nextcloud.svg);
}
#svg {
#content: url(/dist/icons/nextcloud.svg);
#content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' fill='black'><path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /></svg>");
#content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 97.6 81.74'%3E%3Cg%3E%3Cpath d='M89.8,22.7a28.51,28.51,0,0,0-16.9-9.1,27.84,27.84,0,0,0-14.8-12A24,24,0,0,0,48.9,0,28.36,28.36,0,0,0,20.6,27.4,22.42,22.42,0,0,0,13,70.11v-6.3A16.7,16.7,0,0,1,5.5,50a17,17,0,0,1,17-17h3.6V28.5A23,23,0,0,1,49,5.6a19.75,19.75,0,0,1,7.2,1.2h.1A22.48,22.48,0,0,1,68.9,17.5l.6,1.3,1.4.2a23.07,23.07,0,0,1,14.9,7.5,23.85,23.85,0,0,1-1.23,33.74v7A29.56,29.56,0,0,0,89.8,22.7Z'/%3E%3Cg%3E%3Cpath d='M16.39,71.61H36.65V51.36H16.39Z' style='fill: %23e4154b'/%3E%3Cpath d='M38.67,71.61H58.93V51.36H38.67Z' style='fill: %23e4154b'/%3E%3Cpath d='M61,71.61H81.21V51.36H61Z' style='fill: %23e4154b'/%3E%3Cpath d='M26.52,81.74H46.78V61.49H26.52Z' style='fill: %23e4154b'/%3E%3Cpath d='M50.83,61.49H71.08V41.23H50.83Z' style='fill: %23e4154b'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
} }
svg * { svg * {
...@@ -111,6 +198,7 @@ export class Icon extends LitElement { ...@@ -111,6 +198,7 @@ export class Icon extends LitElement {
let svg = getSVGTextElementCached(this.name); let svg = getSVGTextElementCached(this.name);
return html` return html`
${until(svg)} ${until(svg)}
<!-- <div id="svg"></div> -->
`; `;
} }
} }
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment