[pdm-devel] [PATCH proxmox-datacenter-manager 4/5] ui: images: add sdn icon

[Stefan Hanreich]

Add the icon used for SDN in Proxmox VE manually, since it isn't
included in our distribution of font awesome. SVG icons have the issue
that their color cannot be simply changed via the CSS color
attribute. This is problematic when showing an icon in the navigation
or on the dashboard, where we use the color attribute to change their
color. To work around that, use the icon as a mask and fill the
background with the desired color. In the future it would make sense
to ship our own custom font with those icons to circumvent those
issues completely.

Signed-off-by: Stefan Hanreich <s.hanreich at proxmox.com>
---
 ui/Makefile            |  1 +
 ui/css/pdm.scss        | 27 ++++++++++++++--
 ui/images/icon-sdn.svg | 70 ++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 95 insertions(+), 3 deletions(-)
 create mode 100644 ui/images/icon-sdn.svg

diff --git a/ui/Makefile b/ui/Makefile
index 7d2e654..61e5c77 100644
--- a/ui/Makefile
+++ b/ui/Makefile
@@ -60,6 +60,7 @@ install: $(COMPILED_OUTPUT) index.hbs
 	install -m0644 images/icon-cpu.svg $(DESTDIR)$(UIDIR)/images
 	install -m0644 images/icon-memory.svg $(DESTDIR)$(UIDIR)/images
 	install -m0644 images/icon-sdn-vnet.svg $(DESTDIR)$(UIDIR)/images
+	install -m0644 images/icon-sdn.svg $(DESTDIR)$(UIDIR)/images
 	install -m0644 images/proxmox_logo.svg $(DESTDIR)$(UIDIR)/images
 	install -m0644 images/proxmox_logo_white.svg $(DESTDIR)$(UIDIR)/images
 
diff --git a/ui/css/pdm.scss b/ui/css/pdm.scss
index 6d87b1c..63095c3 100644
--- a/ui/css/pdm.scss
+++ b/ui/css/pdm.scss
@@ -59,15 +59,36 @@
 
 .fa-sdn-vnet::before {
     content: " ";
-    background-image: url(./images/icon-sdn-vnet.svg);
-    background-size: 16px 16px;
-    background-repeat: no-repeat;
+    mask-image: url(./images/icon-sdn-vnet.svg);
+    mask-size: 16px 16px;
+    mask-repeat: no-repeat;
+    background-color: var(--pwt-color);
     width: 16px;
     height: 16px;
     vertical-align: bottom;
     display: inline-block;
 }
 
+.fa-sdn:before {
+    content: " ";
+    mask-image: url(../images/icon-sdn.svg);
+    mask-size: 16px 16px;
+    mask-repeat: no-repeat;
+    background-color: var(--pwt-color);
+    width: 16px;
+    height: 16px;
+    vertical-align: middle;
+    display: inline-block;
+}
+
+.pwt-nav-menu .pwt-nav-link.active .fa-sdn:before {
+    background-color: var(--pwt-accent-color);
+}
+
+.pwt-panel-header-text .fa-sdn:before {
+    background-color: var(--pwt-accent-color-background);
+}
+
 :root.pwt-dark-mode {
     .fa-memory,
     .fa-cpu,
diff --git a/ui/images/icon-sdn.svg b/ui/images/icon-sdn.svg
new file mode 100644
index 0000000..9782e8b
--- /dev/null
+++ b/ui/images/icon-sdn.svg
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Generated by graphviz version 2.40.1 (20161225.0304)
+ -->
+<!-- Title: sdn Pages: 1 -->
+<svg width="142pt" height="140pt"
+ viewBox="0.00 0.00 142.00 140.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <style type="text/css">
+        .filled { fill: #000; stroke: #000; }
+    </style>
+<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 136)">
+<title>sdn</title>
+<!-- a -->
+<g id="node1" class="filled">
+<title>a</title>
+<ellipse cx="64.9158" cy="-69.1316" rx="18" ry="18"/>
+</g>
+<!-- b -->
+<g id="node2" class="filled">
+<title>b</title>
+<ellipse cx="116.0453" cy="-37.947" rx="18" ry="18"/>
+</g>
+<!-- a--b -->
+<g id="edge1" class="filled">
+<title>a--b</title>
+<path stroke-width="6" d="M80.5342,-59.6057C86.8776,-55.7368 94.189,-51.2775 100.5226,-47.4145"/>
+</g>
+<!-- d -->
+<g id="node3" class="filled">
+<title>d</title>
+<ellipse cx="65.7782" cy="-17.6758" rx="18" ry="18"/>
+</g>
+<!-- a--d -->
+<g id="edge5" class="filled">
+<title>a--d</title>
+<path stroke-width="6" d="M65.2223,-50.8453C65.3036,-45.9924 65.3914,-40.753 65.4727,-35.9032"/>
+</g>
+<!-- c -->
+<g id="node4" class="filled">
+<title>c</title>
+<ellipse cx="17.954" cy="-50.8477" rx="18" ry="18"/>
+</g>
+<!-- a--c -->
+<g id="edge3" class="filled">
+<title>a--c</title>
+<path stroke-width="6" d="M47.9615,-62.5307C43.7579,-60.8941 39.2511,-59.1394 35.0411,-57.5003"/>
+</g>
+<!-- e -->
+<g id="node5" class="filled">
+<title>e</title>
+<ellipse cx="101.4409" cy="-114.0579" rx="18" ry="18"/>
+</g>
+<!-- a--e -->
+<g id="edge6" class="filled">
+<title>a--e</title>
+<path stroke-width="6" d="M76.4726,-83.3466C80.8198,-88.6936 85.7556,-94.7648 90.0844,-100.0892"/>
+</g>
+<!-- b--d -->
+<g id="edge2" class="filled">
+<title>b--d</title>
+<path stroke-width="6" d="M99.3071,-31.197C93.9378,-29.0318 87.991,-26.6336 82.6147,-24.4655"/>
+</g>
+<!-- c--d -->
+<g id="edge4" class="filled">
+<title>c--d</title>
+<path stroke-width="6" d="M32.8237,-40.5338C38.527,-36.5778 45.0352,-32.0636 50.7529,-28.0977"/>
+</g>
+</g>
+</svg>
-- 
2.47.3