SVG icons

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")
             )
           ];
         };