SVG icons

build/build.ts

@@ -30,6 +30,8 @@ import postcss from "postcss";
 import postcssImport from "postcss-import";
 import postcssPresetEnv from "postcss-preset-env";
 import cssnano from "cssnano";
+import SVGO from "svgo";
+import * as xmlParser from "../lib/xml-parser";
 
 const MODE = process.env["NODE_ENV"] || "production";
 
@@ -99,6 +101,34 @@ function stripDevDeps(deps): void {
   if (!Object.keys(deps["dependencies"]).length) delete deps["dependencies"];
 }
 
+function xmlTostring(xml): string {
+  const children = [];
+  for (const c of xml.children || []) children.push(xmlTostring(c));
+
+  return xml.name === "root" && xml.bodyIndex === 0
+    ? children.join("")
+    : `<${xml.name} ${xml.attrs}>${children.join("")}</${xml.name}>`;
+}
+
+function generateSymbol(id: string, svgStr: string): string {
+  const xml = xmlParser.parseXml(svgStr);
+  const svg = xml.children[0];
+  const svgAttrs = xmlParser.parseAttrs(svg.attrs);
+  let viewBox = "";
+  for (const a of svgAttrs) {
+    if (a.name === "viewBox") {
+      viewBox = `viewBox="${a.value}"`;
+      break;
+    }
+  }
+  const symbolBody = xml.children[0].children
+    .map(c => {
+      return xmlTostring(c);
+    })
+    .join("");
+  return `<symbol id="icon-${id}" ${viewBox}>${symbolBody}</symbol>`;
+}
+
 async function init(): Promise<void> {
   // Delete any old output directory
   rmDirSync(OUTPUT_DIR);
@@ -311,11 +341,28 @@ async function generateFrontendJs(): Promise<void> {
   process.stdout.write(stats.toString({ colors: true }) + "\n");
 }
 
+async function generateIconsSprite(): Promise<void> {
+  const svgo = new SVGO({ plugins: [{ removeViewBox: false }] });
+  const symbols = [];
+  const iconsDir = path.resolve(INPUT_DIR, "ui/icons");
+  for (const file of fs.readdirSync(iconsDir)) {
+    const id = path.parse(file).name;
+    const filePath = path.join(iconsDir, file);
+    const { data } = await svgo.optimize(fs.readFileSync(filePath).toString());
+    symbols.push(generateSymbol(id, data));
+  }
+  fs.writeFileSync(
+    path.resolve(OUTPUT_DIR, "public/icons.svg"),
+    `<svg xmlns="http://www.w3.org/2000/svg">${symbols.join("")}</svg>`
+  );
+}
+
 init()
   .then(() => {
     Promise.all([
       copyStatic(),
       generateCss(),
+      generateIconsSprite(),
       generateToolsJs(),
       generateBackendJs(),
       generateFrontendJs()

npm-shrinkwrap.json

@@ -659,6 +659,12 @@
         "@types/mime": "*"
       }
     },
+    "@types/svgo": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@types/svgo/-/svgo-1.2.1.tgz",
+      "integrity": "sha512-UYSpRjkiiThPS3L2L7VhmmKGheGmyCBE382LCHaJIjLe6PeBb1HJvUSNqsZyuRyNMGcDcHcBQEV/CovlWjzFsw==",
+      "dev": true
+    },
     "@typescript-eslint/eslint-plugin": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-1.9.0.tgz",
@@ -2591,12 +2597,12 @@
       "dev": true
     },
     "css-tree": {
-      "version": "1.0.0-alpha.28",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.28.tgz",
-      "integrity": "sha512-joNNW1gCp3qFFzj4St6zk+Wh/NBv0vM5YbEreZk0SD4S23S+1xBKb6cLDg2uj4P4k/GUMlIm6cKIDqIG+vdt0w==",
+      "version": "1.0.0-alpha.33",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.33.tgz",
+      "integrity": "sha512-SPt57bh5nQnpsTBsx/IXbO14sRc9xXu5MtMAVuo0BaQQmyf0NupNPPSoMaqiAF5tDFafYsTkfeH4Q/HCKXkg4w==",
       "dev": true,
       "requires": {
-        "mdn-data": "~1.1.0",
+        "mdn-data": "2.0.4",
         "source-map": "^0.5.3"
       }
     },
@@ -2606,12 +2612,6 @@
       "integrity": "sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=",
       "dev": true
     },
-    "css-url-regex": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/css-url-regex/-/css-url-regex-1.1.0.tgz",
-      "integrity": "sha1-g4NCMMyfdMRX3lnuvRVD/uuDt+w=",
-      "dev": true
-    },
     "css-what": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
@@ -2725,6 +2725,12 @@
             "mdn-data": "~1.1.0",
             "source-map": "^0.5.3"
           }
+        },
+        "mdn-data": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-1.1.4.tgz",
+          "integrity": "sha512-FSYbp3lyKjyj3E7fMl6rYvUdX0FBXaluGqlFoYESWQlyUTq8R+wp0rkFxoYFqZlHCvsUXGjyJmLQSnXToYhOSA==",
+          "dev": true
         }
       }
     },
@@ -5563,9 +5569,9 @@
       }
     },
     "mdn-data": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-1.1.4.tgz",
-      "integrity": "sha512-FSYbp3lyKjyj3E7fMl6rYvUdX0FBXaluGqlFoYESWQlyUTq8R+wp0rkFxoYFqZlHCvsUXGjyJmLQSnXToYhOSA==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
+      "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==",
       "dev": true
     },
     "media-typer": {
@@ -8790,17 +8796,16 @@
       }
     },
     "svgo": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.2.2.tgz",
-      "integrity": "sha512-rAfulcwp2D9jjdGu+0CuqlrAUin6bBWrpoqXWwKDZZZJfXcUXQSxLJOFJCQCSA0x0pP2U0TxSlJu2ROq5Bq6qA==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.0.tgz",
+      "integrity": "sha512-MLfUA6O+qauLDbym+mMZgtXCGRfIxyQoeH6IKVcFslyODEe/ElJNwr0FohQ3xG4C6HK6bk3KYPPXwHVJk3V5NQ==",
       "dev": true,
       "requires": {
         "chalk": "^2.4.1",
         "coa": "^2.0.2",
         "css-select": "^2.0.0",
         "css-select-base-adapter": "^0.1.1",
-        "css-tree": "1.0.0-alpha.28",
-        "css-url-regex": "^1.1.0",
+        "css-tree": "1.0.0-alpha.33",
         "csso": "^3.5.1",
         "js-yaml": "^3.13.1",
         "mkdirp": "~0.5.1",

package.json

@@ -47,6 +47,7 @@
     "@types/mongodb": "^3.1.28",
     "@types/parsimmon": "^1.10.0",
     "@types/seedrandom": "^2.4.28",
+    "@types/svgo": "^1.2.1",
     "@typescript-eslint/eslint-plugin": "^1.9.0",
     "ava": "^2.0.0",
     "codemirror": "^5.47.0",
@@ -64,6 +65,7 @@
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-terser": "^5.0.0",
     "rollup-plugin-typescript": "^1.0.1",
+    "svgo": "^1.3.0",
     "ts-node": "^8.2.0",
     "typescript": "^3.5.1",
     "webpack": "^4.32.2"

ui/components/all-parameters.ts

@@ -22,6 +22,7 @@ import { m } from "../components";
 import * as taskQueue from "../task-queue";
 import { parse } from "../../lib/common/expression-parser";
 import memoize from "../../lib/common/memoize";
+import { getIcon } from "../icons";
 
 const memoizedParse = memoize(parse);
 
@@ -86,7 +87,7 @@ const component: ClosureComponent = (): Component => {
                       });
                     }
                   },
-                  "✕"
+                  getIcon("delete-instance")
                 )
               );
             } else {
@@ -103,7 +104,7 @@ const component: ClosureComponent = (): Component => {
                       });
                     }
                   },
-                  "🞢"
+                  getIcon("add-instance")
                 )
               );
             }
@@ -122,7 +123,7 @@ const component: ClosureComponent = (): Component => {
                   });
                 }
               },
-              "↺"
+              getIcon("refresh")
             )
           );
 

ui/components/device-faults.ts

@@ -21,6 +21,7 @@ import { ClosureComponent, Component } from "mithril";
 import { m } from "../components";
 import * as store from "../store";
 import * as notifications from "../notifications";
+import { getIcon } from "../icons";
 
 const component: ClosureComponent = (): Component => {
   return {
@@ -71,7 +72,7 @@ const component: ClosureComponent = (): Component => {
                     });
                 }
               },
-              "✕"
+              getIcon("remove")
             )
           )
         ]);

ui/components/parameter-table.ts

@@ -22,6 +22,7 @@ import { m } from "../components";
 import * as taskQueue from "../task-queue";
 import * as store from "../store";
 import * as expressionParser from "../../lib/common/expression-parser";
+import { getIcon } from "../icons";
 
 const component: ClosureComponent = (): Component => {
   return {
@@ -104,7 +105,7 @@ const component: ClosureComponent = (): Component => {
                     });
                   }
                 },
-                "✕"
+                getIcon("delete-instance")
               )
             )
           );
@@ -137,7 +138,7 @@ const component: ClosureComponent = (): Component => {
                     });
                   }
                 },
-                "🞢"
+                getIcon("add-instance")
               )
             )
           )

ui/components/parameter.ts

@@ -24,6 +24,7 @@ import * as store from "../store";
 import * as expression from "../../lib/common/expression";
 import memoize from "../../lib/common/memoize";
 import timeAgo from "../timeago";
+import { getIcon } from "../icons";
 
 const evaluateParam = memoize((exp, obj, now: number) => {
   let timestamp = now;
@@ -82,7 +83,7 @@ const component: ClosureComponent = (): Component => {
               });
             }
           },
-          "✎"
+          getIcon("edit")
         );
       }
 

ui/components/tags.ts

@@ -21,6 +21,7 @@ import { ClosureComponent, Component } from "mithril";
 import { m } from "../components";
 import * as notifications from "../notifications";
 import * as store from "../store";
+import { getIcon } from "../icons";
 
 const component: ClosureComponent = (): Component => {
   return {
@@ -68,12 +69,13 @@ const component: ClosureComponent = (): Component => {
                     });
                 }
               },
-              "✕"
+              getIcon("remove")
             )
           )
         ),
         m(
           "span.tag.writable",
+          m.trust(" "),
           m(
             "button",
             {
@@ -99,7 +101,7 @@ const component: ClosureComponent = (): Component => {
                   });
               }
             },
-            "🞢"
+            getIcon("add")
           )
         )
       );

ui/config-page.ts

@@ -26,6 +26,7 @@ import * as overlay from "./overlay";
 import { parse, stringify } from "../lib/common/expression-parser";
 import { loadCodeMirror, loadYaml } from "./dynamic-loader";
 import { ClosureComponent, Component, Children } from "mithril";
+import { getIcon } from "./icons";
 
 const attributes = [
   { id: "_id", label: "Key" },
@@ -179,7 +180,7 @@ function renderTable(confsResponse, searchString): Children {
           overlay.open(cb);
         }
       },
-      "✎"
+      getIcon("edit")
     );
 
     const del = m(
@@ -194,7 +195,7 @@ function renderTable(confsResponse, searchString): Children {
           });
         }
       },
-      "✕"
+      getIcon("remove")
     );
 
     rows.push(

ui/css/app.css

@@ -421,6 +421,9 @@ button {
   color: var(--color4);
   border-radius: 4px;
   transition: background-color var(--fade), color var(--fade);
+  display: inline-block;
+  vertical-align: middle;
+
   &.primary {
     border: 1px solid var(--color1);
     background-color: var(--color3);
@@ -725,3 +728,18 @@ span.parameter-value {
   border: 1px solid var(--color1);
   box-shadow: 0 0 10px #ccc;
 }
+
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+  width: 1em;
+  height: 1em;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  &.icon-unsorted {
+    opacity: 0.3;
+  }
+}

ui/drawer-component.ts

@@ -27,6 +27,7 @@ import m, {
 import * as taskQueue from "./task-queue";
 import * as store from "./store";
 import * as notifications from "./notifications";
+import { getIcon } from "./icons";
 
 function mparam(param): Children {
   return m("span.parameter", { title: param }, `${param}`);
@@ -217,7 +218,7 @@ function renderQueue(queue): Child[] {
                 taskQueue.queueTask(t);
               }
             },
-            "↺"
+            getIcon("retry")
           )
         );
       }
@@ -231,7 +232,7 @@ function renderQueue(queue): Child[] {
               taskQueue.deleteTask(t);
             }
           },
-          "✕"
+          getIcon("remove")
         )
       );
 

ui/icons.ts

@@ -0,0 +1,29 @@
+/**
+ * Copyright 2013-2019  GenieACS Inc.
+ *
+ * This file is part of GenieACS.
+ *
+ * GenieACS is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * GenieACS is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with GenieACS.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Children } from "mithril";
+import m from "mithril";
+
+export function getIcon(name: string): Children {
+  return m(
+    `svg.icon.icon-${name}`,
+    { key: `icon-${name}` },
+    m("use", { href: `icons.svg#icon-${name}` })
+  );
+}

ui/icons/add-instance.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>

ui/icons/add.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>

ui/icons/delete-instance.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="8" y1="12" x2="16" y2="12"></line></svg>

ui/icons/edit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-3"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>

ui/icons/refresh.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rotate-cw"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>

ui/icons/remove.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>

ui/icons/retry.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-repeat"><polyline points="17 1 21 5 17 9"></polyline><path d="M3 11V9a4 4 0 0 1 4-4h14"></path><polyline points="7 23 3 19 7 15"></polyline><path d="M21 13v2a4 4 0 0 1-4 4H3"></path></svg>

ui/icons/sorted-asc.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart"><path d="M4 12h10M4 18h16M4 6h4"/></svg>

ui/icons/sorted-dsc.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart"><path d="M4 12h10M4 6h16M4 18h4"/></svg>

ui/icons/unsorted.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart-2"><path d="M4 18h10M4 12h16M4 6h6"/></svg>

ui/index-table-component.ts

@@ -19,6 +19,7 @@
 
 import { ClosureComponent, Component, Children } from "mithril";
 import { m } from "./components";
+import { getIcon } from "./icons";
 
 interface Attribute {
   id?: string;
@@ -78,9 +79,9 @@ function renderTable(
 
     let direction = 1;
 
-    let symbol = "\u2981";
-    if (sortAttributes[i] > 0) symbol = "\u2bc6";
-    else if (sortAttributes[i] < 0) symbol = "\u2bc5";
+    let symbol = getIcon("unsorted");
+    if (sortAttributes[i] > 0) symbol = getIcon("sorted-dsc");
+    else if (sortAttributes[i] < 0) symbol = getIcon("sorted-asc");
 
     const sortable = m(
       "button",

ui/permissions-page.ts

@@ -29,6 +29,7 @@ import * as smartQuery from "./smart-query";
 import { map, parse, stringify } from "../lib/common/expression-parser";
 import filterComponent from "./filter-component";
 import { Children, ClosureComponent, Component } from "mithril";
+import { getIcon } from "./icons";
 
 const PAGE_SIZE = config.ui.pageSize || 10;
 
@@ -270,7 +271,7 @@ export const component: ClosureComponent = (): Component => {
                   });
                 }
               },
-              "✕"
+              getIcon("remove")
             )
           ];
         };