initial software icon support

ref #470
2026-03-11 09:04:27 +00:00 · 2018-09-15 16:48:21 -05:00 · 2018-09-15 16:48:21 -05:00 · c54db18bbe
commit c54db18bbe
parent 0229845ee9
6 changed files with 79 additions and 5 deletions
--- a/src/FilterLists.Web/ClientApp/imgs/imgs.d.ts
+++ b/src/FilterLists.Web/ClientApp/imgs/imgs.d.ts
@ -0,0 +1,9 @@
+declare module "*.svg" {
+    const content: any;
+    export default content;
+}
+
+declare module "*.png" {
+    const content: any;
+    export default content;
+}
--- a/src/FilterLists.Web/ClientApp/imgs/software/1-uBlock-Origin.svg
+++ b/src/FilterLists.Web/ClientApp/imgs/software/1-uBlock-Origin.svg
@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient>
+      <stop offset="0" stop-color="#600000" /><stop offset="1" stop-color="#700000" />
+    </linearGradient>
+    <linearGradient>
+      <stop offset="0" stop-color="#90000f" stop-opacity=".941" /><stop offset="1" stop-color="#800000" />
+    </linearGradient>
+    <linearGradient id="a">
+      <stop offset="0" /><stop offset="1" stop-opacity="0" />
+    </linearGradient>
+    <radialGradient cx="82.145" cy="81.055" r="22.573" xlink:href="#a" fx="82.145" fy="81.055"
+                    gradientTransform="matrix(1 0 0 1.258 0 -20.947)" gradientUnits="userSpaceOnUse" />
+  </defs>
+  <path fill="#800000" stroke="#fff"
+        d="M64 128c56-32 56-32 56-112-24 0-32 0-56-16m0 128C8 96 8 96 8 16c24 0 32 0 56-16" stroke-linecap="round" />
+  <g stroke="#fff" transform="translate(-17.873 -17.325)" letter-spacing="0" word-spacing="0">
+    <ellipse cx="102.123" cy="81.325" fill="none" ry="12"
+             style="text-align:center;line-height:125%;-inkscape-font-specification:Ubuntu" font-size="100.219"
+             text-anchor="middle" rx="12" font-family="Ubuntu" transform="matrix(1.333 0 0 1.333 -42.291 -31.108)" />
+    <path fill="#fff" d="M81.87 81.33c0 11-5 16-16 16s-16-5-16-16v-24h8v24c0 7 1 8 8 8s8-1 8-8v-24h8z"
+          style="-inkscape-font-specification:Ubuntu" font-family="Ubuntu" font-size="73.201" />
+  </g>
+</svg>
--- a/src/FilterLists.Web/ClientApp/imgs/software/2-Adblock-Plus.svg
+++ b/src/FilterLists.Web/ClientApp/imgs/software/2-Adblock-Plus.svg
@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="619.25" height="620.5"
+     xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" viewBox="0 0 619.25001 620.49998">
+  <defs>
+    <linearGradient osb:paint="solid">
+      <stop offset="0" stop-color="#fff" />
+    </linearGradient>
+  </defs>
+  <path fill="#fff" d="M44.45 196.24h525.28V422.5H44.45z" />
+  <path fill="#fff" stroke="#dadbdb" stroke-width="3"
+        d="M91.8 528.68l-90.3-90.3V182.1l90.32-90.3 90.3-90.32h255l90.32 90.32 90.3 90.3v256.3l-90.3 90.3L437.1 619h-255l-90.3-90.32zm416.26-20.6l82.2-82.2V194.62l-82.2-82.2-82.2-82.17H194.6l-82.18 82.2-82.16 82.17v231.25l82.17 82.2 82.2 82.18h231.24l82.2-82.18z" />
+  <path fill="#e00000" stroke="#cb0000" stroke-width="3.004"
+        d="M111.94 508.64l-81.77-81.56V193.33l81.77-81.56 81.78-81.56h231.82l82.4 82.2 82.4 82.2v231.25l-82.4 82.18-82.4 82.2H193.7l-81.76-81.58zm231.4-94.2c31.23-6.7 48.93-26.18 51.1-56.18 1.5-20.3-4.52-37.73-16.16-46.9-5.57-4.4-17.6-9.9-21.63-9.9-3.28 0-3.16-2.23.18-3.06 10.03-2.5 21.35-14.97 25.48-28 3.1-9.74 3.4-28 .68-37.2-2.66-8.93-10.25-19.1-18.23-24.46-14.4-9.64-31.54-12.17-83-12.24l-32.26-.04v220.62l42.3-.3c33.1-.26 44.3-.77 51.56-2.33zm-50-64.74v-28.24h16.7c18.67 0 27.14 1.8 33.4 7.05 6.02 5.07 7.95 9.93 7.96 20.08 0 13-3.66 19.7-13.55 24.76-7.03 3.6-8.16 3.77-25.93 4.18l-18.58.44V349.7zm0-88.86V236.2l16.6.46c18.4.5 24.16 2.27 29.06 8.96 3.94 5.38 3.73 22.13-.36 28.7-4.98 8-10.8 10.1-29.32 10.66l-15.98.48v-24.62zm-192.5 134.68c2.58-11.5 5.24-23.05 5.9-25.62l1.22-4.7h57.35l2.75 12.2c1.5 6.7 4.14 18.23 5.85 25.62l3.1 13.44h23.22c18.02 0 23.1-.35 22.67-1.56-.3-.86-13.73-50.08-29.85-109.38l-29.3-107.8h-52.8l-3.4 12.8c-4.82 18.05-54.73 201.1-55.57 203.75-.64 2.03.95 2.2 21.72 2.2h22.4l4.7-20.95zm16.3-72.5c1.8-5.94 8.9-37.52 13.74-60.94 3.24-15.7 5.72-25.24 6.2-23.75.42 1.38 3.04 13.2 5.8 26.25 2.78 13.07 6.96 32.05 9.3 42.2l4.24 18.43h-19.97c-18.44 0-19.93-.15-19.32-2.17zm350.4 56.56V342.7h17.43c21.16 0 33.8-2.2 46.23-8.1 17.52-8.3 31.24-26.2 35.42-46.27 2.25-10.78 1.95-33.3-.57-43.12-6.4-24.84-22.82-40.22-48.65-45.5-7.68-1.57-18.28-2-51.7-2h-42.03v218.77h43.86V379.6zm0-109.37v-32.5h16.68c19.82 0 27.7 1.88 33.87 8.03 5.54 5.55 7.53 13.1 6.82 26.04-1.3 23.42-11.5 30.95-41.96 30.95h-15.44v-32.5z" />
+</svg>
--- a/src/FilterLists.Web/ClientApp/imgs/software/3-AdGuard.png
+++ b/src/FilterLists.Web/ClientApp/imgs/software/3-AdGuard.png
--- a/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/ListsTable.tsx
+++ b/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/ListsTable.tsx
@ -6,6 +6,7 @@ import ReactTable from "react-table"
 import "react-table/react-table.css"
 import "./listsTable.css";
 import * as moment from "moment";
+import { SoftwareIcon } from "./SoftwareIcon";
 import { getContrast } from "../../../../utils/GetContrast";
 import { DetailsExpander } from "../../components";

@ -36,11 +37,10 @@ export const ListsTable = (props: IProps) => {
                       filterMethod: (f: any, r: any) =>
                           r[f.id].toUpperCase().includes(f.value.toUpperCase()),
                       sortMethod: (a: any, b: any) => a.toUpperCase() > b.toUpperCase() ? 1 : -1,
-                       Cell: (c: any) => <h2 className="mb-0">{c.value}</h2>,
-                       style: { overflow: "visible" }
+                       Cell: (c: any) => <h2 className="mb-0">{c.value}</h2>
                   },
                   {
-                       Header: "Software Support",
+                       Header: "Software",
                       accessor: "softwareIds",
                       filterable: true,
                       filterMethod: (f: any, r: any) =>
@ -54,8 +54,8 @@ export const ListsTable = (props: IProps) => {
                               {props.software.map((s: any, i) => <option value={s.id} key={i}>{s.name}</option>)}
                           </select>,
                       sortable: false,
-                       Cell: () => null,
-                       width: 250,
+                       Cell: (c: any) => c.value.map((s: number, i: any) => <SoftwareIcon id={s} key={i}/>),
+                       width: 212,
                       headerClassName: "d-none d-md-block",
                       className: "d-none d-md-block",
                       show: props.columnVisibility.filter(
--- a/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/SoftwareIcon.tsx
+++ b/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/SoftwareIcon.tsx
@ -0,0 +1,28 @@
+import * as React from "react";
+import img1 from "../../../../imgs/software/1-uBlock-Origin.svg";
+import img2 from "../../../../imgs/software/2-Adblock-Plus.svg";
+import img3 from "../../../../imgs/software/3-AdGuard.png";
+
+interface IProps {
+    id: number;
+}
+
+export const SoftwareIcon = (props: IProps) => {
+    return icons[props.id]
+               ? <img src={icons[props.id].image}
+                      width="20"
+                      alt={icons[props.id].imageTitle}
+                      title={icons[props.id].imageTitle}/>
+               : null;
+};
+
+interface IIcon {
+    image: any;
+    imageTitle: string;
+}
+
+const icons: { [id: number]: IIcon; } = {
+    1: { image: img1, imageTitle: "uBlock Origin" },
+    2: { image: img2, imageTitle: "Adblock Plus" },
+    3: { image: img3, imageTitle: "AdGuard" }
+};