From 0a9d1496b56b8b5010012b1877df0e271d4b9218 Mon Sep 17 00:00:00 2001
From: Patrizio Bekerle <patrizio.bekerle@tugraz.at>
Date: Wed, 2 Jun 2021 14:16:27 +0200
Subject: [PATCH] Add css variable icon override (and some deprecated and test
code)
---
packages/common/src/icon.js | 88 +++++++++++++++++++++++++++++++++++++
1 file changed, 88 insertions(+)
diff --git a/packages/common/src/icon.js b/packages/common/src/icon.js
index a0d22df7..c8f17e24 100644
--- a/packages/common/src/icon.js
+++ b/packages/common/src/icon.js
@@ -18,7 +18,57 @@ const errorIcon = `
</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) {
+ 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');
}
@@ -42,6 +92,7 @@ export function getIconCSS(name) {
async function getSVGTextElement(name) {
const iconURL = getIconSVGURL(name);
+ // console.log("iconURL: " + iconURL);
const response = await fetch(iconURL);
if (!response.ok) {
@@ -55,6 +106,31 @@ async function getSVGTextElement(name) {
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 = {};
/**
@@ -99,6 +175,17 @@ export class Icon extends LitElement {
svg {
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 * {
@@ -111,6 +198,7 @@ export class Icon extends LitElement {
let svg = getSVGTextElementCached(this.name);
return html`
${until(svg)}
+<!-- <div id="svg"></div> -->
`;
}
}
\ No newline at end of file
--
GitLab